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.

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,6 +31,9 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
     RouterDecorator,
     I18nFrontDecorator,
     (Story) => (
+      <RecordFilterGroupsComponentInstanceContext.Provider
+        value={{ instanceId: 'story-action-menu' }}
+      >
         <RecordFiltersComponentInstanceContext.Provider
           value={{ instanceId: 'story-action-menu' }}
         >
@@ -51,9 +55,11 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
                     },
                   );
                   set(
-                  contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
+                    contextStoreNumberOfSelectedRecordsComponentState.atomFamily(
+                      {
                         instanceId: 'story-action-menu',
-                  }),
+                      },
+                    ),
                     3,
                   );
                   const map = new Map<string, ActionMenuEntry>();
@@ -91,6 +97,7 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
             </ContextStoreComponentInstanceContext.Provider>
           </RecordSortsComponentInstanceContext.Provider>
         </RecordFiltersComponentInstanceContext.Provider>
+      </RecordFilterGroupsComponentInstanceContext.Provider>
     ),
   ],
   args: {

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,6 +89,9 @@ export const CommandMenuContainer = ({
   const setCommandMenuSearch = useSetRecoilState(commandMenuSearchState);
 
   return (
+    <RecordFilterGroupsComponentInstanceContext.Provider
+      value={{ instanceId: 'command-menu' }}
+    >
       <RecordFiltersComponentInstanceContext.Provider
         value={{ instanceId: 'command-menu' }}
       >
@@ -106,11 +110,13 @@ export const CommandMenuContainer = ({
                   onActionExecutedCallback: ({ key }) => {
                     if (
                       key !== RecordAgnosticActionsKey.SEARCH_RECORDS &&
-                    key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK &&
+                      key !==
+                        RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK &&
                       key !== NoSelectionRecordActionKeys.CREATE_NEW_RECORD
                     ) {
                       toggleCommandMenu();
                     }
+
                     if (
                       key !== RecordAgnosticActionsKey.SEARCH_RECORDS_FALLBACK
                     ) {
@@ -149,5 +155,6 @@ export const CommandMenuContainer = ({
           </ContextStoreComponentInstanceContext.Provider>
         </RecordSortsComponentInstanceContext.Provider>
       </RecordFiltersComponentInstanceContext.Provider>
+    </RecordFilterGroupsComponentInstanceContext.Provider>
   );
 };

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,6 +48,9 @@ const mockWorkspaceWithFeatureFlag = {
 
 const ContextStoreDecorator: Decorator = (Story) => {
   return (
+    <RecordFilterGroupsComponentInstanceContext.Provider
+      value={{ instanceId: 'command-menu' }}
+    >
       <RecordFiltersComponentInstanceContext.Provider
         value={{ instanceId: 'command-menu' }}
       >
@@ -66,6 +70,7 @@ const ContextStoreDecorator: Decorator = (Story) => {
           </ContextStoreComponentInstanceContext.Provider>
         </RecordSortsComponentInstanceContext.Provider>
       </RecordFiltersComponentInstanceContext.Provider>
+    </RecordFilterGroupsComponentInstanceContext.Provider>
   );
 };
 

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';
@@ -62,6 +63,9 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
             objectMetadataItem: companyObjectMetadataItem,
             recordIndexId: instanceId,
           }}
+        >
+          <RecordFilterGroupsComponentInstanceContext.Provider
+            value={{ instanceId }}
           >
             <RecordFiltersComponentInstanceContext.Provider
               value={{ instanceId }}
@@ -73,15 +77,21 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
                   value={{ instanceId }}
                 >
                   <RecordTableComponentInstanceContext.Provider
-                  value={{ instanceId: instanceId, onColumnsChange: () => {} }}
+                    value={{
+                      instanceId: instanceId,
+                      onColumnsChange: () => {},
+                    }}
+                  >
+                    <ViewComponentInstanceContext.Provider
+                      value={{ instanceId }}
                     >
-                  <ViewComponentInstanceContext.Provider value={{ instanceId }}>
                       <Story />
                     </ViewComponentInstanceContext.Provider>
                   </RecordTableComponentInstanceContext.Provider>
                 </ObjectFilterDropdownComponentInstanceContext.Provider>
               </RecordSortsComponentInstanceContext.Provider>
             </RecordFiltersComponentInstanceContext.Provider>
+          </RecordFilterGroupsComponentInstanceContext.Provider>
         </RecordIndexContextProvider>
       );
     },

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,8 +42,15 @@ const meta: Meta<typeof ObjectOptionsDropdownContent> = {
       }, [setObjectMetadataItems]);
 
       return (
-        <RecordFiltersComponentInstanceContext.Provider value={{ instanceId }}>
+        <RecordFilterGroupsComponentInstanceContext.Provider
-          <RecordSortsComponentInstanceContext.Provider value={{ instanceId }}>
+          value={{ instanceId }}
+        >
+          <RecordFiltersComponentInstanceContext.Provider
+            value={{ instanceId }}
+          >
+            <RecordSortsComponentInstanceContext.Provider
+              value={{ instanceId }}
+            >
               <RecordTableComponentInstanceContext.Provider
                 value={{ instanceId, onColumnsChange: () => {} }}
               >
@@ -57,6 +65,7 @@ const meta: Meta<typeof ObjectOptionsDropdownContent> = {
               </RecordTableComponentInstanceContext.Provider>
             </RecordSortsComponentInstanceContext.Provider>
           </RecordFiltersComponentInstanceContext.Provider>
+        </RecordFilterGroupsComponentInstanceContext.Provider>
       );
     },
     ContextStoreDecorator,

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();

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,
+});

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;
+};

packages/twenty-front/src/modules/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator.ts

@@ -0,0 +1,4 @@
+export enum RecordFilterGroupLogicalOperator {
+  AND = 'AND',
+  OR = 'OR',
+}

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';
@@ -69,6 +70,9 @@ export const RecordIndexContainerGater = () => {
       >
         <ViewComponentInstanceContext.Provider
           value={{ instanceId: recordIndexId }}
+        >
+          <RecordFilterGroupsComponentInstanceContext.Provider
+            value={{ instanceId: recordIndexId }}
           >
             <RecordFiltersComponentInstanceContext.Provider
               value={{ instanceId: recordIndexId }}
@@ -94,6 +98,7 @@ export const RecordIndexContainerGater = () => {
                 </ActionMenuComponentInstanceContext.Provider>
               </RecordSortsComponentInstanceContext.Provider>
             </RecordFiltersComponentInstanceContext.Provider>
+          </RecordFilterGroupsComponentInstanceContext.Provider>
           <RecordIndexLoadBaseOnContextStoreEffect />
         </ViewComponentInstanceContext.Provider>
       </RecordIndexContextProvider>

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,6 +41,9 @@ export const RightDrawerRecord = () => {
   );
 
   return (
+    <RecordFilterGroupsComponentInstanceContext.Provider
+      value={{ instanceId: `record-show-${objectRecordId}` }}
+    >
       <RecordFiltersComponentInstanceContext.Provider
         value={{ instanceId: `record-show-${objectRecordId}` }}
       >
@@ -72,5 +76,6 @@ export const RightDrawerRecord = () => {
           </ContextStoreComponentInstanceContext.Provider>
         </RecordSortsComponentInstanceContext.Provider>
       </RecordFiltersComponentInstanceContext.Provider>
+    </RecordFilterGroupsComponentInstanceContext.Provider>
   );
 };

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';
@@ -49,6 +50,9 @@ export const SignInBackgroundMockContainer = () => {
       >
         <ViewComponentInstanceContext.Provider
           value={{ instanceId: recordIndexId }}
+        >
+          <RecordFilterGroupsComponentInstanceContext.Provider
+            value={{ instanceId: recordIndexId }}
           >
             <RecordFiltersComponentInstanceContext.Provider
               value={{ instanceId: recordIndexId }}
@@ -88,6 +92,7 @@ export const SignInBackgroundMockContainer = () => {
                 </ContextStoreComponentInstanceContext.Provider>
               </RecordSortsComponentInstanceContext.Provider>
             </RecordFiltersComponentInstanceContext.Provider>
+          </RecordFilterGroupsComponentInstanceContext.Provider>
         </ViewComponentInstanceContext.Provider>
       </RecordIndexContextProvider>
     </StyledContainer>

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,6 +49,9 @@ export const RecordShowPage = () => {
 
   return (
     <RecordFieldValueSelectorContextProvider>
+      <RecordFilterGroupsComponentInstanceContext.Provider
+        value={{ instanceId: `record-show-${objectRecordId}` }}
+      >
         <RecordFiltersComponentInstanceContext.Provider
           value={{ instanceId: `record-show-${objectRecordId}` }}
         >
@@ -55,7 +59,7 @@ export const RecordShowPage = () => {
             value={{ instanceId: `record-show-${objectRecordId}` }}
           >
             <ContextStoreComponentInstanceContext.Provider
-            value={{ instanceId: `main-context-store` }}
+              value={{ instanceId: `record-show-${objectRecordId}` }}
             >
               <ActionMenuComponentInstanceContext.Provider
                 value={{ instanceId: `record-show-${objectRecordId}` }}
@@ -84,7 +88,8 @@ export const RecordShowPage = () => {
                           />
                         )}
                       {(isCommandMenuV2Enabled ||
-                      (objectNameSingular !== CoreObjectNameSingular.Workflow &&
+                        (objectNameSingular !==
+                          CoreObjectNameSingular.Workflow &&
                           objectNameSingular !==
                             CoreObjectNameSingular.WorkflowVersion)) && (
                         <RecordShowActionMenu
@@ -115,6 +120,7 @@ export const RecordShowPage = () => {
             </ContextStoreComponentInstanceContext.Provider>
           </RecordSortsComponentInstanceContext.Provider>
         </RecordFiltersComponentInstanceContext.Provider>
+      </RecordFilterGroupsComponentInstanceContext.Provider>
     </RecordFieldValueSelectorContextProvider>
   );
 };

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>
+                            <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>
+                            </RecordFilterGroupsComponentInstanceContext.Provider>
                           </PrefetchDataProvider>
                         </IconsProvider>
-                        </SnackBarProviderScope>
                       </HelmetProvider>
                     </FullHeightStorybookLayout>
                   </ObjectMetadataItemsProvider>

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,6 +51,9 @@ export const getJestMetadataAndApolloMocksAndActionMenuWrapper = ({
 
   return ({ children }: { children: ReactNode }) => (
     <Wrapper>
+      <RecordFilterGroupsComponentInstanceContext.Provider
+        value={{ instanceId: componentInstanceId }}
+      >
         <RecordFiltersComponentInstanceContext.Provider
           value={{
             instanceId: componentInstanceId,
@@ -95,6 +99,7 @@ export const getJestMetadataAndApolloMocksAndActionMenuWrapper = ({
             </ContextStoreComponentInstanceContext.Provider>
           </RecordSortsComponentInstanceContext.Provider>
         </RecordFiltersComponentInstanceContext.Provider>
+      </RecordFilterGroupsComponentInstanceContext.Provider>
     </Wrapper>
   );
 };

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,6 +27,9 @@ export const getJestMetadataAndApolloMocksWrapper = ({
     <RecoilRoot initializeState={onInitializeRecoilSnapshot}>
       <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
         <MockedProvider mocks={apolloMocks} addTypename={false} cache={cache}>
+          <RecordFilterGroupsComponentInstanceContext.Provider
+            value={{ instanceId: 'instanceId' }}
+          >
             <RecordFiltersComponentInstanceContext.Provider
               value={{ instanceId: 'instanceId' }}
             >
@@ -39,12 +43,15 @@ export const getJestMetadataAndApolloMocksWrapper = ({
                     <ContextStoreComponentInstanceContext.Provider
                       value={{ instanceId: 'instanceId' }}
                     >
-                    <JestContextStoreSetter>{children}</JestContextStoreSetter>
+                      <JestContextStoreSetter>
+                        {children}
+                      </JestContextStoreSetter>
                     </ContextStoreComponentInstanceContext.Provider>
                   </JestObjectMetadataItemSetter>
                 </ViewComponentInstanceContext.Provider>
               </RecordSortsComponentInstanceContext.Provider>
             </RecordFiltersComponentInstanceContext.Provider>
+          </RecordFilterGroupsComponentInstanceContext.Provider>
         </MockedProvider>
       </SnackBarProviderScope>
     </RecoilRoot>