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’écran 2025-06-11 à 11 11 03"
src="https://github.com/user-attachments/assets/1fa2fa1e-b4b1-4456-9f9e-81083b0caac6"
/>

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

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+const StyledColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const AdvancedFilterDropdownColumn = StyledColumn;

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

@@ -1,15 +1,18 @@
 import { AdvancedFilterLogicalOperatorDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
 
 import styled from '@emotion/styled';
+import { useContext } from 'react';
 import { capitalize } from 'twenty-shared/utils';
 
-const StyledText = styled.div`
+const StyledText = styled.div<{ noPadding?: boolean }>`
   height: ${({ theme }) => theme.spacing(8)};
   display: flex;
   align-items: center;
 
-  padding-left: ${({ theme }) => theme.spacing(2.25)};
+  padding-left: ${({ theme, noPadding }) =>
+    noPadding ? 0 : theme.spacing(2.25)};
 `;
 
 const StyledContainer = styled.div`
@@ -27,18 +30,22 @@ type AdvancedFilterLogicalOperatorCellProps = {
 export const AdvancedFilterLogicalOperatorCell = ({
   index,
   recordFilterGroup,
-}: AdvancedFilterLogicalOperatorCellProps) => (
+}: AdvancedFilterLogicalOperatorCellProps) => {
-  <StyledContainer>
+  const { isColumn } = useContext(AdvancedFilterContext);
-    {index === 0 ? (
+
-      <StyledText>Where</StyledText>
+  return (
-    ) : index === 1 ? (
+    <StyledContainer>
-      <AdvancedFilterLogicalOperatorDropdown
+      {index === 0 ? (
-        recordFilterGroup={recordFilterGroup}
+        <StyledText noPadding={isColumn}>Where</StyledText>
-      />
+      ) : index === 1 ? (
-    ) : (
+        <AdvancedFilterLogicalOperatorDropdown
-      <StyledText>
+          recordFilterGroup={recordFilterGroup}
-        {capitalize(recordFilterGroup.logicalOperator.toLowerCase())}
+        />
-      </StyledText>
+      ) : (
-    )}
+        <StyledText noPadding={isColumn}>
-  </StyledContainer>
+          {capitalize(recordFilterGroup.logicalOperator.toLowerCase())}
-);
+        </StyledText>
+      )}
+    </StyledContainer>
+  );
+};

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

@@ -0,0 +1,36 @@
+import { AdvancedFilterRecordFilterColumn } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterColumn';
+import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
+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 { useContext } from 'react';
+
+export const AdvancedFilterRecordFilter = ({
+  recordFilterGroup,
+  recordFilter,
+  recordFilterIndex,
+  VariablePicker,
+}: {
+  recordFilterGroup: RecordFilterGroup;
+  recordFilter: RecordFilter;
+  recordFilterIndex: number;
+  VariablePicker?: VariablePickerComponent;
+}) => {
+  const { isColumn } = useContext(AdvancedFilterContext);
+
+  return isColumn ? (
+    <AdvancedFilterRecordFilterColumn
+      recordFilterGroup={recordFilterGroup}
+      recordFilter={recordFilter}
+      recordFilterIndex={recordFilterIndex}
+      VariablePicker={VariablePicker}
+    />
+  ) : (
+    <AdvancedFilterRecordFilterRow
+      recordFilterGroup={recordFilterGroup}
+      recordFilter={recordFilter}
+      recordFilterIndex={recordFilterIndex}
+    />
+  );
+};

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

@@ -0,0 +1,63 @@
+import { AdvancedFilterDropdownColumn } from '@/object-record/advanced-filter/components/AdvancedFilterDropdownColumn';
+import { AdvancedFilterFieldSelectDropdownButton } from '@/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton';
+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 { 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 styled from '@emotion/styled';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const AdvancedFilterRecordFilterColumn = ({
+  recordFilterGroup,
+  recordFilter,
+  recordFilterIndex,
+  VariablePicker,
+}: {
+  recordFilterGroup: RecordFilterGroup;
+  recordFilter: RecordFilter;
+  recordFilterIndex: number;
+  VariablePicker?: VariablePickerComponent;
+}) => {
+  return (
+    <ObjectFilterDropdownComponentInstanceContext.Provider
+      value={{
+        instanceId: getAdvancedFilterObjectFilterDropdownComponentInstanceId(
+          recordFilter.id,
+        ),
+      }}
+    >
+      <AdvancedFilterDropdownColumn>
+        <StyledContainer>
+          <AdvancedFilterLogicalOperatorCell
+            index={recordFilterIndex}
+            recordFilterGroup={recordFilterGroup}
+          />
+          <AdvancedFilterRecordFilterOptionsDropdown
+            recordFilterId={recordFilter.id}
+          />
+        </StyledContainer>
+        <AdvancedFilterFieldSelectDropdownButton
+          recordFilterId={recordFilter.id}
+        />
+        <AdvancedFilterRecordFilterOperandSelect
+          recordFilterId={recordFilter.id}
+        />
+        <AdvancedFilterValueFormInput
+          recordFilterId={recordFilter.id}
+          VariablePicker={VariablePicker}
+        />
+      </AdvancedFilterDropdownColumn>
+    </ObjectFilterDropdownComponentInstanceContext.Provider>
+  );
+};

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

@@ -0,0 +1,36 @@
+import { AdvancedFilterRecordFilterGroupColumn } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupColumn';
+import { AdvancedFilterRecordFilterGroupRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupRow';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
+import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
+import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
+import { useContext } from 'react';
+
+export const AdvancedFilterRecordFilterGroup = ({
+  parentRecordFilterGroup,
+  recordFilterGroup,
+  recordFilterGroupIndex,
+  VariablePicker,
+}: {
+  parentRecordFilterGroup: RecordFilterGroup;
+  recordFilterGroup: RecordFilterGroup;
+  recordFilterGroupIndex: number;
+  VariablePicker?: VariablePickerComponent;
+}) => {
+  const { isColumn } = useContext(AdvancedFilterContext);
+
+  return isColumn ? (
+    <AdvancedFilterRecordFilterGroupColumn
+      parentRecordFilterGroup={parentRecordFilterGroup}
+      recordFilterGroup={recordFilterGroup}
+      recordFilterGroupIndex={recordFilterGroupIndex}
+      VariablePicker={VariablePicker}
+    />
+  ) : (
+    <AdvancedFilterRecordFilterGroupRow
+      parentRecordFilterGroup={parentRecordFilterGroup}
+      recordFilterGroup={recordFilterGroup}
+      recordFilterGroupIndex={recordFilterGroupIndex}
+      VariablePicker={VariablePicker}
+    />
+  );
+};

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

@@ -1,5 +1,5 @@
 import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect';
-import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
+import { AdvancedFilterRecordFilter } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilter';
 
 import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
@@ -45,7 +45,7 @@ export const AdvancedFilterRecordFilterGroupChildren = ({
   return (
     <StyledContainer isGrayBackground={hasParentRecordFilterGroup}>
       {childRecordFilters.map((childRecordFilter, childRecordFilterIndex) => (
-        <AdvancedFilterRecordFilterRow
+        <AdvancedFilterRecordFilter
           key={childRecordFilter.id}
           recordFilter={childRecordFilter}
           recordFilterIndex={childRecordFilterIndex}

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

@@ -0,0 +1,44 @@
+import { AdvancedFilterDropdownColumn } from '@/object-record/advanced-filter/components/AdvancedFilterDropdownColumn';
+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';
+import styled from '@emotion/styled';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const AdvancedFilterRecordFilterGroupColumn = ({
+  parentRecordFilterGroup,
+  recordFilterGroup,
+  recordFilterGroupIndex,
+  VariablePicker,
+}: {
+  parentRecordFilterGroup: RecordFilterGroup;
+  recordFilterGroup: RecordFilterGroup;
+  recordFilterGroupIndex: number;
+  VariablePicker?: VariablePickerComponent;
+}) => {
+  return (
+    <AdvancedFilterDropdownColumn>
+      <StyledContainer>
+        <AdvancedFilterLogicalOperatorCell
+          index={recordFilterGroupIndex}
+          recordFilterGroup={parentRecordFilterGroup}
+        />
+        <AdvancedFilterRecordFilterGroupOptionsDropdown
+          recordFilterGroupId={recordFilterGroup.id}
+        />
+      </StyledContainer>
+      <AdvancedFilterRecordFilterGroupChildren
+        recordFilterGroupId={recordFilterGroup.id}
+        VariablePicker={VariablePicker}
+      />
+    </AdvancedFilterDropdownColumn>
+  );
+};

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

@@ -1,4 +1,5 @@
 import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { useApplyObjectFilterDropdownOperand } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand';
 
 import { getOperandLabel } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
@@ -16,11 +17,12 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import styled from '@emotion/styled';
+import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { MenuItem } from 'twenty-ui/navigation';
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ isColumn?: boolean }>`
-  width: 100px;
+  width: ${({ isColumn }) => (isColumn ? 'auto' : '100px')};
 `;
 
 type AdvancedFilterRecordFilterOperandSelectProps = {
@@ -36,6 +38,8 @@ export const AdvancedFilterRecordFilterOperandSelect = ({
     currentRecordFiltersComponentState,
   );
 
+  const { isColumn } = useContext(AdvancedFilterContext);
+
   const filter = currentRecordFilters.find(
     (recordFilter) => recordFilter.id === recordFilterId,
   );
@@ -82,7 +86,7 @@ export const AdvancedFilterRecordFilterOperandSelect = ({
   }
 
   return (
-    <StyledContainer>
+    <StyledContainer isColumn={isColumn}>
       <Dropdown
         dropdownId={dropdownId}
         clickableComponent={

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

@@ -3,25 +3,20 @@ 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
@@ -36,20 +31,14 @@ export const AdvancedFilterRecordFilterRow = ({
           index={recordFilterIndex}
           recordFilterGroup={recordFilterGroup}
         />
+
         <AdvancedFilterFieldSelectDropdownButton
           recordFilterId={recordFilter.id}
         />
         <AdvancedFilterRecordFilterOperandSelect
           recordFilterId={recordFilter.id}
         />
-        {isDefined(VariablePicker) ? (
+        <AdvancedFilterValueInput recordFilterId={recordFilter.id} />
-          <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

@@ -1,7 +1,7 @@
 import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect';
+import { AdvancedFilterRecordFilter } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilter';
+import { AdvancedFilterRecordFilterGroup } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroup';
 
-import { AdvancedFilterRecordFilterGroupRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupRow';
-import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
 import { ADVANCED_FILTER_DROPDOWN_CONTENT_WIDTH } from '@/object-record/advanced-filter/constants/AdvancedFilterDropdownContentWidth';
 import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
 import { rootLevelRecordFilterGroupComponentSelector } from '@/object-record/advanced-filter/states/rootLevelRecordFilterGroupComponentSelector';
@@ -45,14 +45,14 @@ export const AdvancedFilterRootRecordFilterGroup = () => {
               isRecordFilterGroupChildARecordFilterGroup(
                 recordFilterGroupChild,
               ) ? (
-                <AdvancedFilterRecordFilterGroupRow
+                <AdvancedFilterRecordFilterGroup
                   key={recordFilterGroupChild.id}
                   parentRecordFilterGroup={rootRecordFilterGroup}
                   recordFilterGroup={recordFilterGroupChild}
                   recordFilterGroupIndex={recordFilterGroupChildIndex}
                 />
               ) : (
-                <AdvancedFilterRecordFilterRow
+                <AdvancedFilterRecordFilter
                   key={recordFilterGroupChild.id}
                   recordFilterGroup={rootRecordFilterGroup}
                   recordFilter={recordFilterGroupChild}

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

@@ -10,12 +10,12 @@ import { JsonValue } from 'type-fest';
 
 export const AdvancedFilterValueFormCompositeFieldInput = ({
   recordFilter,
-  VariablePicker,
   onChange,
+  VariablePicker,
 }: {
   recordFilter: RecordFilter;
-  VariablePicker: VariablePickerComponent;
   onChange: (newValue: JsonValue) => void;
+  VariablePicker?: VariablePickerComponent;
 }) => {
   const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
     subFieldNameUsedInDropdownComponentState,
@@ -25,8 +25,8 @@ export const AdvancedFilterValueFormCompositeFieldInput = ({
 
   return (
     <>
-      {filterType === 'ADDRESS' &&
+      {filterType === 'ADDRESS' ? (
-        (subFieldNameUsedInDropdown === 'addressCountry' ? (
+        subFieldNameUsedInDropdown === 'addressCountry' ? (
           <FormCountrySelectInput
             selectedCountryName={recordFilter.value}
             onChange={onChange}
@@ -38,9 +38,9 @@ export const AdvancedFilterValueFormCompositeFieldInput = ({
             onChange={onChange}
             VariablePicker={VariablePicker}
           />
-        ))}
+        )
-      {filterType === 'CURRENCY' &&
+      ) : filterType === 'CURRENCY' ? (
-        (recordFilter.subFieldName === 'currencyCode' ? (
+        recordFilter.subFieldName === 'currencyCode' ? (
           <FormCountryCodeSelectInput
             selectedCountryCode={recordFilter.value}
             onChange={onChange}
@@ -52,7 +52,28 @@ export const AdvancedFilterValueFormCompositeFieldInput = ({
             onChange={onChange}
             VariablePicker={VariablePicker}
           />
-        ) : null)}
+        ) : null
+      ) : filterType === 'PHONES' ? (
+        recordFilter.subFieldName === 'primaryPhoneNumber' ? (
+          <FormNumberFieldInput
+            defaultValue={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        ) : (
+          <FormTextFieldInput
+            defaultValue={recordFilter.value}
+            onChange={onChange}
+            VariablePicker={VariablePicker}
+          />
+        )
+      ) : (
+        <FormTextFieldInput
+          defaultValue={recordFilter.value}
+          onChange={onChange}
+          VariablePicker={VariablePicker}
+        />
+      )}
     </>
   );
 };

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

@@ -1,10 +1,13 @@
+import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
 import { AdvancedFilterValueFormCompositeFieldInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormCompositeFieldInput';
 import { useApplyObjectFilterDropdownFilterValue } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownFilterValue';
+import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
 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 { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
@@ -15,12 +18,14 @@ export const AdvancedFilterValueFormInput = ({
   VariablePicker,
 }: {
   recordFilterId: string;
-  VariablePicker: VariablePickerComponent;
+  VariablePicker?: VariablePickerComponent;
 }) => {
   const currentRecordFilters = useRecoilComponentValueV2(
     currentRecordFiltersComponentState,
   );
 
+  const { objectMetadataItem } = useRecordIndexContextOrThrow();
+
   const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
     subFieldNameUsedInDropdownComponentState,
   );
@@ -35,9 +40,20 @@ export const AdvancedFilterValueFormInput = ({
     useApplyObjectFilterDropdownFilterValue();
 
   const handleChange = (newValue: JsonValue) => {
-    applyObjectFilterDropdownFilterValue(newValue as string);
+    applyObjectFilterDropdownFilterValue(String(newValue));
   };
 
+  const fieldMetadataItemUsedInDropdown = useRecoilComponentValueV2(
+    fieldMetadataItemUsedInDropdownComponentSelector,
+  );
+
+  const fieldDefinition = fieldMetadataItemUsedInDropdown
+    ? formatFieldMetadataItemAsFieldDefinition({
+        field: fieldMetadataItemUsedInDropdown,
+        objectMetadataItem: objectMetadataItem,
+      })
+    : null;
+
   if (isDisabled) {
     return null;
   }
@@ -57,7 +73,7 @@ export const AdvancedFilterValueFormInput = ({
       field={{
         type: recordFilter.type as FieldMetadataType,
         label: '',
-        metadata: {} as FieldMetadata,
+        metadata: fieldDefinition?.metadata as FieldMetadata,
       }}
       defaultValue={recordFilter.value}
       onChange={handleChange}

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

@@ -1,3 +1,4 @@
+import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { availableFieldMetadataItemsForFilterFamilySelector } from '@/object-metadata/states/availableFieldMetadataItemsForFilterFamilySelector';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
@@ -7,11 +8,13 @@ import { isDefined } from 'twenty-shared/utils';
 
 export const useDefaultFieldMetadataItemForFilter = () => {
   const { currentView } = useGetCurrentViewOnly();
+  const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
 
-  const objectMetadataId = currentView?.objectMetadataId;
+  const objectMetadataId =
+    currentView?.objectMetadataId ?? activeObjectMetadataItems[0]?.id;
 
   if (!isDefined(objectMetadataId)) {
-    throw new Error('Object metadata id is missing from current view');
+    throw new Error('Could not find default object metadata item for filter');
   }
 
   const { objectMetadataItem } = useObjectMetadataItemById({

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

@@ -2,6 +2,7 @@ import { createContext } from 'react';
 
 type AdvancedFilterContextType = {
   onUpdate?: () => void;
+  isColumn?: boolean;
 };
 
 export const AdvancedFilterContext = createContext<AdvancedFilterContextType>(

packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx

@@ -10,11 +10,11 @@ import { FormMultiSelectFieldInput } from '@/object-record/record-field/form-typ
 import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
 import { FormPhoneFieldInput } from '@/object-record/record-field/form-types/components/FormPhoneFieldInput';
 import { FormRawJsonFieldInput } from '@/object-record/record-field/form-types/components/FormRawJsonFieldInput';
+import { FormRelationToOneFieldInput } from '@/object-record/record-field/form-types/components/FormRelationToOneFieldInput';
 import { FormRichTextV2FieldInput } from '@/object-record/record-field/form-types/components/FormRichTextV2FieldInput';
 import { FormSelectFieldInput } from '@/object-record/record-field/form-types/components/FormSelectFieldInput';
 import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
 import { FormUuidFieldInput } from '@/object-record/record-field/form-types/components/FormUuidFieldInput';
-import { FormRelationToOneFieldInput } from '@/object-record/record-field/form-types/components/FormRelationToOneFieldInput';
 import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
 import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
 import {
@@ -42,11 +42,11 @@ import { isFieldMultiSelect } from '@/object-record/record-field/types/guards/is
 import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
 import { isFieldPhones } from '@/object-record/record-field/types/guards/isFieldPhones';
 import { isFieldRawJson } from '@/object-record/record-field/types/guards/isFieldRawJson';
+import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
 import { isFieldRichTextV2 } from '@/object-record/record-field/types/guards/isFieldRichTextV2';
 import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
 import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
 import { isFieldUuid } from '@/object-record/record-field/types/guards/isFieldUuid';
-import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
 import { JsonValue } from 'type-fest';
 
 type FormFieldInputProps = {

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

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

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

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',
-  //   label: 'Search Records',
+    type: 'FIND_RECORDS',
-  //   type: 'FIND_RECORDS',
+    icon: 'IconSearch',
-  //   icon: 'IconSearch',
+  },
-  // },
 ];

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 { WorkflowFindRecordsFilters } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFilters';
-import { WorkflowFindRecordFiltersEffect } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowFindRecordFiltersEffect';
+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
+          <div>
-            value={{
+            <InputLabel>{t`Conditions`}</InputLabel>
-              indexIdentifierUrl: () => '',
+            <RecordIndexContextProvider
-              onIndexRecordsLoaded: () => {},
+              value={{
-              objectNamePlural: selectedObjectMetadataItem.labelPlural,
+                indexIdentifierUrl: () => '',
-              objectNameSingular: selectedObjectMetadataItem.nameSingular,
+                onIndexRecordsLoaded: () => {},
-              objectMetadataItem: selectedObjectMetadataItem,
+                objectNamePlural: selectedObjectMetadataItem.labelPlural,
-              recordIndexId: instanceId,
+                objectNameSingular: selectedObjectMetadataItem.nameSingular,
-              objectPermissionsByObjectMetadataId,
+                objectMetadataItem: selectedObjectMetadataItem,
-            }}
+                recordIndexId: instanceId,
-          >
+                objectPermissionsByObjectMetadataId,
-            <RecordFilterGroupsComponentInstanceContext.Provider
+              }}
-              value={{ instanceId }}
             >
-              <RecordFiltersComponentInstanceContext.Provider
+              <RecordFilterGroupsComponentInstanceContext.Provider
                 value={{ instanceId }}
               >
-                <WorkflowFindRecordFilters
+                <RecordFiltersComponentInstanceContext.Provider
-                  objectMetadataItem={selectedObjectMetadataItem}
+                  value={{ instanceId }}
-                  onChange={(filter: FindRecordsActionFilter) => {
+                >
-                    const newFormData: FindRecordsFormData = {
+                  <WorkflowFindRecordsFilters
-                      ...formData,
+                    objectMetadataItem={selectedObjectMetadataItem}
-                      filter,
+                    onChange={(filter: FindRecordsActionFilter) => {
-                    };
+                      const newFormData: FindRecordsFormData = {
+                        ...formData,
+                        filter,
+                      };
 
-                    setFormData(newFormData);
+                      setFormData(newFormData);
 
-                    saveAction(newFormData);
+                      saveAction(newFormData);
-                  }}
+                    }}
-                />
+                  />
-                <WorkflowFindRecordFiltersEffect
+                  <WorkflowFindRecordsFiltersEffect
-                  defaultValue={formData.filter}
+                    defaultValue={formData.filter}
-                />
+                  />
-              </RecordFiltersComponentInstanceContext.Provider>
+                </RecordFiltersComponentInstanceContext.Provider>
-            </RecordFilterGroupsComponentInstanceContext.Provider>
+              </RecordFilterGroupsComponentInstanceContext.Provider>
-          </RecordIndexContextProvider>
+            </RecordIndexContextProvider>
+          </div>
         )}
 
         <FormNumberFieldInput

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

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 { AdvancedFilterRecordFilterColumn } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterColumn';
-import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
+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)};
+  gap: ${({ theme }) => theme.spacing(1)};
-  padding: ${({ theme }) => theme.spacing(2)};
 `;
 
-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(
+          <StyledChildContainer>
-            (recordFilterGroupChild, recordFilterGroupChildIndex) =>
+            {childRecordFiltersAndRecordFilterGroups.map(
-              isRecordFilterGroupChildARecordFilterGroup(
+              (recordFilterGroupChild, recordFilterGroupChildIndex) =>
-                recordFilterGroupChild,
+                isRecordFilterGroupChildARecordFilterGroup(
-              ) ? (
+                  recordFilterGroupChild,
-                <AdvancedFilterRecordFilterGroupRow
+                ) ? (
-                  key={recordFilterGroupChild.id}
+                  <AdvancedFilterRecordFilterGroupColumn
-                  parentRecordFilterGroup={rootRecordFilterGroup}
+                    key={recordFilterGroupChild.id}
-                  recordFilterGroup={recordFilterGroupChild}
+                    parentRecordFilterGroup={rootRecordFilterGroup}
-                  recordFilterGroupIndex={recordFilterGroupChildIndex}
+                    recordFilterGroup={recordFilterGroupChild}
-                  VariablePicker={WorkflowVariablePicker}
+                    recordFilterGroupIndex={recordFilterGroupChildIndex}
-                />
+                    VariablePicker={WorkflowVariablePicker}
-              ) : (
+                  />
-                <AdvancedFilterRecordFilterRow
+                ) : (
-                  key={recordFilterGroupChild.id}
+                  <AdvancedFilterRecordFilterColumn
-                  recordFilterGroup={rootRecordFilterGroup}
+                    key={recordFilterGroupChild.id}
-                  recordFilter={recordFilterGroupChild}
+                    recordFilterGroup={rootRecordFilterGroup}
-                  recordFilterIndex={recordFilterGroupChildIndex}
+                    recordFilter={recordFilterGroupChild}
-                  VariablePicker={WorkflowVariablePicker}
+                    recordFilterIndex={recordFilterGroupChildIndex}
-                />
+                    VariablePicker={WorkflowVariablePicker}
-              ),
+                  />
-          )}
+                ),
+            )}
+          </StyledChildContainer>
           <AdvancedFilterAddFilterRuleSelect
             recordFilterGroup={rootRecordFilterGroup}
           />
         </StyledContainer>
       ) : (
-        <Button
+        <WorkflowFindRecordsAddFilterButton
-          Icon={IconFilter}
+          defaultFieldMetadataItem={defaultFieldMetadataItem}
-          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/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);
     }
   }, [