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

@@ -0,0 +1,25 @@
+import { WorkflowRunVisualizerContent } from '@/workflow/components/WorkflowRunVisualizerContent';
+import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
+import styled from '@emotion/styled';
+import { isDefined } from 'twenty-shared';
+
+const StyledSourceCodeContainer = styled.div`
+  height: 100%;
+`;
+
+export const WorkflowRunVisualizer = ({
+  workflowRunId,
+}: {
+  workflowRunId: string;
+}) => {
+  const workflowRun = useWorkflowRun({ workflowRunId });
+  if (!isDefined(workflowRun)) {
+    return null;
+  }
+
+  return (
+    <StyledSourceCodeContainer>
+      <WorkflowRunVisualizerContent workflowRun={workflowRun} />
+    </StyledSourceCodeContainer>
+  );
+};