Add workflow run visualizer (#10146)

- Remove the tabs from the workflowRun show page; now, we only show the
visualizer with the nodes highlighted based on the run's output
- Create the `generateWorkflowRunDiagram` function to go other each step
and assign a `runStatus` to it based on the workflow run's output

Remaining to do:

- Show the output of each step in the right drawer when selecting one
- The labels (e.g. "1 item") are not set on the edges; we might
implement that later


https://github.com/user-attachments/assets/bcf22f4c-db8c-4b02-9a1a-62d688b4c28e

Closes https://github.com/twentyhq/core-team-issues/issues/338
Closes https://github.com/twentyhq/core-team-issues/issues/336

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

@@ -1,29 +0,0 @@
-import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
-import { WorkflowVersionVisualizer } from '@/workflow/workflow-diagram/components/WorkflowVersionVisualizer';
-import { WorkflowVersionVisualizerEffect } from '@/workflow/workflow-diagram/components/WorkflowVersionVisualizerEffect';
-import { isDefined } from 'twenty-shared';
-
-export const WorkflowRunVersionVisualizer = ({
-  workflowRunId,
-}: {
-  workflowRunId: string;
-}) => {
-  const workflowRun = useWorkflowRun({
-    workflowRunId,
-  });
-  if (!isDefined(workflowRun)) {
-    return null;
-  }
-
-  return (
-    <>
-      <WorkflowVersionVisualizerEffect
-        workflowVersionId={workflowRun.workflowVersionId}
-      />
-
-      <WorkflowVersionVisualizer
-        workflowVersionId={workflowRun.workflowVersionId}
-      />
-    </>
-  );
-};

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

@@ -1,13 +1,13 @@
+import { WorkflowRunVisualizerContent } from '@/workflow/components/WorkflowRunVisualizerContent';
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared';
-import { CodeEditor } from 'twenty-ui';
 
 const StyledSourceCodeContainer = styled.div`
-  margin: ${({ theme }) => theme.spacing(4)};
+  height: 100%;
 `;
 
-export const WorkflowRunOutputVisualizer = ({
+export const WorkflowRunVisualizer = ({
   workflowRunId,
 }: {
   workflowRunId: string;
@@ -19,11 +19,7 @@ export const WorkflowRunOutputVisualizer = ({
 
   return (
     <StyledSourceCodeContainer>
-      <CodeEditor
-        value={JSON.stringify(workflowRun.output, null, 2)}
-        language="json"
-        options={{ readOnly: true, domReadOnly: true }}
-      />
+      <WorkflowRunVisualizerContent workflowRun={workflowRun} />
     </StyledSourceCodeContainer>
   );
 };

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

@@ -0,0 +1,27 @@
+import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
+import { WorkflowRun } from '@/workflow/types/Workflow';
+import { WorkflowDiagramCanvasReadonly } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonly';
+import { WorkflowRunVisualizerEffect } from '@/workflow/workflow-diagram/components/WorkflowRunVisualizerEffect';
+import { isDefined } from 'twenty-shared';
+
+export const WorkflowRunVisualizerContent = ({
+  workflowRun,
+}: {
+  workflowRun: WorkflowRun;
+}) => {
+  const workflowVersion = useWorkflowVersion(workflowRun.workflowVersionId);
+  if (!isDefined(workflowVersion)) {
+    return null;
+  }
+
+  return (
+    <>
+      <WorkflowRunVisualizerEffect
+        workflowRun={workflowRun}
+        workflowVersionId={workflowVersion.id}
+      />
+
+      <WorkflowDiagramCanvasReadonly versionStatus={workflowVersion.status} />
+    </>
+  );
+};