Implement record filter group states and context (#10490)

This PR simply implements record filter group states and context, as we did for record filter and record sort. We use a separate context for record filter and record filter group, we'll see later if it can be merged in practice, but better be cautious for now.
2025-02-25 18:31:34 +01:00
parent d9bde155ff
commit 4d02bf1362
16 changed files with 435 additions and 331 deletions
--- a/packages/twenty-front/src/modules/action-menu/components/stories/RecordIndexActionMenuBar.stories.tsx
+++ b/packages/twenty-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 { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
@ -30,67 +31,73 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
    RouterDecorator,
    I18nFrontDecorator,
    (Story) => (
-      <RecordFiltersComponentInstanceContext.Provider
+      <RecordFilterGroupsComponentInstanceContext.Provider
        value={{ instanceId: 'story-action-menu' }}
      >
-        <RecordSortsComponentInstanceContext.Provider
+        <RecordFiltersComponentInstanceContext.Provider
          value={{ instanceId: 'story-action-menu' }}
        >
-          <ContextStoreComponentInstanceContext.Provider
+          <RecordSortsComponentInstanceContext.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: msg`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: msg`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>
-        </RecordSortsComponentInstanceContext.Provider>
-      </RecordFiltersComponentInstanceContext.Provider>
+                <ActionMenuComponentInstanceContext.Provider
+                  value={{ instanceId: 'story-action-menu' }}
+                >
+                  <Story />
+                </ActionMenuComponentInstanceContext.Provider>
+              </RecoilRoot>
+            </ContextStoreComponentInstanceContext.Provider>
+          </RecordSortsComponentInstanceContext.Provider>
+        </RecordFiltersComponentInstanceContext.Provider>
+      </RecordFilterGroupsComponentInstanceContext.Provider>
    ),
  ],
  args: {
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
@ -13,6 +13,7 @@ import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchS
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
@ -88,66 +89,72 @@ export const CommandMenuContainer = ({
  const setCommandMenuSearch = useSetRecoilState(commandMenuSearchState);

  return (
-    <RecordFiltersComponentInstanceContext.Provider
+    <RecordFilterGroupsComponentInstanceContext.Provider
      value={{ instanceId: 'command-menu' }}
    >
-      <RecordSortsComponentInstanceContext.Provider
+      <RecordFiltersComponentInstanceContext.Provider
        value={{ instanceId: 'command-menu' }}
      >
-        <ContextStoreComponentInstanceContext.Provider
+        <RecordSortsComponentInstanceContext.Provider
          value={{ instanceId: 'command-menu' }}
        >
-          <ActionMenuComponentInstanceContext.Provider
+          <ContextStoreComponentInstanceContext.Provider
            value={{ instanceId: 'command-menu' }}
          >
-            <ActionMenuContext.Provider
-              value={{
-                isInRightDrawer: true,
-                onActionExecutedCallback: ({ key }) => {
-                  if (
-                    key !== RecordAgnosticActionsKey.SEARCH_RECORDS &&
-                    key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK &&
-                    key !== NoSelectionRecordActionKeys.CREATE_NEW_RECORD
-                  ) {
-                    toggleCommandMenu();
-                  }
-                  if (
-                    key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK
-                  ) {
-                    setCommandMenuSearch('');
-                  }
-                },
-              }}
+            <ActionMenuComponentInstanceContext.Provider
+              value={{ instanceId: 'command-menu' }}
            >
-              <RecordActionMenuEntriesSetter />
-              <RecordAgnosticActionMenuEntriesSetter />
-              {isWorkflowEnabled && (
-                <RunWorkflowRecordAgnosticActionMenuEntriesSetter />
-              )}
-              <ActionMenuConfirmationModals />
-              <AnimatePresence
-                mode="wait"
-                onExitComplete={onCommandMenuCloseAnimationComplete}
+              <ActionMenuContext.Provider
+                value={{
+                  isInRightDrawer: true,
+                  onActionExecutedCallback: ({ key }) => {
+                    if (
+                      key !== RecordAgnosticActionsKey.SEARCH_RECORDS &&
+                      key !==
+                        RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK &&
+                      key !== NoSelectionRecordActionKeys.CREATE_NEW_RECORD
+                    ) {
+                      toggleCommandMenu();
+                    }
+
+                    if (
+                      key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK
+                    ) {
+                      setCommandMenuSearch('');
+                    }
+                  },
+                }}
              >
-                {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>
+                <RecordActionMenuEntriesSetter />
+                <RecordAgnosticActionMenuEntriesSetter />
+                {isWorkflowEnabled && (
+                  <RunWorkflowRecordAgnosticActionMenuEntriesSetter />
                )}
-              </AnimatePresence>
-            </ActionMenuContext.Provider>
-          </ActionMenuComponentInstanceContext.Provider>
-        </ContextStoreComponentInstanceContext.Provider>
-      </RecordSortsComponentInstanceContext.Provider>
-    </RecordFiltersComponentInstanceContext.Provider>
+                <ActionMenuConfirmationModals />
+                <AnimatePresence
+                  mode="wait"
+                  onExitComplete={onCommandMenuCloseAnimationComplete}
+                >
+                  {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>
+                  )}
+                </AnimatePresence>
+              </ActionMenuContext.Provider>
+            </ActionMenuComponentInstanceContext.Provider>
+          </ContextStoreComponentInstanceContext.Provider>
+        </RecordSortsComponentInstanceContext.Provider>
+      </RecordFiltersComponentInstanceContext.Provider>
+    </RecordFilterGroupsComponentInstanceContext.Provider>
  );
 };
--- a/packages/twenty-front/src/modules/command-menu/components/stories/CommandMenu.stories.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/stories/CommandMenu.stories.tsx
@ -20,6 +20,7 @@ import { commandMenuNavigationStackState } from '@/command-menu/states/commandMe
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { HttpResponse, graphql } from 'msw';
@ -47,25 +48,29 @@ const mockWorkspaceWithFeatureFlag = {

 const ContextStoreDecorator: Decorator = (Story) => {
  return (
-    <RecordFiltersComponentInstanceContext.Provider
+    <RecordFilterGroupsComponentInstanceContext.Provider
      value={{ instanceId: 'command-menu' }}
    >
-      <RecordSortsComponentInstanceContext.Provider
+      <RecordFiltersComponentInstanceContext.Provider
        value={{ instanceId: 'command-menu' }}
      >
-        <ContextStoreComponentInstanceContext.Provider
+        <RecordSortsComponentInstanceContext.Provider
          value={{ instanceId: 'command-menu' }}
        >
-          <ActionMenuComponentInstanceContext.Provider
+          <ContextStoreComponentInstanceContext.Provider
            value={{ instanceId: 'command-menu' }}
          >
-            <JestContextStoreSetter contextStoreCurrentObjectMetadataNameSingular="company">
-              <Story />
-            </JestContextStoreSetter>
-          </ActionMenuComponentInstanceContext.Provider>
-        </ContextStoreComponentInstanceContext.Provider>
-      </RecordSortsComponentInstanceContext.Provider>
-    </RecordFiltersComponentInstanceContext.Provider>
+            <ActionMenuComponentInstanceContext.Provider
+              value={{ instanceId: 'command-menu' }}
+            >
+              <JestContextStoreSetter contextStoreCurrentObjectMetadataNameSingular="company">
+                <Story />
+              </JestContextStoreSetter>
+            </ActionMenuComponentInstanceContext.Provider>
+          </ContextStoreComponentInstanceContext.Provider>
+        </RecordSortsComponentInstanceContext.Provider>
+      </RecordFiltersComponentInstanceContext.Provider>
+    </RecordFilterGroupsComponentInstanceContext.Provider>
  );
 };

--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/stories/MultipleFiltersDropdownButton.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/stories/MultipleFiltersDropdownButton.stories.tsx
@ -6,6 +6,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
 import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
@ -63,25 +64,34 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
            recordIndexId: instanceId,
          }}
        >
-          <RecordFiltersComponentInstanceContext.Provider
+          <RecordFilterGroupsComponentInstanceContext.Provider
            value={{ instanceId }}
          >
-            <RecordSortsComponentInstanceContext.Provider
+            <RecordFiltersComponentInstanceContext.Provider
              value={{ instanceId }}
            >
-              <ObjectFilterDropdownComponentInstanceContext.Provider
+              <RecordSortsComponentInstanceContext.Provider
                value={{ instanceId }}
              >
-                <RecordTableComponentInstanceContext.Provider
-                  value={{ instanceId: instanceId, onColumnsChange: () => {} }}
+                <ObjectFilterDropdownComponentInstanceContext.Provider
+                  value={{ instanceId }}
                >
-                  <ViewComponentInstanceContext.Provider value={{ instanceId }}>
-                    <Story />
-                  </ViewComponentInstanceContext.Provider>
-                </RecordTableComponentInstanceContext.Provider>
-              </ObjectFilterDropdownComponentInstanceContext.Provider>
-            </RecordSortsComponentInstanceContext.Provider>
-          </RecordFiltersComponentInstanceContext.Provider>
+                  <RecordTableComponentInstanceContext.Provider
+                    value={{
+                      instanceId: instanceId,
+                      onColumnsChange: () => {},
+                    }}
+                  >
+                    <ViewComponentInstanceContext.Provider
+                      value={{ instanceId }}
+                    >
+                      <Story />
+                    </ViewComponentInstanceContext.Provider>
+                  </RecordTableComponentInstanceContext.Provider>
+                </ObjectFilterDropdownComponentInstanceContext.Provider>
+              </RecordSortsComponentInstanceContext.Provider>
+            </RecordFiltersComponentInstanceContext.Provider>
+          </RecordFilterGroupsComponentInstanceContext.Provider>
        </RecordIndexContextProvider>
      );
    },
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/stories/ObjectOptionsDropdownContent.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/stories/ObjectOptionsDropdownContent.stories.tsx
@ -6,6 +6,7 @@ import { ObjectOptionsDropdownContent } from '@/object-record/object-options-dro
 import { OBJECT_OPTIONS_DROPDOWN_ID } from '@/object-record/object-options-dropdown/constants/ObjectOptionsDropdownId';
 import { ObjectOptionsDropdownContext } from '@/object-record/object-options-dropdown/states/contexts/ObjectOptionsDropdownContext';
 import { ObjectOptionsContentId } from '@/object-record/object-options-dropdown/types/ObjectOptionsContentId';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
@ -41,22 +42,30 @@ const meta: Meta<typeof ObjectOptionsDropdownContent> = {
      }, [setObjectMetadataItems]);

      return (
-        <RecordFiltersComponentInstanceContext.Provider value={{ instanceId }}>
-          <RecordSortsComponentInstanceContext.Provider value={{ instanceId }}>
-            <RecordTableComponentInstanceContext.Provider
-              value={{ instanceId, onColumnsChange: () => {} }}
+        <RecordFilterGroupsComponentInstanceContext.Provider
+          value={{ instanceId }}
+        >
+          <RecordFiltersComponentInstanceContext.Provider
+            value={{ instanceId }}
+          >
+            <RecordSortsComponentInstanceContext.Provider
+              value={{ instanceId }}
            >
-              <ViewComponentInstanceContext.Provider value={{ instanceId }}>
-                <MemoryRouter
-                  initialEntries={['/one', '/two', { pathname: '/three' }]}
-                  initialIndex={1}
-                >
-                  <Story />
-                </MemoryRouter>
-              </ViewComponentInstanceContext.Provider>
-            </RecordTableComponentInstanceContext.Provider>
-          </RecordSortsComponentInstanceContext.Provider>
-        </RecordFiltersComponentInstanceContext.Provider>
+              <RecordTableComponentInstanceContext.Provider
+                value={{ instanceId, onColumnsChange: () => {} }}
+              >
+                <ViewComponentInstanceContext.Provider value={{ instanceId }}>
+                  <MemoryRouter
+                    initialEntries={['/one', '/two', { pathname: '/three' }]}
+                    initialIndex={1}
+                  >
+                    <Story />
+                  </MemoryRouter>
+                </ViewComponentInstanceContext.Provider>
+              </RecordTableComponentInstanceContext.Provider>
+            </RecordSortsComponentInstanceContext.Provider>
+          </RecordFiltersComponentInstanceContext.Provider>
+        </RecordFilterGroupsComponentInstanceContext.Provider>
      );
    },
    ContextStoreDecorator,
--- a/packages/twenty-front/src/modules/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext.ts
+++ b/packages/twenty-front/src/modules/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext.ts
@ -0,0 +1,4 @@
+import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
+
+export const RecordFilterGroupsComponentInstanceContext =
+  createComponentInstanceContext();
--- a/packages/twenty-front/src/modules/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState.ts
@ -0,0 +1,11 @@
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
+import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const currentRecordFilterGroupsComponentState = createComponentStateV2<
+  RecordFilterGroup[]
+>({
+  key: 'currentRecordFilterGroupsComponentState',
+  defaultValue: [],
+  componentInstanceContext: RecordFilterGroupsComponentInstanceContext,
+});
--- a/packages/twenty-front/src/modules/object-record/record-filter-group/types/RecordFilterGroup.ts
+++ b/packages/twenty-front/src/modules/object-record/record-filter-group/types/RecordFilterGroup.ts
@ -0,0 +1,8 @@
+import { RecordFilterGroupLogicalOperator } from '@/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator';
+
+export type RecordFilterGroup = {
+  id: string;
+  parentRecordFilterGroupId?: string | null;
+  logicalOperator: RecordFilterGroupLogicalOperator;
+  positionInRecordFilterGroup?: number | null;
+};
--- a/packages/twenty-front/src/modules/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator.ts
+++ b/packages/twenty-front/src/modules/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator.ts
@ -0,0 +1,4 @@
+export enum RecordFilterGroupLogicalOperator {
+  AND = 'AND',
+  OR = 'OR',
+}
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainerGater.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainerGater.tsx
@ -6,6 +6,7 @@ import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
 import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordIndexContainer } from '@/object-record/record-index/components/RecordIndexContainer';
 import { RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect } from '@/object-record/record-index/components/RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect';
@ -70,30 +71,34 @@ export const RecordIndexContainerGater = () => {
        <ViewComponentInstanceContext.Provider
          value={{ instanceId: recordIndexId }}
        >
-          <RecordFiltersComponentInstanceContext.Provider
+          <RecordFilterGroupsComponentInstanceContext.Provider
            value={{ instanceId: recordIndexId }}
          >
-            <RecordSortsComponentInstanceContext.Provider
+            <RecordFiltersComponentInstanceContext.Provider
              value={{ instanceId: recordIndexId }}
            >
-              <ActionMenuComponentInstanceContext.Provider
-                value={{
-                  instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
-                }}
+              <RecordSortsComponentInstanceContext.Provider
+                value={{ instanceId: recordIndexId }}
              >
-                <PageTitle
-                  title={`${capitalize(objectMetadataItem.namePlural)}`}
-                />
-                <RecordIndexPageHeader />
-                <PageBody>
-                  <StyledIndexContainer>
-                    <RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
-                    <RecordIndexContainer />
-                  </StyledIndexContainer>
-                </PageBody>
-              </ActionMenuComponentInstanceContext.Provider>
-            </RecordSortsComponentInstanceContext.Provider>
-          </RecordFiltersComponentInstanceContext.Provider>
+                <ActionMenuComponentInstanceContext.Provider
+                  value={{
+                    instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
+                  }}
+                >
+                  <PageTitle
+                    title={`${capitalize(objectMetadataItem.namePlural)}`}
+                  />
+                  <RecordIndexPageHeader />
+                  <PageBody>
+                    <StyledIndexContainer>
+                      <RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
+                      <RecordIndexContainer />
+                    </StyledIndexContainer>
+                  </PageBody>
+                </ActionMenuComponentInstanceContext.Provider>
+              </RecordSortsComponentInstanceContext.Provider>
+            </RecordFiltersComponentInstanceContext.Provider>
+          </RecordFilterGroupsComponentInstanceContext.Provider>
          <RecordIndexLoadBaseOnContextStoreEffect />
        </ViewComponentInstanceContext.Provider>
      </RecordIndexContextProvider>
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
@ -2,6 +2,7 @@ import { useRecoilValue } from 'recoil';

 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
@ -40,37 +41,41 @@ export const RightDrawerRecord = () => {
  );

  return (
-    <RecordFiltersComponentInstanceContext.Provider
+    <RecordFilterGroupsComponentInstanceContext.Provider
      value={{ instanceId: `record-show-${objectRecordId}` }}
    >
-      <RecordSortsComponentInstanceContext.Provider
+      <RecordFiltersComponentInstanceContext.Provider
        value={{ instanceId: `record-show-${objectRecordId}` }}
      >
-        <ContextStoreComponentInstanceContext.Provider
-          value={{
-            instanceId: `record-show-${objectRecordId}`,
-          }}
+        <RecordSortsComponentInstanceContext.Provider
+          value={{ instanceId: `record-show-${objectRecordId}` }}
        >
-          <ActionMenuComponentInstanceContext.Provider
-            value={{ instanceId: `record-show-${objectRecordId}` }}
+          <ContextStoreComponentInstanceContext.Provider
+            value={{
+              instanceId: `record-show-${objectRecordId}`,
+            }}
          >
-            <StyledRightDrawerRecord isMobile={isMobile}>
-              <RecordFieldValueSelectorContextProvider>
-                {!isNewViewableRecordLoading && (
-                  <RecordValueSetterEffect recordId={objectRecordId} />
-                )}
-                <RecordShowContainer
-                  objectNameSingular={objectNameSingular}
-                  objectRecordId={objectRecordId}
-                  loading={false}
-                  isInRightDrawer={true}
-                  isNewRightDrawerItemLoading={isNewViewableRecordLoading}
-                />
-              </RecordFieldValueSelectorContextProvider>
-            </StyledRightDrawerRecord>
-          </ActionMenuComponentInstanceContext.Provider>
-        </ContextStoreComponentInstanceContext.Provider>
-      </RecordSortsComponentInstanceContext.Provider>
-    </RecordFiltersComponentInstanceContext.Provider>
+            <ActionMenuComponentInstanceContext.Provider
+              value={{ instanceId: `record-show-${objectRecordId}` }}
+            >
+              <StyledRightDrawerRecord isMobile={isMobile}>
+                <RecordFieldValueSelectorContextProvider>
+                  {!isNewViewableRecordLoading && (
+                    <RecordValueSetterEffect recordId={objectRecordId} />
+                  )}
+                  <RecordShowContainer
+                    objectNameSingular={objectNameSingular}
+                    objectRecordId={objectRecordId}
+                    loading={false}
+                    isInRightDrawer={true}
+                    isNewRightDrawerItemLoading={isNewViewableRecordLoading}
+                  />
+                </RecordFieldValueSelectorContextProvider>
+              </StyledRightDrawerRecord>
+            </ActionMenuComponentInstanceContext.Provider>
+          </ContextStoreComponentInstanceContext.Provider>
+        </RecordSortsComponentInstanceContext.Provider>
+      </RecordFiltersComponentInstanceContext.Provider>
+    </RecordFilterGroupsComponentInstanceContext.Provider>
  );
 };
--- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx
@ -4,6 +4,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
 import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
@ -50,44 +51,48 @@ export const SignInBackgroundMockContainer = () => {
        <ViewComponentInstanceContext.Provider
          value={{ instanceId: recordIndexId }}
        >
-          <RecordFiltersComponentInstanceContext.Provider
+          <RecordFilterGroupsComponentInstanceContext.Provider
            value={{ instanceId: recordIndexId }}
          >
-            <RecordSortsComponentInstanceContext.Provider
+            <RecordFiltersComponentInstanceContext.Provider
              value={{ instanceId: recordIndexId }}
            >
-              <ContextStoreComponentInstanceContext.Provider
-                value={{
-                  instanceId: 'main-context-store',
-                }}
+              <RecordSortsComponentInstanceContext.Provider
+                value={{ instanceId: recordIndexId }}
              >
-                <SignInBackgroundMockContainerEffect
-                  objectNamePlural={objectNamePlural}
-                  recordTableId={recordIndexId}
-                  viewId={viewBarId}
-                />
-                <ActionMenuComponentInstanceContext.Provider
-                  value={{ instanceId: recordIndexId }}
+                <ContextStoreComponentInstanceContext.Provider
+                  value={{
+                    instanceId: 'main-context-store',
+                  }}
                >
-                  {isDefined(objectMetadataItem) && (
-                    <>
-                      <ViewBar
-                        viewBarId={viewBarId}
-                        optionsDropdownButton={<></>}
-                      />
+                  <SignInBackgroundMockContainerEffect
+                    objectNamePlural={objectNamePlural}
+                    recordTableId={recordIndexId}
+                    viewId={viewBarId}
+                  />
+                  <ActionMenuComponentInstanceContext.Provider
+                    value={{ instanceId: recordIndexId }}
+                  >
+                    {isDefined(objectMetadataItem) && (
+                      <>
+                        <ViewBar
+                          viewBarId={viewBarId}
+                          optionsDropdownButton={<></>}
+                        />

-                      <RecordTableWithWrappers
-                        objectNameSingular={objectNameSingular}
-                        recordTableId={recordIndexId}
-                        viewBarId={viewBarId}
-                        updateRecordMutation={() => {}}
-                      />
-                    </>
-                  )}
-                </ActionMenuComponentInstanceContext.Provider>
-              </ContextStoreComponentInstanceContext.Provider>
-            </RecordSortsComponentInstanceContext.Provider>
-          </RecordFiltersComponentInstanceContext.Provider>
+                        <RecordTableWithWrappers
+                          objectNameSingular={objectNameSingular}
+                          recordTableId={recordIndexId}
+                          viewBarId={viewBarId}
+                          updateRecordMutation={() => {}}
+                        />
+                      </>
+                    )}
+                  </ActionMenuComponentInstanceContext.Provider>
+                </ContextStoreComponentInstanceContext.Provider>
+              </RecordSortsComponentInstanceContext.Provider>
+            </RecordFiltersComponentInstanceContext.Provider>
+          </RecordFilterGroupsComponentInstanceContext.Provider>
        </ViewComponentInstanceContext.Provider>
      </RecordIndexContextProvider>
    </StyledContainer>
--- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
@ -5,6 +5,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
 import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer';
 import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage';
@ -48,73 +49,78 @@ export const RecordShowPage = () => {

  return (
    <RecordFieldValueSelectorContextProvider>
-      <RecordFiltersComponentInstanceContext.Provider
+      <RecordFilterGroupsComponentInstanceContext.Provider
        value={{ instanceId: `record-show-${objectRecordId}` }}
      >
-        <RecordSortsComponentInstanceContext.Provider
+        <RecordFiltersComponentInstanceContext.Provider
          value={{ instanceId: `record-show-${objectRecordId}` }}
        >
-          <ContextStoreComponentInstanceContext.Provider
-            value={{ instanceId: `main-context-store` }}
+          <RecordSortsComponentInstanceContext.Provider
+            value={{ instanceId: `record-show-${objectRecordId}` }}
          >
-            <ActionMenuComponentInstanceContext.Provider
+            <ContextStoreComponentInstanceContext.Provider
              value={{ instanceId: `record-show-${objectRecordId}` }}
            >
-              <RecordValueSetterEffect recordId={objectRecordId} />
-              <PageContainer>
-                <PageTitle title={pageTitle} />
-                <RecordShowPageHeader
-                  objectNameSingular={objectNameSingular}
-                  objectRecordId={objectRecordId}
-                  headerIcon={headerIcon}
-                >
-                  <>
-                    {!isCommandMenuV2Enabled &&
-                      objectNameSingular ===
-                        CoreObjectNameSingular.Workflow && (
-                        <RecordShowPageWorkflowHeader
-                          workflowId={objectRecordId}
-                        />
-                      )}
-                    {!isCommandMenuV2Enabled &&
-                      objectNameSingular ===
-                        CoreObjectNameSingular.WorkflowVersion && (
-                        <RecordShowPageWorkflowVersionHeader
-                          workflowVersionId={objectRecordId}
-                        />
-                      )}
-                    {(isCommandMenuV2Enabled ||
-                      (objectNameSingular !== CoreObjectNameSingular.Workflow &&
-                        objectNameSingular !==
-                          CoreObjectNameSingular.WorkflowVersion)) && (
-                      <RecordShowActionMenu
-                        {...{
-                          isFavorite,
-                          record,
-                          handleFavoriteButtonClick,
-                          objectMetadataItem,
-                          objectNameSingular,
-                        }}
-                      />
-                    )}
-                  </>
-                </RecordShowPageHeader>
-                <PageBody>
-                  <TimelineActivityContext.Provider
-                    value={{ labelIdentifierValue: pageName }}
+              <ActionMenuComponentInstanceContext.Provider
+                value={{ instanceId: `record-show-${objectRecordId}` }}
+              >
+                <RecordValueSetterEffect recordId={objectRecordId} />
+                <PageContainer>
+                  <PageTitle title={pageTitle} />
+                  <RecordShowPageHeader
+                    objectNameSingular={objectNameSingular}
+                    objectRecordId={objectRecordId}
+                    headerIcon={headerIcon}
                  >
-                    <RecordShowContainer
-                      objectNameSingular={objectNameSingular}
-                      objectRecordId={objectRecordId}
-                      loading={loading}
-                    />
-                  </TimelineActivityContext.Provider>
-                </PageBody>
-              </PageContainer>
-            </ActionMenuComponentInstanceContext.Provider>
-          </ContextStoreComponentInstanceContext.Provider>
-        </RecordSortsComponentInstanceContext.Provider>
-      </RecordFiltersComponentInstanceContext.Provider>
+                    <>
+                      {!isCommandMenuV2Enabled &&
+                        objectNameSingular ===
+                          CoreObjectNameSingular.Workflow && (
+                          <RecordShowPageWorkflowHeader
+                            workflowId={objectRecordId}
+                          />
+                        )}
+                      {!isCommandMenuV2Enabled &&
+                        objectNameSingular ===
+                          CoreObjectNameSingular.WorkflowVersion && (
+                          <RecordShowPageWorkflowVersionHeader
+                            workflowVersionId={objectRecordId}
+                          />
+                        )}
+                      {(isCommandMenuV2Enabled ||
+                        (objectNameSingular !==
+                          CoreObjectNameSingular.Workflow &&
+                          objectNameSingular !==
+                            CoreObjectNameSingular.WorkflowVersion)) && (
+                        <RecordShowActionMenu
+                          {...{
+                            isFavorite,
+                            record,
+                            handleFavoriteButtonClick,
+                            objectMetadataItem,
+                            objectNameSingular,
+                          }}
+                        />
+                      )}
+                    </>
+                  </RecordShowPageHeader>
+                  <PageBody>
+                    <TimelineActivityContext.Provider
+                      value={{ labelIdentifierValue: pageName }}
+                    >
+                      <RecordShowContainer
+                        objectNameSingular={objectNameSingular}
+                        objectRecordId={objectRecordId}
+                        loading={loading}
+                      />
+                    </TimelineActivityContext.Provider>
+                  </PageBody>
+                </PageContainer>
+              </ActionMenuComponentInstanceContext.Provider>
+            </ContextStoreComponentInstanceContext.Provider>
+          </RecordSortsComponentInstanceContext.Provider>
+        </RecordFiltersComponentInstanceContext.Provider>
+      </RecordFilterGroupsComponentInstanceContext.Provider>
    </RecordFieldValueSelectorContextProvider>
  );
 };
--- a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
+++ b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
@ -22,6 +22,7 @@ import { mockedApolloClient } from '~/testing/mockedApolloClient';

 import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
 import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider';
@ -88,9 +89,14 @@ const Providers = () => {
                  <ObjectMetadataItemsProvider>
                    <FullHeightStorybookLayout>
                      <HelmetProvider>
-                        <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-                          <IconsProvider>
-                            <PrefetchDataProvider>
+                        <IconsProvider>
+                          <PrefetchDataProvider>
+                            <RecordFilterGroupsComponentInstanceContext.Provider
+                              value={{
+                                instanceId:
+                                  'storybook-test-record-filter-groups',
+                              }}
+                            >
                              <RecordFiltersComponentInstanceContext.Provider
                                value={{
                                  instanceId: 'storybook-test-record-filters',
@ -104,9 +110,9 @@ const Providers = () => {
                                  <Outlet />
                                </RecordSortsComponentInstanceContext.Provider>
                              </RecordFiltersComponentInstanceContext.Provider>
-                            </PrefetchDataProvider>
-                          </IconsProvider>
-                        </SnackBarProviderScope>
+                            </RecordFilterGroupsComponentInstanceContext.Provider>
+                          </PrefetchDataProvider>
+                        </IconsProvider>
                      </HelmetProvider>
                    </FullHeightStorybookLayout>
                  </ObjectMetadataItemsProvider>
--- a/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper.tsx
+++ b/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper.tsx
@ -1,5 +1,6 @@
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
@ -50,51 +51,55 @@ export const getJestMetadataAndApolloMocksAndActionMenuWrapper = ({

  return ({ children }: { children: ReactNode }) => (
    <Wrapper>
-      <RecordFiltersComponentInstanceContext.Provider
-        value={{
-          instanceId: componentInstanceId,
-        }}
+      <RecordFilterGroupsComponentInstanceContext.Provider
+        value={{ instanceId: componentInstanceId }}
      >
-        <RecordSortsComponentInstanceContext.Provider
-          value={{ instanceId: componentInstanceId }}
+        <RecordFiltersComponentInstanceContext.Provider
+          value={{
+            instanceId: componentInstanceId,
+          }}
        >
-          <ContextStoreComponentInstanceContext.Provider
+          <RecordSortsComponentInstanceContext.Provider
            value={{ instanceId: componentInstanceId }}
          >
-            <ActionMenuComponentInstanceContext.Provider
-              value={{
-                instanceId: componentInstanceId,
-              }}
+            <ContextStoreComponentInstanceContext.Provider
+              value={{ instanceId: componentInstanceId }}
            >
-              <RecordIndexContextProvider
+              <ActionMenuComponentInstanceContext.Provider
                value={{
-                  indexIdentifierUrl: () => 'indexIdentifierUrl',
-                  onIndexRecordsLoaded: () => {},
-                  objectNamePlural: mockObjectMetadataItem.namePlural,
-                  objectNameSingular: mockObjectMetadataItem.nameSingular,
-                  objectMetadataItem: mockObjectMetadataItem,
-                  recordIndexId: 'recordIndexId',
+                  instanceId: componentInstanceId,
                }}
              >
-                <JestContextStoreSetter
-                  contextStoreFilters={contextStoreFilters}
-                  contextStoreTargetedRecordsRule={
-                    contextStoreTargetedRecordsRule
-                  }
-                  contextStoreNumberOfSelectedRecords={
-                    contextStoreNumberOfSelectedRecords
-                  }
-                  contextStoreCurrentObjectMetadataNameSingular={
-                    contextStoreCurrentObjectMetadataNameSingular
-                  }
+                <RecordIndexContextProvider
+                  value={{
+                    indexIdentifierUrl: () => 'indexIdentifierUrl',
+                    onIndexRecordsLoaded: () => {},
+                    objectNamePlural: mockObjectMetadataItem.namePlural,
+                    objectNameSingular: mockObjectMetadataItem.nameSingular,
+                    objectMetadataItem: mockObjectMetadataItem,
+                    recordIndexId: 'recordIndexId',
+                  }}
                >
-                  {children}
-                </JestContextStoreSetter>
-              </RecordIndexContextProvider>
-            </ActionMenuComponentInstanceContext.Provider>
-          </ContextStoreComponentInstanceContext.Provider>
-        </RecordSortsComponentInstanceContext.Provider>
-      </RecordFiltersComponentInstanceContext.Provider>
+                  <JestContextStoreSetter
+                    contextStoreFilters={contextStoreFilters}
+                    contextStoreTargetedRecordsRule={
+                      contextStoreTargetedRecordsRule
+                    }
+                    contextStoreNumberOfSelectedRecords={
+                      contextStoreNumberOfSelectedRecords
+                    }
+                    contextStoreCurrentObjectMetadataNameSingular={
+                      contextStoreCurrentObjectMetadataNameSingular
+                    }
+                  >
+                    {children}
+                  </JestContextStoreSetter>
+                </RecordIndexContextProvider>
+              </ActionMenuComponentInstanceContext.Provider>
+            </ContextStoreComponentInstanceContext.Provider>
+          </RecordSortsComponentInstanceContext.Provider>
+        </RecordFiltersComponentInstanceContext.Provider>
+      </RecordFilterGroupsComponentInstanceContext.Provider>
    </Wrapper>
  );
 };
--- a/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx
+++ b/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx
@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { MutableSnapshot, RecoilRoot } from 'recoil';

 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
@ -26,25 +27,31 @@ export const getJestMetadataAndApolloMocksWrapper = ({
    <RecoilRoot initializeState={onInitializeRecoilSnapshot}>
      <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
        <MockedProvider mocks={apolloMocks} addTypename={false} cache={cache}>
-          <RecordFiltersComponentInstanceContext.Provider
+          <RecordFilterGroupsComponentInstanceContext.Provider
            value={{ instanceId: 'instanceId' }}
          >
-            <RecordSortsComponentInstanceContext.Provider
+            <RecordFiltersComponentInstanceContext.Provider
              value={{ instanceId: 'instanceId' }}
            >
-              <ViewComponentInstanceContext.Provider
+              <RecordSortsComponentInstanceContext.Provider
                value={{ instanceId: 'instanceId' }}
              >
-                <JestObjectMetadataItemSetter>
-                  <ContextStoreComponentInstanceContext.Provider
-                    value={{ instanceId: 'instanceId' }}
-                  >
-                    <JestContextStoreSetter>{children}</JestContextStoreSetter>
-                  </ContextStoreComponentInstanceContext.Provider>
-                </JestObjectMetadataItemSetter>
-              </ViewComponentInstanceContext.Provider>
-            </RecordSortsComponentInstanceContext.Provider>
-          </RecordFiltersComponentInstanceContext.Provider>
+                <ViewComponentInstanceContext.Provider
+                  value={{ instanceId: 'instanceId' }}
+                >
+                  <JestObjectMetadataItemSetter>
+                    <ContextStoreComponentInstanceContext.Provider
+                      value={{ instanceId: 'instanceId' }}
+                    >
+                      <JestContextStoreSetter>
+                        {children}
+                      </JestContextStoreSetter>
+                    </ContextStoreComponentInstanceContext.Provider>
+                  </JestObjectMetadataItemSetter>
+                </ViewComponentInstanceContext.Provider>
+              </RecordSortsComponentInstanceContext.Provider>
+            </RecordFiltersComponentInstanceContext.Provider>
+          </RecordFilterGroupsComponentInstanceContext.Provider>
        </MockedProvider>
      </SnackBarProviderScope>
    </RecoilRoot>