Display tag for workflow version status (#6972)

- Move where we fetch workflow data. We now fetch them in the `Workflow`
component directly. That's useful to access it in the
`WorkflowShowPageEffect` and `WorkflowDiagramCanvas` components.

![CleanShot 2024-09-10 at 16 27
53@2x](https://github.com/user-attachments/assets/7d30f407-31ab-472c-a096-c525042c0f35)

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

@@ -2,13 +2,16 @@ import { WorkflowDiagramCanvasEffect } from '@/workflow/components/WorkflowDiagr
 import { WorkflowDiagramCreateStepNode } from '@/workflow/components/WorkflowDiagramCreateStepNode';
 import { WorkflowDiagramEmptyTrigger } from '@/workflow/components/WorkflowDiagramEmptyTrigger';
 import { WorkflowDiagramStepNode } from '@/workflow/components/WorkflowDiagramStepNode';
+import { WorkflowVersionStatusTag } from '@/workflow/components/WorkflowVersionStatusTag';
 import { workflowDiagramState } from '@/workflow/states/workflowDiagramState';
+import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
 import {
   WorkflowDiagram,
   WorkflowDiagramEdge,
   WorkflowDiagramNode,
 } from '@/workflow/types/WorkflowDiagram';
 import { getOrganizedDiagram } from '@/workflow/utils/getOrganizedDiagram';
+import styled from '@emotion/styled';
 import {
   applyEdgeChanges,
   applyNodeChanges,
@@ -22,10 +25,19 @@ import { useMemo } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { GRAY_SCALE, isDefined } from 'twenty-ui';
 
+const StyledStatusTagContainer = styled.div`
+  left: 0;
+  top: 0;
+  position: absolute;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
 export const WorkflowDiagramCanvas = ({
   diagram,
+  workflowWithCurrentVersion,
 }: {
   diagram: WorkflowDiagram;
+  workflowWithCurrentVersion: WorkflowWithCurrentVersion;
 }) => {
   const { nodes, edges } = useMemo(
     () => getOrganizedDiagram(diagram),
@@ -69,21 +81,29 @@ export const WorkflowDiagramCanvas = ({
   };
 
   return (
-    <ReactFlow
-      nodeTypes={{
-        default: WorkflowDiagramStepNode,
-        'create-step': WorkflowDiagramCreateStepNode,
-        'empty-trigger': WorkflowDiagramEmptyTrigger,
-      }}
-      fitView
-      nodes={nodes.map((node) => ({ ...node, draggable: false }))}
-      edges={edges}
-      onNodesChange={handleNodesChange}
-      onEdgesChange={handleEdgesChange}
-    >
-      <WorkflowDiagramCanvasEffect />
+    <>
+      <ReactFlow
+        nodeTypes={{
+          default: WorkflowDiagramStepNode,
+          'create-step': WorkflowDiagramCreateStepNode,
+          'empty-trigger': WorkflowDiagramEmptyTrigger,
+        }}
+        fitView
+        nodes={nodes.map((node) => ({ ...node, draggable: false }))}
+        edges={edges}
+        onNodesChange={handleNodesChange}
+        onEdgesChange={handleEdgesChange}
+      >
+        <WorkflowDiagramCanvasEffect />
 
-      <Background color={GRAY_SCALE.gray25} size={2} />
-    </ReactFlow>
+        <Background color={GRAY_SCALE.gray25} size={2} />
+      </ReactFlow>
+
+      <StyledStatusTagContainer>
+        <WorkflowVersionStatusTag
+          versionStatus={workflowWithCurrentVersion.currentVersion.status}
+        />
+      </StyledStatusTagContainer>
+    </>
   );
 };