Add Workflow Run show page (#7719)

In this PR:

- Display a workflow version visualizer for the version of the workflow
the run was executed on.
- Display the output of the run as code.


https://github.com/user-attachments/assets/d617300a-bff4-4328-a35c-291dc86d81cf

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

@@ -0,0 +1,32 @@
+import { CodeEditor } from '@/ui/input/code-editor/components/CodeEditor';
+import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
+import styled from '@emotion/styled';
+import { isDefined } from 'twenty-ui';
+
+const StyledSourceCodeContainer = styled.div`
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  margin: ${({ theme }) => theme.spacing(4)};
+  overflow: hidden;
+`;
+
+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>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { WorkflowVersionVisualizer } from '@/workflow/components/WorkflowVersionVisualizer';
+import { WorkflowVersionVisualizerEffect } from '@/workflow/components/WorkflowVersionVisualizerEffect';
+import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
+import { isDefined } from 'twenty-ui';
+
+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/hooks/useWorkflowRun.tsx

@@ -0,0 +1,16 @@
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
+import { WorkflowRun } from '@/workflow/types/Workflow';
+
+export const useWorkflowRun = ({
+  workflowRunId,
+}: {
+  workflowRunId: string;
+}) => {
+  const { record } = useFindOneRecord<WorkflowRun>({
+    objectNameSingular: CoreObjectNameSingular.WorkflowRun,
+    objectRecordId: workflowRunId,
+  });
+
+  return record;
+};

packages/twenty-front/src/modules/workflow/types/Workflow.ts

@@ -84,6 +84,28 @@ export type WorkflowVersion = {
   __typename: 'WorkflowVersion';
 };
 
+type StepRunOutput = {
+  id: string;
+  name: string;
+  type: string;
+  outputs: {
+    attemptCount: number;
+    result: object | undefined;
+    error: string | undefined;
+  }[];
+};
+
+export type WorkflowRunOutput = {
+  steps: Record<string, StepRunOutput>;
+};
+
+export type WorkflowRun = {
+  __typename: 'WorkflowRun';
+  id: string;
+  workflowVersionId: string;
+  output: WorkflowRunOutput;
+};
+
 export type Workflow = {
   __typename: 'Workflow';
   id: string;