Add icon select to manual trigger (#12724)

## After <img width="1220" alt="image" src="https://github.com/user-attachments/assets/98a73aae-80d7-4e92-93d3-be13210da88b" /> <img width="1131" alt="image" src="https://github.com/user-attachments/assets/9919e415-4355-4995-8979-9055b821f1e9" /> <img width="1300" alt="image" src="https://github.com/user-attachments/assets/27f11cb3-d72c-468a-a641-8414172b9b54" /> <img width="1353" alt="image" src="https://github.com/user-attachments/assets/2f0037f2-fe17-48b6-b7e6-c7528687a5fd" />
2025-06-19 18:32:42 +02:00
parent adcf6107e7
commit 28466ecbf3
17 changed files with 208 additions and 69 deletions
--- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/run-workflow-actions/hooks/useRunWorkflowRecordActions.tsx
+++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/run-workflow-actions/hooks/useRunWorkflowRecordActions.tsx
@ -11,7 +11,8 @@ import { msg } from '@lingui/core/macro';

 import { useRecoilValue } from 'recoil';
 import { capitalize, isDefined } from 'twenty-shared/utils';
-import { IconSettingsAutomation } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/display';
+import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';

 export const useRunWorkflowRecordActions = ({
  objectMetadataItem,
@ -20,6 +21,7 @@ export const useRunWorkflowRecordActions = ({
  objectMetadataItem: ObjectMetadataItem;
  skip?: boolean;
 }) => {
+  const { getIcon } = useIcons();
  const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
    contextStoreTargetedRecordsRuleComponentState,
  );
@ -48,13 +50,18 @@ export const useRunWorkflowRecordActions = ({
    .map((activeWorkflowVersion, index) => {
      const name = capitalize(activeWorkflowVersion.workflow.name);

+      const Icon = getIcon(
+        activeWorkflowVersion.trigger?.settings.icon,
+        COMMAND_MENU_DEFAULT_ICON,
+      );
+
      return {
        type: ActionType.WorkflowRun,
        key: `workflow-run-${activeWorkflowVersion.id}`,
        scope: ActionScope.RecordSelection,
        label: msg`${name}`,
        position: index,
-        Icon: IconSettingsAutomation,
+        Icon,
        shouldBeRegistered: () => true,
        component: (
          <Action
--- a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/run-workflow-actions/hooks/useRunWorkflowRecordAgnosticActions.tsx
+++ b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/run-workflow-actions/hooks/useRunWorkflowRecordAgnosticActions.tsx
@ -7,9 +7,12 @@ import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
 import { msg } from '@lingui/core/macro';
 import { useContext } from 'react';
 import { capitalize, isDefined } from 'twenty-shared/utils';
-import { IconSettingsAutomation } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/display';
+import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';

 export const useRunWorkflowRecordAgnosticActions = () => {
+  const { getIcon } = useIcons();
+
  const { actionMenuType } = useContext(ActionMenuContext);

  const { records: activeWorkflowVersions } =
@ -29,13 +32,18 @@ export const useRunWorkflowRecordAgnosticActions = () => {

      const name = capitalize(activeWorkflowVersion.workflow.name);

+      const Icon = getIcon(
+        activeWorkflowVersion.trigger?.settings.icon,
+        COMMAND_MENU_DEFAULT_ICON,
+      );
+
      return {
        type: ActionType.WorkflowRun,
        key: `workflow-run-${activeWorkflowVersion.id}`,
        scope: ActionScope.Global,
        label: msg`${name}`,
        position: index,
-        Icon: IconSettingsAutomation,
+        Icon,
        shouldBeRegistered: () => true,
        component: (
          <Action
--- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';

 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@ -25,6 +25,8 @@ import {
  LightIconButton,
 } from 'twenty-ui/input';
 import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
+import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
+
 export type IconPickerProps = {
  disabled?: boolean;
  dropdownId?: string;
@ -36,6 +38,10 @@ export type IconPickerProps = {
  variant?: IconButtonVariant;
  className?: string;
  size?: IconButtonSize;
+  clickableComponent?: ReactNode;
+  dropdownWidth?: number;
+  dropdownOffset?: DropdownOffset;
+  maxIconsVisible?: number;
 };

 const StyledMenuIconItemsContainer = styled.div`
@ -102,6 +108,10 @@ export const IconPicker = ({
  variant = 'secondary',
  className,
  size = 'medium',
+  clickableComponent,
+  dropdownWidth,
+  dropdownOffset,
+  maxIconsVisible = 25,
 }: IconPickerProps) => {
  const [searchString, setSearchString] = useState('');
  const {
@ -171,9 +181,9 @@ export const IconPicker = ({
          ...filteredAndSortedIconKeys.filter(
            (iconKey) => iconKey !== selectedIconKey,
          ),
-        ].slice(0, 25)
-      : filteredAndSortedIconKeys.slice(0, 25);
-  }, [icons, searchString, selectedIconKey]);
+        ].slice(0, maxIconsVisible)
+      : filteredAndSortedIconKeys.slice(0, maxIconsVisible);
+  }, [icons, searchString, selectedIconKey, maxIconsVisible]);

  const iconKeys2d = useMemo(
    () => arrayToChunks(matchingSearchIconKeys.slice(), 5),
@ -186,7 +196,9 @@ export const IconPicker = ({
    <div className={className}>
      <Dropdown
        dropdownId={dropdownId}
+        dropdownOffset={dropdownOffset}
        clickableComponent={
+          clickableComponent || (
            <IconButton
              ariaLabel={`Click to select icon ${
                selectedIconKey
@ -198,9 +210,12 @@ export const IconPicker = ({
              variant={variant}
              size={size}
            />
+          )
        }
        dropdownComponents={
-          <DropdownContent widthInPixels={ICON_PICKER_DROPDOWN_CONTENT_WIDTH}>
+          <DropdownContent
+            widthInPixels={dropdownWidth || ICON_PICKER_DROPDOWN_CONTENT_WIDTH}
+          >
            <SelectableList
              selectableListInstanceId="icon-list"
              selectableItemIdMatrix={iconKeys2d}
--- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
@ -41,6 +41,7 @@ export type SelectProps<Value extends SelectValue> = {
  emptyOption?: SelectOption<Value>;
  fullWidth?: boolean;
  label?: string;
+  description?: string;
  onChange?: (value: Value) => void;
  onBlur?: () => void;
  options: SelectOption<Value>[];
@ -64,6 +65,11 @@ const StyledLabel = styled.span`
  margin-bottom: ${({ theme }) => theme.spacing(1)};
 `;

+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.sm};
+`;
+
 export const Select = <Value extends SelectValue>({
  className,
  disabled: disabledFromProps,
@ -74,6 +80,7 @@ export const Select = <Value extends SelectValue>({
  emptyOption,
  fullWidth,
  label,
+  description,
  onChange,
  onBlur,
  options,
@ -214,6 +221,7 @@ export const Select = <Value extends SelectValue>({
          }
        />
      )}
+      {!!description && <StyledDescription>{description}</StyledDescription>}
    </StyledContainer>
  );
 };
--- a/packages/twenty-front/src/modules/workflow/hooks/useActiveWorkflowVersionsWithManualTrigger.ts
+++ b/packages/twenty-front/src/modules/workflow/hooks/useActiveWorkflowVersionsWithManualTrigger.ts
@ -3,7 +3,10 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { Workflow, WorkflowVersion } from '@/workflow/types/Workflow';
+import {
+  ManualTriggerWorkflowVersion,
+  Workflow,
+} from '@/workflow/types/Workflow';
 import { isDefined } from 'twenty-shared/utils';

 export const useActiveWorkflowVersionsWithManualTrigger = ({
@ -40,7 +43,7 @@ export const useActiveWorkflowVersionsWithManualTrigger = ({
    });

  const { records } = useFindManyRecords<
-    WorkflowVersion & { workflow: Workflow }
+    ManualTriggerWorkflowVersion & { workflow: Workflow }
  >({
    objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
    filter: {
--- a/packages/twenty-front/src/modules/workflow/types/Workflow.ts
+++ b/packages/twenty-front/src/modules/workflow/types/Workflow.ts
@ -114,6 +114,10 @@ export type WorkflowVersion = {
  __typename: 'WorkflowVersion';
 };

+export type ManualTriggerWorkflowVersion = WorkflowVersion & {
+  trigger: WorkflowManualTrigger | null;
+};
+
 export type WorkflowRunOutput = z.infer<typeof workflowRunOutputSchema>;
 export type WorkflowExecutorOutput = z.infer<
  typeof workflowExecutorOutputSchema
--- a/packages/twenty-front/src/modules/workflow/validation-schemas/workflowSchema.ts
+++ b/packages/twenty-front/src/modules/workflow/validation-schemas/workflowSchema.ts
@ -206,6 +206,7 @@ export const workflowManualTriggerSchema = baseTriggerSchema.extend({
  settings: z.object({
    objectType: z.string().optional(),
    outputSchema: z.object({}).passthrough(),
+    icon: z.string().optional(),
  }),
 });

--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx
@ -16,6 +16,10 @@ import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
 import { SelectOption } from 'twenty-ui/input';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
+import { useLingui } from '@lingui/react/macro';
+import { IconPicker } from '@/ui/input/components/IconPicker';
+import { SelectControl } from '@/ui/input/components/SelectControl';
+import styled from '@emotion/styled';

 type WorkflowEditTriggerManualFormProps = {
  trigger: WorkflowManualTrigger;
@ -30,11 +34,32 @@ type WorkflowEditTriggerManualFormProps = {
      };
 };

+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  margin-top: ${({ theme }) => theme.spacing(0.25)};
+`;
+
+const StyledIconPickerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const WorkflowEditTriggerManualForm = ({
  trigger,
  triggerOptions,
 }: WorkflowEditTriggerManualFormProps) => {
  const theme = useTheme();
+
+  const { t } = useLingui();
+
  const { getIcon } = useIcons();

  const { activeNonSystemObjectMetadataItems } =
@ -47,16 +72,22 @@ export const WorkflowEditTriggerManualForm = ({
      Icon: getIcon(item.icon),
    }));

+  const objectType = trigger.settings.objectType;
+
  const manualTriggerAvailability: WorkflowManualTriggerAvailability =
-    isDefined(trigger.settings.objectType)
-      ? 'WHEN_RECORD_SELECTED'
-      : 'EVERYWHERE';
+    isDefined(objectType) ? 'WHEN_RECORD_SELECTED' : 'EVERYWHERE';

  const headerTitle = trigger.name ?? getTriggerDefaultLabel(trigger);

  const headerIcon = getTriggerIcon(trigger);
+
  const headerType = getTriggerHeaderType(trigger);

+  const availabilityDescriptions = {
+    WHEN_RECORD_SELECTED: t`Select a record then open the ⌘K to trigger this workflow`,
+    EVERYWHERE: t`Open the ⌘K to trigger this workflow`,
+  };
+
  return (
    <>
      <WorkflowStepHeader
@ -78,8 +109,9 @@ export const WorkflowEditTriggerManualForm = ({
      />
      <WorkflowStepBody>
        <Select
-          dropdownId="workflow-edit-manual-trigger-availability"
-          label="Available"
+          dropdownId={'workflow-edit-manual-trigger-availability'}
+          label={t`Available`}
+          description={availabilityDescriptions[manualTriggerAvailability]}
          fullWidth
          disabled={triggerOptions.readonly}
          value={manualTriggerAvailability}
@ -94,6 +126,7 @@ export const WorkflowEditTriggerManualForm = ({
              settings: getManualTriggerDefaultSettings({
                availability: updatedTriggerType,
                activeNonSystemObjectMetadataItems,
+                icon: trigger.settings.icon,
              }),
            });
          }}
@ -103,10 +136,11 @@ export const WorkflowEditTriggerManualForm = ({

        {manualTriggerAvailability === 'WHEN_RECORD_SELECTED' ? (
          <Select
-            dropdownId="workflow-edit-manual-trigger-object"
-            label="Object"
+            dropdownId={'workflow-edit-manual-trigger-object'}
+            label={t`Object`}
+            description={t`Will return one ${objectType} to the next step of this workflow`}
            fullWidth
-            value={trigger.settings.objectType}
+            value={objectType}
            options={availableMetadata}
            disabled={triggerOptions.readonly}
            onChange={(updatedObject) => {
@ -117,6 +151,7 @@ export const WorkflowEditTriggerManualForm = ({
              triggerOptions.onTriggerUpdate({
                ...trigger,
                settings: {
+                  ...trigger.settings,
                  objectType: updatedObject,
                  outputSchema: {},
                },
@ -126,6 +161,48 @@ export const WorkflowEditTriggerManualForm = ({
            dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
          />
        ) : null}
+        <IconPicker
+          dropdownId={'workflow-edit-manual-trigger-icon'}
+          selectedIconKey={trigger.settings.icon}
+          dropdownOffset={{ y: -parseInt(theme.spacing(3), 10) }}
+          dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
+          maxIconsVisible={9 * 8} // 9 columns * 8 lines
+          disabled={triggerOptions.readonly}
+          clickableComponent={
+            <StyledIconPickerContainer
+              onClick={(e) => {
+                if (triggerOptions.readonly === true) {
+                  e.stopPropagation();
+                  e.preventDefault();
+                }
+              }}
+            >
+              <StyledLabel>{t`Command menu icon`}</StyledLabel>
+              <SelectControl
+                isDisabled={triggerOptions.readonly}
+                selectedOption={{
+                  Icon: getIcon(trigger.settings.icon),
+                  value: trigger.settings.icon || null,
+                  label: '',
+                }}
+              />
+              <StyledDescription>{t`The icon your workflow trigger will display in the command menu`}</StyledDescription>
+            </StyledIconPickerContainer>
+          }
+          onChange={({ iconKey }) => {
+            if (triggerOptions.readonly === true) {
+              return;
+            }
+
+            triggerOptions.onTriggerUpdate({
+              ...trigger,
+              settings: {
+                ...trigger.settings,
+                icon: iconKey,
+              },
+            });
+          }}
+        />
      </WorkflowStepBody>
    </>
  );
--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/CommandMenuDefaultIcon.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/CommandMenuDefaultIcon.ts
@ -0,0 +1 @@
+export const COMMAND_MENU_DEFAULT_ICON = 'IconHandMove';
--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/ManualTriggerAvailabilityOptions.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/constants/ManualTriggerAvailabilityOptions.ts
@ -7,12 +7,12 @@ export const MANUAL_TRIGGER_AVAILABILITY_OPTIONS: Array<{
  Icon: IconComponent;
 }> = [
  {
-    label: 'When record(s) are selected',
+    label: 'When record is selected',
    value: 'WHEN_RECORD_SELECTED',
    Icon: IconCheckbox,
  },
  {
-    label: 'When no record(s) are selected',
+    label: 'When no record is selected',
    value: 'EVERYWHERE',
    Icon: IconSquare,
  },
--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/tests/getManualTriggerDefaultSettings.test.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/tests/getManualTriggerDefaultSettings.test.ts
@ -1,5 +1,6 @@
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { getManualTriggerDefaultSettings } from '../getManualTriggerDefaultSettings';
+import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';

 it('returns settings for a manual trigger that can be activated from any where', () => {
  expect(
@ -10,6 +11,7 @@ it('returns settings for a manual trigger that can be activated from any where',
  ).toStrictEqual({
    objectType: undefined,
    outputSchema: {},
+    icon: COMMAND_MENU_DEFAULT_ICON,
  });
 });

@ -18,9 +20,11 @@ it('returns settings for a manual trigger that can be activated from any where',
    getManualTriggerDefaultSettings({
      availability: 'WHEN_RECORD_SELECTED',
      activeNonSystemObjectMetadataItems: generatedMockObjectMetadataItems,
+      icon: 'IconTest',
    }),
  ).toStrictEqual({
    objectType: generatedMockObjectMetadataItems[0].nameSingular,
    outputSchema: {},
+    icon: 'IconTest',
  });
 });
--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/tests/getTriggerDefaultDefinition.test.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/tests/getTriggerDefaultDefinition.test.ts
@ -1,6 +1,7 @@
 import { DatabaseTriggerDefaultLabel } from '@/workflow/workflow-trigger/constants/DatabaseTriggerDefaultLabel';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { getTriggerDefaultDefinition } from '../getTriggerDefaultDefinition';
+import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';

 describe('getTriggerDefaultDefinition', () => {
  it('throws if the activeNonSystemObjectMetadataItems list is empty', () => {
@ -94,6 +95,7 @@ describe('getTriggerDefaultDefinition', () => {
      settings: {
        objectType: generatedMockObjectMetadataItems[0].nameSingular,
        outputSchema: {},
+        icon: COMMAND_MENU_DEFAULT_ICON,
      },
    });
  });
--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getManualTriggerDefaultSettings.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getManualTriggerDefaultSettings.ts
@ -4,25 +4,30 @@ import {
  WorkflowManualTriggerSettings,
 } from '@/workflow/types/Workflow';
 import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
+import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';

 export const getManualTriggerDefaultSettings = ({
  availability,
  activeNonSystemObjectMetadataItems,
+  icon,
 }: {
  availability: WorkflowManualTriggerAvailability;
  activeNonSystemObjectMetadataItems: ObjectMetadataItem[];
+  icon?: string;
 }): WorkflowManualTriggerSettings => {
  switch (availability) {
    case 'EVERYWHERE': {
      return {
        objectType: undefined,
        outputSchema: {},
+        icon: icon || COMMAND_MENU_DEFAULT_ICON,
      };
    }
    case 'WHEN_RECORD_SELECTED': {
      return {
        objectType: activeNonSystemObjectMetadataItems[0].nameSingular,
        outputSchema: {},
+        icon: icon || COMMAND_MENU_DEFAULT_ICON,
      };
    }
  }
--- a/packages/twenty-server/src/engine/workspace-manager/standard-objects-prefill-data/prefill-workflows.ts
+++ b/packages/twenty-server/src/engine/workspace-manager/standard-objects-prefill-data/prefill-workflows.ts
@ -63,7 +63,7 @@ export const prefillWorkflows = async (
        trigger: JSON.stringify({
          name: 'Launch manually',
          type: 'MANUAL',
-          settings: { outputSchema: {} },
+          settings: { outputSchema: {}, icon: 'IconUserPlus' },
        }),
        steps: JSON.stringify([
          {
--- a/packages/twenty-server/src/modules/workflow/workflow-trigger/types/workflow-trigger.type.ts
+++ b/packages/twenty-server/src/modules/workflow/workflow-trigger/types/workflow-trigger.type.ts
@ -20,7 +20,7 @@ type BaseTrigger = {

 export type WorkflowDatabaseEventTrigger = BaseTrigger & {
  type: WorkflowTriggerType.DATABASE_EVENT;
-  settings: {
+  settings: BaseWorkflowTriggerSettings & {
    eventName: string;
  };
 };
@ -32,14 +32,16 @@ export enum WorkflowManualTriggerAvailability {

 export type WorkflowManualTrigger = BaseTrigger & {
  type: WorkflowTriggerType.MANUAL;
-  settings: {
+  settings: BaseWorkflowTriggerSettings & {
    objectType?: string;
+    icon?: string;
  };
 };

 export type WorkflowCronTrigger = BaseTrigger & {
  type: WorkflowTriggerType.CRON;
-  settings: (
+  settings: BaseWorkflowTriggerSettings &
+    (
      | {
          type: 'DAYS';
          schedule: { day: number; hour: number; minute: number };
@ -56,21 +58,23 @@ export type WorkflowCronTrigger = BaseTrigger & {
          type: 'CUSTOM';
          pattern: string;
        }
-  ) & { outputSchema: object };
+    );
 };

 export type WorkflowWebhookTrigger = BaseTrigger & {
  type: WorkflowTriggerType.WEBHOOK;
-  settings:
+  settings: BaseWorkflowTriggerSettings &
+    (
      | {
          httpMethod: 'GET';
          authentication: 'API_KEY' | null;
        }
-    | ({
+      | {
          httpMethod: 'POST';
          authentication: 'API_KEY' | null;
          expectedBody: object;
-      } & { outputSchema: object });
+        }
+    );
 };

 export type WorkflowManualTriggerSettings = WorkflowManualTrigger['settings'];
--- a/packages/twenty-ui/src/display/icon/hooks/useIcons.ts
+++ b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts
@ -11,12 +11,10 @@ export const useIcons = () => {
    return icons;
  };

-  const getIcon = (iconKey?: string | null) => {
-    if (!iconKey) {
-      return defaultIcon;
-    }
-
-    return icons[iconKey] ?? defaultIcon;
+  const getIcon = (iconKey?: string | null, customDefaultIcon?: string) => {
+    return (
+      icons[iconKey ?? ''] || icons[customDefaultIcon ?? ''] || defaultIcon
+    );
  };

  return { getIcons, getIcon };
--- a/packages/twenty-ui/src/display/icon/types/IconComponent.ts
+++ b/packages/twenty-ui/src/display/icon/types/IconComponent.ts
@ -1,7 +1,9 @@
 import { FunctionComponent } from 'react';
+import * as React from 'react';

 export type IconComponentProps = {
  className?: string;
+  style?: React.CSSProperties;
  size?: number | string;
  stroke?: number | string;
  color?: string;
				`@ -0,0 +1 @@`
				`export const COMMAND_MENU_DEFAULT_ICON = 'IconHandMove';`