From e63f8eac76cc44c077d55917c9887214b97e5753 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tha=C3=AFs?= Date: Tue, 3 Oct 2023 11:19:29 +0200 Subject: [PATCH] feat: add data model settings (#1817) Closes #1760 --- front/src/App.tsx | 16 +++++--- .../settings/components/SettingsNavbar.tsx | 12 ++++++ front/src/modules/types/SettingsPath.ts | 1 + front/src/modules/ui/icon/index.ts | 1 + front/src/pages/settings/SettingsObjects.tsx | 18 +++++++++ .../__stories__/SettingsObjects.stories.tsx | 39 +++++++++++++++++++ .../SettingsWorkspaceMembers.stories.tsx | 6 ++- 7 files changed, 86 insertions(+), 7 deletions(-) create mode 100644 front/src/pages/settings/SettingsObjects.tsx create mode 100644 front/src/pages/settings/__stories__/SettingsObjects.stories.tsx diff --git a/front/src/App.tsx b/front/src/App.tsx index 6f7d0ea85..05ada5466 100644 --- a/front/src/App.tsx +++ b/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={} /> + } + /> } /> diff --git a/front/src/modules/settings/components/SettingsNavbar.tsx b/front/src/modules/settings/components/SettingsNavbar.tsx index 2ce93ff90..17f9fbfd0 100644 --- a/front/src/modules/settings/components/SettingsNavbar.tsx +++ b/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 = () => { }) } /> + diff --git a/front/src/modules/types/SettingsPath.ts b/front/src/modules/types/SettingsPath.ts index c15e6d9c3..38139f007 100644 --- a/front/src/modules/types/SettingsPath.ts +++ b/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', } diff --git a/front/src/modules/ui/icon/index.ts b/front/src/modules/ui/icon/index.ts index 99be6b7f6..a38726aec 100644 --- a/front/src/modules/ui/icon/index.ts +++ b/front/src/modules/ui/icon/index.ts @@ -43,6 +43,7 @@ export { IconHeart, IconHeartOff, IconHelpCircle, + IconHierarchy2, IconInbox, IconLayoutKanban, IconLayoutSidebarLeftCollapse, diff --git a/front/src/pages/settings/SettingsObjects.tsx b/front/src/pages/settings/SettingsObjects.tsx new file mode 100644 index 000000000..f1af24afd --- /dev/null +++ b/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 = () => ( + + + + + +); diff --git a/front/src/pages/settings/__stories__/SettingsObjects.stories.tsx b/front/src/pages/settings/__stories__/SettingsObjects.stories.tsx new file mode 100644 index 000000000..db8df06ae --- /dev/null +++ b/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 = { + 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; + +export const Default: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await sleep(1000); + + await canvas.getByRole('heading', { + level: 2, + name: 'Objects', + }); + }, +}; diff --git a/front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx b/front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx index 698f6db00..d2ca497f2 100644 --- a/front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx +++ b/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; 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' }); }, };