feat: add Object Detail page (#1917)

* feat: add Object Detail page

Closes #1813

* refactor: add object settings width constant

front/src/App.tsx

@@ -18,6 +18,7 @@ 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 { SettingsObjectDetail } from '~/pages/settings/SettingsObjectDetail';
 import { SettingsObjects } from '~/pages/settings/SettingsObjects';
 import { SettingsProfile } from '~/pages/settings/SettingsProfile';
 import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace';
@@ -75,6 +76,10 @@ export const App = () => {
                   path={SettingsPath.Objects}
                   element={<SettingsObjects />}
                 />
+                <Route
+                  path={SettingsPath.ObjectDetail}
+                  element={<SettingsObjectDetail />}
+                />
               </Routes>
             }
           />

front/src/modules/types/SettingsPath.ts

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

front/src/pages/settings/SettingsObjectDetail.tsx

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+import { IconSettings } from '@/ui/icon';
+import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
+
+import { objectSettingsWidth } from './constants/objectSettings';
+
+const StyledContainer = styled.div`
+  padding: ${({ theme }) => theme.spacing(8)};
+  width: ${objectSettingsWidth};
+`;
+
+export const SettingsObjectDetail = () => (
+  <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+    <StyledContainer />
+  </SubMenuTopBarContainer>
+);

front/src/pages/settings/SettingsObjects.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -20,9 +21,11 @@ import { Tag } from '@/ui/tag/components/Tag';
 import { H1Title } from '@/ui/typography/components/H1Title';
 import { H2Title } from '@/ui/typography/components/H2Title';
 
+import { objectSettingsWidth } from './constants/objectSettings';
+
 const StyledContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(8)};
-  width: 512px;
+  width: ${objectSettingsWidth};
 `;
 
 const StyledTableRow = styled(TableRow)`
@@ -88,6 +91,7 @@ const disabledObjectItems = [
 
 export const SettingsObjects = () => {
   const theme = useTheme();
+  const navigate = useNavigate();
 
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@@ -104,7 +108,12 @@ export const SettingsObjects = () => {
           </StyledTableRow>
           <TableSection title="Active">
             {activeObjectItems.map((objectItem) => (
-              <StyledTableRow key={objectItem.name} onClick={() => undefined}>
+              <StyledTableRow
+                key={objectItem.name}
+                onClick={() =>
+                  navigate(`/settings/objects/${objectItem.name.toLowerCase()}`)
+                }
+              >
                 <StyledNameTableCell>
                   <objectItem.Icon size={theme.icon.size.md} />
                   {objectItem.name}

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

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { SettingsObjectDetail } from '../SettingsObjectDetail';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsObjectDetail',
+  component: SettingsObjectDetail,
+  decorators: [PageDecorator],
+  args: { routePath: '/settings/objects/companies' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsObjectDetail>;
+
+export const Default: Story = {};

front/src/pages/settings/constants/objectSettings.ts

@@ -0,0 +1 @@
+export const objectSettingsWidth = '512px';