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

@@ -1,29 +0,0 @@
-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)};
-`;
-
-export const WorkflowRunOutputVisualizer = ({
-  workflowRunId,
-}: {
-  workflowRunId: string;
-}) => {
-  const workflowRun = useWorkflowRun({ workflowRunId });
-  if (!isDefined(workflowRun)) {
-    return null;
-  }
-
-  return (
-    <StyledSourceCodeContainer>
-      <CodeEditor
-        value={JSON.stringify(workflowRun.output, null, 2)}
-        language="json"
-        options={{ readOnly: true, domReadOnly: true }}
-      />
-    </StyledSourceCodeContainer>
-  );
-};