Feat/add opportunity (#1267)

* Renamed AuthAutoRouter * Moved RecoilScope * Refactored old WithTopBarContainer to make it less transclusive * Created new add opportunity button and refactored DropdownButton * Added tests * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/layout/components/PageHeader.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/pages/opportunities/Opportunities.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Fix lint * Fix lint --------- Co-authored-by: Charles Bochet <charles@twenty.com> Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com> Co-authored-by: Thaïs <guigon.thais@gmail.com>
2023-08-23 18:57:08 +02:00
parent 74ab0142c7
commit 64cef963bc
23 changed files with 696 additions and 97 deletions
--- a/front/src/pages/opportunities/Opportunities.tsx
+++ b/front/src/pages/opportunities/Opportunities.tsx
@ -3,14 +3,17 @@ import { useTheme } from '@emotion/react';

 import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
 import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
+import { PipelineAddButton } from '@/pipeline/components/PipelineAddButton';
 import { EntityBoard } from '@/ui/board/components/EntityBoard';
 import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar';
 import { EntityBoardContextMenu } from '@/ui/board/components/EntityBoardContextMenu';
 import { BoardOptionsContext } from '@/ui/board/contexts/BoardOptionsContext';
 import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { SelectedSortType } from '@/ui/filter-n-sort/types/interface';
-import { IconTargetArrow } from '@/ui/icon/index';
-import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { IconTargetArrow } from '@/ui/icon';
+import { PageBody } from '@/ui/layout/components/PageBody';
+import { PageContainer } from '@/ui/layout/components/PageContainer';
+import { PageHeader } from '@/ui/layout/components/PageHeader';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import {
  PipelineProgressOrderByWithRelationInput,
@ -64,22 +67,29 @@ export function Opportunities() {
  }

  return (
-    <WithTopBarContainer
-      title="Opportunities"
-      icon={<IconTargetArrow size={theme.icon.size.md} />}
-    >
-      <BoardOptionsContext.Provider value={opportunitiesBoardOptions}>
-        <RecoilScope SpecificContext={CompanyBoardRecoilScopeContext}>
-          <HooksCompanyBoard orderBy={orderBy} />
-          <EntityBoard
-            boardOptions={opportunitiesBoardOptions}
-            updateSorts={updateSorts}
-            onEditColumnTitle={handleEditColumnTitle}
-          />
-          <EntityBoardActionBar />
-          <EntityBoardContextMenu />
+    <PageContainer>
+      <PageHeader
+        title="Opportunities"
+        icon={<IconTargetArrow size={theme.icon.size.md} />}
+      >
+        <RecoilScope>
+          <PipelineAddButton />
        </RecoilScope>
-      </BoardOptionsContext.Provider>
-    </WithTopBarContainer>
+      </PageHeader>
+      <PageBody>
+        <BoardOptionsContext.Provider value={opportunitiesBoardOptions}>
+          <RecoilScope SpecificContext={CompanyBoardRecoilScopeContext}>
+            <HooksCompanyBoard orderBy={orderBy} />
+            <EntityBoard
+              boardOptions={opportunitiesBoardOptions}
+              updateSorts={updateSorts}
+              onEditColumnTitle={handleEditColumnTitle}
+            />
+            <EntityBoardActionBar />
+            <EntityBoardContextMenu />
+          </RecoilScope>
+        </BoardOptionsContext.Provider>
+      </PageBody>
+    </PageContainer>
  );
 }
--- a/front/src/pages/opportunities/stories/Opportunities.stories.tsx
+++ b/front/src/pages/opportunities/stories/Opportunities.stories.tsx
@ -31,3 +31,55 @@ export const Default: Story = {
    await canvas.findByText('All opportunities');
  },
 };
+
+export const AddCompanyFromHeader: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Click on the add company button', async () => {
+      const button = await canvas.findByTestId('add-company-progress-button');
+
+      await button.click();
+
+      await canvas.findByText('Algolia');
+    });
+
+    await step('Change pipeline stage', async () => {
+      const dropdownMenu = within(
+        await canvas.findByTestId('company-progress-dropdown-menu'),
+      );
+
+      const pipelineStageButton = await canvas.findByTestId(
+        'selected-pipeline-stage',
+      );
+
+      await pipelineStageButton.click();
+
+      const menuItem1 = await canvas.findByTestId('select-pipeline-stage-1');
+
+      await menuItem1.click();
+
+      await dropdownMenu.findByText('Screening');
+    });
+
+    await step('Change pipeline stage', async () => {
+      const dropdownMenu = within(
+        await canvas.findByTestId('company-progress-dropdown-menu'),
+      );
+
+      const pipelineStageButton = await canvas.findByTestId(
+        'selected-pipeline-stage',
+      );
+
+      await pipelineStageButton.click();
+
+      const menuItem1 = await canvas.findByTestId('select-pipeline-stage-1');
+
+      await menuItem1.click();
+
+      await dropdownMenu.findByText('Screening');
+    });
+
+    // TODO: mock add company mutation and add step for company creation
+  },
+};
--- a/front/src/pages/opportunities/opportunitiesBoardOptions.tsx
+++ b/front/src/pages/opportunities/opportunitiesBoardOptions.tsx
@ -1,17 +1,12 @@
 import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
 import { NewCompanyProgressButton } from '@/companies/components/NewCompanyProgressButton';
 import { BoardOptions } from '@/ui/board/types/BoardOptions';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';

 import { opportunitiesFilters } from './opportunities-filters';
 import { opportunitiesSorts } from './opportunities-sorts';

 export const opportunitiesBoardOptions: BoardOptions = {
-  newCardComponent: (
-    <RecoilScope>
-      <NewCompanyProgressButton />
-    </RecoilScope>
-  ),
+  newCardComponent: <NewCompanyProgressButton />,
  cardComponent: <CompanyBoardCard />,
  filters: opportunitiesFilters,
  sorts: opportunitiesSorts,