fix: Filter Selection Icon Missing #13901 (#13950)

Fixed issue #13901 https://github.com/user-attachments/assets/4aa7d0f3-88b8-474f-85e5-b2989ed8afdd --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2025-08-18 20:24:26 +05:30
parent 43bb8d6043
commit 5e905d3004
27 changed files with 505 additions and 2110 deletions
@@ -2,7 +2,7 @@ import { SelectControl } from '@/ui/input/components/SelectControl';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useWorkflowVersionIdOrThrow } from '@/workflow/hooks/useWorkflowVersionIdOrThrow';
 import { stepsOutputSchemaFamilySelector } from '@/workflow/states/selectors/stepsOutputSchemaFamilySelector';
-import { useGetFilterFieldMetadataItem } from '@/workflow/workflow-steps/workflow-actions/filter-action/hooks/useGetFilterFieldMetadataItem';
+import { useFilterFieldMetadataItem } from '@/workflow/workflow-steps/workflow-actions/filter-action/hooks/useFilterFieldMetadataItem';
 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 { getViewFilterOperands } from '@/workflow/workflow-steps/workflow-actions/filter-action/utils/getStepFilterOperands';
@@ -15,6 +15,7 @@ import { useContext } from 'react';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
 import { type StepFilter } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

 type WorkflowStepFilterFieldSelectProps = {
@@ -50,7 +51,12 @@ export const WorkflowStepFilterFieldSelect = ({
    }),
  );

-  const { getFilterFieldMetadataItem } = useGetFilterFieldMetadataItem();
+  const { getIcon } = useIcons();
+
+  const {
+    fieldMetadataItem: filterFieldMetadataItem,
+    objectMetadataItem: filterObjectMetadataItem,
+  } = useFilterFieldMetadataItem(stepFilter.fieldMetadataId ?? '');

  const availableVariablesInWorkflowStep = useAvailableVariablesInWorkflowStep({
    shouldDisplayRecordFields,
@@ -66,7 +72,7 @@ export const WorkflowStepFilterFieldSelect = ({
          rawVariableName: variableName,
          part: 'stepId',
        });
-        const currentStepOutputSchema = snapshot
+        const [currentStepOutputSchema] = snapshot
          .getLoadable(
            stepsOutputSchemaFamilySelector({
              workflowVersionId,
@@ -81,35 +87,25 @@ export const WorkflowStepFilterFieldSelect = ({
          fieldMetadataId,
          compositeFieldSubFieldName,
        } = searchVariableThroughOutputSchema({
-          stepOutputSchema: currentStepOutputSchema?.[0],
+          stepOutputSchema: currentStepOutputSchema,
          rawVariableName: variableName,
          isFullRecord: false,
        });

-        const {
-          fieldMetadataItem: selectedFieldMetadataItem,
-          objectMetadataItem,
-        } = isDefined(fieldMetadataId)
-          ? getFilterFieldMetadataItem(fieldMetadataId)
-          : {
-              fieldMetadataItem: undefined,
-              objectMetadataItem: undefined,
-            };
-
        const filterType = isDefined(fieldMetadataId)
-          ? (selectedFieldMetadataItem?.type ?? 'unknown')
+          ? (filterFieldMetadataItem?.type ?? 'unknown')
          : variableType;

        const isFullRecord =
-          selectedFieldMetadataItem?.name === 'id' &&
-          isDefined(objectMetadataItem?.labelSingular);
+          filterFieldMetadataItem?.name === 'id' &&
+          isDefined(filterObjectMetadataItem?.labelSingular);

        upsertStepFilterSettings({
          stepFilterToUpsert: {
            ...stepFilter,
            stepOutputKey: variableName,
            displayValue: isFullRecord
-              ? objectMetadataItem.labelSingular
+              ? filterObjectMetadataItem.labelSingular
              : (variableLabel ?? ''),
            type: filterType ?? 'unknown',
            value: '',
@@ -126,7 +122,8 @@ export const WorkflowStepFilterFieldSelect = ({
      upsertStepFilterSettings,
      stepFilter,
      workflowVersionId,
-      getFilterFieldMetadataItem,
+      filterFieldMetadataItem,
+      filterObjectMetadataItem,
    ],
  );

@@ -144,13 +141,11 @@ export const WorkflowStepFilterFieldSelect = ({
  const label =
    isSelectedFieldNotFound || !isDefined(stepFilter.displayValue)
      ? t`Select a field from a previous step`
-      : stepFilter.displayValue;
+      : variableLabel;

  const dropdownId = `step-filter-field-${stepFilter.id}`;

-  const isReadonly = readonly ?? false;
-
-  if (isReadonly || noAvailableVariables) {
+  if (noAvailableVariables) {
    return (
      <Dropdown
        dropdownId={dropdownId}
@@ -158,9 +153,28 @@ export const WorkflowStepFilterFieldSelect = ({
          <SelectControl
            selectedOption={{
              value: stepFilter.stepOutputKey,
-              label: isReadonly
-                ? (label ?? '')
-                : t`No available fields to select`,
+              label: t`No available fields to select`,
+            }}
+            isDisabled={true}
+          />
+        }
+        dropdownComponents={[]}
+      />
+    );
+  }
+
+  if (readonly === true) {
+    return (
+      <Dropdown
+        dropdownId={dropdownId}
+        clickableComponent={
+          <SelectControl
+            selectedOption={{
+              value: stepFilter.stepOutputKey,
+              label,
+              Icon: filterFieldMetadataItem?.icon
+                ? getIcon(filterFieldMetadataItem.icon)
+                : undefined,
            }}
            isDisabled={true}
          />
@@ -174,12 +188,14 @@ export const WorkflowStepFilterFieldSelect = ({
    <WorkflowVariablesDropdown
      instanceId={dropdownId}
      onVariableSelect={handleChange}
-      disabled={readonly}
      clickableComponent={
        <SelectControl
          selectedOption={{
            value: stepFilter.stepOutputKey,
-            label,
+            label: label,
+            Icon: filterFieldMetadataItem?.icon
+              ? getIcon(filterFieldMetadataItem.icon)
+              : undefined,
          }}
          textAccent={isSelectedFieldNotFound ? 'placeholder' : 'default'}
        />
@@ -7,7 +7,7 @@ import { FormTextFieldInput } from '@/object-record/record-field/ui/form-types/c
 import { type FieldMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';

 import { WorkflowStepFilterValueCompositeInput } from '@/workflow/workflow-steps/workflow-actions/filter-action/components/WorkflowStepFilterValueCompositeInput';
-import { useGetFilterFieldMetadataItem } from '@/workflow/workflow-steps/workflow-actions/filter-action/hooks/useGetFilterFieldMetadataItem';
+import { useFilterFieldMetadataItem } from '@/workflow/workflow-steps/workflow-actions/filter-action/hooks/useFilterFieldMetadataItem';
 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 { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
@@ -62,7 +62,6 @@ export const WorkflowStepFilterValueInput = ({
  const { readonly } = useContext(WorkflowStepFilterContext);

  const { upsertStepFilterSettings } = useUpsertStepFilterSettings();
-  const { getFilterFieldMetadataItem } = useGetFilterFieldMetadataItem();

  const handleValueChange = (value: JsonValue) => {
    const valueToUpsert = isString(value)
@@ -85,10 +84,6 @@ export const WorkflowStepFilterValueInput = ({
    (stepFilter && !configurableViewFilterOperands.has(stepFilter.operand)) ??
    true;

-  if (isDisabled || operandHasNoInput) {
-    return null;
-  }
-
  const {
    fieldMetadataId,
    type: variableType,
@@ -96,12 +91,11 @@ export const WorkflowStepFilterValueInput = ({
  } = stepFilter;

  const { fieldMetadataItem: selectedFieldMetadataItem, objectMetadataItem } =
-    isDefined(fieldMetadataId)
-      ? getFilterFieldMetadataItem(fieldMetadataId)
-      : {
-          fieldMetadataItem: undefined,
-          objectMetadataItem: undefined,
-        };
+    useFilterFieldMetadataItem(fieldMetadataId ?? '');
+
+  if (isDisabled || operandHasNoInput) {
+    return null;
+  }

  const isFilterableByMultiSelectValue =
    variableType === FieldMetadataType.MULTI_SELECT ||
@@ -0,0 +1,18 @@
+import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
+
+export const useFilterFieldMetadataItem = (fieldMetadataId: string) => {
+  const { objectMetadataItems } = useObjectMetadataItems();
+
+  const objectMetadataItem = objectMetadataItems.find((objectMetadataItem) =>
+    objectMetadataItem.fields.some((field) => field.id === fieldMetadataId),
+  );
+
+  const fieldMetadataItem = objectMetadataItem?.fields.find(
+    (field) => field.id === fieldMetadataId,
+  );
+
+  return {
+    objectMetadataItem,
+    fieldMetadataItem,
+  };
+};
@@ -1,35 +0,0 @@
-import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
-import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { isDefined } from 'twenty-shared/utils';
-
-export const useGetFilterFieldMetadataItem = () => {
-  const { objectMetadataItems } = useObjectMetadataItems();
-
-  const getFilterFieldMetadataItem = (
-    fieldMetadataId: string,
-  ): {
-    fieldMetadataItem: FieldMetadataItem | undefined;
-    objectMetadataItem: ObjectMetadataItem | undefined;
-  } => {
-    for (const objectMetadataItem of objectMetadataItems) {
-      const field = objectMetadataItem.fields.find(
-        (field) => field.id === fieldMetadataId,
-      );
-      if (isDefined(field)) {
-        return {
-          fieldMetadataItem: field,
-          objectMetadataItem: objectMetadataItem,
-        };
-      }
-    }
-    return {
-      fieldMetadataItem: undefined,
-      objectMetadataItem: undefined,
-    };
-  };
-
-  return {
-    getFilterFieldMetadataItem,
-  };
-};