Visualize workflow run step output (#10730)

- Displays the output of the selected step in the `Output` tab
- Access to the `Output` tab is prevented when the selected node is
currently executed or was skipped
- Display the status of the workflow run instead of the status of the
workflow version at the top left corner of the workflow run visualizer
- Fixed the icon's color for disabled tabs
- Use text/primary color for the step's name even when the input is
disabled

## Demo: Successful execution


https://github.com/user-attachments/assets/02e492f3-1589-48e9-926e-7edb031d9210

## Demo: Failed execution


https://github.com/user-attachments/assets/73e5ec86-5f38-4306-aa9a-46b2e73950da

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

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowRunStatusTagProps.ts

@@ -0,0 +1,34 @@
+import { WorkflowRunStatus } from '@/workflow/types/Workflow';
+import { TagColor } from 'twenty-ui';
+
+export const getWorkflowRunStatusTagProps = ({
+  workflowRunStatus,
+}: {
+  workflowRunStatus: WorkflowRunStatus;
+}): { color: TagColor; text: string } => {
+  if (workflowRunStatus === 'NOT_STARTED') {
+    return {
+      color: 'gray',
+      text: 'Not started',
+    };
+  }
+
+  if (workflowRunStatus === 'RUNNING') {
+    return {
+      color: 'yellow',
+      text: 'Running',
+    };
+  }
+
+  if (workflowRunStatus === 'COMPLETED') {
+    return {
+      color: 'green',
+      text: 'Completed',
+    };
+  }
+
+  return {
+    color: 'red',
+    text: 'Failed',
+  };
+};

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowVersionStatusTagProps.ts

@@ -0,0 +1,34 @@
+import { WorkflowVersionStatus } from '@/workflow/types/Workflow';
+import { TagColor } from 'twenty-ui';
+
+export const getWorkflowVersionStatusTagProps = ({
+  workflowVersionStatus,
+}: {
+  workflowVersionStatus: WorkflowVersionStatus;
+}): { color: TagColor; text: string } => {
+  if (workflowVersionStatus === 'ARCHIVED') {
+    return {
+      color: 'gray',
+      text: 'Archived',
+    };
+  }
+
+  if (workflowVersionStatus === 'DRAFT') {
+    return {
+      color: 'yellow',
+      text: 'Draft',
+    };
+  }
+
+  if (workflowVersionStatus === 'ACTIVE') {
+    return {
+      color: 'green',
+      text: 'Active',
+    };
+  }
+
+  return {
+    color: 'gray',
+    text: 'Deactivated',
+  };
+};