use new loop variable reference field (#1485)

skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx

@@ -28,7 +28,7 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
     initialValue: data.label,
   });
   const [inputs, setInputs] = useState({
-    loopValue: data.loopValue,
+    loopVariableReference: data.loopVariableReference,
   });
   const deleteNodeCallback = useDeleteNodeCallback();
 
@@ -105,13 +105,13 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
               </div>
               <WorkflowBlockInput
                 nodeId={id}
-                value={inputs.loopValue}
+                value={inputs.loopVariableReference}
                 onChange={(value) => {
                   setInputs({
                     ...inputs,
-                    loopValue: value,
+                    loopVariableReference: value,
                   });
-                  updateNodeData(id, { loopValue: value });
+                  updateNodeData(id, { loopVariableReference: value });
                 }}
               />
             </div>

skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/types.ts

@@ -3,6 +3,7 @@ import { NodeBaseData } from "../types";
 
 export type LoopNodeData = NodeBaseData & {
   loopValue: string;
+  loopVariableReference: string;
 };
 
 export type LoopNode = Node<LoopNodeData, "loop">;
@@ -11,6 +12,7 @@ export const loopNodeDefaultData: LoopNodeData = {
   editable: true,
   label: "",
   loopValue: "",
+  loopVariableReference: "",
   continueOnFailure: false,
 } as const;
 

skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts

@@ -365,6 +365,10 @@ function convertToNode(
       };
     }
     case "for_loop": {
+      const loopVariableReference =
+        block.loop_variable_reference !== null
+          ? block.loop_variable_reference
+          : block.loop_over.key;
       return {
         ...identifiers,
         ...common,
@@ -372,6 +376,7 @@ function convertToNode(
         data: {
           ...commonData,
           loopValue: block.loop_over.key,
+          loopVariableReference: loopVariableReference,
         },
       };
     }
@@ -1073,6 +1078,7 @@ function getWorkflowBlocksUtil(
           continue_on_failure: node.data.continueOnFailure,
           loop_over_parameter_key: node.data.loopValue,
           loop_blocks: getOrderedChildrenBlocks(nodes, edges, node.id),
+          loop_variable_reference: node.data.loopVariableReference,
         },
       ];
     }
@@ -1570,6 +1576,7 @@ function convertBlocksToBlockYAML(
           block_type: "for_loop",
           loop_over_parameter_key: block.loop_over.key,
           loop_blocks: convertBlocksToBlockYAML(block.loop_blocks),
+          loop_variable_reference: block.loop_variable_reference,
         };
         return blockYaml;
       }

skyvern-frontend/src/routes/workflows/types/workflowTypes.ts

@@ -186,6 +186,7 @@ export type ForLoopBlock = WorkflowBlockBase & {
   block_type: "for_loop";
   loop_over: WorkflowParameter;
   loop_blocks: Array<WorkflowBlock>;
+  loop_variable_reference: string | null;
 };
 
 export type CodeBlock = WorkflowBlockBase & {

skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts

@@ -250,4 +250,5 @@ export type ForLoopBlockYAML = BlockYAMLBase & {
   block_type: "for_loop";
   loop_over_parameter_key: string;
   loop_blocks: Array<BlockYAML>;
+  loop_variable_reference: string | null;
 };