Frontend for complete if empty (#1676)

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

@@ -20,6 +20,7 @@ import { WorkflowBlockIcon } from "../WorkflowBlockIcon";
 import type { LoopNode } from "./types";
 import { useState } from "react";
 import { useIsFirstBlockInWorkflow } from "../../hooks/useIsFirstNodeInWorkflow";
+import { Checkbox } from "@/components/ui/checkbox";
 
 function LoopNode({ id, data }: NodeProps<LoopNode>) {
   const { updateNodeData } = useReactFlow();
@@ -125,6 +126,27 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
                 }}
               />
             </div>
+            <div className="space-y-2">
+              <div className="space-y-2">
+                <div className="flex gap-4">
+                  <div className="flex gap-2">
+                    <Label className="text-xs text-slate-300">
+                      Complete if Empty
+                    </Label>
+                    <HelpTooltip content="When checked, this block will successfully complete when the loop value is an empty list" />
+                  </div>
+                  <Checkbox
+                    checked={data.completeIfEmpty}
+                    disabled={!data.editable}
+                    onCheckedChange={(checked) => {
+                      updateNodeData(id, {
+                        completeIfEmpty: checked,
+                      });
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

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

@@ -4,6 +4,7 @@ import { NodeBaseData } from "../types";
 export type LoopNodeData = NodeBaseData & {
   loopValue: string;
   loopVariableReference: string;
+  completeIfEmpty: boolean;
 };
 
 export type LoopNode = Node<LoopNodeData, "loop">;
@@ -13,6 +14,7 @@ export const loopNodeDefaultData: LoopNodeData = {
   label: "",
   loopValue: "",
   loopVariableReference: "",
+  completeIfEmpty: false,
   continueOnFailure: false,
 } as const;
 

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

@@ -144,7 +144,7 @@ function layout(
     const loopNodeWidth = 600; // 600 px
     const layouted = layoutUtil(childNodes, childEdges, {
       marginx: (loopNodeWidth - maxChildWidth) / 2,
-      marginy: 200,
+      marginy: 225,
     });
     loopNodeChildren[index] = layouted.nodes;
   });
@@ -381,6 +381,7 @@ function convertToNode(
           ...commonData,
           loopValue: block.loop_over?.key ?? "",
           loopVariableReference: loopVariableReference,
+          completeIfEmpty: block.complete_if_empty,
         },
       };
     }
@@ -1112,6 +1113,7 @@ function getWorkflowBlocksUtil(
           continue_on_failure: node.data.continueOnFailure,
           loop_blocks: getOrderedChildrenBlocks(nodes, edges, node.id),
           loop_variable_reference: node.data.loopVariableReference,
+          complete_if_empty: node.data.completeIfEmpty,
         },
       ];
     }
@@ -1628,6 +1630,7 @@ function convertBlocksToBlockYAML(
           loop_over_parameter_key: block.loop_over?.key ?? "",
           loop_blocks: convertBlocksToBlockYAML(block.loop_blocks),
           loop_variable_reference: block.loop_variable_reference,
+          complete_if_empty: block.complete_if_empty,
         };
         return blockYaml;
       }

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

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

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

@@ -265,6 +265,7 @@ export type ForLoopBlockYAML = BlockYAMLBase & {
   loop_over_parameter_key?: string;
   loop_blocks: Array<BlockYAML>;
   loop_variable_reference: string | null;
+  complete_if_empty: boolean;
 };
 
 export type PDFParserBlockYAML = BlockYAMLBase & {