Refactor/context and scopes (#1602)

* Put onImport in a context

* Refactored RecoilScopeContexts

* Refactored naming

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/pages/companies/Companies.tsx

@@ -58,7 +58,7 @@ export function Companies() {
     <SpreadsheetImportProvider>
       <PageContainer>
         <PageHeader title="Companies" Icon={IconBuildingSkyscraper}>
-          <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+          <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
             <PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
             <PageAddButton onClick={handleAddButtonClick} />
           </RecoilScope>
@@ -66,7 +66,7 @@ export function Companies() {
         <PageBody>
           <RecoilScope
             scopeId="companies"
-            SpecificContext={TableRecoilScopeContext}
+            CustomRecoilScopeContext={TableRecoilScopeContext}
           >
             <StyledTableContainer>
               <CompanyTable />

front/src/pages/companies/CompaniesMockMode.tsx

@@ -18,7 +18,7 @@ export function CompaniesMockMode() {
     <PageContainer>
       <PageHeader title="Companies" Icon={IconBuildingSkyscraper} />
       <PageBody>
-        <RecoilScope SpecificContext={TableRecoilScopeContext}>
+        <RecoilScope CustomRecoilScopeContext={TableRecoilScopeContext}>
           <StyledTableContainer>
             <CompanyTableMockMode />
           </StyledTableContainer>

front/src/pages/companies/CompanyShow.tsx

@@ -63,7 +63,7 @@ export function CompanyShow() {
         hasBackButton
         Icon={IconBuildingSkyscraper}
       >
-        <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+        <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
           <PageFavoriteButton
             isFavorite={isFavorite}
             onClick={handleFavoriteButtonClick}
@@ -78,7 +78,7 @@ export function CompanyShow() {
         </RecoilScope>
       </PageHeader>
       <PageBody>
-        <RecoilScope SpecificContext={ShowPageRecoilScopeContext}>
+        <RecoilScope CustomRecoilScopeContext={ShowPageRecoilScopeContext}>
           <ShowPageContainer>
             <ShowPageLeftContainer>
               <ShowPageSummaryCard

front/src/pages/opportunities/Opportunities.tsx

@@ -44,7 +44,7 @@ export function Opportunities() {
     <PageContainer>
       <RecoilScope>
         <PageHeader title="Opportunities" Icon={IconTargetArrow}>
-          <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+          <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
             <PipelineAddButton />
           </RecoilScope>
         </PageHeader>
@@ -52,7 +52,7 @@ export function Opportunities() {
           <BoardOptionsContext.Provider value={opportunitiesBoardOptions}>
             <RecoilScope
               scopeId="opportunities"
-              SpecificContext={CompanyBoardRecoilScopeContext}
+              CustomRecoilScopeContext={CompanyBoardRecoilScopeContext}
             >
               <CompanyBoard
                 onColumnAdd={handlePipelineStageAdd}

front/src/pages/opportunities/opportunities-filters.tsx

@@ -1,5 +1,4 @@
 import { FilterDropdownCompanySearchSelect } from '@/companies/components/FilterDropdownCompanySearchSelect';
-import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
@@ -30,21 +29,13 @@ export const opportunitiesFilters: FilterDefinitionByEntity<PipelineProgress>[]
       label: 'Company',
       Icon: IconBuildingSkyscraper,
       type: 'entity',
-      entitySelectComponent: (
-        <FilterDropdownCompanySearchSelect
-          context={CompanyBoardRecoilScopeContext}
-        />
-      ),
+      entitySelectComponent: <FilterDropdownCompanySearchSelect />,
     },
     {
       key: 'pointOfContactId',
       label: 'Point of contact',
       Icon: IconUser,
       type: 'entity',
-      entitySelectComponent: (
-        <FilterDropdownPeopleSearchSelect
-          context={CompanyBoardRecoilScopeContext}
-        />
-      ),
+      entitySelectComponent: <FilterDropdownPeopleSearchSelect />,
     },
   ];

front/src/pages/people/People.tsx

@@ -54,7 +54,7 @@ export function People() {
     <SpreadsheetImportProvider>
       <PageContainer>
         <PageHeader title="People" Icon={IconUser}>
-          <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+          <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
             <PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
             <PageAddButton onClick={handleAddButtonClick} />
           </RecoilScope>
@@ -62,7 +62,7 @@ export function People() {
         <PageBody>
           <RecoilScope
             scopeId="people"
-            SpecificContext={TableRecoilScopeContext}
+            CustomRecoilScopeContext={TableRecoilScopeContext}
           >
             <StyledTableContainer>
               <PeopleTable />

front/src/pages/people/PersonShow.tsx

@@ -78,7 +78,7 @@ export function PersonShow() {
     <PageContainer>
       <PageTitle title={person.displayName || 'No Name'} />
       <PageHeader title={person.firstName ?? ''} Icon={IconUser} hasBackButton>
-        <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+        <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
           <PageFavoriteButton
             isFavorite={isFavorite}
             onClick={handleFavoriteButtonClick}
@@ -101,7 +101,7 @@ export function PersonShow() {
         </RecoilScope>
       </PageHeader>
       <PageBody>
-        <RecoilScope SpecificContext={ShowPageRecoilScopeContext}>
+        <RecoilScope CustomRecoilScopeContext={ShowPageRecoilScopeContext}>
           <ShowPageContainer>
             <ShowPageLeftContainer>
               <ShowPageSummaryCard

front/src/pages/people/people-filters.tsx

@@ -7,7 +7,6 @@ import {
   IconPhone,
   IconUser,
 } from '@/ui/icon/index';
-import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
 import { Person } from '~/generated/graphql';
 
@@ -35,9 +34,8 @@ export const peopleFilters: FilterDefinitionByEntity<Person>[] = [
     label: 'Company',
     Icon: IconBuildingSkyscraper,
     type: 'entity',
-    entitySelectComponent: (
-      <FilterDropdownCompanySearchSelect context={TableRecoilScopeContext} />
-    ),
+    // TODO: replace this with a component that selects the dropdown to use based on the entity type
+    entitySelectComponent: <FilterDropdownCompanySearchSelect />,
   },
   {
     key: 'phone',

front/src/pages/tasks/Tasks.tsx

@@ -13,6 +13,7 @@ import { TabList } from '@/ui/tab/components/TabList';
 import { TopBar } from '@/ui/top-bar/TopBar';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { FilterDropdownButton } from '@/ui/view-bar/components/FilterDropdownButton';
+import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
 
 import { TasksEffect } from './TasksEffect';
 
@@ -47,35 +48,41 @@ export function Tasks() {
 
   return (
     <PageContainer>
-      <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
-        <RecoilScope SpecificContext={TasksRecoilScopeContext}>
+      <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
+        <RecoilScope CustomRecoilScopeContext={TasksRecoilScopeContext}>
           <TasksEffect />
           <PageHeader title="Tasks" Icon={IconCheckbox}>
             <PageAddTaskButton />
           </PageHeader>
           <PageBody>
-            <StyledTasksContainer>
-              <TopBar
-                leftComponent={
-                  <StyledTabListContainer>
-                    <TabList
-                      context={TasksRecoilScopeContext}
-                      tabs={TASK_TABS}
+            {/* TODO: we should refactor filters as a standalone module ? */}
+            <ViewBarContext.Provider
+              value={{
+                ViewBarRecoilScopeContext: TasksRecoilScopeContext,
+              }}
+            >
+              <StyledTasksContainer>
+                <TopBar
+                  leftComponent={
+                    <StyledTabListContainer>
+                      <TabList
+                        context={TasksRecoilScopeContext}
+                        tabs={TASK_TABS}
+                      />
+                    </StyledTabListContainer>
+                  }
+                  rightComponent={
+                    <FilterDropdownButton
+                      key="tasks-filter-dropdown-button"
+                      hotkeyScope={{
+                        scope: RelationPickerHotkeyScope.RelationPicker,
+                      }}
                     />
-                  </StyledTabListContainer>
-                }
-                rightComponent={
-                  <FilterDropdownButton
-                    key="tasks-filter-dropdown-button"
-                    context={TasksRecoilScopeContext}
-                    hotkeyScope={{
-                      scope: RelationPickerHotkeyScope.RelationPicker,
-                    }}
-                  />
-                }
-              />
-              <TaskGroups />
-            </StyledTasksContainer>
+                  }
+                />
+                <TaskGroups />
+              </StyledTasksContainer>
+            </ViewBarContext.Provider>
           </PageBody>
         </RecoilScope>
       </RecoilScope>