Only display Flow for Workflow Runs and display Output tab for triggers (#11520)

> [!WARNING]
> I refactored a bunch of components into utility functions to make it
possible to display the `WorkflowStepHeader` component for **triggers**
in the `CommandMenuWorkflowRunViewStep` component. Previously, we were
asserting that we were displaying the header in `Output` and `Input`
tabs only for **actions**. Handling triggers too required a bunch of
changes. We can think of making a bigger refactor of this part.

In this PR:

- Only display the Flow for Workflow Runs; removed the Code Editor tab
- Allows users to see the Output of trigger nodes
- Prevent impossible states by manually setting the selected tab when
selecting a node

## Demo

### Success, Running and Not Executed steps


https://github.com/user-attachments/assets/c6bebd0f-5da2-4ccc-aef2-d9890eafa59a

### Failed step


https://github.com/user-attachments/assets/e1f4e13a-2f5e-4792-a089-928e4d6b1ac0

Closes https://github.com/twentyhq/core-team-issues/issues/709

packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerHeaderType.ts

@@ -0,0 +1,25 @@
+import { WorkflowTrigger } from '@/workflow/types/Workflow';
+import { getTriggerDefaultLabel } from '@/workflow/workflow-trigger/utils/getTriggerLabel';
+import { assertUnreachable } from 'twenty-shared/utils';
+
+export const getTriggerHeaderType = (trigger: WorkflowTrigger) => {
+  switch (trigger.type) {
+    case 'CRON': {
+      return 'Trigger';
+    }
+    case 'WEBHOOK': {
+      return 'Trigger · Webhook';
+    }
+    case 'MANUAL': {
+      return 'Trigger · Manual';
+    }
+    case 'DATABASE_EVENT': {
+      const defaultLabel = getTriggerDefaultLabel(trigger);
+
+      return `Trigger · ${defaultLabel}`;
+    }
+    default: {
+      assertUnreachable(trigger, 'Unknown trigger type');
+    }
+  }
+};

packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerIcon.ts

@@ -1,26 +1,18 @@
+import { WorkflowTrigger } from '@/workflow/types/Workflow';
+import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
 import { DATABASE_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/DatabaseTriggerTypes';
 import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/OtherTriggerTypes';
 
 export const getTriggerIcon = (
-  trigger:
-    | {
-        type: 'MANUAL';
-      }
-    | {
-        type: 'CRON';
-      }
-    | {
-        type: 'WEBHOOK';
-      }
-    | {
-        type: 'DATABASE_EVENT';
-        eventName: string;
-      },
+  trigger: WorkflowTrigger,
 ): string | undefined => {
   if (trigger.type === 'DATABASE_EVENT') {
-    return DATABASE_TRIGGER_TYPES.find(
-      (type) => type.event === trigger.eventName,
-    )?.icon;
+    const eventName = splitWorkflowTriggerEventName(
+      trigger.settings.eventName,
+    ).event;
+
+    return DATABASE_TRIGGER_TYPES.find((type) => type.event === eventName)
+      ?.icon;
   }
 
   return OTHER_TRIGGER_TYPES.find((item) => item.type === trigger.type)?.icon;

packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerIconColor.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@emotion/react';
+
+export const getTriggerIconColor = ({ theme }: { theme: Theme }) => {
+  return theme.font.color.tertiary;
+};

packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getTriggerLabel.ts

@@ -1,28 +1,33 @@
+import { WorkflowTrigger } from '@/workflow/types/Workflow';
+import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
 import { DATABASE_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/DatabaseTriggerTypes';
 import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/OtherTriggerTypes';
+import { isDefined } from 'twenty-shared/utils';
 
-export const getTriggerDefaultLabel = (
-  trigger:
-    | {
-        type: 'MANUAL';
-      }
-    | {
-        type: 'CRON';
-      }
-    | {
-        type: 'WEBHOOK';
-      }
-    | {
-        type: 'DATABASE_EVENT';
-        eventName: string;
-      },
-): string | undefined => {
+export const getTriggerDefaultLabel = (trigger: WorkflowTrigger): string => {
   if (trigger.type === 'DATABASE_EVENT') {
-    return DATABASE_TRIGGER_TYPES.find(
-      (type) => type.event === trigger.eventName,
+    const triggerEvent = splitWorkflowTriggerEventName(
+      trigger.settings.eventName,
+    );
+
+    const label = DATABASE_TRIGGER_TYPES.find(
+      (type) => type.event === triggerEvent.event,
     )?.defaultLabel;
+
+    if (!isDefined(label)) {
+      throw new Error('Unknown trigger event');
+    }
+
+    return label;
   }
 
-  return OTHER_TRIGGER_TYPES.find((item) => item.type === trigger.type)
-    ?.defaultLabel;
+  const label = OTHER_TRIGGER_TYPES.find(
+    (item) => item.type === trigger.type,
+  )?.defaultLabel;
+
+  if (!isDefined(label)) {
+    throw new Error('Unknown trigger type');
+  }
+
+  return label;
 };