feat:added an empty page with the route: /settings/accounts/new. (#2960)

* feat:added an empty page with the route: /settings/accounts/new. * chore: addressed PR feedback, added Storybook page * fix: lint fixes --------- Co-authored-by: Lakshay saini <[email protected]>
twentyhq · Dec 14, 2023 · 45deb46 · 45deb46
1 parent 73e03dd
commit 45deb46
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 0 deletions.
diff --git a/packages/twenty-front/src/App.tsx b/packages/twenty-front/src/App.tsx
@@ -18,6 +18,7 @@ import { NotFound } from '~/pages/not-found/NotFound';
 import { Opportunities } from '~/pages/opportunities/Opportunities';
 import { SettingsAccounts } from '~/pages/settings/accounts/SettingsAccounts';
 import { SettingsAccountsEmails } from '~/pages/settings/accounts/SettingsAccountsEmails';
+import { SettingsNewAccount } from '~/pages/settings/accounts/SettingsNewAccount';
 import { SettingsNewObject } from '~/pages/settings/data-model/SettingsNewObject';
 import { SettingsObjectDetail } from '~/pages/settings/data-model/SettingsObjectDetail';
 import { SettingsObjectEdit } from '~/pages/settings/data-model/SettingsObjectEdit';
@@ -76,6 +77,10 @@ export const App = () => {
                   path={SettingsPath.Accounts}
                   element={<SettingsAccounts />}
                 />
+                <Route
+                  path={SettingsPath.NewAccount}
+                  element={<SettingsNewAccount />}
+                />
                 <Route
                   path={SettingsPath.AccountsEmails}
                   element={<SettingsAccountsEmails />}

diff --git a/packages/twenty-front/src/modules/types/SettingsPath.ts b/packages/twenty-front/src/modules/types/SettingsPath.ts
@@ -2,6 +2,7 @@ export enum SettingsPath {
   ProfilePage = 'profile',
   Appearance = 'profile/appearance',
   Accounts = 'accounts',
+  NewAccount = 'accounts/new',
   AccountsEmails = 'accounts/emails',
   Objects = 'objects',
   ObjectDetail = 'objects/:objectSlug',

diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx
@@ -0,0 +1,19 @@
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { IconSettings } from '@/ui/display/icon';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+
+export const SettingsNewAccount = () => {
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <SettingsPageContainer>
+        <Breadcrumb
+          links={[
+            { children: 'Accounts', href: '/settings/accounts' },
+            { children: `New` },
+          ]}
+        />
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
+  );
+};
diff --git a/packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsNewAccount.stories.tsx b/packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsNewAccount.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SettingsNewAccount } from '~/pages/settings/accounts/SettingsNewAccount';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/Accounts/SettingsNewAccount',
+  component: SettingsNewAccount,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/accounts/new',
+  },
+  parameters: {
+    layout: 'fullscreen',
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsNewAccount>;
+
+export const Default: Story = {};