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/App.tsx

@@ -31,6 +31,7 @@ import { getPageTitleFromPath } from '~/utils/title-utils';
 import { ObjectTablePage } from './pages/companies/ObjectsTable';
 import { SettingsObjectNewFieldStep1 } from './pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1';
 import { SettingsObjectNewFieldStep2 } from './pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2';
+import { SettingsApis } from './pages/settings/SettingsApis';
 
 export const App = () => {
   const { pathname } = useLocation();
@@ -104,6 +105,7 @@ export const App = () => {
                   path={SettingsPath.NewObject}
                   element={<SettingsNewObject />}
                 />
+                <Route path={SettingsPath.Apis} element={<SettingsApis />} />
                 <Route
                   path={SettingsPath.ObjectNewFieldStep1}
                   element={<SettingsObjectNewFieldStep1 />}

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 }) =>

front/src/pages/settings/SettingsApis.tsx

@@ -0,0 +1,76 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
+import { SettingsApisFieldItemTableRow } from '@/settings/developers/components/SettingsApisFieldItemTableRow';
+import { activeApiKeyItems } from '@/settings/developers/constants/mockObjects';
+import { IconPlus, IconSettings } from '@/ui/display/icon';
+import { H1Title } from '@/ui/display/typography/components/H1Title';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Button } from '@/ui/input/button/components/Button';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+
+const StyledContainer = styled.div`
+  height: fit-content;
+  padding: ${({ theme }) => theme.spacing(8)};
+  width: ${objectSettingsWidth};
+`;
+
+const StyledTableRow = styled(TableRow)`
+  grid-template-columns: 180px 98.7px 98.7px 98.7px 36px;
+`;
+
+const StyledHeader = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.spacing(8)};
+`;
+
+const StyledH1Title = styled(H1Title)`
+  margin-bottom: 0;
+`;
+
+export const SettingsApis = () => {
+  const navigate = useNavigate();
+
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <StyledContainer>
+        <StyledHeader>
+          <StyledH1Title title="APIs" />
+          <Button
+            Icon={IconPlus}
+            title="Create Key"
+            accent="blue"
+            size="small"
+            onClick={() => {
+              navigate('/');
+            }}
+          />
+        </StyledHeader>
+        <H2Title
+          title="Active Keys"
+          description="Active APIs keys created by you or your team"
+        />
+        <Table>
+          <StyledTableRow>
+            <TableHeader>Name</TableHeader>
+            <TableHeader>Type</TableHeader>
+            <TableHeader>Expiration</TableHeader>
+            <TableHeader></TableHeader>
+          </StyledTableRow>
+          {activeApiKeyItems.map((fieldItem) => (
+            <SettingsApisFieldItemTableRow
+              key={fieldItem.id}
+              fieldItem={fieldItem}
+            />
+          ))}
+        </Table>
+      </StyledContainer>
+    </SubMenuTopBarContainer>
+  );
+};