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

2
front/package.json
View File

@ -127,7 +127,7 @@
"eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
"http-server": "^14.1.1",
"mock-apollo-client": "^1.2.1",
"msw": "^1.2.1",
"msw": "1.2.1",
"msw-storybook-addon": "^1.8.0",
"prettier": "^2.8.0",
"prop-types": "^15.8.1",

2
front/public/mockServiceWorker.js
View File

@ -2,7 +2,7 @@
/* tslint:disable */
/**
* Mock Service Worker (1.2.2).
* Mock Service Worker (1.2.1).
* @see https://github.com/mswjs/msw
* - Please do NOT modify this file.
* - Please do NOT serve this file on production.

64
front/src/App.tsx
View File

@ -1,5 +1,7 @@
import { Navigate, Route, Routes } from 'react-router-dom';
import { DefaultLayout } from '@/ui/layout/DefaultLayout';
import { RequireAuth } from './modules/auth/components/RequireAuth';
import { AuthCallback } from './pages/auth/AuthCallback';
import { Login } from './pages/auth/Login';
@ -10,37 +12,39 @@ import { SettingsProfile } from './pages/settings/SettingsProfile';
export function App() {
return (
<Routes>
<Route
path="*"
element={
<RequireAuth>
<DefaultLayout>
<Routes>
<Route
path="*"
element={
<RequireAuth>
<Routes>
<Route path="" element={<Navigate to="/people" replace />} />
<Route path="people" element={<People />} />
<Route path="companies" element={<Companies />} />
<Route path="opportunities" element={<Opportunities />} />
</Routes>
</RequireAuth>
}
/>
<Route
path="auth/*"
element={
<Routes>
<Route path="" element={<Navigate to="/people" replace />} />
<Route path="people" element={<People />} />
<Route path="companies" element={<Companies />} />
<Route path="opportunities" element={<Opportunities />} />
<Route path="callback" element={<AuthCallback />} />
<Route path="login" element={<Login />} />
</Routes>
</RequireAuth>
}
/>
<Route
path="auth/*"
element={
<Routes>
<Route path="callback" element={<AuthCallback />} />
<Route path="login" element={<Login />} />
</Routes>
}
/>
<Route
path="settings/*"
element={
<Routes>
<Route path="profile" element={<SettingsProfile />} />
</Routes>
}
/>
</Routes>
}
/>
<Route
path="settings/*"
element={
<Routes>
<Route path="profile" element={<SettingsProfile />} />
</Routes>
}
/>
</Routes>
</DefaultLayout>
);
}

89
front/src/AppNavbar.tsx
View File

@ -1,6 +1,7 @@
import { useMatch, useResolvedPath } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import { SettingsNavbar } from '@/settings/components/SettingsNavbar';
import {
IconBuildingSkyscraper,
IconInbox,
@ -16,51 +17,51 @@ import NavWorkspaceButton from './modules/ui/layout/navbar/NavWorkspaceButton';
export function AppNavbar() {
const theme = useTheme();
const currentPath = useLocation().pathname;
const shouldDiplaySubNavBar = currentPath.match(/\/settings\//g) !== null;
return (
<>
<NavWorkspaceButton />
<NavItemsContainer>
<NavItem
label="Search"
to="/search"
icon={<IconSearch size={theme.iconSizeMedium} />}
soon={true}
/>
<NavItem
label="Inbox"
to="/inbox"
icon={<IconInbox size={theme.iconSizeMedium} />}
soon={true}
/>
<NavItem
label="Settings"
to="/settings/profile"
icon={<IconSettings size={theme.iconSizeMedium} />}
/>
<NavTitle label="Workspace" />
<NavItem
label="People"
to="/people"
icon={<IconUser size={theme.iconSizeMedium} />}
active={
!!useMatch({
path: useResolvedPath('/people').pathname,
end: true,
})
}
/>
<NavItem
label="Companies"
to="/companies"
icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
active={
!!useMatch({
path: useResolvedPath('/companies').pathname,
end: true,
})
}
/>
</NavItemsContainer>
{!shouldDiplaySubNavBar ? (
<>
<NavWorkspaceButton />
<NavItemsContainer>
<NavItem
label="Search"
to="/search"
icon={<IconSearch size={theme.iconSizeMedium} />}
soon={true}
/>
<NavItem
label="Inbox"
to="/inbox"
icon={<IconInbox size={theme.iconSizeMedium} />}
soon={true}
/>
<NavItem
label="Settings"
to="/settings/profile"
icon={<IconSettings size={theme.iconSizeMedium} />}
/>
<NavTitle label="Workspace" />
<NavItem
label="People"
to="/people"
icon={<IconUser size={theme.iconSizeMedium} />}
active={currentPath === '/people'}
/>
<NavItem
label="Companies"
to="/companies"
icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
active={currentPath === '/companies'}
/>
</NavItemsContainer>
</>
) : (
<SettingsNavbar />
)}
</>
);
}

11
front/src/AppPage.tsx
View File

@ -1,11 +0,0 @@
import { DefaultLayout } from '@/ui/layout/DefaultLayout';
import { AppNavbar } from './AppNavbar';
type OwnProps = {
children: JSX.Element;
};
export function AppPage({ children }: OwnProps) {
return <DefaultLayout Navbar={AppNavbar}>{children}</DefaultLayout>;
}

9
front/src/modules/search/components/__stories__/CommandMenu.stories.tsx
View File

@ -1,6 +1,7 @@
import { MemoryRouter } from 'react-router-dom';
import type { Meta, StoryObj } from '@storybook/react';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
import { CommandMenu } from '../CommandMenu';
@ -13,5 +14,9 @@ export default meta;
type Story = StoryObj<typeof CommandMenu>;
export const Default: Story = {
render: getRenderWrapperForPage(<CommandMenu initiallyOpen={true} />),
render: getRenderWrapperForComponent(
<MemoryRouter>
<CommandMenu initiallyOpen={true} />
</MemoryRouter>,
),
};

7
front/src/modules/settings/components/SettingsNavbar.tsx
View File

@ -8,16 +8,15 @@ import {
IconSettings,
IconUser,
} from '@/ui/icons/index';
import NavBackButton from '@/ui/layout/navbar//NavBackButton';
import NavItem from '@/ui/layout/navbar/NavItem';
import NavItemsContainer from '@/ui/layout/navbar/NavItemsContainer';
import NavTitle from '@/ui/layout/navbar/NavTitle';
import SubNavbarContainer from '@/ui/layout/navbar/sub-navbar/SubNavBarContainer';
export function SettingsNavbar() {
const theme = useTheme();
return (
<>
<NavBackButton title="Settings" />
<SubNavbarContainer backButtonTitle="Settings">
<NavItemsContainer>
<NavTitle label="User" />
<NavItem
@ -64,6 +63,6 @@ export function SettingsNavbar() {
danger={true}
/>
</NavItemsContainer>
</>
</SubNavbarContainer>
);
}

11
front/src/modules/settings/components/SettingsPage.tsx
View File

@ -1,11 +0,0 @@
import { SecondaryLayout } from '@/ui/layout/SecondaryLayout';
import { SettingsNavbar } from './SettingsNavbar';
type OwnProps = {
children: JSX.Element;
};
export function SettingsPage({ children }: OwnProps) {
return <SecondaryLayout Navbar={SettingsNavbar}>{children}</SecondaryLayout>;
}

9
front/src/modules/ui/layout/DefaultLayout.tsx
View File

@ -3,6 +3,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState';
import { CommandMenu } from '@/search/components/CommandMenu';
import { AppNavbar } from '~/AppNavbar';
import { NavbarContainer } from './navbar/NavbarContainer';
import { isNavbarOpenedState } from './states/isNavbarOpenedState';
@ -25,9 +26,8 @@ const MainContainer = styled.div`
overflow: hidden;
width: ${() =>
useRecoilValue(isNavbarOpenedState)
? `(calc(100% - ${NAVBAR_WIDTH})`
? `calc(100% - ${NAVBAR_WIDTH})`
: '100%'};
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: ${() => (useRecoilValue(isNavbarOpenedState) ? '0' : '100%')};
}
@ -35,10 +35,9 @@ const MainContainer = styled.div`
type OwnProps = {
children: JSX.Element;
Navbar: () => JSX.Element;
};
export function DefaultLayout({ children, Navbar }: OwnProps) {
export function DefaultLayout({ children }: OwnProps) {
const currentUser = useRecoilState(currentUserState);
const userIsAuthenticated = !!currentUser;
@ -48,7 +47,7 @@ export function DefaultLayout({ children, Navbar }: OwnProps) {
<>
<CommandMenu />
<NavbarContainer>
<Navbar />
<AppNavbar />
</NavbarContainer>
<MainContainer>{children}</MainContainer>
</>

1
front/src/modules/ui/layout/Panel.tsx
View File

@ -6,6 +6,7 @@ const StyledPanel = styled.div`
border: 1px solid ${(props) => props.theme.primaryBorder};
border-radius: 8px;
display: flex;
flex-direction: row;
width: 100%;
`;

68
front/src/modules/ui/layout/SecondaryLayout.tsx
View File

@ -1,68 +0,0 @@
import styled from '@emotion/styled';
import { NavbarContainer } from './navbar/NavbarContainer';
import { MOBILE_VIEWPORT } from './styles/themes';
type OwnProps = {
children: JSX.Element;
Navbar: () => JSX.Element;
};
const StyledLayout = styled.div`
background: ${(props) => props.theme.noisyBackground};
display: flex;
flex-direction: row;
height: 100vh;
position: relative;
width: 100vw;
`;
const MainContainer = styled.div`
display: flex;
flex-direction: row;
overflow: hidden;
width: 100%;
`;
const SubContainer = styled.div`
background: ${(props) => props.theme.primaryBackground};
border: 1px solid ${(props) => props.theme.primaryBorder};
border-radius: ${(props) => props.theme.spacing(2)};
display: flex;
flex-direction: column;
margin: ${(props) => props.theme.spacing(4)};
max-width: calc(100vw - 500px);
padding: ${(props) => props.theme.spacing(8)};
width: 100%;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%;
max-width: none;
}
`;
const SubSubContainer = styled.div`
color: ${(props) => props.theme.text100};
display: flex;
flex-direction: column;
gap: 32px;
width: 350px;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%;
}
`;
export const SecondaryLayout = ({ children, Navbar }: OwnProps) => {
return (
<StyledLayout>
<NavbarContainer layout="secondary">
<Navbar />
</NavbarContainer>
<MainContainer>
<SubContainer>
<SubSubContainer>{children}</SubSubContainer>
</SubContainer>
</MainContainer>
</StyledLayout>
);
};

53
front/src/modules/ui/layout/containers/ContentContainer.tsx Normal file
View File

@ -0,0 +1,53 @@
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { Panel } from '../Panel';
import { RightDrawer } from '../right-drawer/components/RightDrawer';
import { isRightDrawerOpenState } from '../right-drawer/states/isRightDrawerOpenState';
type OwnProps = {
children: JSX.Element;
topMargin?: number;
};
const MainContainer = styled.div<{ topMargin: number }>`
background: ${(props) => props.theme.noisyBackground};
display: flex;
flex-direction: row;
gap: ${(props) => props.theme.spacing(2)};
height: calc(100% - ${(props) => props.topMargin}px);
padding-bottom: ${(props) => props.theme.spacing(3)};
padding-right: ${(props) => props.theme.spacing(3)};
width: calc(100% - ${(props) => props.theme.spacing(3)});
`;
type LeftContainerProps = {
isRightDrawerOpen?: boolean;
};
const LeftContainer = styled.div<LeftContainerProps>`
display: flex;
position: relative;
width: calc(
100% -
${(props) =>
props.isRightDrawerOpen
? `${props.theme.rightDrawerWidth} - ${props.theme.spacing(2)}`
: '0px'}
);
`;
export function ContentContainer({ children, topMargin }: OwnProps) {
const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
return (
<MainContainer topMargin={topMargin ?? 0}>
<LeftContainer isRightDrawerOpen={isRightDrawerOpen}>
<Panel>{children}</Panel>
</LeftContainer>
<RightDrawer />
</MainContainer>
);
}

21
front/src/modules/ui/layout/containers/NoTopBarContainer.tsx Normal file
View File

@ -0,0 +1,21 @@
import styled from '@emotion/styled';
import { ContentContainer } from './ContentContainer';
type OwnProps = {
children: JSX.Element;
};
const StyledContainer = styled.div`
display: flex;
padding-top: ${(props) => props.theme.spacing(4)};
width: 100%;
`;
export function NoTopBarContainer({ children }: OwnProps) {
return (
<StyledContainer>
<ContentContainer topMargin={16}>{children}</ContentContainer>
</StyledContainer>
);
}

47
front/src/modules/ui/layout/containers/WithTopBarContainer.tsx
View File

@ -1,12 +1,10 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { Panel } from '../Panel';
import { RightDrawer } from '../right-drawer/components/RightDrawer';
import { isRightDrawerOpenState } from '../right-drawer/states/isRightDrawerOpenState';
import { TOP_BAR_MIN_HEIGHT, TopBar } from '../top-bar/TopBar';
import { ContentContainer } from './ContentContainer';
type OwnProps = {
children: JSX.Element;
title: string;
@ -20,53 +18,18 @@ const StyledContainer = styled.div`
width: 100%;
`;
const MainContainer = styled.div`
background: ${(props) => props.theme.noisyBackground};
display: flex;
flex-direction: row;
gap: ${(props) => props.theme.spacing(2)};
height: calc(
100% - ${TOP_BAR_MIN_HEIGHT} - ${(props) => props.theme.spacing(2)} -
${(props) => props.theme.spacing(5)}
);
padding-bottom: ${(props) => props.theme.spacing(3)};
padding-right: ${(props) => props.theme.spacing(3)};
width: calc(100% - ${(props) => props.theme.spacing(3)});
`;
type LeftContainerProps = {
isRightDrawerOpen?: boolean;
};
const LeftContainer = styled.div<LeftContainerProps>`
display: flex;
position: relative;
width: calc(
100% -
${(props) =>
props.isRightDrawerOpen
? `${props.theme.rightDrawerWidth} - ${props.theme.spacing(2)}`
: '0px'}
);
`;
export function WithTopBarContainer({
children,
title,
icon,
onAddButtonClick,
}: OwnProps) {
const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
return (
<StyledContainer>
<TopBar title={title} icon={icon} onAddButtonClick={onAddButtonClick} />
<MainContainer>
<LeftContainer isRightDrawerOpen={isRightDrawerOpen}>
<Panel>{children}</Panel>
</LeftContainer>
<RightDrawer />
</MainContainer>
<ContentContainer topMargin={TOP_BAR_MIN_HEIGHT}>
{children}
</ContentContainer>
</StyledContainer>
);
}

1
front/src/modules/ui/layout/navbar/NavItemsContainer.tsx
View File

@ -8,6 +8,7 @@ const StyledNavItemsContainer = styled.div`
display: flex;
flex-direction: column;
margin-top: 40px;
min-width: 220px;
`;
function NavItemsContainer({ children }: OwnProps) {

29
front/src/modules/ui/layout/navbar/NavbarContainer.tsx
View File

@ -4,10 +4,9 @@ import { useRecoilValue } from 'recoil';
import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
import { MOBILE_VIEWPORT } from '../styles/themes';
const StyledNavbarContainer = styled.div<{ width: string }>`
const StyledNavbarContainer = styled.div`
flex-direction: column;
width: ${(props) =>
useRecoilValue(isNavbarOpenedState) ? props.width : '0'};
width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
padding: ${(props) => props.theme.spacing(2)};
flex-shrink: 0;
overflow: hidden;
@ -19,18 +18,6 @@ const StyledNavbarContainer = styled.div<{ width: string }>`
: '0'};
`;
const NavbarSubContainer = styled.div`
display: flex;
flex-direction: column;
margin-left: auto;
margin-top: 41px;
width: 160px;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%;
}
`;
const NavbarContent = styled.div`
display: ${() => (useRecoilValue(isNavbarOpenedState) ? 'block' : 'none')};
`;
@ -44,18 +31,8 @@ export const NavbarContainer: React.FC<NavbarProps> = ({
children,
layout,
}) => {
if (layout === 'secondary') {
return (
<StyledNavbarContainer width="500px">
<NavbarSubContainer>
<NavbarContent>{children}</NavbarContent>
</NavbarSubContainer>
</StyledNavbarContainer>
);
}
return (
<StyledNavbarContainer width="220px">
<StyledNavbarContainer>
<NavbarContent>{children}</NavbarContent>
</StyledNavbarContainer>
);

2
front/src/modules/ui/layout/navbar/NavBackButton.tsx → front/src/modules/ui/layout/navbar/sub-navbar/NavBackButton.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { IconChevronLeft } from '@/ui/icons/index';
import NavCollapseButton from './NavCollapseButton';
import NavCollapseButton from '../NavCollapseButton';
type OwnProps = {
title: string;

32
front/src/modules/ui/layout/navbar/sub-navbar/SubNavBarContainer.tsx Normal file
View File

@ -0,0 +1,32 @@
import styled from '@emotion/styled';
import NavBackButton from './NavBackButton';
type OwnProps = {
children: JSX.Element;
backButtonTitle: string;
};
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
padding-left: 300px;
padding-top: ${(props) => props.theme.spacing(6)};
`;
const StyledNavItemsContainer = styled.div`
display: flex;
flex-direction: column;
`;
export default function SubNavbarContainer({
children,
backButtonTitle,
}: OwnProps) {
return (
<StyledContainer>
<NavBackButton title={backButtonTitle} />
<StyledNavItemsContainer>{children}</StyledNavItemsContainer>
</StyledContainer>
);
}

4
front/src/modules/ui/layout/top-bar/TopBar.tsx
View File

@ -5,7 +5,7 @@ import { IconPlus } from '@/ui/icons/index';
import NavCollapseButton from '../navbar/NavCollapseButton';
export const TOP_BAR_MIN_HEIGHT = '40px';
export const TOP_BAR_MIN_HEIGHT = 40;
const TopBarContainer = styled.div`
align-items: center;
@ -14,7 +14,7 @@ const TopBarContainer = styled.div`
display: flex;
flex-direction: row;
font-size: 14px;
min-height: ${TOP_BAR_MIN_HEIGHT};
min-height: ${TOP_BAR_MIN_HEIGHT}px;
padding: ${(props) => props.theme.spacing(2)};
`;

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>
);
}

16
front/src/testing/renderWrappers.tsx
View File

@ -3,17 +3,27 @@ import { MemoryRouter } from 'react-router-dom';
import { ApolloProvider } from '@apollo/client';
import { RecoilRoot } from 'recoil';
import { DefaultLayout } from '@/ui/layout/DefaultLayout';
import { AuthProvider } from '~/providers/AuthProvider';
import { ComponentStorybookLayout } from './ComponentStorybookLayout';
import { FullHeightStorybookLayout } from './FullHeightStorybookLayout';
import { mockedClient } from './mockedClient';
export function getRenderWrapperForPage(children: React.ReactElement) {
export function getRenderWrapperForPage(
children: React.ReactElement,
currentPath: string,
) {
return function render() {
return (
<RecoilRoot>
<ApolloProvider client={mockedClient}>
<MemoryRouter>
<FullHeightStorybookLayout>{children}</FullHeightStorybookLayout>
<MemoryRouter initialEntries={[currentPath]}>
<FullHeightStorybookLayout>
<AuthProvider>
<DefaultLayout>{children}</DefaultLayout>
</AuthProvider>
</FullHeightStorybookLayout>
</MemoryRouter>
</ApolloProvider>
</RecoilRoot>

8
front/yarn.lock
View File

@ -12316,10 +12316,10 @@ msw-storybook-addon@^1.8.0:
dependencies:
is-node-process "^1.0.1"
msw@^1.2.1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/msw/-/msw-1.2.2.tgz#126c3150c07f651e97b24fbd405821f3aeaf9397"
integrity sha512-GsW3PE/Es/a1tYThXcM8YHOZ1S1MtivcS3He/LQbbTCx3rbWJYCtWD5XXyJ53KlNPT7O1VI9sCW3xMtgFe8XpQ==
msw@1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/msw/-/msw-1.2.1.tgz#9dd347583eeba5e5c7f33b54be5600a899dc61bd"
integrity sha512-bF7qWJQSmKn6bwGYVPXOxhexTCGD5oJSZg8yt8IBClxvo3Dx/1W0zqE1nX9BSWmzRsCKWfeGWcB/vpqV6aclpw==
dependencies:
"@mswjs/cookies" "^0.2.2"
"@mswjs/interceptors" "^0.17.5"