From f977164feee51ac9e6a016e41201d3134d1db88b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Wed, 21 Feb 2024 11:37:42 -0300 Subject: [PATCH] feat: create Settings/Accounts/Calendars/Calendar Settings page (#4092) * feat: create Settings/Accounts/Calendars/Calendar Settings page Closes #4063 * docs: add SettingsAccountsCalendarsSettings stories --- packages/twenty-front/src/App.tsx | 5 +++ .../data-model/constants/mockObjects.ts | 16 --------- .../src/modules/types/SettingsPath.ts | 1 + .../SettingsAccountsCalendarsSettings.tsx | 36 +++++++++++++++++++ ...tingsAccountsCalendarsSettings.stories.tsx | 32 +++++++++++++++++ .../src/testing/mock-data/accounts.ts | 8 +++++ .../src/testing/mock-data/metadata.ts | 8 +++-- 7 files changed, 87 insertions(+), 19 deletions(-) delete mode 100644 packages/twenty-front/src/modules/settings/data-model/constants/mockObjects.ts create mode 100644 packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx create mode 100644 packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsCalendarsSettings.stories.tsx create mode 100644 packages/twenty-front/src/testing/mock-data/accounts.ts diff --git a/packages/twenty-front/src/App.tsx b/packages/twenty-front/src/App.tsx index cf74464c5..abec5f438 100644 --- a/packages/twenty-front/src/App.tsx +++ b/packages/twenty-front/src/App.tsx @@ -21,6 +21,7 @@ import { RecordShowPage } from '~/pages/object-record/RecordShowPage'; import { Opportunities } from '~/pages/opportunities/Opportunities'; import { SettingsAccounts } from '~/pages/settings/accounts/SettingsAccounts'; import { SettingsAccountsCalendars } from '~/pages/settings/accounts/SettingsAccountsCalendars'; +import { SettingsAccountsCalendarsSettings } from '~/pages/settings/accounts/SettingsAccountsCalendarsSettings'; import { SettingsAccountsEmails } from '~/pages/settings/accounts/SettingsAccountsEmails'; import { SettingsAccountsEmailsInboxSettings } from '~/pages/settings/accounts/SettingsAccountsEmailsInboxSettings'; import { SettingsNewAccount } from '~/pages/settings/accounts/SettingsNewAccount'; @@ -100,6 +101,10 @@ export const App = () => { path={SettingsPath.AccountsCalendars} element={} /> + } + /> } diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/mockObjects.ts b/packages/twenty-front/src/modules/settings/data-model/constants/mockObjects.ts deleted file mode 100644 index 8344b4f1b..000000000 --- a/packages/twenty-front/src/modules/settings/data-model/constants/mockObjects.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { IconMouse2 } from '@/ui/display/icon'; - -export const standardObjects = [ - { - name: 'Users', - Icon: IconMouse2, - fields: 6, - description: 'Individuals who interact with your website', - }, - { - name: 'Users', - Icon: IconMouse2, - fields: 8, - description: 'Individuals who interact with your website', - }, -]; diff --git a/packages/twenty-front/src/modules/types/SettingsPath.ts b/packages/twenty-front/src/modules/types/SettingsPath.ts index de4a2c620..fb47c4f99 100644 --- a/packages/twenty-front/src/modules/types/SettingsPath.ts +++ b/packages/twenty-front/src/modules/types/SettingsPath.ts @@ -4,6 +4,7 @@ export enum SettingsPath { Accounts = 'accounts', NewAccount = 'accounts/new', AccountsCalendars = 'accounts/calendars', + AccountsCalendarsSettings = 'accounts/calendars/:accountUuid', AccountsEmails = 'accounts/emails', AccountsEmailsInboxSettings = 'accounts/emails/:accountUuid', Objects = 'objects', diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx new file mode 100644 index 000000000..7edcaa823 --- /dev/null +++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendarsSettings.tsx @@ -0,0 +1,36 @@ +import { useParams } from 'react-router-dom'; + +import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; +import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; +import { SettingsPath } from '@/types/SettingsPath'; +import { IconSettings } from '@/ui/display/icon'; +import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; +import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb'; +import { mockedConnectedAccounts } from '~/testing/mock-data/accounts'; + +export const SettingsAccountsCalendarsSettings = () => { + const { accountUuid = '' } = useParams(); + const connectedAccount = mockedConnectedAccounts.find( + ({ id }) => id === accountUuid, + ); + + return ( + + + + + + ); +}; diff --git a/packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsCalendarsSettings.stories.tsx b/packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsCalendarsSettings.stories.tsx new file mode 100644 index 000000000..f49e59a26 --- /dev/null +++ b/packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsCalendarsSettings.stories.tsx @@ -0,0 +1,32 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; +import { SettingsPath } from '@/types/SettingsPath'; +import { + PageDecorator, + PageDecoratorArgs, +} from '~/testing/decorators/PageDecorator'; +import { graphqlMocks } from '~/testing/graphqlMocks'; +import { mockedConnectedAccounts } from '~/testing/mock-data/accounts'; + +import { SettingsAccountsCalendarsSettings } from '../SettingsAccountsCalendarsSettings'; + +const meta: Meta = { + title: 'Pages/Settings/Accounts/SettingsAccountsCalendarsSettings', + component: SettingsAccountsCalendarsSettings, + decorators: [PageDecorator], + args: { + routePath: getSettingsPagePath(SettingsPath.AccountsCalendarsSettings), + routeParams: { ':accountUuid': mockedConnectedAccounts[0].id }, + }, + parameters: { + layout: 'fullscreen', + msw: graphqlMocks, + }, +}; + +export default meta; + +export type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/twenty-front/src/testing/mock-data/accounts.ts b/packages/twenty-front/src/testing/mock-data/accounts.ts new file mode 100644 index 000000000..6b738bf8b --- /dev/null +++ b/packages/twenty-front/src/testing/mock-data/accounts.ts @@ -0,0 +1,8 @@ +import { ConnectedAccount } from '@/accounts/types/ConnectedAccount'; + +export const mockedConnectedAccounts: Pick< + ConnectedAccount, + 'id' | 'handle' +>[] = [ + { id: '876ee608-d1e4-402d-9970-b3ca49b85cb9', handle: 'john.doe@twenty.com' }, +]; diff --git a/packages/twenty-front/src/testing/mock-data/metadata.ts b/packages/twenty-front/src/testing/mock-data/metadata.ts index 524e6aded..3830a12b0 100644 --- a/packages/twenty-front/src/testing/mock-data/metadata.ts +++ b/packages/twenty-front/src/testing/mock-data/metadata.ts @@ -5229,7 +5229,7 @@ export const mockedMessageThreads = { }, }; -export const mockedMessageChannels = { +export const mockedMessageChannelsMetadata = { __typename: 'objectEdge', node: { __typename: 'object', @@ -5500,7 +5500,7 @@ export const mockedMessageChannels = { }, }; -export const mockedConnectedAccounts = { +export const mockedConnectedAccountsMetadata = { __typename: 'objectEdge', node: { __typename: 'object', @@ -6811,6 +6811,8 @@ export const mockedObjectMetadataItems = { mockedWorkspaceMembersMetadata, mockedOpportunitiesMetadata, mockedAPIKeysMetadata, + mockedConnectedAccountsMetadata, + mockedMessageChannelsMetadata, ], pageInfo: { __typename: 'PageInfo', @@ -6819,5 +6821,5 @@ export const mockedObjectMetadataItems = { startCursor: 'YXJyYXljb25uZWN0aW9uOjA=', endCursor: 'YXJyYXljb25uZWN0aW9uOjk=', }, - totalCount: 13, + totalCount: 15, };