Add action block (#1243)

Skyvern-AI · Nov 22, 2024 · cc4c7be · cc4c7be
1 parent c732b41
commit cc4c7be
Show file tree

Hide file tree

Showing 12 changed files with 554 additions and 19 deletions.
diff --git a/skyvern-frontend/src/components/HelpTooltip.tsx b/skyvern-frontend/src/components/HelpTooltip.tsx
@@ -15,7 +15,7 @@ function HelpTooltip({ content }: Props) {
     <TooltipProvider>
       <Tooltip delayDuration={300}>
         <TooltipTrigger asChild>
-          <QuestionMarkCircledIcon className="h-4 w-4" />
+          <QuestionMarkCircledIcon className="size-4" />
         </TooltipTrigger>
         <TooltipContent className="max-w-[250px]">{content}</TooltipContent>
       </Tooltip>

diff --git a/skyvern-frontend/src/components/icons/ClickIcon.tsx b/skyvern-frontend/src/components/icons/ClickIcon.tsx
@@ -0,0 +1,26 @@
+type Props = {
+  className?: string;
+};
+
+function ClickIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M9 3.5V2M5.06066 5.06066L4 4M5.06066 13L4 14.0607M13 5.06066L14.0607 4M3.5 9H2M8.5 8.5L12.6111 21.2778L15.5 18.3889L19.1111 22L22 19.1111L18.3889 15.5L21.2778 12.6111L8.5 8.5Z"
+        stroke="#F8FAFC"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { ClickIcon };
diff --git a/skyvern-frontend/src/components/ui/tooltip.tsx b/skyvern-frontend/src/components/ui/tooltip.tsx
@@ -13,15 +13,17 @@ const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 

diff --git a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
@@ -74,6 +74,7 @@ import { isLoopNode, LoopNode } from "./nodes/LoopNode/types";
 import { isTaskNode } from "./nodes/TaskNode/types";
 import { useShouldNotifyWhenClosingTab } from "@/hooks/useShouldNotifyWhenClosingTab";
 import { isValidationNode } from "./nodes/ValidationNode/types";
+import { isActionNode } from "./nodes/ActionNode/types";
 
 function convertToParametersYAML(
   parameters: ParametersState,
@@ -459,13 +460,28 @@ function FlowRenderer({
     const errors: Array<string> = [];
 
     const workflowBlockNodes = nodes.filter(isWorkflowBlockNode);
-    if (workflowBlockNodes[0]!.type === "validation") {
+    if (
+      workflowBlockNodes.length > 0 &&
+      workflowBlockNodes[0]!.type === "validation"
+    ) {
       const label = workflowBlockNodes[0]!.data.label;
       errors.push(
-        `${label}: Validation block can't be the first block in a workflow`,
+        `${label}: Validation block can't be the first block in a workflow.`,
       );
     }
 
+    const actionNodes = nodes.filter(isActionNode);
+    actionNodes.forEach((node) => {
+      if (node.data.navigationGoal.length === 0) {
+        errors.push(`${node.data.label}: Action Instruction is required.`);
+      }
+      try {
+        JSON.parse(node.data.errorCodeMapping);
+      } catch {
+        errors.push(`${node.data.label}: Error messages is not valid JSON.`);
+      }
+    });
+
     // check loop node parameters
     const loopNodes: Array<LoopNode> = nodes.filter(isLoopNode);
     const emptyLoopNodes = loopNodes.filter(
@@ -474,7 +490,7 @@ function FlowRenderer({
     if (emptyLoopNodes.length > 0) {
       emptyLoopNodes.forEach((node) => {
         errors.push(
-          `${node.data.label}: Loop value parameter must be selected`,
+          `${node.data.label}: Loop value parameter must be selected.`,
         );
       });
     }
@@ -485,12 +501,12 @@ function FlowRenderer({
       try {
         JSON.parse(node.data.dataSchema);
       } catch {
-        errors.push(`${node.data.label}: Data schema is not valid JSON`);
+        errors.push(`${node.data.label}: Data schema is not valid JSON.`);
       }
       try {
         JSON.parse(node.data.errorCodeMapping);
       } catch {
-        errors.push(`${node.data.label}: Error messages is not valid JSON`);
+        errors.push(`${node.data.label}: Error messages is not valid JSON.`);
       }
     });