PrintPage Block - add parameters in advanced settings and enable debugging (#4491)

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

@@ -1,6 +1,6 @@
 import { HelpTooltip } from "@/components/HelpTooltip";
 import { Label } from "@/components/ui/label";
-import { Handle, NodeProps, Position } from "@xyflow/react";
+import { Handle, NodeProps, Position, useNodes, useEdges } from "@xyflow/react";
 import type { PrintPageNode } from "./types";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
@@ -24,6 +24,9 @@ import { useParams } from "react-router-dom";
 import { statusIsRunningOrQueued } from "@/routes/tasks/types";
 import { useWorkflowRunQuery } from "@/routes/workflows/hooks/useWorkflowRunQuery";
 import { useUpdate } from "@/routes/workflows/editor/useUpdate";
+import { ParametersMultiSelect } from "../TaskNode/ParametersMultiSelect";
+import { AppNode } from "..";
+import { getAvailableOutputParameterKeys } from "../../workflowEditorUtils";
 
 function PrintPageNode({ id, data }: NodeProps<PrintPageNode>) {
   const { editable, label } = data;
@@ -36,6 +39,9 @@ function PrintPageNode({ id, data }: NodeProps<PrintPageNode>) {
   const thisBlockIsPlaying =
     workflowRunIsRunningOrQueued && thisBlockIsTargetted;
 
+  const nodes = useNodes<AppNode>();
+  const edges = useEdges();
+  const outputParameterKeys = getAvailableOutputParameterKeys(nodes, edges, id);
   const update = useUpdate<PrintPageNode["data"]>({ id, editable });
 
   return (
@@ -126,6 +132,13 @@ function PrintPageNode({ id, data }: NodeProps<PrintPageNode>) {
             </AccordionTrigger>
             <AccordionContent className="pl-6 pr-1 pt-1">
               <div className="space-y-4">
+                <ParametersMultiSelect
+                  availableOutputParameters={outputParameterKeys}
+                  parameters={data.parameterKeys}
+                  onParametersChange={(parameterKeys) => {
+                    update({ parameterKeys });
+                  }}
+                />
                 <div className="space-y-2">
                   <Label className="text-xs text-slate-300">
                     Custom Filename

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

@@ -8,6 +8,7 @@ export type PrintPageNodeData = NodeBaseData & {
   format: string;
   landscape: boolean;
   printBackground: boolean;
+  parameterKeys: Array<string>;
 };
 
 export type PrintPageNode = Node<PrintPageNodeData, "printPage">;
@@ -23,6 +24,7 @@ export const printPageNodeDefaultData: PrintPageNodeData = {
   format: "A4",
   landscape: false,
   printBackground: true,
+  parameterKeys: [],
 };
 
 export function isPrintPageNode(node: Node): node is PrintPageNode {

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

@@ -207,7 +207,8 @@ function WorkflowParametersPanel({ onMouseDownCapture }: Props) {
                                       node.type === "action" ||
                                       node.type === "http_request" ||
                                       node.type === "validation" ||
-                                      node.type === "codeBlock"
+                                      node.type === "codeBlock" ||
+                                      node.type === "printPage"
                                     ) {
                                       const parameterKeys = node.data
                                         .parameterKeys as Array<string> | null;
@@ -313,7 +314,8 @@ function WorkflowParametersPanel({ onMouseDownCapture }: Props) {
                           node.type === "action" ||
                           node.type === "http_request" ||
                           node.type === "validation" ||
-                          node.type === "codeBlock"
+                          node.type === "codeBlock" ||
+                          node.type === "printPage"
                         ) {
                           const parameterKeys = node.data
                             .parameterKeys as Array<string> | null;

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

@@ -853,6 +853,7 @@ function convertToNode(
           format: block.format ?? "A4",
           landscape: block.landscape ?? false,
           printBackground: block.print_background ?? true,
+          parameterKeys: block.parameters.map((p) => p.key),
         },
       };
     }
@@ -2369,6 +2370,7 @@ function getWorkflowBlock(
         format: node.data.format,
         landscape: node.data.landscape,
         print_background: node.data.printBackground,
+        parameter_keys: node.data.parameterKeys,
       };
     }
     case "conditional": {
@@ -3386,6 +3388,7 @@ function convertBlocksToBlockYAML(
           format: block.format,
           landscape: block.landscape,
           print_background: block.print_background,
+          parameter_keys: block.parameters.map((p) => p.key),
         };
         return blockYaml;
       }

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

@@ -563,6 +563,7 @@ export type PrintPageBlock = WorkflowBlockBase & {
   format: string;
   landscape: boolean;
   print_background: boolean;
+  parameters: Array<WorkflowParameter>;
 };
 
 export type WorkflowDefinition = {

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

@@ -413,4 +413,5 @@ export type PrintPageBlockYAML = BlockYAMLBase & {
   format: string;
   landscape: boolean;
   print_background: boolean;
+  parameter_keys?: Array<string> | null;
 };