Clean up object record filter (#9550)

Last clean up of object dropdown filter states v1. 

Removed old state scope context component.

packages/twenty-front/src/modules/activities/tasks/components/ObjectTasks.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
+import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -19,9 +19,11 @@ export const ObjectTasks = ({
 }) => {
   return (
     <StyledContainer>
-      <ObjectFilterDropdownScope filterScopeId="entity-tasks-filter-scope">
+      <ObjectFilterDropdownComponentInstanceContext.Provider
+        value={{ instanceId: 'entity-tasks-filter-scope' }}
+      >
         <TaskGroups targetableObjects={[targetableObject]} />
-      </ObjectFilterDropdownScope>
+      </ObjectFilterDropdownComponentInstanceContext.Provider>
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskGroups.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
+import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
@@ -15,9 +15,11 @@ const meta: Meta<typeof TaskGroups> = {
   component: TaskGroups,
   decorators: [
     (Story) => (
-      <ObjectFilterDropdownScope filterScopeId="entity-tasks-filter-scope">
+      <ObjectFilterDropdownComponentInstanceContext.Provider
+        value={{ instanceId: 'entity-tasks-filter-scope' }}
+      >
         <Story />
-      </ObjectFilterDropdownScope>
+      </ObjectFilterDropdownComponentInstanceContext.Provider>
     ),
     ComponentWithRouterDecorator,
     ComponentWithRecoilScopeDecorator,

packages/twenty-front/src/modules/activities/tasks/hooks/__tests__/useTasks.test.tsx

@@ -4,7 +4,7 @@ import { RecoilRoot } from 'recoil';
 
 import { useActivities } from '@/activities/hooks/useActivities';
 import { useTasks } from '@/activities/tasks/hooks/useTasks';
-import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
+import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
 
 const tasks = [
   {
@@ -46,9 +46,11 @@ jest.mock('@/activities/hooks/useActivities', () => ({
 
 const Wrapper = ({ children }: { children: ReactNode }) => (
   <RecoilRoot>
-    <ObjectFilterDropdownScope filterScopeId="entity-tasks-filter-scope">
+    <ObjectFilterDropdownComponentInstanceContext.Provider
+      value={{ instanceId: 'entity-tasks-filter-scope' }}
+    >
       {children}
-    </ObjectFilterDropdownScope>
+    </ObjectFilterDropdownComponentInstanceContext.Provider>
   </RecoilRoot>
 );
 

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilter.tsx

@@ -2,7 +2,7 @@ import { AdvancedFilterViewFilterFieldSelect } from '@/object-record/advanced-fi
 import { AdvancedFilterViewFilterOperandSelect } from '@/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect';
 import { AdvancedFilterViewFilterValueInput } from '@/object-record/advanced-filter/components/AdvancedFilterViewFilterValueInput';
 import { useCurrentViewFilter } from '@/object-record/advanced-filter/hooks/useCurrentViewFilter';
-import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
+import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
 import { configurableViewFilterOperands } from '@/object-record/object-filter-dropdown/utils/configurableViewFilterOperands';
 import styled from '@emotion/styled';
 
@@ -32,7 +32,9 @@ export const AdvancedFilterViewFilter = ({
   }
 
   return (
-    <ObjectFilterDropdownScope filterScopeId={filter.id}>
+    <ObjectFilterDropdownComponentInstanceContext.Provider
+      value={{ instanceId: filter.id }}
+    >
       <StyledRow>
         <AdvancedFilterViewFilterFieldSelect viewFilterId={filter.id} />
         <AdvancedFilterViewFilterOperandSelect viewFilterId={filter.id} />
@@ -42,6 +44,6 @@ export const AdvancedFilterViewFilter = ({
           )}
         </StyledValueDropdownContainer>
       </StyledRow>
-    </ObjectFilterDropdownScope>
+    </ObjectFilterDropdownComponentInstanceContext.Provider>
   );
 };

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownButton.tsx

@@ -1,4 +1,3 @@
-import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
@@ -33,13 +32,11 @@ export const ObjectFilterDropdownButton = ({
     <ObjectFilterDropdownComponentInstanceContext.Provider
       value={{ instanceId: filterDropdownId }}
     >
-      <ObjectFilterDropdownScope filterScopeId={filterDropdownId}>
+      {hasOnlyOneEntityFilter ? (
-        {hasOnlyOneEntityFilter ? (
+        <SingleEntityObjectFilterDropdownButton hotkeyScope={hotkeyScope} />
-          <SingleEntityObjectFilterDropdownButton hotkeyScope={hotkeyScope} />
+      ) : (
-        ) : (
+        <MultipleFiltersDropdownButton hotkeyScope={hotkeyScope} />
-          <MultipleFiltersDropdownButton hotkeyScope={hotkeyScope} />
+      )}
-        )}
-      </ObjectFilterDropdownScope>
     </ObjectFilterDropdownComponentInstanceContext.Provider>
   );
 };

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx

@@ -4,7 +4,6 @@ import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
 import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
-import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
 import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
@@ -115,9 +114,7 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
               value={{ instanceId: instanceId, onColumnsChange: () => {} }}
             >
               <ViewComponentInstanceContext.Provider value={{ instanceId }}>
-                <ObjectFilterDropdownScope filterScopeId={instanceId}>
+                <Story />
-                  <Story />
-                </ObjectFilterDropdownScope>
               </ViewComponentInstanceContext.Provider>
             </RecordTableComponentInstanceContext.Provider>
           </ObjectFilterDropdownComponentInstanceContext.Provider>

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdownStates.ts

@@ -1,66 +0,0 @@
-import { advancedFilterViewFilterGroupIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterGroupIdComponentState';
-import { advancedFilterViewFilterIdComponentState } from '@/object-record/object-filter-dropdown/states/advancedFilterViewFilterIdComponentState';
-import { filterDefinitionUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownComponentState';
-import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
-import { objectFilterDropdownSelectedOptionValuesComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesComponentState';
-import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState';
-import { onFilterSelectComponentState } from '@/object-record/object-filter-dropdown/states/onFilterSelectComponentState';
-import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState';
-import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
-
-export const useFilterDropdownStates = (componentInstanceId: string) => {
-  const filterDefinitionUsedInDropdownState =
-    filterDefinitionUsedInDropdownComponentState.atomFamily({
-      instanceId: componentInstanceId,
-    });
-
-  const objectFilterDropdownSearchInputState =
-    objectFilterDropdownSearchInputComponentState.atomFamily({
-      instanceId: componentInstanceId,
-    });
-
-  const objectFilterDropdownSelectedRecordIdsState =
-    objectFilterDropdownSelectedRecordIdsComponentState.atomFamily({
-      instanceId: componentInstanceId,
-    });
-
-  const objectFilterDropdownSelectedOptionValuesState =
-    objectFilterDropdownSelectedOptionValuesComponentState.atomFamily({
-      instanceId: componentInstanceId,
-    });
-
-  const selectedFilterState = selectedFilterComponentState.atomFamily({
-    instanceId: componentInstanceId,
-  });
-
-  const selectedOperandInDropdownState =
-    selectedOperandInDropdownComponentState.atomFamily({
-      instanceId: componentInstanceId,
-    });
-
-  const onFilterSelectState = onFilterSelectComponentState.atomFamily({
-    instanceId: componentInstanceId,
-  });
-
-  const advancedFilterViewFilterGroupIdState =
-    advancedFilterViewFilterGroupIdComponentState.atomFamily({
-      instanceId: componentInstanceId,
-    });
-
-  const advancedFilterViewFilterIdState =
-    advancedFilterViewFilterIdComponentState.atomFamily({
-      instanceId: componentInstanceId,
-    });
-
-  return {
-    filterDefinitionUsedInDropdownState,
-    objectFilterDropdownSearchInputState,
-    objectFilterDropdownSelectedRecordIdsState,
-    objectFilterDropdownSelectedOptionValuesState,
-    selectedFilterState,
-    selectedOperandInDropdownState,
-    onFilterSelectState,
-    advancedFilterViewFilterGroupIdState,
-    advancedFilterViewFilterIdState,
-  };
-};

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown.ts

@@ -18,30 +18,37 @@ type SelectFilterParams = {
   filterDefinition: FilterDefinition;
 };
 
-export const useSelectFilterDefinitionUsedInDropdown = () => {
+export const useSelectFilterDefinitionUsedInDropdown = (
+  componentInstanceId?: string,
+) => {
   const setFilterDefinitionUsedInDropdown = useSetRecoilComponentStateV2(
     filterDefinitionUsedInDropdownComponentState,
+    componentInstanceId,
   );
 
   const setSelectedOperandInDropdown = useSetRecoilComponentStateV2(
     selectedOperandInDropdownComponentState,
+    componentInstanceId,
   );
 
   const setObjectFilterDropdownSearchInput = useSetRecoilComponentStateV2(
     objectFilterDropdownSearchInputComponentState,
+    componentInstanceId,
   );
 
   const advancedFilterViewFilterGroupId = useRecoilComponentValueV2(
     advancedFilterViewFilterGroupIdComponentState,
+    componentInstanceId,
   );
 
   const advancedFilterViewFilterId = useRecoilComponentValueV2(
     advancedFilterViewFilterIdComponentState,
+    componentInstanceId,
   );
 
   const setHotkeyScope = useSetHotkeyScope();
 
-  const { applyRecordFilter } = useApplyRecordFilter();
+  const { applyRecordFilter } = useApplyRecordFilter(componentInstanceId);
 
   const selectFilterDefinitionUsedInDropdown = ({
     filterDefinition,

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useSetFilterDefinitionUsedInDropdownInScope.ts

@@ -1,25 +0,0 @@
-import { useRecoilCallback } from 'recoil';
-import { filterDefinitionUsedInDropdownComponentState } from '../states/filterDefinitionUsedInDropdownComponentState';
-import { FilterDefinition } from '../types/FilterDefinition';
-
-export const useSetFilterDefinitionUsedInDropdownInScope = () => {
-  const setFilterDefinitionUsedInDropdownInScope = useRecoilCallback(
-    ({ set }) =>
-      (
-        componentInstanceId: string,
-        filterDefinition: FilterDefinition | null,
-      ) => {
-        const filterDefinitionUsedInDropdownState =
-          filterDefinitionUsedInDropdownComponentState.atomFamily({
-            instanceId: componentInstanceId,
-          });
-
-        set(filterDefinitionUsedInDropdownState, filterDefinition);
-      },
-    [],
-  );
-
-  return {
-    setFilterDefinitionUsedInDropdownInScope,
-  };
-};

packages/twenty-front/src/modules/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope.tsx

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-
-import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
-
-type ObjectFilterDropdownScopeProps = {
-  children: ReactNode;
-  filterScopeId: string;
-};
-
-export const ObjectFilterDropdownScope = ({
-  children,
-  filterScopeId,
-}: ObjectFilterDropdownScopeProps) => {
-  return (
-    <ObjectFilterDropdownComponentInstanceContext.Provider
-      value={{ instanceId: filterScopeId }}
-    >
-      {children}
-    </ObjectFilterDropdownComponentInstanceContext.Provider>
-  );
-};

packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleToggleColumnFilter.ts

@@ -3,7 +3,7 @@ import { v4 } from 'uuid';
 
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { useSetFilterDefinitionUsedInDropdownInScope } from '@/object-record/object-filter-dropdown/hooks/useSetFilterDefinitionUsedInDropdownInScope';
+import { useSelectFilterDefinitionUsedInDropdown } from '@/object-record/object-filter-dropdown/hooks/useSelectFilterDefinitionUsedInDropdown';
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
 import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dropdown/utils/getOperandsForFilterType';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
@@ -50,8 +50,8 @@ export const useHandleToggleColumnFilter = ({
 
   const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
 
-  const { setFilterDefinitionUsedInDropdownInScope } =
+  const { selectFilterDefinitionUsedInDropdown } =
-    useSetFilterDefinitionUsedInDropdownInScope();
+    useSelectFilterDefinitionUsedInDropdown(viewBarId);
 
   const handleToggleColumnFilter = useCallback(
     async (fieldMetadataId: string) => {
@@ -94,10 +94,7 @@ export const useHandleToggleColumnFilter = ({
 
         await upsertCombinedViewFilter(newFilter);
 
-        setFilterDefinitionUsedInDropdownInScope(
+        selectFilterDefinitionUsedInDropdown({ filterDefinition });
-          newFilter.id,
-          filterDefinition,
-        );
       }
 
       openDropdown(existingViewFilter?.id ?? newFilterId);
@@ -106,7 +103,7 @@ export const useHandleToggleColumnFilter = ({
       openDropdown,
       columnDefinitions,
       upsertCombinedViewFilter,
-      setFilterDefinitionUsedInDropdownInScope,
+      selectFilterDefinitionUsedInDropdown,
       currentViewWithCombinedFiltersAndSorts,
       availableFilterDefinitions,
     ],

packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx

@@ -3,7 +3,7 @@ import { ReactNode, useMemo } from 'react';
 
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { AddObjectFilterFromDetailsButton } from '@/object-record/object-filter-dropdown/components/AddObjectFilterFromDetailsButton';
-import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
+import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
 import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
@@ -226,9 +226,9 @@ export const ViewBarDetails = ({
             defaultViewFilters,
             availableFilterDefinitions,
           ).map((viewFilter) => (
-            <ObjectFilterDropdownScope
+            <ObjectFilterDropdownComponentInstanceContext.Provider
               key={viewFilter.id}
-              filterScopeId={viewFilter.id}
+              value={{ instanceId: viewFilter.id }}
             >
               <DropdownScope dropdownScopeId={viewFilter.id}>
                 <ViewBarFilterEffect filterDropdownId={viewFilter.id} />
@@ -240,7 +240,7 @@ export const ViewBarDetails = ({
                   viewFilterDropdownId={viewFilter.id}
                 />
               </DropdownScope>
-            </ObjectFilterDropdownScope>
+            </ObjectFilterDropdownComponentInstanceContext.Provider>
           ))}
         </StyledChipcontainer>
         {hasFilterButton && (