Refactor/scope and context (#1960)

* wip

* Test with Dropdown

* wip

* wip

* Finished removing DropdownRecoilScopeContext

* Fix from PR

front/src/modules/ui/view-bar/components/AddFilterFromDetailsButton.tsx

@@ -6,7 +6,7 @@ import { FilterDropdownId } from '../constants/FilterDropdownId';
 
 export const AddFilterFromDropdownButton = () => {
   const { toggleDropdown } = useDropdown({
-    dropdownId: FilterDropdownId,
+    dropdownScopeId: FilterDropdownId,
   });
 
   const handleClick = () => {

front/src/modules/ui/view-bar/components/MultipleFiltersButton.tsx

@@ -13,7 +13,7 @@ export const MultipleFiltersButton = () => {
   const { ViewBarRecoilScopeContext } = useViewBarContext();
 
   const { isDropdownOpen, toggleDropdown } = useDropdown({
-    dropdownId: FilterDropdownId,
+    dropdownScopeId: FilterDropdownId,
   });
 
   const [, setIsFilterDropdownOperandSelectUnfolded] = useRecoilScopedState(

front/src/modules/ui/view-bar/components/SingleEntityFilterDropdownButton.tsx

@@ -1,22 +1,19 @@
 import React from 'react';
 import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
 
+import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { DropdownMenuContainer } from '@/ui/dropdown/components/DropdownMenuContainer';
-import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
-import { IconChevronDown } from '@/ui/icon';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
+import { DropdownScope } from '@/ui/dropdown/scopes/DropdownScope';
+import { IconChevronDown } from '@/ui/icon/index';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { filterDefinitionUsedInDropdownScopedState } from '@/ui/view-bar/states/filterDefinitionUsedInDropdownScopedState';
-import { filterDropdownSearchInputScopedState } from '@/ui/view-bar/states/filterDropdownSearchInputScopedState';
 import { selectedOperandInDropdownScopedState } from '@/ui/view-bar/states/selectedOperandInDropdownScopedState';
 
-import { StyledHeaderDropdownButton } from '../../dropdown/components/StyledHeaderDropdownButton';
 import { useViewBarContext } from '../hooks/useViewBarContext';
 import { availableFiltersScopedState } from '../states/availableFiltersScopedState';
 import { filtersScopedState } from '../states/filtersScopedState';
-import { isFilterDropdownUnfoldedScopedState } from '../states/isFilterDropdownUnfoldedScopedState';
 import { FilterOperand } from '../types/FilterOperand';
 import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
 
@@ -24,19 +21,11 @@ import { FilterDropdownEntitySearchInput } from './FilterDropdownEntitySearchInp
 import { FilterDropdownEntitySelect } from './FilterDropdownEntitySelect';
 import { GenericEntityFilterChip } from './GenericEntityFilterChip';
 
-const StyledDropdownButtonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  position: relative;
-`;
-
 export const SingleEntityFilterDropdownButton = ({
   hotkeyScope,
 }: {
   hotkeyScope: HotkeyScope;
 }) => {
-  const theme = useTheme();
-
   const { ViewBarRecoilScopeContext } = useViewBarContext();
 
   const [availableFilters] = useRecoilScopedState(
@@ -45,12 +34,6 @@ export const SingleEntityFilterDropdownButton = ({
   );
   const availableFilter = availableFilters[0];
 
-  const [isFilterDropdownUnfolded, setIsFilterDropdownUnfolded] =
-    useRecoilScopedState(
-      isFilterDropdownUnfoldedScopedState,
-      DropdownRecoilScopeContext,
-    );
-
   const [filters] = useRecoilScopedState(
     filtersScopedState,
     ViewBarRecoilScopeContext,
@@ -61,11 +44,6 @@ export const SingleEntityFilterDropdownButton = ({
     ViewBarRecoilScopeContext,
   );
 
-  const [, setFilterDropdownSearchInput] = useRecoilScopedState(
-    filterDropdownSearchInputScopedState,
-    ViewBarRecoilScopeContext,
-  );
-
   const [, setSelectedOperandInDropdown] = useRecoilScopedState(
     selectedOperandInDropdownScopedState,
     ViewBarRecoilScopeContext,
@@ -81,45 +59,37 @@ export const SingleEntityFilterDropdownButton = ({
     setSelectedOperandInDropdown,
   ]);
 
-  const setHotkeyScope = useSetHotkeyScope();
-
-  const handleIsUnfoldedChange = (newIsUnfolded: boolean) => {
-    if (newIsUnfolded) {
-      setHotkeyScope(hotkeyScope.scope, hotkeyScope.customScopes);
-      setIsFilterDropdownUnfolded(true);
-    } else {
-      setHotkeyScope(hotkeyScope.scope, hotkeyScope.customScopes);
-      setIsFilterDropdownUnfolded(false);
-      setFilterDropdownSearchInput('');
-    }
-  };
+  const theme = useTheme();
 
   return (
-    <StyledDropdownButtonContainer data-select-disable>
-      <StyledHeaderDropdownButton
-        isUnfolded={isFilterDropdownUnfolded}
-        onClick={() => handleIsUnfoldedChange(!isFilterDropdownUnfolded)}
-      >
-        {filters[0] ? (
-          <GenericEntityFilterChip
-            filter={filters[0]}
-            Icon={
-              filters[0].operand === FilterOperand.IsNotNull
-                ? availableFilter.SelectAllIcon
-                : undefined
-            }
-          />
-        ) : (
-          'Filter'
-        )}
-        <IconChevronDown size={theme.icon.size.md} />
-      </StyledHeaderDropdownButton>
-      {isFilterDropdownUnfolded && (
-        <DropdownMenuContainer onClose={() => handleIsUnfoldedChange(false)}>
-          <FilterDropdownEntitySearchInput />
-          <FilterDropdownEntitySelect />
-        </DropdownMenuContainer>
-      )}
-    </StyledDropdownButtonContainer>
+    <DropdownScope dropdownScopeId="single-entity-filter-dropdown">
+      <DropdownMenu
+        dropdownHotkeyScope={hotkeyScope}
+        dropdownOffset={{ x: 0, y: -28 }}
+        clickableComponent={
+          <StyledHeaderDropdownButton>
+            {filters[0] ? (
+              <GenericEntityFilterChip
+                filter={filters[0]}
+                Icon={
+                  filters[0].operand === FilterOperand.IsNotNull
+                    ? availableFilter.SelectAllIcon
+                    : undefined
+                }
+              />
+            ) : (
+              'Filter'
+            )}
+            <IconChevronDown size={theme.icon.size.md} />
+          </StyledHeaderDropdownButton>
+        }
+        dropdownComponents={
+          <DropdownMenuContainer>
+            <FilterDropdownEntitySearchInput />
+            <FilterDropdownEntitySelect />
+          </DropdownMenuContainer>
+        }
+      />
+    </DropdownScope>
   );
 };

front/src/modules/ui/view-bar/components/SortDropdownButton.tsx

@@ -55,7 +55,7 @@ export const SortDropdownButton = ({
   const isSortSelected = sorts.length > 0;
 
   const { toggleDropdown } = useDropdown({
-    dropdownId: SortDropdownId,
+    dropdownScopeId: SortDropdownId,
   });
 
   const handleButtonClick = () => {

front/src/modules/ui/view-bar/components/ViewBar.tsx

@@ -15,16 +15,16 @@ import { ViewsDropdownButton } from './ViewsDropdownButton';
 export type ViewBarProps = {
   className?: string;
   optionsDropdownButton: ReactNode;
-  optionsDropdownKey: string;
+  optionsDropdownScopeId: string;
 };
 
 export const ViewBar = ({
   className,
   optionsDropdownButton,
-  optionsDropdownKey,
+  optionsDropdownScopeId,
 }: ViewBarProps) => {
   const { openDropdown: openOptionsDropdownButton } = useDropdown({
-    dropdownId: optionsDropdownKey,
+    dropdownScopeId: optionsDropdownScopeId,
   });
 
   return (

front/src/modules/ui/view-bar/components/ViewBarDropdownButton.tsx

@@ -2,6 +2,7 @@ import { Keys } from 'react-hotkeys-hook';
 import { Placement } from '@floating-ui/react';
 
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
+import { DropdownScope } from '@/ui/dropdown/scopes/DropdownScope';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 type ViewBarDropdownButtonProps = {
@@ -31,17 +32,18 @@ export const ViewBarDropdownButton = ({
   onOpen,
 }: ViewBarDropdownButtonProps) => {
   return (
-    <DropdownMenu
-      clickableComponent={buttonComponent}
-      dropdownComponents={dropdownComponents}
-      dropdownId={dropdownId}
-      hotkey={hotkey}
-      dropdownHotkeyScope={dropdownHotkeyScope}
-      dropdownOffset={{ x: 0, y: 8 }}
-      dropdownPlacement={dropdownPlacement}
-      onClickOutside={onClickOutside}
-      onClose={onClose}
-      onOpen={onOpen}
-    />
+    <DropdownScope dropdownScopeId={dropdownId}>
+      <DropdownMenu
+        clickableComponent={buttonComponent}
+        dropdownComponents={dropdownComponents}
+        hotkey={hotkey}
+        dropdownHotkeyScope={dropdownHotkeyScope}
+        dropdownOffset={{ x: 0, y: 8 }}
+        dropdownPlacement={dropdownPlacement}
+        onClickOutside={onClickOutside}
+        onClose={onClose}
+        onOpen={onOpen}
+      />
+    </DropdownScope>
   );
 };

front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx

@@ -105,7 +105,7 @@ export const ViewsDropdownButton = ({
   );
 
   const { isDropdownOpen, closeDropdown } = useDropdown({
-    dropdownId: ViewsDropdownId,
+    dropdownScopeId: ViewsDropdownId,
   });
 
   const setViewEditMode = useSetRecoilState(viewEditModeState);