Refactored table filters to consume new currentRecordFilters componen…

…t state (#9652) This PR implements a first real use case, now currentRecordFilters component state acts as the global record filter reference. It is set by the view initially and can be reset to view filters state at any point. This new state is also modified by two new upsertRecordFilter / removeRecordFilter hooks that will be drop-in replacement of the actual upsertCombinedViewFilter and removeCombinediewFilter hooks. This PR implements the logic to manipulate record filters but only reads it to make the table find many request, all other features are still relying on the old view filter implementation. Advanced filters are ignored because they are hidden and because this effort is made precisely to allow the completion of the advanced filters feature.
twentyhq · Jan 23, 2025 · bddca09 · bddca09
1 parent 3ab193f
commit bddca09
Show file tree

Hide file tree

Showing 42 changed files with 1,303 additions and 302 deletions.
diff --git a/...front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx b/...front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx
@@ -10,6 +10,7 @@ import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBar
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
 import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
@@ -25,58 +26,63 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
   decorators: [
     RouterDecorator,
     (Story) => (
-      <ContextStoreComponentInstanceContext.Provider
+      <RecordFiltersComponentInstanceContext.Provider
         value={{ instanceId: 'story-action-menu' }}
       >
-        <RecoilRoot
-          initializeState={({ set }) => {
-            set(
-              contextStoreTargetedRecordsRuleComponentState.atomFamily({
-                instanceId: 'story-action-menu',
-              }),
-              {
-                mode: 'selection',
-                selectedRecordIds: ['1', '2', '3'],
-              },
-            );
-            set(
-              contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
-                instanceId: 'story-action-menu',
-              }),
-              3,
-            );
-            const map = new Map<string, ActionMenuEntry>();
-            map.set('delete', {
-              isPinned: true,
-              scope: ActionMenuEntryScope.RecordSelection,
-              type: ActionMenuEntryType.Standard,
-              key: 'delete',
-              label: 'Delete',
-              position: 0,
-              Icon: IconTrash,
-              onClick: deleteMock,
-            });
-            set(
-              actionMenuEntriesComponentState.atomFamily({
-                instanceId: 'story-action-menu',
-              }),
-              map,
-            );
-            set(
-              isBottomBarOpenedComponentState.atomFamily({
-                instanceId: getActionBarIdFromActionMenuId('story-action-menu'),
-              }),
-              true,
-            );
-          }}
+        <ContextStoreComponentInstanceContext.Provider
+          value={{ instanceId: 'story-action-menu' }}
         >
-          <ActionMenuComponentInstanceContext.Provider
-            value={{ instanceId: 'story-action-menu' }}
+          <RecoilRoot
+            initializeState={({ set }) => {
+              set(
+                contextStoreTargetedRecordsRuleComponentState.atomFamily({
+                  instanceId: 'story-action-menu',
+                }),
+                {
+                  mode: 'selection',
+                  selectedRecordIds: ['1', '2', '3'],
+                },
+              );
+              set(
+                contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
+                  instanceId: 'story-action-menu',
+                }),
+                3,
+              );
+              const map = new Map<string, ActionMenuEntry>();
+              map.set('delete', {
+                isPinned: true,
+                scope: ActionMenuEntryScope.RecordSelection,
+                type: ActionMenuEntryType.Standard,
+                key: 'delete',
+                label: 'Delete',
+                position: 0,
+                Icon: IconTrash,
+                onClick: deleteMock,
+              });
+              set(
+                actionMenuEntriesComponentState.atomFamily({
+                  instanceId: 'story-action-menu',
+                }),
+                map,
+              );
+              set(
+                isBottomBarOpenedComponentState.atomFamily({
+                  instanceId:
+                    getActionBarIdFromActionMenuId('story-action-menu'),
+                }),
+                true,
+              );
+            }}
           >
-            <Story />
-          </ActionMenuComponentInstanceContext.Provider>
-        </RecoilRoot>
-      </ContextStoreComponentInstanceContext.Provider>
+            <ActionMenuComponentInstanceContext.Provider
+              value={{ instanceId: 'story-action-menu' }}
+            >
+              <Story />
+            </ActionMenuComponentInstanceContext.Provider>
+          </RecoilRoot>
+        </ContextStoreComponentInstanceContext.Provider>
+      </RecordFiltersComponentInstanceContext.Provider>
     ),
   ],
   args: {

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
@@ -9,6 +9,7 @@ import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKey
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { workflowReactFlowRefState } from '@/workflow/workflow-diagram/states/workflowReactFlowRefState';
@@ -74,37 +75,41 @@ export const CommandMenuContainer = ({
   const theme = useTheme();
 
   return (
-    <ContextStoreComponentInstanceContext.Provider
+    <RecordFiltersComponentInstanceContext.Provider
       value={{ instanceId: 'command-menu' }}
     >
-      <ActionMenuComponentInstanceContext.Provider
+      <ContextStoreComponentInstanceContext.Provider
         value={{ instanceId: 'command-menu' }}
       >
-        <ActionMenuContext.Provider
-          value={{
-            isInRightDrawer: false,
-            onActionExecutedCallback: toggleCommandMenu,
-          }}
+        <ActionMenuComponentInstanceContext.Provider
+          value={{ instanceId: 'command-menu' }}
         >
-          <RecordActionMenuEntriesSetter />
-          {isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}
-          <ActionMenuConfirmationModals />
-          {isCommandMenuOpened && (
-            <StyledCommandMenu
-              data-testid="command-menu"
-              ref={commandMenuRef}
-              className="command-menu"
-              animate={targetVariantForAnimation}
-              initial="closed"
-              exit="closed"
-              variants={COMMAND_MENU_ANIMATION_VARIANTS}
-              transition={{ duration: theme.animation.duration.normal }}
-            >
-              {children}
-            </StyledCommandMenu>
-          )}
-        </ActionMenuContext.Provider>
-      </ActionMenuComponentInstanceContext.Provider>
-    </ContextStoreComponentInstanceContext.Provider>
+          <ActionMenuContext.Provider
+            value={{
+              isInRightDrawer: false,
+              onActionExecutedCallback: toggleCommandMenu,
+            }}
+          >
+            <RecordActionMenuEntriesSetter />
+            {isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}
+            <ActionMenuConfirmationModals />
+            {isCommandMenuOpened && (
+              <StyledCommandMenu
+                data-testid="command-menu"
+                ref={commandMenuRef}
+                className="command-menu"
+                animate={targetVariantForAnimation}
+                initial="closed"
+                exit="closed"
+                variants={COMMAND_MENU_ANIMATION_VARIANTS}
+                transition={{ duration: theme.animation.duration.normal }}
+              >
+                {children}
+              </StyledCommandMenu>
+            )}
+          </ActionMenuContext.Provider>
+        </ActionMenuComponentInstanceContext.Provider>
+      </ContextStoreComponentInstanceContext.Provider>
+    </RecordFiltersComponentInstanceContext.Provider>
   );
 };
diff --git a/...ages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx b/...ages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
@@ -19,6 +19,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
 import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter';
 import { CommandMenu } from '../CommandMenu';
@@ -29,17 +30,21 @@ const openTimeout = 50;
 
 const ContextStoreDecorator: Decorator = (Story) => {
   return (
-    <ContextStoreComponentInstanceContext.Provider
+    <RecordFiltersComponentInstanceContext.Provider
       value={{ instanceId: 'command-menu' }}
     >
-      <ActionMenuComponentInstanceContext.Provider
+      <ContextStoreComponentInstanceContext.Provider
         value={{ instanceId: 'command-menu' }}
       >
-        <JestContextStoreSetter contextStoreCurrentObjectMetadataNameSingular="company">
-          <Story />
-        </JestContextStoreSetter>
-      </ActionMenuComponentInstanceContext.Provider>
-    </ContextStoreComponentInstanceContext.Provider>
+        <ActionMenuComponentInstanceContext.Provider
+          value={{ instanceId: 'command-menu' }}
+        >
+          <JestContextStoreSetter contextStoreCurrentObjectMetadataNameSingular="company">
+            <Story />
+          </JestContextStoreSetter>
+        </ActionMenuComponentInstanceContext.Provider>
+      </ContextStoreComponentInstanceContext.Provider>
+    </RecordFiltersComponentInstanceContext.Provider>
   );
 };
 

diff --git a/packages/twenty-front/src/modules/favorites/hooks/useDeleteFavoriteFolder.ts b/packages/twenty-front/src/modules/favorites/hooks/useDeleteFavoriteFolder.ts
@@ -4,17 +4,18 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useReadFindManyRecordsQueryInCache } from '@/object-record/cache/hooks/useReadFindManyRecordsQueryInCache';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { PREFETCH_CONFIG } from '@/prefetch/constants/PrefetchConfig';
-import { usePrefetchRunQuery } from '@/prefetch/hooks/internal/usePrefetchRunQuery';
+import { useUpsertRecordsInCacheForPrefetchKey } from '@/prefetch/hooks/internal/useUpsertRecordsInCacheForPrefetchKey';
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 
 export const useDeleteFavoriteFolder = () => {
   const { deleteOneRecord } = useDeleteOneRecord({
     objectNameSingular: CoreObjectNameSingular.FavoriteFolder,
   });
 
-  const { upsertRecordsInCache } = usePrefetchRunQuery<Favorite>({
-    prefetchKey: PrefetchKey.AllFavorites,
-  });
+  const { upsertRecordsInCache } =
+    useUpsertRecordsInCacheForPrefetchKey<Favorite>({
+      prefetchKey: PrefetchKey.AllFavorites,
+    });
 
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular:

diff --git a/packages/twenty-front/src/modules/favorites/hooks/usePrefetchedFavoritesData.ts b/packages/twenty-front/src/modules/favorites/hooks/usePrefetchedFavoritesData.ts
@@ -1,6 +1,6 @@
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { Favorite } from '@/favorites/types/Favorite';
-import { usePrefetchRunQuery } from '@/prefetch/hooks/internal/usePrefetchRunQuery';
+import { useUpsertRecordsInCacheForPrefetchKey } from '@/prefetch/hooks/internal/useUpsertRecordsInCacheForPrefetchKey';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { useRecoilValue } from 'recoil';
@@ -33,7 +33,7 @@ export const usePrefetchedFavoritesData = (): PrefetchedFavoritesData => {
   );
 
   const { upsertRecordsInCache: upsertFavorites } =
-    usePrefetchRunQuery<Favorite>({
+    useUpsertRecordsInCacheForPrefetchKey<Favorite>({
       prefetchKey: PrefetchKey.AllFavorites,
     });
 

diff --git a/packages/twenty-front/src/modules/favorites/hooks/usePrefetchedFavoritesFoldersData.ts b/packages/twenty-front/src/modules/favorites/hooks/usePrefetchedFavoritesFoldersData.ts
@@ -1,6 +1,6 @@
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { FavoriteFolder } from '@/favorites/types/FavoriteFolder';
-import { usePrefetchRunQuery } from '@/prefetch/hooks/internal/usePrefetchRunQuery';
+import { useUpsertRecordsInCacheForPrefetchKey } from '@/prefetch/hooks/internal/useUpsertRecordsInCacheForPrefetchKey';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { useRecoilValue } from 'recoil';
@@ -26,7 +26,7 @@ export const usePrefetchedFavoritesFoldersData =
     );
 
     const { upsertRecordsInCache: upsertFavoriteFolders } =
-      usePrefetchRunQuery<FavoriteFolder>({
+      useUpsertRecordsInCacheForPrefetchKey<FavoriteFolder>({
         prefetchKey: PrefetchKey.AllFavoritesFolders,
       });
 

diff --git a/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx b/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSourceSelect.tsx
@@ -9,6 +9,7 @@ import { selectedFilterComponentState } from '@/object-record/object-filter-drop
 import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
 import { getActorSourceMultiSelectOptions } from '@/object-record/object-filter-dropdown/utils/getActorSourceMultiSelectOptions';
 import { useApplyRecordFilter } from '@/object-record/record-filter/hooks/useApplyRecordFilter';
+import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { MultipleSelectDropdown } from '@/object-record/select/components/MultipleSelectDropdown';
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
@@ -61,6 +62,7 @@ export const ObjectFilterDropdownSourceSelect = ({
   const { currentViewWithCombinedFiltersAndSorts } =
     useGetCurrentView(viewComponentId);
 
+  // TODO: this should be removed as it is not consistent across re-renders
   const [fieldId] = useState(v4());
 
   const sourceTypes = getActorSourceMultiSelectOptions(
@@ -73,6 +75,8 @@ export const ObjectFilterDropdownSourceSelect = ({
 
   const { emptyRecordFilter } = useEmptyRecordFilter();
 
+  const { removeRecordFilter } = useRemoveRecordFilter();
+
   const handleMultipleItemSelectChange = (
     itemToSelect: SelectableItem,
     newSelectedValue: boolean,
@@ -83,8 +87,13 @@ export const ObjectFilterDropdownSourceSelect = ({
           (id) => id !== itemToSelect.id,
         );
 
+    if (!filterDefinitionUsedInDropdown) {
+      throw new Error('Filter definition used in dropdown should be defined');
+    }
+
     if (newSelectedItemIds.length === 0) {
       emptyRecordFilter();
+      removeRecordFilter(filterDefinitionUsedInDropdown.fieldMetadataId);
       deleteCombinedViewFilter(fieldId);
       return;
     }

diff --git a/...d/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx b/...d/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx
@@ -5,6 +5,7 @@ import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlur
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
+import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
@@ -107,17 +108,21 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
             recordIndexId: instanceId,
           }}
         >
-          <ObjectFilterDropdownComponentInstanceContext.Provider
+          <RecordFiltersComponentInstanceContext.Provider
             value={{ instanceId }}
           >
-            <RecordTableComponentInstanceContext.Provider
-              value={{ instanceId: instanceId, onColumnsChange: () => {} }}
+            <ObjectFilterDropdownComponentInstanceContext.Provider
+              value={{ instanceId }}
             >
-              <ViewComponentInstanceContext.Provider value={{ instanceId }}>
-                <Story />
-              </ViewComponentInstanceContext.Provider>
-            </RecordTableComponentInstanceContext.Provider>
-          </ObjectFilterDropdownComponentInstanceContext.Provider>
+              <RecordTableComponentInstanceContext.Provider
+                value={{ instanceId: instanceId, onColumnsChange: () => {} }}
+              >
+                <ViewComponentInstanceContext.Provider value={{ instanceId }}>
+                  <Story />
+                </ViewComponentInstanceContext.Provider>
+              </RecordTableComponentInstanceContext.Provider>
+            </ObjectFilterDropdownComponentInstanceContext.Provider>
+          </RecordFiltersComponentInstanceContext.Provider>
         </RecordIndexContextProvider>
       );
     },

diff --git a/...s/object-record/object-filter-dropdown/states/availableFilterDefinitionsComponentState.ts b/...s/object-record/object-filter-dropdown/states/availableFilterDefinitionsComponentState.ts
@@ -1,5 +1,6 @@
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
 import { RecordFilterDefinition } from '@/object-record/record-filter/types/RecordFilterDefinition';
+
 import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
 export const availableFilterDefinitionsComponentState = createComponentStateV2<