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

@@ -0,0 +1,75 @@
+import { WorkflowDiagramBaseStepNode } from '@/workflow/components/WorkflowDiagramBaseStepNode';
+import { WorkflowDiagramStepNodeData } from '@/workflow/types/WorkflowDiagram';
+import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconCode, IconMail, IconPlaylistAdd } from 'twenty-ui';
+
+const StyledStepNodeLabelIconContainer = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.background.transparent.light};
+  border-radius: ${({ theme }) => theme.spacing(1)};
+  display: flex;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const WorkflowDiagramStepNodeBase = ({
+  data,
+  RightFloatingElement,
+}: {
+  data: WorkflowDiagramStepNodeData;
+  RightFloatingElement?: React.ReactNode;
+}) => {
+  const theme = useTheme();
+
+  const renderStepIcon = () => {
+    switch (data.nodeType) {
+      case 'trigger': {
+        return (
+          <StyledStepNodeLabelIconContainer>
+            <IconPlaylistAdd
+              size={theme.icon.size.sm}
+              color={theme.font.color.tertiary}
+            />
+          </StyledStepNodeLabelIconContainer>
+        );
+      }
+      case 'condition': {
+        return null;
+      }
+      case 'action': {
+        switch (data.actionType) {
+          case 'CODE': {
+            return (
+              <StyledStepNodeLabelIconContainer>
+                <IconCode
+                  size={theme.icon.size.sm}
+                  color={theme.color.orange}
+                />
+              </StyledStepNodeLabelIconContainer>
+            );
+          }
+          case 'SEND_EMAIL': {
+            return (
+              <StyledStepNodeLabelIconContainer>
+                <IconMail size={theme.icon.size.sm} color={theme.color.blue} />
+              </StyledStepNodeLabelIconContainer>
+            );
+          }
+        }
+      }
+    }
+
+    return assertUnreachable(data);
+  };
+
+  return (
+    <WorkflowDiagramBaseStepNode
+      nodeType={data.nodeType}
+      label={data.label}
+      Icon={renderStepIcon()}
+      RightFloatingElement={RightFloatingElement}
+    />
+  );
+};