Add filter fields on update record trigger (#12354)

Fixes https://github.com/twentyhq/core-team-issues/issues/928

<img width="503" alt="Capture d’écran 2025-05-28 à 15 04 08"
src="https://github.com/user-attachments/assets/b83ceced-4b3a-454c-83c1-1176f6836d96"
/>

packages/twenty-front/src/modules/workflow/components/WorkflowEditUpdateEventFieldsMultiSelect.tsx

@@ -0,0 +1,64 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
+import { FormMultiSelectFieldInput } from '@/object-record/record-field/form-types/components/FormMultiSelectFieldInput';
+import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
+import { SUPPORTED_FIELD_METADATA_TYPES } from '@/workflow/constants/SupportedFieldMetadataTypes';
+import { isDefined } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
+
+export const WorkflowFieldsMultiSelect = ({
+  label,
+  objectMetadataItem,
+  handleFieldsChange,
+  readonly,
+  defaultFields,
+  placeholder,
+}: {
+  label: string;
+  placeholder: string;
+  objectMetadataItem: ObjectMetadataItem;
+  handleFieldsChange: (field: FieldMultiSelectValue | string) => void;
+  readonly: boolean;
+  defaultFields: string[] | undefined | null;
+}) => {
+  const { getIcon } = useIcons();
+
+  const inlineFieldMetadataItems = objectMetadataItem?.fields
+    .filter(
+      (fieldMetadataItem) =>
+        !fieldMetadataItem.isSystem &&
+        fieldMetadataItem.isActive &&
+        SUPPORTED_FIELD_METADATA_TYPES.includes(fieldMetadataItem.type),
+    )
+    .sort((fieldMetadataItemA, fieldMetadataItemB) =>
+      fieldMetadataItemA.name.localeCompare(fieldMetadataItemB.name),
+    );
+
+  const inlineFieldDefinitions = isDefined(objectMetadataItem)
+    ? inlineFieldMetadataItems.map((fieldMetadataItem) =>
+        formatFieldMetadataItemAsFieldDefinition({
+          field: fieldMetadataItem,
+          objectMetadataItem: objectMetadataItem,
+          showLabel: true,
+          labelWidth: 90,
+        }),
+      )
+    : [];
+
+  return (
+    <FormMultiSelectFieldInput
+      testId="workflow-fields-multi-select"
+      label={label}
+      defaultValue={defaultFields}
+      options={inlineFieldDefinitions.map((field) => ({
+        label: field.label,
+        value: field.metadata.fieldName,
+        icon: getIcon(field.iconName),
+        color: 'gray',
+      }))}
+      onChange={handleFieldsChange}
+      placeholder={placeholder}
+      readonly={readonly}
+    />
+  );
+};

packages/twenty-front/src/modules/workflow/components/__stories__/WorkflowFieldsMultiSelect.stories.ts

@@ -0,0 +1,120 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { expect } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
+import { FieldMetadataType } from '~/generated/graphql';
+import { WorkflowFieldsMultiSelect } from '../WorkflowEditUpdateEventFieldsMultiSelect';
+
+const meta: Meta<typeof WorkflowFieldsMultiSelect> = {
+  title: 'Modules/Workflow/WorkflowFieldsMultiSelect',
+  component: WorkflowFieldsMultiSelect,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WorkflowFieldsMultiSelect>;
+
+const mockObjectMetadataItem: ObjectMetadataItem = {
+  id: '1',
+  nameSingular: 'company',
+  namePlural: 'companies',
+  labelSingular: 'Company',
+  labelPlural: 'Companies',
+  description: 'A company',
+  icon: 'IconBuilding',
+  isSystem: false,
+  isCustom: false,
+  isActive: true,
+  createdAt: '',
+  updatedAt: '',
+  isLabelSyncedWithName: true,
+  isRemote: false,
+  isSearchable: true,
+  labelIdentifierFieldMetadataId: '1',
+  indexMetadatas: [],
+  fields: [
+    {
+      id: '1',
+      name: 'name',
+      label: 'Name',
+      type: FieldMetadataType.TEXT,
+      description: 'Company name',
+      isCustom: false,
+      isActive: true,
+      isSystem: false,
+      isNullable: false,
+      createdAt: '',
+      updatedAt: '',
+    },
+    {
+      id: '2',
+      name: 'domainName',
+      label: 'Domain Name',
+      type: FieldMetadataType.TEXT,
+      description: 'Company domain name',
+      isCustom: false,
+      isActive: true,
+      isSystem: false,
+      isNullable: true,
+      createdAt: '',
+      updatedAt: '',
+    },
+    {
+      id: '3',
+      name: 'employees',
+      label: 'Employees',
+      type: FieldMetadataType.NUMBER,
+      description: 'Number of employees',
+      isCustom: false,
+      isActive: true,
+      isSystem: false,
+      isNullable: true,
+      createdAt: '',
+      updatedAt: '',
+    },
+  ],
+};
+
+export const Default: Story = {
+  args: {
+    label: 'Fields to update',
+    placeholder: 'Select fields to update',
+    objectMetadataItem: mockObjectMetadataItem,
+    handleFieldsChange: () => {},
+    readonly: false,
+    defaultFields: [],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(
+      await canvas.findByTestId('workflow-fields-multi-select'),
+    ).toBeVisible();
+  },
+};
+
+export const WithDefaultValues: Story = {
+  args: {
+    ...Default.args,
+    defaultFields: ['name', 'domainName'],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(await canvas.findByText('Name')).toBeVisible();
+    expect(await canvas.findByText('Domain Name')).toBeVisible();
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    ...Default.args,
+    readonly: true,
+    defaultFields: ['name', 'domainName'],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(await canvas.findByText('Name')).toBeVisible();
+    expect(await canvas.findByText('Domain Name')).toBeVisible();
+  },
+};