feat: add data model settings (#1817)

Closes #1760

front/src/App.tsx

@@ -4,26 +4,26 @@ import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { DefaultLayout } from '@/ui/layout/components/DefaultLayout';
 import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
+import { CommandMenuEffect } from '~/effect-components/CommandMenuEffect';
+import { GotoHotkeysEffect } from '~/effect-components/GotoHotkeysEffect';
 import { CreateProfile } from '~/pages/auth/CreateProfile';
 import { CreateWorkspace } from '~/pages/auth/CreateWorkspace';
 import { SignInUp } from '~/pages/auth/SignInUp';
 import { VerifyEffect } from '~/pages/auth/VerifyEffect';
 import { Companies } from '~/pages/companies/Companies';
 import { CompanyShow } from '~/pages/companies/CompanyShow';
+import { ImpersonateEffect } from '~/pages/impersonate/ImpersonateEffect';
+import { NotFound } from '~/pages/not-found/NotFound';
 import { Opportunities } from '~/pages/opportunities/Opportunities';
 import { People } from '~/pages/people/People';
 import { PersonShow } from '~/pages/people/PersonShow';
 import { SettingsExperience } from '~/pages/settings/SettingsExperience';
+import { SettingsObjects } from '~/pages/settings/SettingsObjects';
 import { SettingsProfile } from '~/pages/settings/SettingsProfile';
 import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace';
 import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers';
 import { Tasks } from '~/pages/tasks/Tasks';
-
-import { CommandMenuEffect } from './effect-components/CommandMenuEffect';
-import { GotoHotkeysEffect } from './effect-components/GotoHotkeysEffect';
-import { ImpersonateEffect } from './pages/impersonate/ImpersonateEffect';
-import { NotFound } from './pages/not-found/NotFound';
-import { getPageTitleFromPath } from './utils/title-utils';
+import { getPageTitleFromPath } from '~/utils/title-utils';
 
 export const App = () => {
   const { pathname } = useLocation();
@@ -71,6 +71,10 @@ export const App = () => {
                   path={SettingsPath.Workspace}
                   element={<SettingsWorkspace />}
                 />
+                <Route
+                  path={SettingsPath.Objects}
+                  element={<SettingsObjects />}
+                />
               </Routes>
             }
           />

front/src/modules/settings/components/SettingsNavbar.tsx

@@ -5,6 +5,7 @@ import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
 import {
   IconColorSwatch,
+  IconHierarchy2,
   IconLogout,
   IconSettings,
   IconUserCircle,
@@ -72,6 +73,17 @@ export const SettingsNavbar = () => {
           })
         }
       />
+      <NavItem
+        label="Data model"
+        to="/settings/objects"
+        Icon={IconHierarchy2}
+        active={
+          !!useMatch({
+            path: useResolvedPath('/settings/objects').pathname,
+            end: true,
+          })
+        }
+      />
       <NavTitle label="Other" />
       <NavItem label="Logout" onClick={handleLogout} Icon={IconLogout} />
     </SubMenuNavbar>

front/src/modules/types/SettingsPath.ts

@@ -1,6 +1,7 @@
 export enum SettingsPath {
   ProfilePage = 'profile',
   Experience = 'profile/experience',
+  Objects = 'objects',
   WorkspaceMembersPage = 'workspace-members',
   Workspace = 'workspace',
 }

front/src/modules/ui/icon/index.ts

@@ -43,6 +43,7 @@ export {
   IconHeart,
   IconHeartOff,
   IconHelpCircle,
+  IconHierarchy2,
   IconInbox,
   IconLayoutKanban,
   IconLayoutSidebarLeftCollapse,

front/src/pages/settings/SettingsObjects.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+import { IconSettings } from '@/ui/icon';
+import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
+import { H1Title } from '@/ui/typography/components/H1Title';
+
+const StyledContainer = styled.div`
+  padding: ${({ theme }) => theme.spacing(8)};
+  width: 350px;
+`;
+
+export const SettingsObjects = () => (
+  <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+    <StyledContainer>
+      <H1Title title="Objects" />
+    </StyledContainer>
+  </SubMenuTopBarContainer>
+);

front/src/pages/settings/__stories__/SettingsObjects.stories.tsx

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
+
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
+
+import { SettingsObjects } from '../SettingsObjects';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsObjects',
+  component: SettingsObjects,
+  decorators: [PageDecorator],
+  args: { routePath: '/settings/objects' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsObjects>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(1000);
+
+    await canvas.getByRole('heading', {
+      level: 2,
+      name: 'Objects',
+    });
+  },
+};

front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx

@@ -6,6 +6,7 @@ import {
   type PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
 
 import { SettingsWorkspaceMembers } from '../SettingsWorkspaceMembers';
 
@@ -27,6 +28,9 @@ export type Story = StoryObj<typeof SettingsWorkspaceMembers>;
 export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText('Copy link');
+
+    await sleep(1000);
+
+    await canvas.getByRole('button', { name: 'Copy link' });
   },
 };