Build column design for advanced filters (#12534)

Figma https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=45225-472099&p=f&m=dev A few design items need to be discussed with product (font, add filter button...) to be consistent with existing advanced filter dropdown. I will also add stories. <img width="495" alt="Capture d’écran 2025-06-11 à 11 11 03" src="https://github.com/user-attachments/assets/1fa2fa1e-b4b1-4456-9f9e-81083b0caac6" />
2025-06-11 14:01:00 +02:00
parent beba4b8313
commit ee7d4380d1
23 changed files with 453 additions and 179 deletions
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowRunStepNodeDetail.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowRunStepNodeDetail.tsx
@ -5,9 +5,9 @@ import { WorkflowDiagramRunStatus } from '@/workflow/workflow-diagram/types/Work
 import { WorkflowActionServerlessFunction } from '@/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowActionServerlessFunction';
 import { WorkflowEditActionCreateRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord';
 import { WorkflowEditActionDeleteRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord';
-import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords';
 import { WorkflowEditActionSendEmail } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail';
 import { WorkflowEditActionUpdateRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpdateRecord';
+import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords';
 import { WorkflowEditActionFormFiller } from '@/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFiller';
 import { WorkflowEditTriggerCronForm } from '@/workflow/workflow-trigger/components/WorkflowEditTriggerCronForm';
 import { WorkflowEditTriggerDatabaseEventForm } from '@/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm';
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepDetail.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepDetail.tsx
@ -4,9 +4,9 @@ import { getStepDefinitionOrThrow } from '@/workflow/utils/getStepDefinitionOrTh
 import { WorkflowActionServerlessFunction } from '@/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowActionServerlessFunction';
 import { WorkflowEditActionCreateRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord';
 import { WorkflowEditActionDeleteRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord';
-import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords';
 import { WorkflowEditActionSendEmail } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail';
 import { WorkflowEditActionUpdateRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpdateRecord';
+import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords';
 import { WorkflowEditActionFormBuilder } from '@/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder';
 import { WorkflowEditTriggerCronForm } from '@/workflow/workflow-trigger/components/WorkflowEditTriggerCronForm';
 import { WorkflowEditTriggerDatabaseEventForm } from '@/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm';
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/stories/WorkflowEditActionFindRecords.stories.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/stories/WorkflowEditActionFindRecords.stories.tsx
@ -1,7 +1,8 @@
 import { WorkflowFindRecordsAction } from '@/workflow/types/Workflow';
-import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFindRecords';
+import { WorkflowEditActionFindRecords } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@ -10,7 +11,6 @@ import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorato
 import { WorkspaceDecorator } from '~/testing/decorators/WorkspaceDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
-import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';

 const DEFAULT_ACTION = {
  id: getWorkflowNodeIdMock(),
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts
@ -23,10 +23,9 @@ export const RECORD_ACTIONS: Array<{
    type: 'DELETE_RECORD',
    icon: 'IconTrash',
  },
-  // TODO: Add search records action
-  // {
-  //   label: 'Search Records',
-  //   type: 'FIND_RECORDS',
-  //   icon: 'IconSearch',
-  // },
+  {
+    label: 'Search Records',
+    type: 'FIND_RECORDS',
+    icon: 'IconSearch',
+  },
 ];
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords.tsx
@ -11,12 +11,14 @@ import { RecordFilterGroup } from '@/object-record/record-filter-group/types/Rec
 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 { InputLabel } from '@/ui/input/components/InputLabel';
 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 { WorkflowFindRecordsFilters } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFilters';
+import { WorkflowFindRecordsFiltersEffect } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFiltersEffect';
 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 { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { HorizontalSeparator, useIcons } from 'twenty-ui/display';
 import { SelectOption } from 'twenty-ui/input';
@ -52,6 +54,7 @@ export const WorkflowEditActionFindRecords = ({
  actionOptions,
 }: WorkflowEditActionFindRecordsProps) => {
  const { getIcon } = useIcons();
+  const { t } = useLingui();

  const { activeNonSystemObjectMetadataItems } =
    useFilteredObjectMetadataItems();
@ -116,7 +119,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}`;
+  const instanceId = `workflow-edit-action-record-find-records-${action.id}-${formData.objectName}`;

  return (
    <>
@ -161,42 +164,45 @@ 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 }}
+          <div>
+            <InputLabel>{t`Conditions`}</InputLabel>
+            <RecordIndexContextProvider
+              value={{
+                indexIdentifierUrl: () => '',
+                onIndexRecordsLoaded: () => {},
+                objectNamePlural: selectedObjectMetadataItem.labelPlural,
+                objectNameSingular: selectedObjectMetadataItem.nameSingular,
+                objectMetadataItem: selectedObjectMetadataItem,
+                recordIndexId: instanceId,
+                objectPermissionsByObjectMetadataId,
+              }}
            >
-              <RecordFiltersComponentInstanceContext.Provider
+              <RecordFilterGroupsComponentInstanceContext.Provider
                value={{ instanceId }}
              >
-                <WorkflowFindRecordFilters
-                  objectMetadataItem={selectedObjectMetadataItem}
-                  onChange={(filter: FindRecordsActionFilter) => {
-                    const newFormData: FindRecordsFormData = {
-                      ...formData,
-                      filter,
-                    };
+                <RecordFiltersComponentInstanceContext.Provider
+                  value={{ instanceId }}
+                >
+                  <WorkflowFindRecordsFilters
+                    objectMetadataItem={selectedObjectMetadataItem}
+                    onChange={(filter: FindRecordsActionFilter) => {
+                      const newFormData: FindRecordsFormData = {
+                        ...formData,
+                        filter,
+                      };

-                    setFormData(newFormData);
+                      setFormData(newFormData);

-                    saveAction(newFormData);
-                  }}
-                />
-                <WorkflowFindRecordFiltersEffect
-                  defaultValue={formData.filter}
-                />
-              </RecordFiltersComponentInstanceContext.Provider>
-            </RecordFilterGroupsComponentInstanceContext.Provider>
-          </RecordIndexContextProvider>
+                      saveAction(newFormData);
+                    }}
+                  />
+                  <WorkflowFindRecordsFiltersEffect
+                    defaultValue={formData.filter}
+                  />
+                </RecordFiltersComponentInstanceContext.Provider>
+              </RecordFilterGroupsComponentInstanceContext.Provider>
+            </RecordIndexContextProvider>
+          </div>
        )}

        <FormNumberFieldInput
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsAddFilterButton.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsAddFilterButton.tsx
@ -0,0 +1,74 @@
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector';
+import { useUpsertRecordFilterGroup } from '@/object-record/record-filter-group/hooks/useUpsertRecordFilterGroup';
+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 { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2';
+import { hasInitializedCurrentRecordFiltersComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFiltersComponentFamilyState';
+import { isDefined } from 'twenty-shared/utils';
+import { IconFilter } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
+import { v4 } from 'uuid';
+export const WorkflowFindRecordsAddFilterButton = ({
+  defaultFieldMetadataItem,
+}: {
+  defaultFieldMetadataItem: FieldMetadataItem;
+}) => {
+  const rootRecordFilterGroup = useRecoilComponentValueV2(
+    rootLevelRecordFilterGroupComponentSelector,
+  );
+
+  const { upsertRecordFilterGroup } = useUpsertRecordFilterGroup();
+
+  const { upsertRecordFilter } = useUpsertRecordFilter();
+
+  const { createEmptyRecordFilterFromFieldMetadataItem } =
+    useCreateEmptyRecordFilterFromFieldMetadataItem();
+
+  const setHasInitializedCurrentRecordFilters =
+    useSetRecoilComponentFamilyStateV2(
+      hasInitializedCurrentRecordFiltersComponentFamilyState,
+      {},
+    );
+
+  const addRootRecordFilterGroup = () => {
+    const alreadyHasAdvancedFilterGroup = isDefined(rootRecordFilterGroup);
+
+    if (!alreadyHasAdvancedFilterGroup) {
+      setHasInitializedCurrentRecordFilters(false);
+
+      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);
+    }
+  };
+
+  return (
+    <Button
+      Icon={IconFilter}
+      size="small"
+      variant="secondary"
+      accent="default"
+      onClick={addRootRecordFilterGroup}
+      ariaLabel="Add filter"
+      title="Add filter"
+    />
+  );
+};
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFilters.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFilters.tsx
@ -1,40 +1,40 @@
 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 { AdvancedFilterRecordFilterColumn } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterColumn';
+import { AdvancedFilterRecordFilterGroupColumn } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupColumn';
 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 { FindRecordsActionFilter } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords';
+import { WorkflowFindRecordsAddFilterButton } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsAddFilterButton';
 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)};
+  gap: ${({ theme }) => theme.spacing(1)};
 `;

-export const WorkflowFindRecordFilters = ({
+const StyledChildContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+  width: 100%;
+`;
+
+export const WorkflowFindRecordsFilters = ({
  objectMetadataItem,
  onChange,
 }: {
@ -50,13 +50,6 @@ export const WorkflowFindRecordFilters = ({
      recordFilterGroupId: rootRecordFilterGroup?.id,
    });

-  const { upsertRecordFilterGroup } = useUpsertRecordFilterGroup();
-
-  const { upsertRecordFilter } = useUpsertRecordFilter();
-
-  const { createEmptyRecordFilterFromFieldMetadataItem } =
-    useCreateEmptyRecordFilterFromFieldMetadataItem();
-
  const availableFieldMetadataItemsForFilter = useRecoilValue(
    availableFieldMetadataItemsForFilterFamilySelector({
      objectMetadataItemId: objectMetadataItem.id,
@ -70,31 +63,6 @@ export const WorkflowFindRecordFilters = ({
        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);

@ -142,45 +110,42 @@ export const WorkflowFindRecordFilters = ({
    <AdvancedFilterContext.Provider
      value={{
        onUpdate,
+        isColumn: true,
      }}
    >
      {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}
-                />
-              ),
-          )}
+          <StyledChildContainer>
+            {childRecordFiltersAndRecordFilterGroups.map(
+              (recordFilterGroupChild, recordFilterGroupChildIndex) =>
+                isRecordFilterGroupChildARecordFilterGroup(
+                  recordFilterGroupChild,
+                ) ? (
+                  <AdvancedFilterRecordFilterGroupColumn
+                    key={recordFilterGroupChild.id}
+                    parentRecordFilterGroup={rootRecordFilterGroup}
+                    recordFilterGroup={recordFilterGroupChild}
+                    recordFilterGroupIndex={recordFilterGroupChildIndex}
+                    VariablePicker={WorkflowVariablePicker}
+                  />
+                ) : (
+                  <AdvancedFilterRecordFilterColumn
+                    key={recordFilterGroupChild.id}
+                    recordFilterGroup={rootRecordFilterGroup}
+                    recordFilter={recordFilterGroupChild}
+                    recordFilterIndex={recordFilterGroupChildIndex}
+                    VariablePicker={WorkflowVariablePicker}
+                  />
+                ),
+            )}
+          </StyledChildContainer>
          <AdvancedFilterAddFilterRuleSelect
            recordFilterGroup={rootRecordFilterGroup}
          />
        </StyledContainer>
      ) : (
-        <Button
-          Icon={IconFilter}
-          size="small"
-          variant="secondary"
-          accent="default"
-          onClick={addRootRecordFilterGroup}
-          ariaLabel="Add filter"
-          title="Add filter"
+        <WorkflowFindRecordsAddFilterButton
+          defaultFieldMetadataItem={defaultFieldMetadataItem}
        />
      )}
    </AdvancedFilterContext.Provider>
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFiltersEffect.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFiltersEffect.tsx
@ -5,11 +5,11 @@ import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-
 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 { FindRecordsActionFilter } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords';
 import { useEffect, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';

-export const WorkflowFindRecordFiltersEffect = ({
+export const WorkflowFindRecordsFiltersEffect = ({
  defaultValue,
 }: {
  defaultValue?: FindRecordsActionFilter;
@ -52,8 +52,8 @@ export const WorkflowFindRecordFiltersEffect = ({
      isDefined(defaultValue?.recordFilters)
    ) {
      setCurrentRecordFilters(defaultValue.recordFilters ?? []);
-      setHasInitializedCurrentRecordFilters(true);
      setShouldSetAdvancedFilterDropdownStates(true);
+      setHasInitializedCurrentRecordFilters(true);
    }
  }, [
    setCurrentRecordFilters,
@ -65,10 +65,10 @@ export const WorkflowFindRecordFiltersEffect = ({
  useEffect(() => {
    if (
      !hasInitializedCurrentRecordFilterGroups &&
-      isDefined(defaultValue?.recordFilterGroups)
+      isDefined(defaultValue?.recordFilterGroups) &&
+      defaultValue.recordFilterGroups.length > 0
    ) {
-      setCurrentRecordFilterGroups(defaultValue.recordFilterGroups ?? []);
-
+      setCurrentRecordFilterGroups(defaultValue.recordFilterGroups);
      setHasInitializedCurrentRecordFilterGroups(true);
    }
  }, [