From 1549664416a84662669dbe064a6ada884c753061 Mon Sep 17 00:00:00 2001 From: Saba Shavidze Date: Tue, 17 Oct 2023 19:28:18 +0400 Subject: [PATCH] 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 | 2 + .../settings/components/SettingsNavbar.tsx | 12 +++ .../SettingsApisFieldItemTableRow.tsx | 56 ++++++++++++++ .../developers/constants/mockObjects.ts | 36 +++++++++ .../developers/types/ApisFieldItem.ts | 6 ++ front/src/modules/types/SettingsPath.ts | 1 + front/src/modules/ui/display/icon/index.ts | 1 + .../ui/layout/table/components/TableCell.tsx | 9 ++- front/src/pages/settings/SettingsApis.tsx | 76 +++++++++++++++++++ 9 files changed, 197 insertions(+), 2 deletions(-) create mode 100644 front/src/modules/settings/developers/components/SettingsApisFieldItemTableRow.tsx create mode 100644 front/src/modules/settings/developers/constants/mockObjects.ts create mode 100644 front/src/modules/settings/developers/types/ApisFieldItem.ts create mode 100644 front/src/pages/settings/SettingsApis.tsx diff --git a/front/src/App.tsx b/front/src/App.tsx index 271f1096c..28e094bd7 100644 --- a/front/src/App.tsx +++ b/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={} /> + } /> } diff --git a/front/src/modules/settings/components/SettingsNavbar.tsx b/front/src/modules/settings/components/SettingsNavbar.tsx index f20ef15a0..7645a966f 100644 --- a/front/src/modules/settings/components/SettingsNavbar.tsx +++ b/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 = () => { }) } /> + diff --git a/front/src/modules/settings/developers/components/SettingsApisFieldItemTableRow.tsx b/front/src/modules/settings/developers/components/SettingsApisFieldItemTableRow.tsx new file mode 100644 index 000000000..60b8237f4 --- /dev/null +++ b/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 ( + {}}> + {fieldItem.name} + Internal{' '} + + {fieldItem.expiration} + + + + + + ); +}; diff --git a/front/src/modules/settings/developers/constants/mockObjects.ts b/front/src/modules/settings/developers/constants/mockObjects.ts new file mode 100644 index 000000000..a37b0e346 --- /dev/null +++ b/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', + }, +]; diff --git a/front/src/modules/settings/developers/types/ApisFieldItem.ts b/front/src/modules/settings/developers/types/ApisFieldItem.ts new file mode 100644 index 000000000..1dfa8826a --- /dev/null +++ b/front/src/modules/settings/developers/types/ApisFieldItem.ts @@ -0,0 +1,6 @@ +export type ApisFiedlItem = { + id: string; + name: string; + type: 'internal' | 'published'; + expiration: string; +}; diff --git a/front/src/modules/types/SettingsPath.ts b/front/src/modules/types/SettingsPath.ts index 7e180135c..24cfa4b2f 100644 --- a/front/src/modules/types/SettingsPath.ts +++ b/front/src/modules/types/SettingsPath.ts @@ -9,4 +9,5 @@ export enum SettingsPath { NewObject = 'objects/new', WorkspaceMembersPage = 'workspace-members', Workspace = 'workspace', + Apis = 'apis', } diff --git a/front/src/modules/ui/display/icon/index.ts b/front/src/modules/ui/display/icon/index.ts index a7a2bdd63..456fb1892 100644 --- a/front/src/modules/ui/display/icon/index.ts +++ b/front/src/modules/ui/display/icon/index.ts @@ -73,6 +73,7 @@ export { IconPlug, IconPlus, IconProgressCheck, + IconRobot, IconSearch, IconSettings, IconSocial, diff --git a/front/src/modules/ui/layout/table/components/TableCell.tsx b/front/src/modules/ui/layout/table/components/TableCell.tsx index 13820ed50..1fafb146f 100644 --- a/front/src/modules/ui/layout/table/components/TableCell.tsx +++ b/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` 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 }) => diff --git a/front/src/pages/settings/SettingsApis.tsx b/front/src/pages/settings/SettingsApis.tsx new file mode 100644 index 000000000..c113cb87e --- /dev/null +++ b/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 ( + + + + +