Tt fast follows 24/01 (#9843)

- Add icons on steps
- Add search input on object selection
- Improve event label
<img width="503" alt="Capture d’écran 2025-01-24 à 17 59 34"
src="https://github.com/user-attachments/assets/4e5d31d6-6fe5-4f78-9112-3fbd6ee66743"
/>
<img width="503" alt="Capture d’écran 2025-01-24 à 17 59 54"
src="https://github.com/user-attachments/assets/7f37402f-3d1a-4bea-9082-05f50a711f35"
/>
<img width="503" alt="Capture d’écran 2025-01-24 à 18 00 08"
src="https://github.com/user-attachments/assets/fffabaff-9d5d-4584-9297-e21434333de0"
/>

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormCreateRecord.tsx

@@ -196,6 +196,7 @@ export const WorkflowEditActionFormCreateRecord = ({
 
             saveAction(newFormData);
           }}
+          withSearchInput
         />
 
         <HorizontalSeparator noMargin />

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormDeleteRecord.tsx

@@ -145,6 +145,7 @@ export const WorkflowEditActionFormDeleteRecord = ({
 
             saveAction(newFormData);
           }}
+          withSearchInput
         />
 
         <HorizontalSeparator noMargin />

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx

@@ -194,6 +194,7 @@ export const WorkflowEditActionFormUpdateRecord = ({
 
             saveAction(newFormData);
           }}
+          withSearchInput
         />
 
         <HorizontalSeparator noMargin />

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

@@ -97,6 +97,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
               },
             });
           }}
+          withSearchInput
         />
       </WorkflowStepBody>
     </>

packages/twenty-front/src/modules/workflow/workflow-variables/hooks/useAvailableVariablesInWorkflowStep.ts

@@ -1,7 +1,10 @@
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { getStepDefinitionOrThrow } from '@/workflow/utils/getStepDefinitionOrThrow';
+import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
 import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
+import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
+import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon';
 import {
   OutputSchema,
   StepOutputSchema,
@@ -62,11 +65,24 @@ export const useAvailableVariablesInWorkflowStep = ({
     isDefined(filteredTriggerOutputSchema) &&
     !isEmptyObject(filteredTriggerOutputSchema)
   ) {
+    const triggerIconKey =
+      workflow.currentVersion.trigger.type === 'DATABASE_EVENT'
+        ? getTriggerIcon({
+            type: workflow.currentVersion.trigger.type,
+            eventName: splitWorkflowTriggerEventName(
+              workflow.currentVersion.trigger.settings?.eventName,
+            ).event,
+          })
+        : getTriggerIcon({
+            type: workflow.currentVersion.trigger.type,
+          });
+
     result.push({
       id: 'trigger',
       name: isDefined(workflow.currentVersion.trigger.name)
         ? workflow.currentVersion.trigger.name
         : getTriggerStepName(workflow.currentVersion.trigger),
+      icon: triggerIconKey,
       outputSchema: filteredTriggerOutputSchema,
     });
   }
@@ -81,8 +97,8 @@ export const useAvailableVariablesInWorkflowStep = ({
       result.push({
         id: previousStep.id,
         name: previousStep.name,
+        icon: getActionIcon(previousStep.type),
         outputSchema: filteredOutputSchema,
-        ...(previousStep.type === 'CODE' ? { icon: 'IconCode' } : {}),
       });
     }
   });

packages/twenty-server/src/modules/workflow/workflow-builder/utils/generate-fake-object-record-event.ts

@@ -48,7 +48,9 @@ export const generateFakeObjectRecordEvent = (
       ...baseResult,
       properties: {
         isLeaf: false,
-        value: { after: { isLeaf: false, value: after, label: 'After' } },
+        value: {
+          after: { isLeaf: false, value: after, label: 'After Creation' },
+        },
         label: 'Record Fields',
       },
     };
@@ -62,8 +64,8 @@ export const generateFakeObjectRecordEvent = (
       properties: {
         isLeaf: false,
         value: {
-          before: { isLeaf: false, value: before, label: 'Before' },
-          after: { isLeaf: false, value: after, label: 'After' },
+          before: { isLeaf: false, value: before, label: 'Before Update' },
+          after: { isLeaf: false, value: after, label: 'After Update' },
         },
         label: 'Record Fields',
       },
@@ -76,7 +78,7 @@ export const generateFakeObjectRecordEvent = (
       properties: {
         isLeaf: false,
         value: {
-          before: { isLeaf: false, value: before, label: 'Before' },
+          before: { isLeaf: false, value: before, label: 'Before Deletion' },
         },
         label: 'Record Fields',
       },
@@ -89,7 +91,11 @@ export const generateFakeObjectRecordEvent = (
       properties: {
         isLeaf: false,
         value: {
-          before: { isLeaf: false, value: before, label: 'Before' },
+          before: {
+            isLeaf: false,
+            value: before,
+            label: 'Before Permanent Deletion',
+          },
         },
         label: 'Record Fields',
       },