Jon/add input parameters to code block (#2308)

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

@@ -1,4 +1,5 @@
 import { Label } from "@/components/ui/label";
+import { WorkflowBlockInputSet } from "@/components/WorkflowBlockInputSet";
 import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { useDeleteNodeCallback } from "@/routes/workflows/hooks/useDeleteNodeCallback";
 import { useNodeLabelChangeHandler } from "@/routes/workflows/hooks/useLabelChangeHandler";
@@ -19,6 +20,7 @@ function CodeBlockNode({ id, data }: NodeProps<CodeBlockNode>) {
   });
   const [inputs, setInputs] = useState({
     code: data.code,
+    parameterKeys: data.parameterKeys,
   });
 
   return (
@@ -61,6 +63,20 @@ function CodeBlockNode({ id, data }: NodeProps<CodeBlockNode>) {
             }}
           />
         </div>
+        <div className="space-y-2">
+          <Label className="text-xs text-slate-300">Input Parameters</Label>
+          <WorkflowBlockInputSet
+            nodeId={id}
+            onChange={(parameterKeys) => {
+              setInputs({
+                ...inputs,
+                parameterKeys: Array.from(parameterKeys),
+              });
+              updateNodeData(id, { parameterKeys: Array.from(parameterKeys) });
+            }}
+            values={new Set(inputs.parameterKeys ?? [])}
+          />
+        </div>
         <div className="space-y-2">
           <Label className="text-xs text-slate-300">Code Input</Label>
           <CodeEditor

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

@@ -3,13 +3,26 @@ import { NodeBaseData } from "../types";
 
 export type CodeBlockNodeData = NodeBaseData & {
   code: string;
+  parameterKeys: Array<string> | null;
 };
 
 export type CodeBlockNode = Node<CodeBlockNodeData, "codeBlock">;
 
+const codeLead = `
+# This feature is currently in private beta. Please reach out to
+# founders@skyvern.com to get access.
+#
+# Any parameter you've added to the "Input Parameters" list is available in
+# global scope, by the same name.
+#
+# Any top-level variable you create is assigned to the output of this block.
+# e.g., if you've written 'x = 5', then 'x' is included in the block output.
+`;
+
 export const codeBlockNodeDefaultData: CodeBlockNodeData = {
   editable: true,
   label: "",
-  code: `# This feature is currently in private beta. Please reach out to founders@skyvern.com to get access\n# All variables will be assigned to the output of this block.\n# Like 'x = 5', 'x' will be assigned to the output of this block.\n\n`,
+  code: codeLead,
   continueOnFailure: false,
+  parameterKeys: null,
 } as const;

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx

@@ -6,7 +6,8 @@ import { AddNodeProps } from "../FlowRenderer";
 import { WorkflowBlockNode } from "../nodes";
 import { WorkflowBlockIcon } from "../nodes/WorkflowBlockIcon";
 
-const enableCodeBlock = import.meta.env.VITE_ENABLE_CODE_BLOCK === "true";
+const enableCodeBlock =
+  import.meta.env.VITE_ENABLE_CODE_BLOCK?.toLowerCase() === "true";
 
 const nodeLibraryItems: Array<{
   nodeType: NonNullable<WorkflowBlockNode["type"]>;

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

@@ -384,6 +384,7 @@ function convertToNode(
         data: {
           ...commonData,
           code: block.code,
+          parameterKeys: block.parameters.map((p) => p.key),
         },
       };
     }
@@ -1140,6 +1141,7 @@ function getWorkflowBlock(node: WorkflowBlockNode): BlockYAML {
       return {
         ...base,
         block_type: "code",
+        parameter_keys: node.data.parameterKeys,
         code: node.data.code,
       };
     }
@@ -1842,6 +1844,7 @@ function convertBlocksToBlockYAML(
           ...base,
           block_type: "code",
           code: block.code,
+          parameter_keys: block.parameters.map((p) => p.key),
         };
         return blockYaml;
       }