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

@@ -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={<SettingsAccountsCalendars />}
                 />
+                <Route
+                  path={SettingsPath.AccountsCalendarsSettings}
+                  element={<SettingsAccountsCalendarsSettings />}
+                />
                 <Route
                   path={SettingsPath.AccountsEmails}
                   element={<SettingsAccountsEmails />}

packages/twenty-front/src/modules/settings/data-model/constants/mockObjects.ts

@@ -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',
-  },
-];

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',

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 (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <SettingsPageContainer>
+        <Breadcrumb
+          links={[
+            {
+              children: 'Accounts',
+              href: getSettingsPagePath(SettingsPath.Accounts),
+            },
+            {
+              children: 'Calendars',
+              href: getSettingsPagePath(SettingsPath.AccountsCalendars),
+            },
+            { children: connectedAccount?.handle || '' },
+          ]}
+        />
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};

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<PageDecoratorArgs> = {
+  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<typeof SettingsAccountsCalendarsSettings>;
+
+export const Default: Story = {};

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' },
+];

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,
 };