From 04e2a2b0639717e94bb0b64e6ec2b06bf9df206b Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Thu, 30 Jan 2025 04:57:01 +0800
Subject: [PATCH] Frontend for complete if empty (#1676)

---
 .../editor/nodes/LoopNode/LoopNode.tsx        | 22 +++++++++++++++++++
 .../workflows/editor/nodes/LoopNode/types.ts  |  2 ++
 .../workflows/editor/workflowEditorUtils.ts   |  5 ++++-
 .../routes/workflows/types/workflowTypes.ts   |  1 +
 .../workflows/types/workflowYamlTypes.ts      |  1 +
 5 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx
index 49777a6f7d..c4aa4e4898 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx
+++ b/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>
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/types.ts b/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/types.ts
index 2da9d5a965..fbac60366e 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/types.ts
+++ b/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;
 
diff --git a/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts b/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
index ca943e412c..8d627f5db9 100644
--- a/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
+++ b/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;
       }
diff --git a/skyvern-frontend/src/routes/workflows/types/workflowTypes.ts b/skyvern-frontend/src/routes/workflows/types/workflowTypes.ts
index 1fd92d95e4..75ea762de6 100644
--- a/skyvern-frontend/src/routes/workflows/types/workflowTypes.ts
+++ b/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 & {
diff --git a/skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts b/skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts
index e6c1d54f43..8f52728147 100644
--- a/skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts
+++ b/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 & {