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

@@ -0,0 +1,66 @@
+import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
+import {
+  WorkflowVersion,
+  WorkflowWithCurrentVersion,
+} from '@/workflow/types/Workflow';
+
+import { addCreateStepNodes } from '@/workflow/utils/addCreateStepNodes';
+import { getWorkflowVersionDiagram } from '@/workflow/utils/getWorkflowVersionDiagram';
+import { mergeWorkflowDiagrams } from '@/workflow/utils/mergeWorkflowDiagrams';
+import { useEffect } from 'react';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
+import { isDefined } from 'twenty-ui';
+
+export const WorkflowDiagramEffect = ({
+  workflowWithCurrentVersion,
+}: {
+  workflowWithCurrentVersion: WorkflowWithCurrentVersion | undefined;
+}) => {
+  const setWorkflowDiagram = useSetRecoilState(workflowDiagramState);
+
+  const computeAndMergeNewWorkflowDiagram = useRecoilCallback(
+    ({ snapshot, set }) => {
+      return (currentVersion: WorkflowVersion) => {
+        const previousWorkflowDiagram = getSnapshotValue(
+          snapshot,
+          workflowDiagramState,
+        );
+
+        const nextWorkflowDiagram = getWorkflowVersionDiagram(currentVersion);
+
+        let mergedWorkflowDiagram = nextWorkflowDiagram;
+        if (isDefined(previousWorkflowDiagram)) {
+          mergedWorkflowDiagram = mergeWorkflowDiagrams(
+            previousWorkflowDiagram,
+            nextWorkflowDiagram,
+          );
+        }
+
+        const workflowDiagramWithCreateStepNodes = addCreateStepNodes(
+          mergedWorkflowDiagram,
+        );
+
+        set(workflowDiagramState, workflowDiagramWithCreateStepNodes);
+      };
+    },
+    [],
+  );
+
+  useEffect(() => {
+    const currentVersion = workflowWithCurrentVersion?.currentVersion;
+    if (!isDefined(currentVersion)) {
+      setWorkflowDiagram(undefined);
+
+      return;
+    }
+
+    computeAndMergeNewWorkflowDiagram(currentVersion);
+  }, [
+    computeAndMergeNewWorkflowDiagram,
+    setWorkflowDiagram,
+    workflowWithCurrentVersion?.currentVersion,
+  ]);
+
+  return null;
+};