Wrap all vizualizers into component context (#10755)

Steps are broken when a variable is set.
This is because component instance is not set for version and run
visualizers.
Each step viewer should be wrapped by the instance context.
Each diagram visualizer should be responsible for populating the output
schema.

Also fixing a billing error when running workflow.

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEffect.tsx

@@ -76,6 +76,7 @@ export const WorkflowDiagramEffect = ({
     }
 
     setFlow({
+      workflowVersionId: currentVersion.id,
       trigger: currentVersion.trigger,
       steps: currentVersion.steps,
     });

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

@@ -0,0 +1,30 @@
+import { useWorkflowRunUnsafe } from '@/workflow/hooks/useWorkflowRunUnsafe';
+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 = useWorkflowRunUnsafe({ 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/workflow-diagram/components/WorkflowRunVisualizer.tsx

@@ -0,0 +1,30 @@
+import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
+import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
+import { WorkflowRunDiagramCanvas } from '@/workflow/workflow-diagram/components/WorkflowRunDiagramCanvas';
+import { WorkflowVersionOutputSchemaEffect } from '@/workflow/workflow-diagram/components/WorkflowVersionOutputSchemaEffect';
+import styled from '@emotion/styled';
+import { isDefined } from 'twenty-shared';
+
+const StyledContainer = styled.div`
+  height: 100%;
+`;
+
+export const WorkflowRunVisualizer = ({
+  workflowRunId,
+}: {
+  workflowRunId: string;
+}) => {
+  const workflowRun = useWorkflowRun({ workflowRunId });
+  const workflowVersion = useWorkflowVersion(workflowRun?.workflowVersionId);
+
+  if (!isDefined(workflowRun) || !isDefined(workflowVersion)) {
+    return null;
+  }
+
+  return (
+    <StyledContainer>
+      <WorkflowVersionOutputSchemaEffect workflowVersion={workflowVersion} />
+      <WorkflowRunDiagramCanvas workflowRunStatus={workflowRun.status} />
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunVisualizerEffect.tsx

@@ -31,6 +31,7 @@ export const WorkflowRunVisualizerEffect = ({
     }
 
     setFlow({
+      workflowVersionId: workflowRun.workflowVersionId,
       trigger: workflowRun.output.flow.trigger,
       steps: workflowRun.output.flow.steps,
     });
@@ -42,7 +43,12 @@ export const WorkflowRunVisualizerEffect = ({
     });
 
     setWorkflowDiagram(nextWorkflowDiagram);
-  }, [setFlow, setWorkflowDiagram, workflowRun?.output]);
+  }, [
+    setFlow,
+    setWorkflowDiagram,
+    workflowRun?.output,
+    workflowRun?.workflowVersionId,
+  ]);
 
   return null;
 };

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVersionVisualizer.tsx

@@ -1,5 +1,6 @@
 import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
 import { WorkflowDiagramCanvasReadonly } from '@/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonly';
+import { WorkflowVersionOutputSchemaEffect } from '@/workflow/workflow-diagram/components/WorkflowVersionOutputSchemaEffect';
 import '@xyflow/react/dist/style.css';
 import { isDefined } from 'twenty-shared';
 
@@ -11,6 +12,9 @@ export const WorkflowVersionVisualizer = ({
   const workflowVersion = useWorkflowVersion(workflowVersionId);
 
   return isDefined(workflowVersion) ? (
-    <WorkflowDiagramCanvasReadonly versionStatus={workflowVersion.status} />
+    <>
+      <WorkflowVersionOutputSchemaEffect workflowVersion={workflowVersion} />
+      <WorkflowDiagramCanvasReadonly versionStatus={workflowVersion.status} />
+    </>
   ) : null;
 };

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowVersionVisualizerEffect.tsx

@@ -25,6 +25,7 @@ export const WorkflowVersionVisualizerEffect = ({
     }
 
     setFlow({
+      workflowVersionId: workflowVersion.id,
       trigger: workflowVersion.trigger,
       steps: workflowVersion.steps,
     });