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

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,

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';
@@ -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>

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