Visualize workflow run step input (#10677)

- Compute the context the selected step had access to during its
execution and display it with the `<JsonNestedNode />` component
- Ensure several steps with the same name can be displayed in order
- Prevent access to the input tab in a few cases
- Hide the input tab when the trigger node is selected as this node
takes no input
- Hide the input tab when the selected node has not been executed yet or
is currently executed
- Fallback to the Node tab when the Input tab can't be accessed

## Successful workflow execution


https://github.com/user-attachments/assets/4a2bb5f5-450c-46ed-b2d7-a14d3b1e5c1f

## Failed workflow execution


https://github.com/user-attachments/assets/3be2784e-e76c-48ab-aef5-17f63410898e

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

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

@@ -1,7 +1,6 @@
 import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
 import { WorkflowRun } from '@/workflow/types/Workflow';
 import { WorkflowRunDiagramCanvas } from '@/workflow/workflow-diagram/components/WorkflowRunDiagramCanvas';
-import { WorkflowRunVisualizerEffect } from '@/workflow/workflow-diagram/components/WorkflowRunVisualizerEffect';
 import { isDefined } from 'twenty-shared';
 
 export const WorkflowRunVisualizerContent = ({
@@ -14,11 +13,5 @@ export const WorkflowRunVisualizerContent = ({
     return null;
   }
 
-  return (
-    <>
-      <WorkflowRunVisualizerEffect workflowRun={workflowRun} />
-
-      <WorkflowRunDiagramCanvas versionStatus={workflowVersion.status} />
-    </>
-  );
+  return <WorkflowRunDiagramCanvas versionStatus={workflowVersion.status} />;
 };

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/JsonArrayNode.tsx

@@ -14,7 +14,8 @@ export const JsonArrayNode = ({
   return (
     <JsonNestedNode
       elements={[...value.entries()].map(([key, value]) => ({
-        key: String(key),
+        id: key,
+        label: String(key),
         value,
       }))}
       label={label}

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/JsonNestedNode.tsx

@@ -28,7 +28,7 @@ export const JsonNestedNode = ({
 }: {
   label?: string;
   Icon: IconComponent;
-  elements: Array<{ key: string; value: JsonValue }>;
+  elements: Array<{ id: string | number; label: string; value: JsonValue }>;
   depth: number;
 }) => {
   const hideRoot = !isDefined(label);
@@ -37,8 +37,8 @@ export const JsonNestedNode = ({
 
   const renderedChildren = (
     <JsonList depth={depth}>
-      {elements.map(({ key, value }) => (
-        <JsonNode key={key} label={key} value={value} depth={depth + 1} />
+      {elements.map(({ id, label, value }) => (
+        <JsonNode key={id} label={label} value={value} depth={depth + 1} />
       ))}
     </JsonList>
   );

packages/twenty-front/src/modules/workflow/components/json-visualizer/components/JsonObjectNode.tsx

@@ -14,7 +14,8 @@ export const JsonObjectNode = ({
   return (
     <JsonNestedNode
       elements={Object.entries(value).map(([key, value]) => ({
-        key,
+        id: key,
+        label: key,
         value,
       }))}
       label={label}