From 8513d14157dbe7fe0bb4a463736a24afad5430b1 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Tue, 29 Jul 2025 10:46:34 +0200
Subject: [PATCH] Filter action fixes on select field (#13477)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="475" height="322" alt="Capture d’écran 2025-07-28 à 18 45
51"
src="https://github.com/user-attachments/assets/922201d0-0a80-4ceb-848f-9a391e3337a4"
/>

<img width="491" height="72" alt="Capture d’écran 2025-07-28 à 18 46
11"
src="https://github.com/user-attachments/assets/9d6674ad-9b8c-422a-a6ac-5ec91deac62b"
/>
---
 .../WorkflowEditActionFilterBody.tsx          | 24 --------------
 .../WorkflowStepFilterAddFilterRuleSelect.tsx |  3 +-
 .../WorkflowStepFilterFieldSelect.tsx         | 31 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowEditActionFilterBody.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowEditActionFilterBody.tsx
index 2a5796305c..b035683c96 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowEditActionFilterBody.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowEditActionFilterBody.tsx
@@ -10,9 +10,7 @@ import { useChildStepFiltersAndChildStepFilterGroups } from '@/workflow/workflow
 import { WorkflowStepFilterContext } from '@/workflow/workflow-steps/workflow-actions/filter-action/states/context/WorkflowStepFilterContext';
 import { rootLevelStepFilterGroupComponentSelector } from '@/workflow/workflow-steps/workflow-actions/filter-action/states/rootLevelStepFilterGroupComponentSelector';
 import { isStepFilterGroupChildAStepFilterGroup } from '@/workflow/workflow-steps/workflow-actions/filter-action/utils/isStepFilterGroupChildAStepFilterGroup';
-import { useAvailableVariablesInWorkflowStep } from '@/workflow/workflow-variables/hooks/useAvailableVariablesInWorkflowStep';
 import styled from '@emotion/styled';
-import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
 
 const StyledContainer = styled.div`
@@ -29,10 +27,6 @@ const StyledChildContainer = styled.div`
   width: 100%;
 `;
 
-const StyledDangerContainer = styled.div`
-  color: ${({ theme }) => theme.font.color.danger};
-`;
-
 type WorkflowEditActionFilterBodyProps = {
   action: WorkflowFilterAction;
   actionOptions:
@@ -49,8 +43,6 @@ export const WorkflowEditActionFilterBody = ({
   action,
   actionOptions,
 }: WorkflowEditActionFilterBodyProps) => {
-  const { t } = useLingui();
-
   const rootStepFilterGroup = useRecoilComponentValueV2(
     rootLevelStepFilterGroupComponentSelector,
   );
@@ -77,22 +69,6 @@ export const WorkflowEditActionFilterBody = ({
     });
   };
 
-  const availableVariablesInWorkflowStep = useAvailableVariablesInWorkflowStep(
-    {},
-  );
-
-  const noAvailableVariables = availableVariablesInWorkflowStep.length === 0;
-
-  if (noAvailableVariables) {
-    return (
-      <WorkflowStepBody>
-        <StyledDangerContainer>
-          {t`No Available Step Outputs`}
-        </StyledDangerContainer>
-      </WorkflowStepBody>
-    );
-  }
-
   return (
     <WorkflowStepFilterContext.Provider
       value={{
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterAddFilterRuleSelect.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterAddFilterRuleSelect.tsx
index a3d13aa9bd..65d826679a 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterAddFilterRuleSelect.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterAddFilterRuleSelect.tsx
@@ -22,7 +22,6 @@ type WorkflowStepFilterAddFilterRuleSelectProps = {
 };
 
 const BASE_NEW_STEP_FILTER = {
-  id: v4(),
   type: 'unknown',
   label: '',
   value: '',
@@ -53,6 +52,7 @@ export const WorkflowStepFilterAddFilterRuleSelect = ({
     closeDropdown(dropdownId);
 
     const newStepFilter = {
+      id: v4(),
       ...BASE_NEW_STEP_FILTER,
       stepFilterGroupId: stepFilterGroup.id,
       positionInStepFilterGroup: newPositionInStepFilterGroup,
@@ -76,6 +76,7 @@ export const WorkflowStepFilterAddFilterRuleSelect = ({
     };
 
     const newStepFilter: StepFilter = {
+      id: v4(),
       ...BASE_NEW_STEP_FILTER,
       stepFilterGroupId: newStepFilterGroupId,
       positionInStepFilterGroup: 1,
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterFieldSelect.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterFieldSelect.tsx
index 53763ec73a..04c59f92bb 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterFieldSelect.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterFieldSelect.tsx
@@ -1,10 +1,12 @@
 import { useGetFieldMetadataItemById } from '@/object-metadata/hooks/useGetFieldMetadataItemById';
 import { SelectControl } from '@/ui/input/components/SelectControl';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useWorkflowStepContextOrThrow } from '@/workflow/states/context/WorkflowStepContext';
 import { stepsOutputSchemaFamilySelector } from '@/workflow/states/selectors/stepsOutputSchemaFamilySelector';
 import { useUpsertStepFilterSettings } from '@/workflow/workflow-steps/workflow-actions/filter-action/hooks/useUpsertStepFilterSettings';
 import { WorkflowStepFilterContext } from '@/workflow/workflow-steps/workflow-actions/filter-action/states/context/WorkflowStepFilterContext';
 import { WorkflowVariablesDropdown } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdown';
+import { useAvailableVariablesInWorkflowStep } from '@/workflow/workflow-variables/hooks/useAvailableVariablesInWorkflowStep';
 import { extractRawVariableNamePart } from '@/workflow/workflow-variables/utils/extractRawVariableNamePart';
 import { searchVariableThroughOutputSchema } from '@/workflow/workflow-variables/utils/searchVariableThroughOutputSchema';
 import { useLingui } from '@lingui/react/macro';
@@ -41,6 +43,12 @@ export const WorkflowStepFilterFieldSelect = ({
 
   const { getFieldMetadataItemById } = useGetFieldMetadataItemById();
 
+  const availableVariablesInWorkflowStep = useAvailableVariablesInWorkflowStep(
+    {},
+  );
+
+  const noAvailableVariables = availableVariablesInWorkflowStep.length === 0;
+
   const handleChange = useRecoilCallback(
     ({ snapshot }) =>
       (variableName: string) => {
@@ -103,9 +111,29 @@ export const WorkflowStepFilterFieldSelect = ({
   });
 
   const isSelectedFieldNotFound = !isDefined(variableLabel);
-  const label = isSelectedFieldNotFound ? t`No Field Selected` : variableLabel;
+  const label = isSelectedFieldNotFound
+    ? t`Select a field from a previous step`
+    : variableLabel;
   const dropdownId = `step-filter-field-${stepFilter.id}`;
 
+  if (noAvailableVariables) {
+    return (
+      <Dropdown
+        dropdownId={dropdownId}
+        clickableComponent={
+          <SelectControl
+            selectedOption={{
+              value: stepFilter.stepOutputKey,
+              label: t`No available fields to select`,
+            }}
+            isDisabled={true}
+          />
+        }
+        dropdownComponents={[]}
+      />
+    );
+  }
+
   return (
     <WorkflowVariablesDropdown
       instanceId={dropdownId}
@@ -118,6 +146,7 @@ export const WorkflowStepFilterFieldSelect = ({
             label,
           }}
           isDisabled={readonly}
+          textAccent={isSelectedFieldNotFound ? 'placeholder' : 'default'}
         />
       }
     />