Refactor Layout (#322)

* Refactor Layout

* Fix storybook

* Fixing tests by forcing msw version before regression

front/src/pages/people/People.tsx

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

front/src/pages/people/__stories__/People.comments.stories.tsx

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

front/src/pages/people/__stories__/People.filterBy.stories.tsx

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

front/src/pages/people/__stories__/People.inputs.stories.tsx

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

front/src/pages/people/__stories__/People.sortBy.stories.tsx

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

front/src/pages/people/__stories__/People.stories.tsx

@@ -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,
   },

front/src/pages/people/__stories__/shared.tsx

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