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/RightDrawerWorkflowEditStepContent.tsx

@@ -1,62 +1,11 @@
-import { WorkflowEditActionFormSendEmail } from '@/workflow/components/WorkflowEditActionFormSendEmail';
-import { WorkflowEditActionFormServerlessFunction } from '@/workflow/components/WorkflowEditActionFormServerlessFunction';
-import { WorkflowEditTriggerForm } from '@/workflow/components/WorkflowEditTriggerForm';
-import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
+import { WorkflowStepDetail } from '@/workflow/components/WorkflowStepDetail';
 import { useUpdateWorkflowVersionStep } from '@/workflow/hooks/useUpdateWorkflowVersionStep';
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/hooks/useUpdateWorkflowVersionTrigger';
 import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
 import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
-import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
-import { findStepPosition } from '@/workflow/utils/findStepPosition';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 
-const getStepDefinitionOrThrow = ({
-  stepId,
-  workflow,
-}: {
-  stepId: string;
-  workflow: WorkflowWithCurrentVersion;
-}) => {
-  const currentVersion = workflow.currentVersion;
-  if (!isDefined(currentVersion)) {
-    throw new Error('Expected to find a current version');
-  }
-
-  if (stepId === TRIGGER_STEP_ID) {
-    if (!isDefined(currentVersion.trigger)) {
-      return {
-        type: 'trigger',
-        definition: undefined,
-      } as const;
-    }
-
-    return {
-      type: 'trigger',
-      definition: currentVersion.trigger,
-    } as const;
-  }
-
-  if (!isDefined(currentVersion.steps)) {
-    throw new Error(
-      'Malformed workflow version: missing steps information; be sure to create at least one step before trying to edit one',
-    );
-  }
-
-  const selectedNodePosition = findStepPosition({
-    steps: currentVersion.steps,
-    stepId: stepId,
-  });
-  if (!isDefined(selectedNodePosition)) {
-    return undefined;
-  }
-
-  return {
-    type: 'action',
-    definition: selectedNodePosition.steps[selectedNodePosition.index],
-  } as const;
-};
-
 export const RightDrawerWorkflowEditStepContent = ({
   workflow,
 }: {
@@ -75,47 +24,12 @@ export const RightDrawerWorkflowEditStepContent = ({
     stepId: workflowSelectedNode,
   });
 
-  const stepDefinition = getStepDefinitionOrThrow({
-    stepId: workflowSelectedNode,
-    workflow,
-  });
-  if (!isDefined(stepDefinition)) {
-    return null;
-  }
-
-  switch (stepDefinition.type) {
-    case 'trigger': {
-      return (
-        <WorkflowEditTriggerForm
-          trigger={stepDefinition.definition}
-          onTriggerUpdate={updateTrigger}
-        />
-      );
-    }
-    case 'action': {
-      switch (stepDefinition.definition.type) {
-        case 'CODE': {
-          return (
-            <WorkflowEditActionFormServerlessFunction
-              action={stepDefinition.definition}
-              onActionUpdate={updateStep}
-            />
-          );
-        }
-        case 'SEND_EMAIL': {
-          return (
-            <WorkflowEditActionFormSendEmail
-              action={stepDefinition.definition}
-              onActionUpdate={updateStep}
-            />
-          );
-        }
-      }
-    }
-  }
-
-  return assertUnreachable(
-    stepDefinition,
-    `Unsupported step: ${JSON.stringify(stepDefinition)}`,
+  return (
+    <WorkflowStepDetail
+      stepId={workflowSelectedNode}
+      workflowVersion={workflow.currentVersion}
+      onActionUpdate={updateStep}
+      onTriggerUpdate={updateTrigger}
+    />
   );
 };