Fix icon matching + small other fixes on workflows (#9814)

- Record Fields label
- body height fix
- Icons on object picker
- Fix icon matching between nodes and right drawer

<img width="1296" alt="Capture d’écran 2025-01-23 à 18 51 12"
src="https://github.com/user-attachments/assets/ecd5fb00-49cd-416e-96af-9200418294e0"
/>

packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx

@@ -10,7 +10,7 @@ import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hoo
 import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
-import { MenuItem } from 'twenty-ui';
+import { MenuItem, useIcons } from 'twenty-ui';
 
 const StyledActionListContainer = styled.div`
   display: flex;
@@ -37,6 +37,7 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
 }: {
   workflow: WorkflowWithCurrentVersion;
 }) => {
+  const { getIcon } = useIcons();
   const { updateTrigger } = useUpdateWorkflowVersionTrigger({ workflow });
 
   const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
@@ -49,13 +50,13 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
       <StyledSectionTitle>Data</StyledSectionTitle>
       {DATABASE_TRIGGER_TYPES.map((action) => (
         <MenuItem
-          key={action.name}
-          LeftIcon={action.icon}
-          text={action.name}
+          key={action.defaultLabel}
+          LeftIcon={getIcon(action.icon)}
+          text={action.defaultLabel}
           onClick={async () => {
             await updateTrigger(
               getTriggerDefaultDefinition({
-                name: action.name,
+                defaultLabel: action.defaultLabel,
                 type: action.type,
                 activeObjectMetadataItems,
               }),
@@ -64,8 +65,8 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
             setWorkflowSelectedNode(TRIGGER_STEP_ID);
 
             openRightDrawer(RightDrawerPages.WorkflowStepEdit, {
-              title: action.name,
-              Icon: action.icon,
+              title: action.defaultLabel,
+              Icon: getIcon(action.icon),
             });
           }}
         />
@@ -73,13 +74,13 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
       <StyledSectionTitle>Others</StyledSectionTitle>
       {OTHER_TRIGGER_TYPES.map((action) => (
         <MenuItem
-          key={action.name}
-          LeftIcon={action.icon}
-          text={action.name}
+          key={action.defaultLabel}
+          LeftIcon={getIcon(action.icon)}
+          text={action.defaultLabel}
           onClick={async () => {
             await updateTrigger(
               getTriggerDefaultDefinition({
-                name: action.name,
+                defaultLabel: action.defaultLabel,
                 type: action.type,
                 activeObjectMetadataItems,
               }),
@@ -88,8 +89,8 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
             setWorkflowSelectedNode(TRIGGER_STEP_ID);
 
             openRightDrawer(RightDrawerPages.WorkflowStepEdit, {
-              title: action.name,
-              Icon: action.icon,
+              title: action.defaultLabel,
+              Icon: getIcon(action.icon),
             });
           }}
         />

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx

@@ -4,9 +4,10 @@ import { WorkflowDatabaseEventTrigger } from '@/workflow/types/Workflow';
 import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
-import { DATABASE_TRIGGER_EVENTS } from '@/workflow/workflow-trigger/constants/DatabaseTriggerEvents';
+import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon';
+import { getTriggerDefaultLabel } from '@/workflow/workflow-trigger/utils/getTriggerLabel';
 import { useTheme } from '@emotion/react';
-import { IconPlaylistAdd, isDefined } from 'twenty-ui';
+import { isDefined, useIcons } from 'twenty-ui';
 
 type WorkflowEditTriggerDatabaseEventFormProps = {
   trigger: WorkflowDatabaseEventTrigger;
@@ -26,6 +27,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
   triggerOptions,
 }: WorkflowEditTriggerDatabaseEventFormProps) => {
   const theme = useTheme();
+  const { getIcon } = useIcons();
 
   const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
 
@@ -37,23 +39,23 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
     activeObjectMetadataItems.map((item) => ({
       label: item.labelPlural,
       value: item.nameSingular,
+      Icon: getIcon(item.icon),
     }));
 
-  const selectedEvent = isDefined(triggerEvent)
-    ? DATABASE_TRIGGER_EVENTS.find(
-        (availableEvent) => availableEvent.value === triggerEvent.event,
-      )
-    : undefined;
+  const defaultLabel =
+    getTriggerDefaultLabel({
+      type: 'DATABASE_EVENT',
+      eventName: triggerEvent.event,
+    }) ?? '-';
 
-  const headerTitle = isDefined(trigger.name)
-    ? trigger.name
-    : isDefined(selectedEvent)
-      ? selectedEvent.label
-      : '-';
+  const headerIcon = getTriggerIcon({
+    type: 'DATABASE_EVENT',
+    eventName: triggerEvent.event,
+  });
 
-  const headerType = isDefined(selectedEvent)
-    ? `Trigger · ${selectedEvent.label}`
-    : '-';
+  const headerTitle = isDefined(trigger.name) ? trigger.name : defaultLabel;
+
+  const headerType = `Trigger · ${defaultLabel}`;
 
   return (
     <>
@@ -68,7 +70,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
             name: newName,
           });
         }}
-        Icon={IconPlaylistAdd}
+        Icon={getIcon(headerIcon)}
         iconColor={theme.font.color.tertiary}
         initialTitle={headerTitle}
         headerType={headerType}

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx

@@ -8,8 +8,9 @@ import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowS
 import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
 import { MANUAL_TRIGGER_AVAILABILITY_OPTIONS } from '@/workflow/workflow-trigger/constants/ManualTriggerAvailabilityOptions';
 import { getManualTriggerDefaultSettings } from '@/workflow/workflow-trigger/utils/getManualTriggerDefaultSettings';
+import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon';
 import { useTheme } from '@emotion/react';
-import { IconHandMove, isDefined, useIcons } from 'twenty-ui';
+import { isDefined, useIcons } from 'twenty-ui';
 
 type WorkflowEditTriggerManualFormProps = {
   trigger: WorkflowManualTrigger;
@@ -47,6 +48,10 @@ export const WorkflowEditTriggerManualForm = ({
 
   const headerTitle = isDefined(trigger.name) ? trigger.name : 'Manual Trigger';
 
+  const headerIcon = getTriggerIcon({
+    type: 'MANUAL',
+  });
+
   return (
     <>
       <WorkflowStepHeader
@@ -60,7 +65,7 @@ export const WorkflowEditTriggerManualForm = ({
             name: newName,
           });
         }}
-        Icon={IconHandMove}
+        Icon={getIcon(headerIcon)}
         iconColor={theme.font.color.tertiary}
         initialTitle={headerTitle}
         headerType="Trigger · Manual"