Use free input for loop value parameter (#1483)

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

@@ -1,12 +1,6 @@
 import { HelpTooltip } from "@/components/HelpTooltip";
 import { Label } from "@/components/ui/label";
-import {
+import { WorkflowBlockInput } from "@/components/WorkflowBlockInput";
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback";
 import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChangeHandler";
 import { WorkflowBlockTypes } from "@/routes/workflows/types/workflowTypes";
@@ -15,14 +9,11 @@ import {
   Handle,
   NodeProps,
   Position,
-  useEdges,
   useNodes,
   useReactFlow,
 } from "@xyflow/react";
 import { AppNode } from "..";
 import { helpTooltips } from "../../helpContent";
-import { useWorkflowParametersState } from "../../useWorkflowParametersState";
-import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
 import { EditableNodeTitle } from "../components/EditableNodeTitle";
 import { NodeActionMenu } from "../NodeActionMenu";
 import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
@@ -31,20 +22,12 @@ import type { LoopNode } from "./types";
 function LoopNode({ id, data }: NodeProps<LoopNode>) {
   const { updateNodeData } = useReactFlow();
   const nodes = useNodes<AppNode>();
-  const edges = useEdges();
   const [label, setLabel] = useNodeLabelChangeHandler({
     id,
     initialValue: data.label,
   });
   const deleteNodeCallback = useDeleteNodeCallback();
 
-  const [workflowParameters] = useWorkflowParametersState();
-  const parameters = workflowParameters.filter(
-    (parameter) => parameter.parameterType !== "credential",
-  );
-  const parameterKeys = parameters.map((parameter) => parameter.key);
-  const outputParameterKeys = getAvailableOutputParameterKeys(nodes, edges, id);
-
   const children = nodes.filter((node) => node.parentId === id);
   const furthestDownChild: Node | null = children.reduce(
     (acc, child) => {
@@ -113,30 +96,16 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
             </div>
             <div className="space-y-2">
               <div className="flex gap-2">
-                <Label className="text-xs text-slate-300">
+                <Label className="text-xs text-slate-300">Loop Value</Label>
-                  Loop Value Parameter
-                </Label>
                 <HelpTooltip content={helpTooltips["loop"]["loopValue"]} />
               </div>
-              <Select
+              <WorkflowBlockInput
+                nodeId={id}
                 value={data.loopValue}
-                onValueChange={(value) => {
+                onChange={(value) => {
                   updateNodeData(id, { loopValue: value });
                 }}
-              >
+              />
-                <SelectTrigger>
-                  <SelectValue placeholder="Select the parameter to iterate over" />
-                </SelectTrigger>
-                <SelectContent>
-                  {[...parameterKeys, ...outputParameterKeys].map(
-                    (parameterKey) => (
-                      <SelectItem key={parameterKey} value={parameterKey}>
-                        {parameterKey}
-                      </SelectItem>
-                    ),
-                  )}
-                </SelectContent>
-              </Select>
             </div>
           </div>
         </div>

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

@@ -1688,7 +1688,7 @@ function getWorkflowErrors(nodes: Array<AppNode>): Array<string> {
   );
   if (emptyLoopNodes.length > 0) {
     emptyLoopNodes.forEach((node) => {
-      errors.push(`${node.data.label}: Loop value parameter must be selected.`);
+      errors.push(`${node.data.label}: Loop value parameter is required.`);
     });
   }