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/modules/ui/table/options/components/TableOptionsDropdown.tsx

@@ -10,12 +10,10 @@ import { TableOptionsDropdownButton } from './TableOptionsDropdownButton';
 import { TableOptionsDropdownContent } from './TableOptionsDropdownContent';
 
 type TableOptionsDropdownProps = {
-  onImport?: () => void;
   customHotkeyScope: HotkeyScope;
 };
 
 export function TableOptionsDropdown({
-  onImport,
   customHotkeyScope,
 }: TableOptionsDropdownProps) {
   const resetViewEditMode = useResetRecoilState(viewEditModeState);
@@ -25,7 +23,7 @@ export function TableOptionsDropdown({
       buttonComponents={<TableOptionsDropdownButton />}
       dropdownHotkeyScope={customHotkeyScope}
       dropdownId={TableOptionsDropdownId}
-      dropdownComponents={<TableOptionsDropdownContent onImport={onImport} />}
+      dropdownComponents={<TableOptionsDropdownContent />}
       onClickOutside={resetViewEditMode}
     />
   );

front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useContext, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilValue, useResetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
@@ -13,9 +13,10 @@ import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { rgba } from '@/ui/theme/constants/colors';
 import { textInputStyle } from '@/ui/theme/constants/effects';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
 import { ViewFieldsVisibilityDropdownSection } from '@/ui/view-bar/components/ViewFieldsVisibilityDropdownSection';
+import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
 import { useUpsertView } from '@/ui/view-bar/hooks/useUpsertView';
 import { currentViewScopedSelector } from '@/ui/view-bar/states/selectors/currentViewScopedSelector';
 import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector';
@@ -30,10 +31,6 @@ import { visibleTableColumnsScopedSelector } from '../../states/selectors/visibl
 import { tableColumnsScopedState } from '../../states/tableColumnsScopedState';
 import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
 
-type TableOptionsDropdownButtonProps = {
-  onImport?: () => void;
-};
-
 type TableOptionsMenu = 'fields';
 
 const StyledInputContainer = styled.div`
@@ -59,11 +56,10 @@ const StyledViewNameInput = styled.input`
   }
 `;
 
-export function TableOptionsDropdownContent({
-  onImport,
-}: TableOptionsDropdownButtonProps) {
-  const scopeId = useContextScopeId(TableRecoilScopeContext);
+export function TableOptionsDropdownContent() {
+  const scopeId = useRecoilScopeId(TableRecoilScopeContext);
 
+  const { onImport } = useContext(ViewBarContext);
   const { closeDropdownButton } = useDropdownButton({
     dropdownId: TableOptionsDropdownId,
   });
@@ -95,9 +91,7 @@ export function TableOptionsDropdownContent({
 
   const { handleColumnVisibilityChange } = useTableColumns();
 
-  const { upsertView } = useUpsertView({
-    scopeContext: TableRecoilScopeContext,
-  });
+  const { upsertView } = useUpsertView();
 
   const handleViewNameSubmit = useRecoilCallback(
     ({ set, snapshot }) =>

front/src/modules/ui/table/options/components/__stories__/TableOptionsDropdown.stories.tsx

@@ -3,6 +3,7 @@ import { userEvent, within } from '@storybook/testing-library';
 
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { TableRecoilScopeContext } from '../../../states/recoil-scope-contexts/TableRecoilScopeContext';
@@ -13,10 +14,16 @@ const meta: Meta<typeof TableOptionsDropdown> = {
   component: TableOptionsDropdown,
   decorators: [
     (Story) => (
-      <RecoilScope SpecificContext={TableRecoilScopeContext}>
-        <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
-          <Story />
-        </RecoilScope>
+      <RecoilScope CustomRecoilScopeContext={TableRecoilScopeContext}>
+        <ViewBarContext.Provider
+          value={{
+            ViewBarRecoilScopeContext: TableRecoilScopeContext,
+          }}
+        >
+          <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
+            <Story />
+          </RecoilScope>
+        </ViewBarContext.Provider>
       </RecoilScope>
     ),
     ComponentDecorator,