Refactor/scope and context (#1960)

* wip

* Test with Dropdown

* wip

* wip

* Finished removing DropdownRecoilScopeContext

* Fix from PR

front/src/modules/ui/board/components/BoardHeader.tsx

@@ -3,8 +3,6 @@ import { useSearchParams } from 'react-router-dom';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 
 import { BoardContext } from '@/companies/states/contexts/BoardContext';
-import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
@@ -19,8 +17,8 @@ import { savedBoardColumnsState } from '../states/savedBoardColumnsState';
 import { canPersistBoardCardFieldsScopedFamilySelector } from '../states/selectors/canPersistBoardCardFieldsScopedFamilySelector';
 import { canPersistBoardColumnsSelector } from '../states/selectors/canPersistBoardColumnsSelector';
 import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
-import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
 import { BoardOptionsHotkeyScope } from '../types/BoardOptionsHotkeyScope';
+import { BoardScopeIds } from '../types/enums/BoardScopeIds';
 
 import { BoardOptionsDropdown } from './BoardOptionsDropdown';
 
@@ -101,27 +99,25 @@ export const BoardHeader = ({ className, onStageAdd }: BoardHeaderProps) => {
   const canPersistView = canPersistBoardCardFields || canPersistBoardColumns;
 
   return (
-    <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
-      <ViewBarContext.Provider
-        value={{
-          ...viewBarContextProps,
-          canPersistViewFields: canPersistView,
-          onCurrentViewSubmit: handleCurrentViewSubmit,
-          onViewBarReset: handleViewBarReset,
-          onViewSelect: handleViewSelect,
-        }}
-      >
-        <ViewBar
-          className={className}
-          optionsDropdownButton={
-            <BoardOptionsDropdown
-              customHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }}
-              onStageAdd={onStageAdd}
-            />
-          }
-          optionsDropdownKey={BoardOptionsDropdownKey}
-        />
-      </ViewBarContext.Provider>
-    </RecoilScope>
+    <ViewBarContext.Provider
+      value={{
+        ...viewBarContextProps,
+        canPersistViewFields: canPersistView,
+        onCurrentViewSubmit: handleCurrentViewSubmit,
+        onViewBarReset: handleViewBarReset,
+        onViewSelect: handleViewSelect,
+      }}
+    >
+      <ViewBar
+        className={className}
+        optionsDropdownButton={
+          <BoardOptionsDropdown
+            customHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }}
+            onStageAdd={onStageAdd}
+          />
+        }
+        optionsDropdownScopeId={BoardScopeIds.OptionsDropdown}
+      />
+    </ViewBarContext.Provider>
   );
 };

front/src/modules/ui/board/components/BoardOptionsDropdown.tsx

@@ -3,7 +3,7 @@ import { useResetRecoilState } from 'recoil';
 import { ViewBarDropdownButton } from '@/ui/view-bar/components/ViewBarDropdownButton';
 import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
 
-import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
+import { BoardScopeIds } from '../types/enums/BoardScopeIds';
 
 import { BoardOptionsDropdownButton } from './BoardOptionsDropdownButton';
 import {
@@ -32,7 +32,7 @@ export const BoardOptionsDropdown = ({
         />
       }
       dropdownHotkeyScope={customHotkeyScope}
-      dropdownId={BoardOptionsDropdownKey}
+      dropdownId={BoardScopeIds.OptionsDropdown}
       onClickOutside={resetViewEditMode}
     />
   );

front/src/modules/ui/board/components/BoardOptionsDropdownButton.tsx

@@ -1,11 +1,11 @@
 import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 
-import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
+import { BoardScopeIds } from '../types/enums/BoardScopeIds';
 
 export const BoardOptionsDropdownButton = () => {
   const { isDropdownOpen, toggleDropdown } = useDropdown({
-    dropdownId: BoardOptionsDropdownKey,
+    dropdownScopeId: BoardScopeIds.OptionsDropdown,
   });
 
   const handleClick = () => {

front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx

@@ -43,7 +43,6 @@ import { savedBoardCardFieldsFamilyState } from '../states/savedBoardCardFieldsF
 import { hiddenBoardCardFieldsScopedSelector } from '../states/selectors/hiddenBoardCardFieldsScopedSelector';
 import { visibleBoardCardFieldsScopedSelector } from '../states/selectors/visibleBoardCardFieldsScopedSelector';
 import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
-import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
 
 export type BoardOptionsDropdownContentProps = {
   customHotkeyScope: HotkeyScope;
@@ -144,9 +143,7 @@ export const BoardOptionsDropdownContent = ({
 
   const { handleFieldVisibilityChange } = useBoardCardFields();
 
-  const { closeDropdown } = useDropdown({
-    dropdownId: BoardOptionsDropdownKey,
-  });
+  const { closeDropdown } = useDropdown();
 
   useScopedHotkeys(
     Key.Escape,

front/src/modules/ui/board/components/__stories__/BoardOptionsDropdown.stories.tsx

@@ -3,8 +3,6 @@ import { userEvent, within } from '@storybook/testing-library';
 
 import { BoardContext } from '@/companies/states/contexts/BoardContext';
 import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
-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 { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
@@ -26,9 +24,7 @@ const meta: Meta<typeof BoardOptionsDropdown> = {
             ViewBarRecoilScopeContext: parameters.customRecoilScopeContext,
           }}
         >
-          <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
-            <Story />
-          </RecoilScope>
+          <Story />
         </ViewBarContext.Provider>
       </BoardContext.Provider>
     ),