Enable find records action + Implement readonly (#12636)

- Add readonly in context - Avoid using it in AdvancedFilters component directly. Keeping it workflow related <img width="495" alt="Capture d’écran 2025-06-16 à 18 23 34" src="https://github.com/user-attachments/assets/dfdfdb71-d5a9-4eed-8938-b06790c62bcd" />
2025-06-17 11:02:13 +02:00
parent 18d154282e
commit f7396e3531
15 changed files with 183 additions and 71 deletions
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButtonClickableSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButtonClickableSelect.tsx
@ -1,13 +1,5 @@
-import { useGetFieldMetadataItemById } from '@/object-metadata/hooks/useGetFieldMetadataItemById';
-import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel';
-import { isCompositeFieldType } from '@/object-record/object-filter-dropdown/utils/isCompositeFieldType';
-import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
-import { isValidSubFieldName } from '@/settings/data-model/utils/isValidSubFieldName';
+import { useRecordFilterField } from '@/object-record/advanced-filter/hooks/useRecordFilterField';
 import { SelectControl } from '@/ui/input/components/SelectControl';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { isNonEmptyString } from '@sniptt/guards';
-import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';

 type AdvancedFilterFieldSelectDropdownButtonClickableSelectProps = {
  recordFilterId: string;
@ -16,47 +8,14 @@ type AdvancedFilterFieldSelectDropdownButtonClickableSelectProps = {
 export const AdvancedFilterFieldSelectDropdownButtonClickableSelect = ({
  recordFilterId,
 }: AdvancedFilterFieldSelectDropdownButtonClickableSelectProps) => {
-  const currentRecordFilters = useRecoilComponentValueV2(
-    currentRecordFiltersComponentState,
-  );
-
-  const recordFilter = currentRecordFilters.find(
-    (recordFilter) => recordFilter.id === recordFilterId,
-  );
-
-  const { getFieldMetadataItemById } = useGetFieldMetadataItemById();
-
-  const fieldMetadataItem = isNonEmptyString(recordFilter?.fieldMetadataId)
-    ? getFieldMetadataItemById(recordFilter?.fieldMetadataId)
-    : undefined;
-
-  const { getIcon } = useIcons();
-
-  const fieldIcon = isDefined(fieldMetadataItem?.icon)
-    ? getIcon(fieldMetadataItem?.icon)
-    : undefined;
-
-  const subFieldLabel =
-    isDefined(fieldMetadataItem) &&
-    isCompositeFieldType(fieldMetadataItem.type) &&
-    isNonEmptyString(recordFilter?.subFieldName) &&
-    isValidSubFieldName(recordFilter.subFieldName)
-      ? getCompositeSubFieldLabel(
-          fieldMetadataItem.type,
-          recordFilter.subFieldName,
-        )
-      : '';
-
-  const fieldNameLabel = isNonEmptyString(subFieldLabel)
-    ? `${recordFilter?.label} / ${subFieldLabel}`
-    : (recordFilter?.label ?? '');
+  const { label, icon } = useRecordFilterField(recordFilterId);

  return (
    <SelectControl
      selectedOption={{
-        label: fieldNameLabel,
+        label,
        value: null,
-        Icon: fieldIcon,
+        Icon: icon,
      }}
    />
  );
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useRecordFilterField.ts
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useRecordFilterField.ts
@ -0,0 +1,51 @@
+import { useGetFieldMetadataItemById } from '@/object-metadata/hooks/useGetFieldMetadataItemById';
+import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel';
+import { isCompositeFieldType } from '@/object-record/object-filter-dropdown/utils/isCompositeFieldType';
+import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
+import { isValidSubFieldName } from '@/settings/data-model/utils/isValidSubFieldName';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { isNonEmptyString } from '@sniptt/guards';
+import { isDefined } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
+
+export const useRecordFilterField = (recordFilterId: string) => {
+  const currentRecordFilters = useRecoilComponentValueV2(
+    currentRecordFiltersComponentState,
+  );
+
+  const recordFilter = currentRecordFilters.find(
+    (recordFilter) => recordFilter.id === recordFilterId,
+  );
+
+  const { getFieldMetadataItemById } = useGetFieldMetadataItemById();
+
+  const fieldMetadataItem = isNonEmptyString(recordFilter?.fieldMetadataId)
+    ? getFieldMetadataItemById(recordFilter?.fieldMetadataId)
+    : undefined;
+
+  const { getIcon } = useIcons();
+
+  const icon = isDefined(fieldMetadataItem?.icon)
+    ? getIcon(fieldMetadataItem?.icon)
+    : undefined;
+
+  const subFieldLabel =
+    isDefined(fieldMetadataItem) &&
+    isCompositeFieldType(fieldMetadataItem.type) &&
+    isNonEmptyString(recordFilter?.subFieldName) &&
+    isValidSubFieldName(recordFilter.subFieldName)
+      ? getCompositeSubFieldLabel(
+          fieldMetadataItem.type,
+          recordFilter.subFieldName,
+        )
+      : '';
+
+  const label = isNonEmptyString(subFieldLabel)
+    ? `${recordFilter?.label} / ${subFieldLabel}`
+    : (recordFilter?.label ?? '');
+
+  return {
+    label,
+    icon,
+  };
+};
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts
@ -3,6 +3,7 @@ import { createContext } from 'react';
 type AdvancedFilterContextType = {
  onUpdate?: () => void;
  isWorkflowFindRecords?: boolean;
+  readonly?: boolean;
 };

 export const AdvancedFilterContext = createContext<AdvancedFilterContextType>(
--- 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/WorkflowAdvancedFilterFieldSelectDisabled.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFieldSelectDisabled.tsx
@ -0,0 +1,23 @@
+import { useRecordFilterField } from '@/object-record/advanced-filter/hooks/useRecordFilterField';
+import { SelectControl } from '@/ui/input/components/SelectControl';
+
+type WorkflowAdvancedFilterFieldSelectDisabledProps = {
+  recordFilterId: string;
+};
+
+export const WorkflowAdvancedFilterFieldSelectDisabled = ({
+  recordFilterId,
+}: WorkflowAdvancedFilterFieldSelectDisabledProps) => {
+  const { label, icon } = useRecordFilterField(recordFilterId);
+
+  return (
+    <SelectControl
+      selectedOption={{
+        label,
+        value: null,
+        Icon: icon,
+      }}
+      isDisabled
+    />
+  );
+};
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFormInput.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFormInput.tsx
@ -1,4 +1,5 @@
 import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { shouldShowFilterTextInput } from '@/object-record/advanced-filter/utils/shouldShowFilterTextInput';
 import { useApplyObjectFilterDropdownFilterValue } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownFilterValue';
 import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
@ -18,6 +19,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
 import { WorkflowAdvancedFilterValueFormCompositeFieldInput } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterValueFormCompositeFieldInput';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { isObject } from '@sniptt/guards';
+import { useContext } from 'react';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { JsonValue } from 'type-fest';
@ -27,6 +29,8 @@ export const WorkflowAdvancedFilterValueFormInput = ({
 }: {
  recordFilterId: string;
 }) => {
+  const { readonly } = useContext(AdvancedFilterContext);
+
  const currentRecordFilters = useRecoilComponentValueV2(
    currentRecordFiltersComponentState,
  );
@ -99,6 +103,7 @@ export const WorkflowAdvancedFilterValueFormInput = ({
        label={''}
        defaultValue={recordFilter.value}
        onChange={handleChange}
+        readonly={readonly}
        VariablePicker={WorkflowVariablePicker}
      />
    );
@ -123,6 +128,7 @@ export const WorkflowAdvancedFilterValueFormInput = ({
        label={''}
        defaultValue={recordFilter.value}
        onChange={handleChange}
+        readonly={readonly}
        VariablePicker={WorkflowVariablePicker}
        options={metadata?.options ?? []}
      />
@ -140,6 +146,7 @@ export const WorkflowAdvancedFilterValueFormInput = ({
      field={field}
      defaultValue={recordFilter.value}
      onChange={handleChange}
+      readonly={readonly}
      // VariablePicker is not supported for date filters yet
      VariablePicker={
        isFilterableByDateValue ? undefined : WorkflowVariablePicker
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterLogicalOperatorCell.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterLogicalOperatorCell.tsx
@ -1,7 +1,13 @@
 import { AdvancedFilterLogicalOperatorDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorDropdown';
+import { ADVANCED_FILTER_LOGICAL_OPERATOR_OPTIONS } from '@/object-record/advanced-filter/constants/AdvancedFilterLogicalOperatorOptions';
+import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advanced-filter/constants/DefaultAdvancedFilterDropdownOffset';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
+import { Select } from '@/ui/input/components/Select';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';

 import styled from '@emotion/styled';
+import { useContext } from 'react';
 import { capitalize } from 'twenty-shared/utils';

 const StyledText = styled.div`
@ -26,14 +32,28 @@ export const WorkflowAdvancedFilterLogicalOperatorCell = ({
  index,
  recordFilterGroup,
 }: WorkflowAdvancedFilterLogicalOperatorCellProps) => {
+  const { readonly } = useContext(AdvancedFilterContext);
+
  return (
    <StyledContainer>
      {index === 0 ? (
        <StyledText>Where</StyledText>
      ) : index === 1 ? (
-        <AdvancedFilterLogicalOperatorDropdown
-          recordFilterGroup={recordFilterGroup}
-        />
+        readonly ? (
+          <Select
+            fullWidth
+            dropdownWidth={GenericDropdownContentWidth.Narrow}
+            dropdownId={`advanced-filter-logical-operator-${recordFilterGroup.id}`}
+            value={recordFilterGroup.logicalOperator}
+            options={ADVANCED_FILTER_LOGICAL_OPERATOR_OPTIONS}
+            dropdownOffset={DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET}
+            disabled
+          />
+        ) : (
+          <AdvancedFilterLogicalOperatorDropdown
+            recordFilterGroup={recordFilterGroup}
+          />
+        )
      ) : (
        <StyledText>
          {capitalize(recordFilterGroup.logicalOperator.toLowerCase())}
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterColumn.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterColumn.tsx
@ -1,14 +1,17 @@
 import { AdvancedFilterFieldSelectDropdownButton } from '@/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton';
 import { AdvancedFilterRecordFilterOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId';
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 import { WorkflowAdvancedFilterDropdownColumn } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterDropdownColumn';
+import { WorkflowAdvancedFilterFieldSelectDisabled } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFieldSelectDisabled';
 import { WorkflowAdvancedFilterValueFormInput } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterFormInput';
 import { WorkflowAdvancedFilterLogicalOperatorCell } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterLogicalOperatorCell';
 import { WorkflowAdvancedFilterRecordFilterOperandSelect } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterOperandSelect';
 import styled from '@emotion/styled';
+import { useContext } from 'react';

 const StyledContainer = styled.div`
  display: flex;
@ -26,6 +29,8 @@ export const WorkflowAdvancedFilterRecordFilterColumn = ({
  recordFilter: RecordFilter;
  recordFilterIndex: number;
 }) => {
+  const { readonly } = useContext(AdvancedFilterContext);
+
  return (
    <ObjectFilterDropdownComponentInstanceContext.Provider
      value={{
@ -40,13 +45,21 @@ export const WorkflowAdvancedFilterRecordFilterColumn = ({
            index={recordFilterIndex}
            recordFilterGroup={recordFilterGroup}
          />
-          <AdvancedFilterRecordFilterOptionsDropdown
+          {!readonly && (
+            <AdvancedFilterRecordFilterOptionsDropdown
+              recordFilterId={recordFilter.id}
+            />
+          )}
+        </StyledContainer>
+        {readonly ? (
+          <WorkflowAdvancedFilterFieldSelectDisabled
            recordFilterId={recordFilter.id}
          />
-        </StyledContainer>
-        <AdvancedFilterFieldSelectDropdownButton
-          recordFilterId={recordFilter.id}
-        />
+        ) : (
+          <AdvancedFilterFieldSelectDropdownButton
+            recordFilterId={recordFilter.id}
+          />
+        )}
        <WorkflowAdvancedFilterRecordFilterOperandSelect
          recordFilterId={recordFilter.id}
        />
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterGroupChildren.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterGroupChildren.tsx
@ -1,8 +1,10 @@
 import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect';

 import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { WorkflowAdvancedFilterRecordFilterColumn } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterColumn';
 import styled from '@emotion/styled';
+import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';

 const StyledContainer = styled.div<{ isGrayBackground?: boolean }>`
@ -25,6 +27,7 @@ type WorkflowAdvancedFilterRecordFilterGroupChildrenProps = {
 export const WorkflowAdvancedFilterRecordFilterGroupChildren = ({
  recordFilterGroupId,
 }: WorkflowAdvancedFilterRecordFilterGroupChildrenProps) => {
+  const { readonly } = useContext(AdvancedFilterContext);
  const { currentRecordFilterGroup, childRecordFilters } =
    useChildRecordFiltersAndRecordFilterGroups({
      recordFilterGroupId,
@ -48,9 +51,11 @@ export const WorkflowAdvancedFilterRecordFilterGroupChildren = ({
          recordFilterGroup={currentRecordFilterGroup}
        />
      ))}
-      <AdvancedFilterAddFilterRuleSelect
-        recordFilterGroup={currentRecordFilterGroup}
-      />
+      {!readonly && (
+        <AdvancedFilterAddFilterRuleSelect
+          recordFilterGroup={currentRecordFilterGroup}
+        />
+      )}
    </StyledContainer>
  );
 };
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterGroupColumn.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterGroupColumn.tsx
@ -1,9 +1,11 @@
 import { AdvancedFilterRecordFilterGroupOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
 import { WorkflowAdvancedFilterDropdownColumn } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterDropdownColumn';
 import { WorkflowAdvancedFilterLogicalOperatorCell } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterLogicalOperatorCell';
 import { WorkflowAdvancedFilterRecordFilterGroupChildren } from '@/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterGroupChildren';
 import styled from '@emotion/styled';
+import { useContext } from 'react';

 const StyledContainer = styled.div`
  display: flex;
@ -21,6 +23,8 @@ export const WorkflowAdvancedFilterRecordFilterGroupColumn = ({
  recordFilterGroup: RecordFilterGroup;
  recordFilterGroupIndex: number;
 }) => {
+  const { readonly } = useContext(AdvancedFilterContext);
+
  return (
    <WorkflowAdvancedFilterDropdownColumn>
      <StyledContainer>
@ -28,9 +32,11 @@ export const WorkflowAdvancedFilterRecordFilterGroupColumn = ({
          index={recordFilterGroupIndex}
          recordFilterGroup={parentRecordFilterGroup}
        />
-        <AdvancedFilterRecordFilterGroupOptionsDropdown
-          recordFilterGroupId={recordFilterGroup.id}
-        />
+        {!readonly && (
+          <AdvancedFilterRecordFilterGroupOptionsDropdown
+            recordFilterGroupId={recordFilterGroup.id}
+          />
+        )}
      </StyledContainer>
      <WorkflowAdvancedFilterRecordFilterGroupChildren
        recordFilterGroupId={recordFilterGroup.id}
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterOperandSelect.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterRecordFilterOperandSelect.tsx
@ -1,10 +1,12 @@
 import { AdvancedFilterRecordFilterOperandSelectContent } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelectContent';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { getOperandLabel } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { RecordFilterOperand } from '@/object-record/record-filter/types/RecordFilterOperand';
 import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
 import { SelectControl } from '@/ui/input/components/SelectControl';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';

 type WorkflowAdvancedFilterRecordFilterOperandSelectProps = {
@ -14,6 +16,7 @@ type WorkflowAdvancedFilterRecordFilterOperandSelectProps = {
 export const WorkflowAdvancedFilterRecordFilterOperandSelect = ({
  recordFilterId,
 }: WorkflowAdvancedFilterRecordFilterOperandSelectProps) => {
+  const { readonly } = useContext(AdvancedFilterContext);
  const currentRecordFilters = useRecoilComponentValueV2(
    currentRecordFiltersComponentState,
  );
@ -22,7 +25,7 @@ export const WorkflowAdvancedFilterRecordFilterOperandSelect = ({
    (recordFilter) => recordFilter.id === recordFilterId,
  );

-  const isDisabled = !filter?.fieldMetadataId;
+  const isDisabled = !filter?.fieldMetadataId || readonly;

  const filterType = filter?.type;

@ -33,7 +36,7 @@ export const WorkflowAdvancedFilterRecordFilterOperandSelect = ({
      }).filter((operand) => operand !== RecordFilterOperand.IsRelative)
    : [];

-  if (isDisabled) {
+  if (isDisabled === true) {
    return (
      <SelectControl
        selectedOption={{
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterValueFormCompositeFieldInput.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowAdvancedFilterValueFormCompositeFieldInput.tsx
@ -1,3 +1,4 @@
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
 import { FormCountryMultiSelectInput } from '@/object-record/record-field/form-types/components/FormCountryMultiSelectInput';
 import { FormMultiSelectFieldInput } from '@/object-record/record-field/form-types/components/FormMultiSelectFieldInput';
@ -7,6 +8,7 @@ import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
+import { useContext } from 'react';
 import { JsonValue } from 'type-fest';

 export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({
@ -22,6 +24,8 @@ export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({

  const filterType = recordFilter.type;

+  const { readonly } = useContext(AdvancedFilterContext);
+
  return (
    <>
      {filterType === 'ADDRESS' ? (
@ -30,12 +34,14 @@ export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({
            defaultValue={recordFilter.value}
            onChange={onChange}
            VariablePicker={WorkflowVariablePicker}
+            readonly={readonly}
          />
        ) : (
          <FormTextFieldInput
            defaultValue={recordFilter.value}
            onChange={onChange}
            VariablePicker={WorkflowVariablePicker}
+            readonly={readonly}
          />
        )
      ) : filterType === 'CURRENCY' ? (
@ -45,12 +51,14 @@ export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({
            onChange={onChange}
            VariablePicker={WorkflowVariablePicker}
            options={CURRENCIES}
+            readonly={readonly}
          />
        ) : recordFilter.subFieldName === 'amountMicros' ? (
          <FormNumberFieldInput
            defaultValue={recordFilter.value}
            onChange={onChange}
            VariablePicker={WorkflowVariablePicker}
+            readonly={readonly}
          />
        ) : null
      ) : filterType === 'PHONES' ? (
@ -59,12 +67,14 @@ export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({
            defaultValue={recordFilter.value}
            onChange={onChange}
            VariablePicker={WorkflowVariablePicker}
+            readonly={readonly}
          />
        ) : (
          <FormTextFieldInput
            defaultValue={recordFilter.value}
            onChange={onChange}
            VariablePicker={WorkflowVariablePicker}
+            readonly={readonly}
          />
        )
      ) : (
@ -72,6 +82,7 @@ export const WorkflowAdvancedFilterValueFormCompositeFieldInput = ({
          defaultValue={recordFilter.value}
          onChange={onChange}
          VariablePicker={WorkflowVariablePicker}
+          readonly={readonly}
        />
      )}
    </>
--- 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
@ -185,6 +185,10 @@ export const WorkflowEditActionFindRecords = ({
                  <WorkflowFindRecordsFilters
                    objectMetadataItem={selectedObjectMetadataItem}
                    onChange={(filter: FindRecordsActionFilter) => {
+                      if (isFormDisabled === true) {
+                        return;
+                      }
+
                      const newFormData: FindRecordsFormData = {
                        ...formData,
                        filter,
@ -194,6 +198,7 @@ export const WorkflowEditActionFindRecords = ({

                      saveAction(newFormData);
                    }}
+                    readonly={isFormDisabled}
                  />
                  <WorkflowFindRecordsFiltersEffect
                    defaultValue={formData.filter}
--- 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
@ -1,4 +1,5 @@
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
 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';
@ -7,6 +8,7 @@ import { useUpsertRecordFilter } from '@/object-record/record-filter/hooks/useUp
 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 { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconFilter } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
@ -16,6 +18,7 @@ export const WorkflowFindRecordsAddFilterButton = ({
 }: {
  defaultFieldMetadataItem: FieldMetadataItem;
 }) => {
+  const { readonly } = useContext(AdvancedFilterContext);
  const rootRecordFilterGroup = useRecoilComponentValueV2(
    rootLevelRecordFilterGroupComponentSelector,
  );
@ -69,6 +72,7 @@ export const WorkflowFindRecordsAddFilterButton = ({
      onClick={addRootRecordFilterGroup}
      ariaLabel="Add filter"
      title="Add filter"
+      disabled={readonly}
    />
  );
 };
--- 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
@ -36,9 +36,11 @@ const StyledChildContainer = styled.div`
 export const WorkflowFindRecordsFilters = ({
  objectMetadataItem,
  onChange,
+  readonly,
 }: {
  objectMetadataItem: ObjectMetadataItem;
  onChange: (filter: FindRecordsActionFilter) => void;
+  readonly?: boolean;
 }) => {
  const rootRecordFilterGroup = useRecoilComponentValueV2(
    rootLevelRecordFilterGroupComponentSelector,
@ -108,8 +110,9 @@ export const WorkflowFindRecordsFilters = ({
  return (
    <AdvancedFilterContext.Provider
      value={{
-        onUpdate,
+        onUpdate: readonly ? undefined : onUpdate,
        isWorkflowFindRecords: true,
+        readonly,
      }}
    >
      {isDefined(rootRecordFilterGroup) ? (
@ -136,9 +139,11 @@ export const WorkflowFindRecordsFilters = ({
                ),
            )}
          </StyledChildContainer>
-          <AdvancedFilterAddFilterRuleSelect
-            recordFilterGroup={rootRecordFilterGroup}
-          />
+          {!readonly && (
+            <AdvancedFilterAddFilterRuleSelect
+              recordFilterGroup={rootRecordFilterGroup}
+            />
+          )}
        </StyledContainer>
      ) : (
        <WorkflowFindRecordsAddFilterButton