Add variable path (#10720)

<img width="537" alt="Capture d’écran 2025-03-07 à 09 44 21"
src="https://github.com/user-attachments/assets/52c4d292-01af-4389-aa66-551be2358dd7"
/>

- search through step output schema the variable
- build the variable path
- returns the variable label 
- display both

packages/twenty-front/src/testing/decorators/WorkflowStepDecorator.tsx

@@ -1,7 +1,10 @@
+import { usePopulateStepsOutputSchema } from '@/workflow/hooks/usePopulateStepsOutputSchema';
+import { WorkflowVersionComponentInstanceContext } from '@/workflow/states/context/WorkflowVersionComponentInstanceContext';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
+import { WorkflowVersion } from '@/workflow/types/Workflow';
 import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
 import { Decorator } from '@storybook/react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
 import {
   getWorkflowMock,
@@ -11,11 +14,30 @@ import {
 export const WorkflowStepDecorator: Decorator = (Story) => {
   const setWorkflowId = useSetRecoilState(workflowIdState);
   const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
+  const workflowVersion = getWorkflowMock().versions.edges[0]
+    .node as WorkflowVersion;
+  const { populateStepsOutputSchema } = usePopulateStepsOutputSchema({
+    workflowVersionId: workflowVersion.id,
+  });
+  const [ready, setReady] = useState(false);
 
   useEffect(() => {
     setWorkflowId(getWorkflowMock().id);
     setWorkflowSelectedNode(getWorkflowNodeIdMock());
-  }, [setWorkflowId, setWorkflowSelectedNode]);
+    populateStepsOutputSchema(workflowVersion);
+    setReady(true);
+  }, [
+    setWorkflowId,
+    setWorkflowSelectedNode,
+    populateStepsOutputSchema,
+    workflowVersion,
+  ]);
 
-  return <Story />;
+  return (
+    <WorkflowVersionComponentInstanceContext.Provider
+      value={{ instanceId: workflowVersion.id }}
+    >
+      {ready && <Story />}
+    </WorkflowVersionComponentInstanceContext.Provider>
+  );
 };

packages/twenty-front/src/testing/mock-data/workflow.ts

@@ -25,6 +25,8 @@ export const getWorkflowNodeIdMock = () => {
   return getWorkflowMock().versions.edges[0].node.steps[0].id;
 };
 
+export const MOCKED_STEP_ID = '04d5f3bf-9714-400d-ba27-644006a5fb1b';
+
 export const workflowQueryResult = {
   workflows: {
     __typename: 'WorkflowConnection',
@@ -76,7 +78,7 @@ export const workflowQueryResult = {
                   status: 'DRAFT',
                   steps: [
                     {
-                      id: '04d5f3bf-9714-400d-ba27-644006a5fb1b',
+                      id: MOCKED_STEP_ID,
                       name: 'Create Record',
                       type: 'CREATE_RECORD',
                       valid: false,
@@ -107,6 +109,28 @@ export const workflowQueryResult = {
                               value: 'My text',
                               isLeaf: true,
                             },
+                            fullName: {
+                              icon: 'IconTargetArrow',
+                              type: 'TEXT',
+                              label: 'Full Name',
+                              isLeaf: false,
+                              value: {
+                                firstName: {
+                                  icon: 'IconTargetArrow',
+                                  type: 'TEXT',
+                                  label: 'Full Name First Name',
+                                  value: 'John',
+                                  isLeaf: true,
+                                },
+                                lastName: {
+                                  icon: 'IconTargetArrow',
+                                  type: 'TEXT',
+                                  label: 'Full Name Last Name',
+                                  value: 'Doe',
+                                  isLeaf: true,
+                                },
+                              },
+                            },
                             stage: {
                               icon: 'IconProgressCheck',
                               type: 'SELECT',
@@ -120,13 +144,13 @@ export const workflowQueryResult = {
                               value: {
                                 amountMicros: {
                                   type: 'NUMERIC',
-                                  label: ' Amount Micros',
+                                  label: 'My Amount Micros',
                                   value: null,
                                   isLeaf: true,
                                 },
                                 currencyCode: {
                                   type: 'TEXT',
-                                  label: ' Currency Code',
+                                  label: 'My Currency Code',
                                   value: 'My text',
                                   isLeaf: true,
                                 },
@@ -186,6 +210,13 @@ export const workflowQueryResult = {
                               value: '01/23/2025 15:16',
                               isLeaf: true,
                             },
+                            salary: {
+                              icon: 'IconMoneybag',
+                              type: 'NUMBER',
+                              label: 'Salary',
+                              value: 1000000000,
+                              isLeaf: true,
+                            },
                           },
                           object: {
                             icon: 'IconTargetArrow',