Add filters to search record action (#12481)

First PR to add filters to send records. Lot of work left, but I want to
split. I mainly want to validate the architecture there.


https://github.com/user-attachments/assets/63375a75-ba88-49df-8c12-5e3e58de5342

TODO in next PRs:
- fix design
- make filters reliable. Some composite fields are not implemented and
some fields like datetime do not work well
- improve typing

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

@@ -2,6 +2,7 @@ import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filt
 import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
 
 import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -21,10 +22,12 @@ const StyledContainer = styled.div<{ isGrayBackground?: boolean }>`
 
 type AdvancedFilterRecordFilterGroupChildrenProps = {
   recordFilterGroupId: string;
+  VariablePicker?: VariablePickerComponent;
 };
 
 export const AdvancedFilterRecordFilterGroupChildren = ({
   recordFilterGroupId,
+  VariablePicker,
 }: AdvancedFilterRecordFilterGroupChildrenProps) => {
   const { currentRecordFilterGroup, childRecordFilters } =
     useChildRecordFiltersAndRecordFilterGroups({
@@ -47,6 +50,7 @@ export const AdvancedFilterRecordFilterGroupChildren = ({
           recordFilter={childRecordFilter}
           recordFilterIndex={childRecordFilterIndex}
           recordFilterGroup={currentRecordFilterGroup}
+          VariablePicker={VariablePicker}
         />
       ))}
       <AdvancedFilterAddFilterRuleSelect

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

@@ -2,16 +2,19 @@ import { AdvancedFilterDropdownRow } from '@/object-record/advanced-filter/compo
 import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
 import { AdvancedFilterRecordFilterGroupChildren } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupChildren';
 import { AdvancedFilterRecordFilterGroupOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
 
 export const AdvancedFilterRecordFilterGroupRow = ({
   parentRecordFilterGroup,
   recordFilterGroup,
   recordFilterGroupIndex,
+  VariablePicker,
 }: {
   parentRecordFilterGroup: RecordFilterGroup;
   recordFilterGroup: RecordFilterGroup;
   recordFilterGroupIndex: number;
+  VariablePicker?: VariablePickerComponent;
 }) => {
   return (
     <AdvancedFilterDropdownRow>
@@ -21,6 +24,7 @@ export const AdvancedFilterRecordFilterGroupRow = ({
       />
       <AdvancedFilterRecordFilterGroupChildren
         recordFilterGroupId={recordFilterGroup.id}
+        VariablePicker={VariablePicker}
       />
       <AdvancedFilterRecordFilterGroupOptionsDropdown
         recordFilterGroupId={recordFilterGroup.id}

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

@@ -3,20 +3,25 @@ import { AdvancedFilterFieldSelectDropdownButton } from '@/object-record/advance
 import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
 import { AdvancedFilterRecordFilterOperandSelect } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect';
 import { AdvancedFilterRecordFilterOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown';
+import { AdvancedFilterValueFormInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormInput';
 import { AdvancedFilterValueInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueInput';
 import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId';
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
+import { isDefined } from 'twenty-shared/utils';
 
 export const AdvancedFilterRecordFilterRow = ({
   recordFilterGroup,
   recordFilter,
   recordFilterIndex,
+  VariablePicker,
 }: {
   recordFilterGroup: RecordFilterGroup;
   recordFilter: RecordFilter;
   recordFilterIndex: number;
+  VariablePicker?: VariablePickerComponent;
 }) => {
   return (
     <ObjectFilterDropdownComponentInstanceContext.Provider
@@ -37,7 +42,14 @@ export const AdvancedFilterRecordFilterRow = ({
         <AdvancedFilterRecordFilterOperandSelect
           recordFilterId={recordFilter.id}
         />
-        <AdvancedFilterValueInput recordFilterId={recordFilter.id} />
+        {isDefined(VariablePicker) ? (
+          <AdvancedFilterValueFormInput
+            recordFilterId={recordFilter.id}
+            VariablePicker={VariablePicker}
+          />
+        ) : (
+          <AdvancedFilterValueInput recordFilterId={recordFilter.id} />
+        )}
         <AdvancedFilterRecordFilterOptionsDropdown
           recordFilterId={recordFilter.id}
         />

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

@@ -13,7 +13,7 @@ import styled from '@emotion/styled';
 import { id } from 'date-fns/locale';
 import { isDefined } from 'twenty-shared/utils';
 
-const StyledContainer = styled.div<{ isGrayBackground?: boolean }>`
+const StyledContainer = styled.div`
   align-items: start;
   display: flex;
   flex: 1;

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

@@ -0,0 +1,58 @@
+import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
+import { FormCountryCodeSelectInput } from '@/object-record/record-field/form-types/components/FormCountryCodeSelectInput';
+import { FormCountrySelectInput } from '@/object-record/record-field/form-types/components/FormCountrySelectInput';
+import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
+import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { JsonValue } from 'type-fest';
+
+export const AdvancedFilterValueFormCompositeFieldInput = ({
+  recordFilter,
+  VariablePicker,
+  onChange,
+}: {
+  recordFilter: RecordFilter;
+  VariablePicker: VariablePickerComponent;
+  onChange: (newValue: JsonValue) => void;
+}) => {
+  const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
+    subFieldNameUsedInDropdownComponentState,
+  );
+
+  const filterType = recordFilter.type;
+
+  return (
+    <>
+      {filterType === 'ADDRESS' &&
+        (subFieldNameUsedInDropdown === 'addressCountry' ? (
+          <FormCountrySelectInput
+            selectedCountryName={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        ) : (
+          <FormTextFieldInput
+            defaultValue={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        ))}
+      {filterType === 'CURRENCY' &&
+        (recordFilter.subFieldName === 'currencyCode' ? (
+          <FormCountryCodeSelectInput
+            selectedCountryCode={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        ) : recordFilter.subFieldName === 'amountMicros' ? (
+          <FormNumberFieldInput
+            defaultValue={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        ) : null)}
+    </>
+  );
+};

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

@@ -0,0 +1,67 @@
+import { AdvancedFilterValueFormCompositeFieldInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormCompositeFieldInput';
+import { useApplyObjectFilterDropdownFilterValue } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownFilterValue';
+import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
+import { FormFieldInput } from '@/object-record/record-field/components/FormFieldInput';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { FieldMetadataType } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+import { JsonValue } from 'type-fest';
+
+export const AdvancedFilterValueFormInput = ({
+  recordFilterId,
+  VariablePicker,
+}: {
+  recordFilterId: string;
+  VariablePicker: VariablePickerComponent;
+}) => {
+  const currentRecordFilters = useRecoilComponentValueV2(
+    currentRecordFiltersComponentState,
+  );
+
+  const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
+    subFieldNameUsedInDropdownComponentState,
+  );
+
+  const recordFilter = currentRecordFilters.find(
+    (recordFilter) => recordFilter.id === recordFilterId,
+  );
+
+  const isDisabled = !recordFilter?.fieldMetadataId || !recordFilter.operand;
+
+  const { applyObjectFilterDropdownFilterValue } =
+    useApplyObjectFilterDropdownFilterValue();
+
+  const handleChange = (newValue: JsonValue) => {
+    applyObjectFilterDropdownFilterValue(newValue as string);
+  };
+
+  if (isDisabled) {
+    return null;
+  }
+
+  if (isDefined(subFieldNameUsedInDropdown)) {
+    return (
+      <AdvancedFilterValueFormCompositeFieldInput
+        recordFilter={recordFilter}
+        VariablePicker={VariablePicker}
+        onChange={handleChange}
+      />
+    );
+  }
+
+  return (
+    <FormFieldInput
+      field={{
+        type: recordFilter.type as FieldMetadataType,
+        label: '',
+        metadata: {} as FieldMetadata,
+      }}
+      defaultValue={recordFilter.value}
+      onChange={handleChange}
+      VariablePicker={VariablePicker}
+    />
+  );
+};

packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+type AdvancedFilterContextType = {
+  onUpdate?: () => void;
+};
+
+export const AdvancedFilterContext = createContext<AdvancedFilterContextType>(
+  {} as AdvancedFilterContextType,
+);

packages/twenty-front/src/modules/object-record/record-filter-group/hooks/useRemoveRecordFilterGroup.ts

@@ -1,13 +1,17 @@
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useContext } from 'react';
 import { useRecoilCallback } from 'recoil';
 
 export const useRemoveRecordFilterGroup = () => {
   const currentRecordFilterGroupsCallbackState =
     useRecoilComponentCallbackStateV2(currentRecordFilterGroupsComponentState);
 
-  const removeRecordFilterGroup = useRecoilCallback(
+  const { onUpdate } = useContext(AdvancedFilterContext);
+
+  const removeRecordFilterGroupCallback = useRecoilCallback(
     ({ set, snapshot }) =>
       (recordFilterGroupIdToRemove: string) => {
         const currentRecordFilterGroups = getSnapshotValue(
@@ -53,6 +57,11 @@ export const useRemoveRecordFilterGroup = () => {
     [currentRecordFilterGroupsCallbackState],
   );
 
+  const removeRecordFilterGroup = (recordFilterGroupIdToRemove: string) => {
+    removeRecordFilterGroupCallback(recordFilterGroupIdToRemove);
+    onUpdate?.();
+  };
+
   return {
     removeRecordFilterGroup,
   };

packages/twenty-front/src/modules/object-record/record-filter-group/hooks/useUpsertRecordFilterGroup.ts

@@ -1,14 +1,17 @@
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useContext } from 'react';
 import { useRecoilCallback } from 'recoil';
 
 export const useUpsertRecordFilterGroup = () => {
   const currentRecordFilterGroupsCallbackState =
     useRecoilComponentCallbackStateV2(currentRecordFilterGroupsComponentState);
+  const { onUpdate } = useContext(AdvancedFilterContext);
 
-  const upsertRecordFilterGroup = useRecoilCallback(
+  const upsertRecordFilterGroupCallback = useRecoilCallback(
     ({ set, snapshot }) =>
       (recordFilterGroupToSet: RecordFilterGroup) => {
         const currentRecordFilterGroups = getSnapshotValue(
@@ -57,6 +60,13 @@ export const useUpsertRecordFilterGroup = () => {
     [currentRecordFilterGroupsCallbackState],
   );
 
+  const upsertRecordFilterGroup = (
+    recordFilterGroupToSet: RecordFilterGroup,
+  ) => {
+    upsertRecordFilterGroupCallback(recordFilterGroupToSet);
+    onUpdate?.();
+  };
+
   return {
     upsertRecordFilterGroup,
   };

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

@@ -1,9 +1,11 @@
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
 import { vectorSearchInputComponentState } from '@/views/states/vectorSearchInputComponentState';
 import { isVectorSearchFilter } from '@/views/utils/isVectorSearchFilter';
+import { useContext } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -12,7 +14,9 @@ export const useRemoveRecordFilter = () => {
     currentRecordFiltersComponentState,
   );
 
-  const removeRecordFilter = useRecoilCallback(
+  const { onUpdate } = useContext(AdvancedFilterContext);
+
+  const removeRecordFilterCallback = useRecoilCallback(
     ({ set, snapshot }) =>
       ({ recordFilterId }: { recordFilterId: string }) => {
         const currentRecordFilters = getSnapshotValue(
@@ -52,6 +56,15 @@ export const useRemoveRecordFilter = () => {
     [currentRecordFiltersCallbackState],
   );
 
+  const removeRecordFilter = ({
+    recordFilterId,
+  }: {
+    recordFilterId: string;
+  }) => {
+    removeRecordFilterCallback({ recordFilterId });
+    onUpdate?.();
+  };
+
   return {
     removeRecordFilter,
   };

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

@@ -1,7 +1,9 @@
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useContext } from 'react';
 import { useRecoilCallback } from 'recoil';
 
 export const useUpsertRecordFilter = () => {
@@ -9,7 +11,9 @@ export const useUpsertRecordFilter = () => {
     currentRecordFiltersComponentState,
   );
 
-  const upsertRecordFilter = useRecoilCallback(
+  const { onUpdate } = useContext(AdvancedFilterContext);
+
+  const upsertRecordFilterCallback = useRecoilCallback(
     ({ set, snapshot }) =>
       (recordFilterToSet: RecordFilter) => {
         const currentRecordFilters = getSnapshotValue(
@@ -46,6 +50,11 @@ export const useUpsertRecordFilter = () => {
     [currentRecordFiltersCallbackState],
   );
 
+  const upsertRecordFilter = (recordFilterToSet: RecordFilter) => {
+    upsertRecordFilterCallback(recordFilterToSet);
+    onUpdate?.();
+  };
+
   return {
     upsertRecordFilter,
   };

packages/twenty-front/src/modules/workflow/validation-schemas/workflowSchema.ts

@@ -80,6 +80,13 @@ export const workflowFindRecordsActionSettingsSchema =
     input: z.object({
       objectName: z.string(),
       limit: z.number().optional(),
+      filter: z
+        .object({
+          recordFilterGroups: z.array(z.object({})).optional(),
+          recordFilters: z.array(z.object({})).optional(),
+          gqlOperationFilter: z.object({}).optional().nullable(),
+        })
+        .optional(),
     }),
   });
 

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords.tsx

@@ -4,14 +4,23 @@ import { WorkflowFindRecordsAction } from '@/workflow/types/Workflow';
 import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
 import { useEffect, useState } from 'react';
 
+import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
 import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
+import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
+import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
+import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
+import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
+import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
+import { WorkflowFindRecordFilters } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowFindRecordFilters';
+import { WorkflowFindRecordFiltersEffect } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowFindRecordFiltersEffect';
 import { useActionHeaderTypeOrThrow } from '@/workflow/workflow-steps/workflow-actions/hooks/useActionHeaderTypeOrThrow';
 import { useActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/hooks/useActionIconColorOrThrow';
 import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
 import { isDefined } from 'twenty-shared/utils';
 import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
 import { SelectOption } from 'twenty-ui/input';
+import { JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
 
 type WorkflowEditActionFindRecordsProps = {
@@ -28,9 +37,16 @@ type WorkflowEditActionFindRecordsProps = {
 
 type FindRecordsFormData = {
   objectName: string;
+  filter?: FindRecordsActionFilter;
   limit?: number;
 };
 
+export type FindRecordsActionFilter = {
+  recordFilterGroups?: RecordFilterGroup[];
+  recordFilters?: RecordFilter[];
+  gqlOperationFilter?: JsonValue;
+};
+
 export const WorkflowEditActionFindRecords = ({
   action,
   actionOptions,
@@ -50,13 +66,18 @@ export const WorkflowEditActionFindRecords = ({
   const [formData, setFormData] = useState<FindRecordsFormData>({
     objectName: action.settings.input.objectName,
     limit: action.settings.input.limit,
+    filter: action.settings.input.filter as FindRecordsActionFilter,
   });
   const isFormDisabled = actionOptions.readonly;
 
+  const selectedObjectMetadataItem = activeNonSystemObjectMetadataItems.find(
+    (item) => item.nameSingular === formData.objectName,
+  );
+
   const selectedObjectMetadataItemNameSingular =
-    activeNonSystemObjectMetadataItems.find(
+    selectedObjectMetadataItem?.nameSingular ?? '';
-      (item) => item.nameSingular === formData.objectName,
+
-    )?.nameSingular ?? '';
+  const { objectPermissionsByObjectMetadataId } = useObjectPermissions();
 
   const saveAction = useDebouncedCallback(
     async (formData: FindRecordsFormData) => {
@@ -64,7 +85,11 @@ export const WorkflowEditActionFindRecords = ({
         return;
       }
 
-      const { objectName: updatedObjectName, limit: updatedLimit } = formData;
+      const {
+        objectName: updatedObjectName,
+        limit: updatedLimit,
+        filter: updatedFilter,
+      } = formData;
 
       actionOptions.onActionUpdate({
         ...action,
@@ -73,6 +98,7 @@ export const WorkflowEditActionFindRecords = ({
           input: {
             objectName: updatedObjectName,
             limit: updatedLimit ?? 1,
+            filter: updatedFilter,
           },
         },
       });
@@ -90,6 +116,7 @@ export const WorkflowEditActionFindRecords = ({
   const headerIcon = getActionIcon(action.type);
   const headerIconColor = useActionIconColorOrThrow(action.type);
   const headerType = useActionHeaderTypeOrThrow(action.type);
+  const instanceId = `workflow-edit-action-record-find-records-${action.id}`;
 
   return (
     <>
@@ -133,6 +160,44 @@ export const WorkflowEditActionFindRecords = ({
         />
 
         <HorizontalSeparator noMargin />
+        {isDefined(selectedObjectMetadataItem) && (
+          <RecordIndexContextProvider
+            value={{
+              indexIdentifierUrl: () => '',
+              onIndexRecordsLoaded: () => {},
+              objectNamePlural: selectedObjectMetadataItem.labelPlural,
+              objectNameSingular: selectedObjectMetadataItem.nameSingular,
+              objectMetadataItem: selectedObjectMetadataItem,
+              recordIndexId: instanceId,
+              objectPermissionsByObjectMetadataId,
+            }}
+          >
+            <RecordFilterGroupsComponentInstanceContext.Provider
+              value={{ instanceId }}
+            >
+              <RecordFiltersComponentInstanceContext.Provider
+                value={{ instanceId }}
+              >
+                <WorkflowFindRecordFilters
+                  objectMetadataItem={selectedObjectMetadataItem}
+                  onChange={(filter: FindRecordsActionFilter) => {
+                    const newFormData: FindRecordsFormData = {
+                      ...formData,
+                      filter,
+                    };
+
+                    setFormData(newFormData);
+
+                    saveAction(newFormData);
+                  }}
+                />
+                <WorkflowFindRecordFiltersEffect
+                  defaultValue={formData.filter}
+                />
+              </RecordFiltersComponentInstanceContext.Provider>
+            </RecordFilterGroupsComponentInstanceContext.Provider>
+          </RecordIndexContextProvider>
+        )}
 
         <FormNumberFieldInput
           label="Limit"

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowFindRecordFilters.tsx

@@ -0,0 +1,188 @@
+import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect';
+import { AdvancedFilterRecordFilterGroupRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupRow';
+import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
+import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
+import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector';
+import { isRecordFilterGroupChildARecordFilterGroup } from '@/object-record/advanced-filter/utils/isRecordFilterGroupChildARecordFilterGroup';
+import { useUpsertRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useUpsertRecordFilterGroup';
+import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
+import { RecordFilterGroupLogicalOperator } from '@/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator';
+import { useCreateEmptyRecordFilterFromFieldMetadataItem } from '@/object-record/record-filter/hooks/useCreateEmptyRecordFilterFromFieldMetadataItem';
+import { useUpsertRecordFilter } from '@/object-record/record-filter/hooks/useUpsertRecordFilter';
+import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { computeRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeRecordGqlOperationFilter';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { FindRecordsActionFilter } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords';
+import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
+import styled from '@emotion/styled';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import { IconFilter } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
+import { v4 } from 'uuid';
+
+const StyledContainer = styled.div`
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const WorkflowFindRecordFilters = ({
+  objectMetadataItem,
+  onChange,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+  onChange: (filter: FindRecordsActionFilter) => void;
+}) => {
+  const rootRecordFilterGroup = useRecoilComponentValueV2(
+    rootLevelRecordFilterGroupComponentSelector,
+  );
+
+  const { childRecordFiltersAndRecordFilterGroups } =
+    useChildRecordFiltersAndRecordFilterGroups({
+      recordFilterGroupId: rootRecordFilterGroup?.id,
+    });
+
+  const { upsertRecordFilterGroup } = useUpsertRecordFilterGroup();
+
+  const { upsertRecordFilter } = useUpsertRecordFilter();
+
+  const { createEmptyRecordFilterFromFieldMetadataItem } =
+    useCreateEmptyRecordFilterFromFieldMetadataItem();
+
+  const availableFieldMetadataItemsForFilter = useRecoilValue(
+    availableFieldMetadataItemsForFilterFamilySelector({
+      objectMetadataItemId: objectMetadataItem.id,
+    }),
+  );
+
+  const defaultFieldMetadataItem =
+    availableFieldMetadataItemsForFilter.find(
+      (fieldMetadataItem) =>
+        fieldMetadataItem.id ===
+        objectMetadataItem?.labelIdentifierFieldMetadataId,
+    ) ?? availableFieldMetadataItemsForFilter[0];
+
+  const addRootRecordFilterGroup = () => {
+    const alreadyHasAdvancedFilterGroup = isDefined(rootRecordFilterGroup);
+
+    if (!alreadyHasAdvancedFilterGroup) {
+      const newRecordFilterGroup = {
+        id: v4(),
+        logicalOperator: RecordFilterGroupLogicalOperator.AND,
+      };
+
+      upsertRecordFilterGroup(newRecordFilterGroup);
+
+      if (!isDefined(defaultFieldMetadataItem)) {
+        throw new Error('Missing default filter definition');
+      }
+
+      const { newRecordFilter } = createEmptyRecordFilterFromFieldMetadataItem(
+        defaultFieldMetadataItem,
+      );
+
+      newRecordFilter.recordFilterGroupId = newRecordFilterGroup.id;
+
+      upsertRecordFilter(newRecordFilter);
+    }
+  };
+
+  const currentRecordFilterGroupsCallbackState =
+    useRecoilComponentCallbackStateV2(currentRecordFilterGroupsComponentState);
+
+  const currentRecordFiltersCallbackState = useRecoilComponentCallbackStateV2(
+    currentRecordFiltersComponentState,
+  );
+
+  const onUpdate = useRecoilCallback(
+    ({ snapshot }) =>
+      () => {
+        const currentRecordFilterGroups = getSnapshotValue(
+          snapshot,
+          currentRecordFilterGroupsCallbackState,
+        );
+
+        const currentRecordFilters = getSnapshotValue(
+          snapshot,
+          currentRecordFiltersCallbackState,
+        );
+
+        const gqlOperationFilter = computeRecordGqlOperationFilter({
+          fields: objectMetadataItem.fields,
+          filterValueDependencies: {},
+          recordFilters: currentRecordFilters,
+          recordFilterGroups: currentRecordFilterGroups,
+        });
+
+        const newFilter = {
+          recordFilterGroups: currentRecordFilterGroups,
+          recordFilters: currentRecordFilters,
+          gqlOperationFilter,
+        } as FindRecordsActionFilter;
+
+        onChange(newFilter);
+      },
+    [
+      currentRecordFilterGroupsCallbackState,
+      currentRecordFiltersCallbackState,
+      objectMetadataItem.fields,
+      onChange,
+    ],
+  );
+
+  return (
+    <AdvancedFilterContext.Provider
+      value={{
+        onUpdate,
+      }}
+    >
+      {isDefined(rootRecordFilterGroup) ? (
+        <StyledContainer>
+          {childRecordFiltersAndRecordFilterGroups.map(
+            (recordFilterGroupChild, recordFilterGroupChildIndex) =>
+              isRecordFilterGroupChildARecordFilterGroup(
+                recordFilterGroupChild,
+              ) ? (
+                <AdvancedFilterRecordFilterGroupRow
+                  key={recordFilterGroupChild.id}
+                  parentRecordFilterGroup={rootRecordFilterGroup}
+                  recordFilterGroup={recordFilterGroupChild}
+                  recordFilterGroupIndex={recordFilterGroupChildIndex}
+                  VariablePicker={WorkflowVariablePicker}
+                />
+              ) : (
+                <AdvancedFilterRecordFilterRow
+                  key={recordFilterGroupChild.id}
+                  recordFilterGroup={rootRecordFilterGroup}
+                  recordFilter={recordFilterGroupChild}
+                  recordFilterIndex={recordFilterGroupChildIndex}
+                  VariablePicker={WorkflowVariablePicker}
+                />
+              ),
+          )}
+          <AdvancedFilterAddFilterRuleSelect
+            recordFilterGroup={rootRecordFilterGroup}
+          />
+        </StyledContainer>
+      ) : (
+        <Button
+          Icon={IconFilter}
+          size="small"
+          variant="secondary"
+          accent="default"
+          onClick={addRootRecordFilterGroup}
+          ariaLabel="Add filter"
+          title="Add filter"
+        />
+      )}
+    </AdvancedFilterContext.Provider>
+  );
+};

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowFindRecordFiltersEffect.tsx

@@ -0,0 +1,89 @@
+import { useSetAdvancedFilterDropdownStates } from '@/object-record/advanced-filter/hooks/useSetAdvancedFilterDropdownAllRowsStates';
+import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
+import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyStateV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { hasInitializedCurrentRecordFilterGroupsComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFilterGroupsComponentFamilyState';
+import { hasInitializedCurrentRecordFiltersComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFiltersComponentFamilyState';
+import { FindRecordsActionFilter } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords';
+import { useEffect, useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+
+export const WorkflowFindRecordFiltersEffect = ({
+  defaultValue,
+}: {
+  defaultValue?: FindRecordsActionFilter;
+}) => {
+  const [
+    hasInitializedCurrentRecordFilters,
+    setHasInitializedCurrentRecordFilters,
+  ] = useRecoilComponentFamilyStateV2(
+    hasInitializedCurrentRecordFiltersComponentFamilyState,
+    {},
+  );
+
+  const [
+    hasInitializedCurrentRecordFilterGroups,
+    setHasInitializedCurrentRecordFilterGroups,
+  ] = useRecoilComponentFamilyStateV2(
+    hasInitializedCurrentRecordFilterGroupsComponentFamilyState,
+    {},
+  );
+
+  const setCurrentRecordFilters = useSetRecoilComponentStateV2(
+    currentRecordFiltersComponentState,
+  );
+
+  const setCurrentRecordFilterGroups = useSetRecoilComponentStateV2(
+    currentRecordFilterGroupsComponentState,
+  );
+
+  const { setAdvancedFilterDropdownStates } =
+    useSetAdvancedFilterDropdownStates();
+
+  const [
+    shouldSetAdvancedFilterDropdownStates,
+    setShouldSetAdvancedFilterDropdownStates,
+  ] = useState(false);
+
+  useEffect(() => {
+    if (
+      !hasInitializedCurrentRecordFilters &&
+      isDefined(defaultValue?.recordFilters)
+    ) {
+      setCurrentRecordFilters(defaultValue.recordFilters ?? []);
+      setHasInitializedCurrentRecordFilters(true);
+      setShouldSetAdvancedFilterDropdownStates(true);
+    }
+  }, [
+    setCurrentRecordFilters,
+    hasInitializedCurrentRecordFilters,
+    setHasInitializedCurrentRecordFilters,
+    defaultValue?.recordFilters,
+  ]);
+
+  useEffect(() => {
+    if (
+      !hasInitializedCurrentRecordFilterGroups &&
+      isDefined(defaultValue?.recordFilterGroups)
+    ) {
+      setCurrentRecordFilterGroups(defaultValue.recordFilterGroups ?? []);
+
+      setHasInitializedCurrentRecordFilterGroups(true);
+    }
+  }, [
+    setCurrentRecordFilterGroups,
+    hasInitializedCurrentRecordFilterGroups,
+    setHasInitializedCurrentRecordFilterGroups,
+    defaultValue?.recordFilterGroups,
+  ]);
+
+  useEffect(() => {
+    if (shouldSetAdvancedFilterDropdownStates) {
+      setAdvancedFilterDropdownStates();
+      setShouldSetAdvancedFilterDropdownStates(false);
+    }
+  }, [shouldSetAdvancedFilterDropdownStates, setAdvancedFilterDropdownStates]);
+
+  return null;
+};

packages/twenty-server/src/modules/workflow/workflow-executor/workflow-actions/record-crud/find-records.workflow-action.ts

@@ -129,7 +129,8 @@ export class FindRecordsWorkflowAction implements WorkflowExecutor {
     const withFilterQueryBuilder = graphqlQueryParser.applyFilterToBuilder(
       queryBuilder,
       workflowActionInput.objectName,
-      workflowActionInput.filter ?? ({} as ObjectRecordFilter),
+      workflowActionInput.filter?.gqlOperationFilter ??
+        ({} as ObjectRecordFilter),
     );
 
     const orderByWithIdCondition = [
@@ -167,14 +168,15 @@ export class FindRecordsWorkflowAction implements WorkflowExecutor {
     const withFilterCountQueryBuilder = graphqlQueryParser.applyFilterToBuilder(
       countQueryBuilder,
       workflowActionInput.objectName,
-      workflowActionInput.filter ?? ({} as ObjectRecordFilter),
+      workflowActionInput.filter?.gqlOperationFilter ??
+        ({} as ObjectRecordFilter),
     );
 
     const withDeletedCountQueryBuilder =
       graphqlQueryParser.applyDeletedAtToBuilder(
         withFilterCountQueryBuilder,
-        workflowActionInput.filter
+        workflowActionInput.filter?.gqlOperationFilter
-          ? workflowActionInput.filter
+          ? workflowActionInput.filter.gqlOperationFilter
           : ({} as ObjectRecordFilter),
       );
 

packages/twenty-server/src/modules/workflow/workflow-executor/workflow-actions/record-crud/types/workflow-record-crud-action-input.type.ts

@@ -25,7 +25,14 @@ export type WorkflowDeleteRecordActionInput = {
 
 export type WorkflowFindRecordsActionInput = {
   objectName: string;
-  filter?: Partial<ObjectRecordFilter>;
+  // TODO: migrate gql computation and record filter groups to twenty-shared
+  filter?: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    recordFilterGroups?: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    recordFilters?: any;
+    gqlOperationFilter?: Partial<ObjectRecordFilter>[];
+  };
   orderBy?: Partial<ObjectRecordOrderBy>;
   limit?: number;
 };