diff --git a/front/src/App.tsx b/front/src/App.tsx index 05ada5466..0c46cd511 100644 --- a/front/src/App.tsx +++ b/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={} /> + } + /> } /> diff --git a/front/src/modules/types/SettingsPath.ts b/front/src/modules/types/SettingsPath.ts index 38139f007..6606a2d59 100644 --- a/front/src/modules/types/SettingsPath.ts +++ b/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', } diff --git a/front/src/pages/settings/SettingsObjectDetail.tsx b/front/src/pages/settings/SettingsObjectDetail.tsx new file mode 100644 index 000000000..de2edd8db --- /dev/null +++ b/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 = () => ( + + + +); diff --git a/front/src/pages/settings/SettingsObjects.tsx b/front/src/pages/settings/SettingsObjects.tsx index ab3976c57..0e5bdfdd1 100644 --- a/front/src/pages/settings/SettingsObjects.tsx +++ b/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 ( @@ -104,7 +108,12 @@ export const SettingsObjects = () => { {activeObjectItems.map((objectItem) => ( - undefined}> + + navigate(`/settings/objects/${objectItem.name.toLowerCase()}`) + } + > {objectItem.name} diff --git a/front/src/pages/settings/__stories__/SettingsObjectDetail.stories.tsx b/front/src/pages/settings/__stories__/SettingsObjectDetail.stories.tsx new file mode 100644 index 000000000..f43dd295a --- /dev/null +++ b/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 = { + 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; + +export const Default: Story = {}; diff --git a/front/src/pages/settings/constants/objectSettings.ts b/front/src/pages/settings/constants/objectSettings.ts new file mode 100644 index 000000000..fe8e177c3 --- /dev/null +++ b/front/src/pages/settings/constants/objectSettings.ts @@ -0,0 +1 @@ +export const objectSettingsWidth = '512px';