feat: created new Developers Page in Settings (#2071)

* feat: created new Developers Page in Settings

* update styled according to the updated design

* update styled according to the updated design

* remove unused color import from TableCell component

* update pl based on comments

* update pl based on comments

* update pl based on comments

* update pl based on comments

* update pl based on comments

* update pl based on comments

* update pl based on comments

front/src/modules/settings/components/SettingsNavbar.tsx

@@ -7,6 +7,7 @@ import {
   IconColorSwatch,
   IconHierarchy2,
   IconLogout,
+  IconRobot,
   IconSettings,
   IconUserCircle,
   IconUsers,
@@ -84,6 +85,17 @@ export const SettingsNavbar = () => {
           })
         }
       />
+      <NavItem
+        label="Developers"
+        to="/settings/apis"
+        Icon={IconRobot}
+        active={
+          !!useMatch({
+            path: useResolvedPath('/settings/api').pathname,
+            end: true,
+          })
+        }
+      />
       <NavTitle label="Other" />
       <NavItem label="Logout" onClick={handleLogout} Icon={IconLogout} />
     </SubMenuNavbar>

front/src/modules/settings/developers/components/SettingsApisFieldItemTableRow.tsx

@@ -0,0 +1,56 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconChevronRight } from '@/ui/display/icon';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+
+import { ApisFiedlItem } from '../types/ApisFieldItem';
+
+export const StyledApisFieldTableRow = styled(TableRow)`
+  grid-template-columns: 180px 148px 148px 36px;
+`;
+
+const StyledNameTableCell = styled(TableCell)`
+  color: ${({ theme }) => theme.font.color.primary};
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledIconTableCell = styled(TableCell)`
+  justify-content: center;
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledIconChevronRight = styled(IconChevronRight)`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+export const SettingsApisFieldItemTableRow = ({
+  fieldItem,
+}: {
+  fieldItem: ApisFiedlItem;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <StyledApisFieldTableRow onClick={() => {}}>
+      <StyledNameTableCell>{fieldItem.name}</StyledNameTableCell>
+      <TableCell color={theme.font.color.tertiary}>Internal</TableCell>{' '}
+      <TableCell
+        color={
+          fieldItem.expiration === 'Expired'
+            ? theme.font.color.danger
+            : theme.font.color.tertiary
+        }
+      >
+        {fieldItem.expiration}
+      </TableCell>
+      <StyledIconTableCell>
+        <StyledIconChevronRight
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.sm}
+        />
+      </StyledIconTableCell>
+    </StyledApisFieldTableRow>
+  );
+};

front/src/modules/settings/developers/constants/mockObjects.ts

@@ -0,0 +1,36 @@
+import { v4 } from 'uuid';
+
+import { ApisFiedlItem } from '../types/ApisFieldItem';
+
+export const activeApiKeyItems: ApisFiedlItem[] = [
+  {
+    id: v4(),
+    name: 'Zapier key',
+    type: 'internal',
+    expiration: 'In 80 days',
+  },
+  {
+    id: v4(),
+    name: 'Notion',
+    type: 'internal',
+    expiration: 'Expired',
+  },
+  {
+    id: v4(),
+    name: 'Trello',
+    type: 'internal',
+    expiration: 'In 1 year',
+  },
+  {
+    id: v4(),
+    name: 'Cargo',
+    type: 'published',
+    expiration: 'Never',
+  },
+  {
+    id: v4(),
+    name: 'Backoffice',
+    type: 'published',
+    expiration: 'In 32 days',
+  },
+];

front/src/modules/settings/developers/types/ApisFieldItem.ts

@@ -0,0 +1,6 @@
+export type ApisFiedlItem = {
+  id: string;
+  name: string;
+  type: 'internal' | 'published';
+  expiration: string;
+};

front/src/modules/types/SettingsPath.ts

@@ -9,4 +9,5 @@ export enum SettingsPath {
   NewObject = 'objects/new',
   WorkspaceMembersPage = 'workspace-members',
   Workspace = 'workspace',
+  Apis = 'apis',
 }

front/src/modules/ui/display/icon/index.ts

@@ -73,6 +73,7 @@ export {
   IconPlug,
   IconPlus,
   IconProgressCheck,
+  IconRobot,
   IconSearch,
   IconSettings,
   IconSocial,

front/src/modules/ui/layout/table/components/TableCell.tsx

@@ -1,8 +1,13 @@
 import styled from '@emotion/styled';
 
-const StyledTableCell = styled.div<{ align?: 'left' | 'center' | 'right' }>`
+type TableCellProps = {
+  align?: 'left' | 'center' | 'right';
+  color?: string;
+};
+
+const StyledTableCell = styled.div<TableCellProps>`
   align-items: center;
-  color: ${({ theme }) => theme.font.color.secondary};
+  color: ${({ color, theme }) => color || theme.font.color.secondary};
   display: flex;
   height: ${({ theme }) => theme.spacing(8)};
   justify-content: ${({ align }) =>