Create workflow version show page (#7466)

In this PR:

- Refactored components to clarify their behavior. For example, I
renamed the `Workflow` component to `WorkflowVisualizer`. This moved
forward the issue #7010.
- Create two variants of several workflow-related components: one
version for editing and another for viewing. For instance, there is
`WorkflowDiagramCanvasEditable.tsx` and
`WorkflowDiagramCanvasReadonly.tsx`
- Implement the show page for workflow versions. On this page, we
display a readonly workflow visualizer. Users can click on nodes and it
will expand the right drawer.
- I added buttons in the header of the RecordShowPage for workflow
versions: users can activate, deactivate or use the currently viewed
version as the next draft.

**There are many cache desynchronisation and I'll fix them really
soon.**

## Demo

(Turn sound on)


https://github.com/user-attachments/assets/97fafa48-8902-4dab-8b39-f40848bf041e

packages/twenty-front/src/modules/workflow/components/WorkflowStepDetail.tsx

@@ -0,0 +1,80 @@
+import { WorkflowEditActionFormSendEmail } from '@/workflow/components/WorkflowEditActionFormSendEmail';
+import { WorkflowEditActionFormServerlessFunction } from '@/workflow/components/WorkflowEditActionFormServerlessFunction';
+import { WorkflowEditTriggerForm } from '@/workflow/components/WorkflowEditTriggerForm';
+import {
+  WorkflowAction,
+  WorkflowTrigger,
+  WorkflowVersion,
+} from '@/workflow/types/Workflow';
+import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
+import { getStepDefinitionOrThrow } from '@/workflow/utils/getStepDefinitionOrThrow';
+import { isDefined } from 'twenty-ui';
+
+type WorkflowStepDetailProps =
+  | {
+      stepId: string;
+      workflowVersion: WorkflowVersion;
+      readonly: true;
+      onTriggerUpdate?: undefined;
+      onActionUpdate?: undefined;
+    }
+  | {
+      stepId: string;
+      workflowVersion: WorkflowVersion;
+      readonly?: false;
+      onTriggerUpdate: (trigger: WorkflowTrigger) => void;
+      onActionUpdate: (action: WorkflowAction) => void;
+    };
+
+export const WorkflowStepDetail = ({
+  stepId,
+  workflowVersion,
+  ...props
+}: WorkflowStepDetailProps) => {
+  const stepDefinition = getStepDefinitionOrThrow({
+    stepId,
+    workflowVersion,
+  });
+  if (!isDefined(stepDefinition)) {
+    return null;
+  }
+
+  switch (stepDefinition.type) {
+    case 'trigger': {
+      return (
+        <WorkflowEditTriggerForm
+          trigger={stepDefinition.definition}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...props}
+        />
+      );
+    }
+    case 'action': {
+      switch (stepDefinition.definition.type) {
+        case 'CODE': {
+          return (
+            <WorkflowEditActionFormServerlessFunction
+              action={stepDefinition.definition}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...props}
+            />
+          );
+        }
+        case 'SEND_EMAIL': {
+          return (
+            <WorkflowEditActionFormSendEmail
+              action={stepDefinition.definition}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...props}
+            />
+          );
+        }
+      }
+    }
+  }
+
+  return assertUnreachable(
+    stepDefinition,
+    `Expected the step to have an handler; ${JSON.stringify(stepDefinition)}`,
+  );
+};