admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor Layout (#322)

Browse Source 
* Refactor Layout

* Fix storybook

* Fixing tests by forcing msw version before regression
This commit is contained in:
Charles Bochet
2023-06-17 21:24:15 +02:00
committed by GitHub
parent 5ae5f28dcb
commit 49462c69a2
38 changed files with 325 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
front/src/pages/companies/Companies.tsx
View File

@ -24,7 +24,6 @@ import { IconBuildingSkyscraper } from '@/ui/icons/index';
import { IconList } from '@/ui/icons/index';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
import { BoolExpType } from '@/utils/interfaces/generic.interface';
import { AppPage } from '~/AppPage';
import { CompanyOrderByWithRelationInput as Companies_Order_By } from '~/generated/graphql';
import { TableActionBarButtonCreateCommentThreadCompany } from './table/TableActionBarButtonCreateCommentThreadCompany';
@ -76,31 +75,29 @@ export function Companies() {
const companiesColumns = useCompaniesColumns();
const theme = useTheme();
return (
<AppPage>
<WithTopBarContainer
title="Companies"
icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
onAddButtonClick={handleAddButtonClick}
>
<>
<StyledCompaniesContainer>
<EntityTable
data={companies}
columns={companiesColumns}
viewName="All Companies"
viewIcon={<IconList size={16} />}
availableSorts={availableSorts}
availableFilters={availableFilters}
onSortsUpdate={updateSorts}
onFiltersUpdate={updateFilters}
/>
</StyledCompaniesContainer>
<EntityTableActionBar>
<TableActionBarButtonCreateCommentThreadCompany />
<TableActionBarButtonDeleteCompanies />
</EntityTableActionBar>
</>
</WithTopBarContainer>
</AppPage>
<WithTopBarContainer
title="Companies"
icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
onAddButtonClick={handleAddButtonClick}
>
<>
<StyledCompaniesContainer>
<EntityTable
data={companies}
columns={companiesColumns}
viewName="All Companies"
viewIcon={<IconList size={16} />}
availableSorts={availableSorts}
availableFilters={availableFilters}
onSortsUpdate={updateSorts}
onFiltersUpdate={updateFilters}
/>
</StyledCompaniesContainer>
<EntityTableActionBar>
<TableActionBarButtonCreateCommentThreadCompany />
<TableActionBarButtonDeleteCompanies />
</EntityTableActionBar>
</>
</WithTopBarContainer>
);
}

4
front/src/pages/companies/__stories__/Companies.comments.stories.tsx
View File

@ -3,11 +3,11 @@ import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { Companies } from '../Companies';
import { Story } from './Companies.stories';
import { render } from './shared';
const meta: Meta<typeof Companies> = {
title: 'Pages/Companies/Comments',
@ -17,7 +17,7 @@ const meta: Meta<typeof Companies> = {
export default meta;
export const OpenCommentsSection: Story = {
render,
render: getRenderWrapperForPage(<Companies />, '/companies'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);

12
front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx
View File

@ -2,10 +2,12 @@ import { expect } from '@storybook/jest';
import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { Companies } from '../Companies';
import { Story } from './Companies.stories';
import { mocks, render } from './shared';
const meta: Meta<typeof Companies> = {
title: 'Pages/Companies/FilterBy',
@ -15,7 +17,7 @@ const meta: Meta<typeof Companies> = {
export default meta;
export const FilterByName: Story = {
render,
render: getRenderWrapperForPage(<Companies />, '/companies'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@ -38,12 +40,12 @@ export const FilterByName: Story = {
expect(await canvas.findByText('Contains Air')).toBeInTheDocument();
},
parameters: {
msw: mocks,
msw: graphqlMocks,
},
};
export const FilterByAccountOwner: Story = {
render,
render: getRenderWrapperForPage(<Companies />, '/companies'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@ -72,6 +74,6 @@ export const FilterByAccountOwner: Story = {
expect(await canvas.findByText('Is Charles Test')).toBeInTheDocument();
},
parameters: {
msw: mocks,
msw: graphqlMocks,
},
};

8
front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx
View File

@ -2,10 +2,12 @@ import { expect } from '@storybook/jest';
import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { Companies } from '../Companies';
import { Story } from './Companies.stories';
import { mocks, render } from './shared';
const meta: Meta<typeof Companies> = {
title: 'Pages/Companies/SortBy',
@ -15,7 +17,7 @@ const meta: Meta<typeof Companies> = {
export default meta;
export const SortByName: Story = {
render,
render: getRenderWrapperForPage(<Companies />, '/companies'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@ -41,6 +43,6 @@ export const SortByName: Story = {
await expect(canvas.queryAllByTestId('remove-icon-name')).toStrictEqual([]);
},
parameters: {
msw: mocks,
msw: graphqlMocks,
},
};

2
front/src/pages/companies/__stories__/Companies.stories.tsx
View File

@ -15,7 +15,7 @@ export default meta;
export type Story = StoryObj<typeof Companies>;
export const Default: Story = {
render: getRenderWrapperForPage(<Companies />),
render: getRenderWrapperForPage(<Companies />, '/companies'),
parameters: {
msw: graphqlMocks,
},

57
front/src/pages/companies/__stories__/shared.tsx
View File

@ -1,57 +0,0 @@
import { MemoryRouter } from 'react-router-dom';
import { ApolloProvider } from '@apollo/client';
import { graphql } from 'msw';
import { RecoilRoot } from 'recoil';
import { GraphqlQueryCompany } from '@/companies/interfaces/company.interface';
import { GraphqlQueryUser } from '@/users/interfaces/user.interface';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { filterAndSortData } from '~/testing/mock-data';
import { mockedCompaniesData } from '~/testing/mock-data/companies';
import { mockedUsersData } from '~/testing/mock-data/users';
import { mockedClient } from '~/testing/mockedClient';
import { Companies } from '../Companies';
export const mocks = [
graphql.query('GetCompanies', (req, res, ctx) => {
const returnedMockedData = filterAndSortData<GraphqlQueryCompany>(
mockedCompaniesData,
req.variables.where,
req.variables.orderBy,
req.variables.limit,
);
return res(
ctx.data({
companies: returnedMockedData,
}),
);
}),
graphql.query('SearchUser', (req, res, ctx) => {
const returnedMockedData = filterAndSortData<GraphqlQueryUser>(
mockedUsersData,
req.variables.where,
req.variables.orderBy,
req.variables.limit,
);
return res(
ctx.data({
searchResults: returnedMockedData,
}),
);
}),
];
export function render() {
return (
<RecoilRoot>
<ApolloProvider client={mockedClient}>
<MemoryRouter>
<FullHeightStorybookLayout>
<Companies />
</FullHeightStorybookLayout>
</MemoryRouter>
</ApolloProvider>
</RecoilRoot>
);
}

9
front/src/pages/opportunities/Opportunities.tsx
View File

@ -1,6 +1,5 @@
import { IconTargetArrow } from '@/ui/icons/index';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
import { AppPage } from '~/AppPage';
import { Board } from '../../modules/opportunities/components/Board';
import { useBoard } from '../../modules/opportunities/hooks/useBoard';
@ -13,10 +12,8 @@ export function Opportunities() {
if (!initialBoard || !items)
return <div>Initial board or items not found</div>;
return (
<AppPage>
<WithTopBarContainer title="Opportunities" icon={<IconTargetArrow />}>
<Board initialBoard={initialBoard} items={items} />
</WithTopBarContainer>
</AppPage>
<WithTopBarContainer title="Opportunities" icon={<IconTargetArrow />}>
<Board initialBoard={initialBoard} items={items} />
</WithTopBarContainer>
);
}

51
front/src/pages/people/People.tsx
View File

@ -20,7 +20,6 @@ import { EntityTable } from '@/ui/components/table/EntityTable';
import { IconList, IconUser } from '@/ui/icons/index';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
import { BoolExpType } from '@/utils/interfaces/generic.interface';
import { AppPage } from '~/AppPage';
import { TableActionBarButtonCreateCommentThreadPeople } from './table/TableActionBarButtonCreateCommentThreadPeople';
import { TableActionBarButtonDeletePeople } from './table/TableActionBarButtonDeletePeople';
@ -74,31 +73,29 @@ export function People() {
const theme = useTheme();
return (
<AppPage>
<WithTopBarContainer
title="People"
icon={<IconUser size={theme.iconSizeMedium} />}
onAddButtonClick={handleAddButtonClick}
>
<>
<StyledPeopleContainer>
<EntityTable
data={people}
columns={peopleColumns}
viewName="All People"
viewIcon={<IconList size={theme.iconSizeMedium} />}
availableSorts={availableSorts}
availableFilters={availableFilters}
onSortsUpdate={updateSorts}
onFiltersUpdate={updateFilters}
/>
</StyledPeopleContainer>
<EntityTableActionBar>
<TableActionBarButtonCreateCommentThreadPeople />
<TableActionBarButtonDeletePeople />
</EntityTableActionBar>
</>
</WithTopBarContainer>
</AppPage>
<WithTopBarContainer
title="People"
icon={<IconUser size={theme.iconSizeMedium} />}
onAddButtonClick={handleAddButtonClick}
>
<>
<StyledPeopleContainer>
<EntityTable
data={people}
columns={peopleColumns}
viewName="All People"
viewIcon={<IconList size={theme.iconSizeMedium} />}
availableSorts={availableSorts}
availableFilters={availableFilters}
onSortsUpdate={updateSorts}
onFiltersUpdate={updateFilters}
/>
</StyledPeopleContainer>
<EntityTableActionBar>
<TableActionBarButtonCreateCommentThreadPeople />
<TableActionBarButtonDeletePeople />
</EntityTableActionBar>
</>
</WithTopBarContainer>
);
}

4
front/src/pages/people/__stories__/People.comments.stories.tsx
View File

@ -3,11 +3,11 @@ import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { People } from '../People';
import { Story } from './People.stories';
import { render } from './shared';
const meta: Meta<typeof People> = {
title: 'Pages/People/Comments',
@ -17,7 +17,7 @@ const meta: Meta<typeof People> = {
export default meta;
export const OpenCommentsSection: Story = {
render,
render: getRenderWrapperForPage(<People />, '/people'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);

6
front/src/pages/people/__stories__/People.filterBy.stories.tsx
View File

@ -3,11 +3,11 @@ import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { People } from '../People';
import { Story } from './People.stories';
import { render } from './shared';
const meta: Meta<typeof People> = {
title: 'Pages/People/FilterBy',
@ -17,7 +17,7 @@ const meta: Meta<typeof People> = {
export default meta;
export const Email: Story = {
render,
render: getRenderWrapperForPage(<People />, '/people'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@ -44,7 +44,7 @@ export const Email: Story = {
};
export const CompanyName: Story = {
render,
render: getRenderWrapperForPage(<People />, '/people'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);

10
front/src/pages/people/__stories__/People.inputs.stories.tsx
View File

@ -7,12 +7,12 @@ import { GraphqlQueryCompany } from '@/companies/interfaces/company.interface';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { fetchOneFromData } from '~/testing/mock-data';
import { mockedPeopleData } from '~/testing/mock-data/people';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { sleep } from '~/testing/sleep';
import { People } from '../People';
import { Story } from './People.stories';
import { render } from './shared';
const meta: Meta<typeof People> = {
title: 'Pages/People/Input',
@ -22,7 +22,7 @@ const meta: Meta<typeof People> = {
export default meta;
export const InteractWithManyRows: Story = {
render,
render: getRenderWrapperForPage(<People />, '/people'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@ -66,7 +66,7 @@ export const InteractWithManyRows: Story = {
};
export const CheckCheckboxes: Story = {
render,
render: getRenderWrapperForPage(<People />, '/people'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@ -97,7 +97,7 @@ export const CheckCheckboxes: Story = {
};
export const EditRelation: Story = {
render,
render: getRenderWrapperForPage(<People />, '/people'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@ -153,7 +153,7 @@ export const EditRelation: Story = {
};
export const SelectRelationWithKeys: Story = {
render,
render: getRenderWrapperForPage(<People />, '/people'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);

6
front/src/pages/people/__stories__/People.sortBy.stories.tsx
View File

@ -3,11 +3,11 @@ import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { People } from '../People';
import { Story } from './People.stories';
import { render } from './shared';
const meta: Meta<typeof People> = {
title: 'Pages/People/SortBy',
@ -17,7 +17,7 @@ const meta: Meta<typeof People> = {
export default meta;
export const Email: Story = {
render,
render: getRenderWrapperForPage(<People />, '/people'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
@ -43,7 +43,7 @@ export const Email: Story = {
};
export const Cancel: Story = {
render,
render: getRenderWrapperForPage(<People />, '/people'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);

5
front/src/pages/people/__stories__/People.stories.tsx
View File

@ -1,11 +1,10 @@
import type { Meta, StoryObj } from '@storybook/react';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { People } from '../People';
import { render } from './shared';
const meta: Meta<typeof People> = {
title: 'Pages/People',
component: People,
@ -16,7 +15,7 @@ export default meta;
export type Story = StoryObj<typeof People>;
export const Default: Story = {
render,
render: getRenderWrapperForPage(<People />, '/people'),
parameters: {
msw: graphqlMocks,
},

22
front/src/pages/people/__stories__/shared.tsx
View File

@ -1,22 +0,0 @@
import { MemoryRouter } from 'react-router-dom';
import { ApolloProvider } from '@apollo/client';
import { RecoilRoot } from 'recoil';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { mockedClient } from '~/testing/mockedClient';
import { People } from '../People';
export function render() {
return (
<RecoilRoot>
<ApolloProvider client={mockedClient}>
<MemoryRouter>
<FullHeightStorybookLayout>
<People />
</FullHeightStorybookLayout>
</MemoryRouter>
</ApolloProvider>
</RecoilRoot>
);
}

16
front/src/pages/settings/SettingsProfile.tsx
View File

@ -1,14 +1,20 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState';
import { SettingsPage } from '@/settings/components/SettingsPage';
import { NoTopBarContainer } from '@/ui/layout/containers/NoTopBarContainer';
import { TopTitle } from '@/ui/layout/top-bar/TopTitle';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
padding: ${(props) => props.theme.spacing(8)};
`;
export function SettingsProfile() {
const currentUser = useRecoilValue(currentUserState);
return (
<SettingsPage>
<>
<NoTopBarContainer>
<StyledContainer>
<TopTitle title="Profile" />
<div>
<h5>Name</h5>
@ -18,7 +24,7 @@ export function SettingsProfile() {
<h5>Email</h5>
<span>{currentUser?.email} </span>
</div>
</>
</SettingsPage>
</StyledContainer>
</NoTopBarContainer>
);
}

5
front/src/pages/settings/__stories__/settings.stories.tsx
View File

@ -1,11 +1,10 @@
import type { Meta, StoryObj } from '@storybook/react';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { SettingsProfile } from '../SettingsProfile';
import { render } from './shared';
const meta: Meta<typeof SettingsProfile> = {
title: 'Pages/Settings/SettingsProfile',
component: SettingsProfile,
@ -16,7 +15,7 @@ export default meta;
export type Story = StoryObj<typeof SettingsProfile>;
export const Default: Story = {
render,
render: getRenderWrapperForPage(<SettingsProfile />, '/settings/profile'),
parameters: {
msw: graphqlMocks,
},

22
front/src/pages/settings/__stories__/shared.tsx
View File

@ -1,22 +0,0 @@
import { MemoryRouter } from 'react-router-dom';
import { ApolloProvider } from '@apollo/client';
import { RecoilRoot } from 'recoil';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { mockedClient } from '~/testing/mockedClient';
import { SettingsProfile } from '../SettingsProfile';
export function render() {
return (
<RecoilRoot>
<ApolloProvider client={mockedClient}>
<MemoryRouter>
<FullHeightStorybookLayout>
<SettingsProfile />
</FullHeightStorybookLayout>
</MemoryRouter>
</ApolloProvider>
</RecoilRoot>
);
}