From 40571c0b6f6929f34501769e4fcda1fdd3c9e728 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Fri, 29 Nov 2024 05:58:28 -0800
Subject: [PATCH] Add URL to action block (#1292)

---
 .../editor/nodes/ActionNode/ActionNode.tsx    | 54 +++++++++++++------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx
index f059f5d2..f726f453 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx
@@ -26,6 +26,8 @@ import {
   commonHelpTooltipContent,
 } from "../../constants";
 
+const urlTooltip =
+  "The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off.";
 const navigationGoalTooltip =
   "Specify a single step or action you'd like Skyvern to complete. Actions are one-off tasks like filling a field or interacting with a specific element on the page.\n\nCurrently supported actions are click, input text, upload file, and select.";
 
@@ -39,6 +41,7 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
     initialValue: data.label,
   });
   const [inputs, setInputs] = useState({
+    url: data.url,
     navigationGoal: data.navigationGoal,
     errorCodeMapping: data.errorCodeMapping,
     maxRetries: data.maxRetries,
@@ -96,22 +99,43 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
             }}
           />
         </header>
-        <div className="space-y-2">
-          <div className="flex gap-2">
-            <Label className="text-xs text-slate-300">Action Instruction</Label>
-            <HelpTooltip content={navigationGoalTooltip} />
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <div className="flex gap-2">
+              <Label className="text-xs text-slate-300">URL</Label>
+              <HelpTooltip content={urlTooltip} />
+            </div>
+            <AutoResizingTextarea
+              onChange={(event) => {
+                if (!editable) {
+                  return;
+                }
+                handleChange("url", event.target.value);
+              }}
+              value={inputs.url}
+              placeholder={commonFieldPlaceholders["url"]}
+              className="nopan text-xs"
+            />
+          </div>
+          <div className="space-y-2">
+            <div className="flex gap-2">
+              <Label className="text-xs text-slate-300">
+                Action Instruction
+              </Label>
+              <HelpTooltip content={navigationGoalTooltip} />
+            </div>
+            <AutoResizingTextarea
+              onChange={(event) => {
+                if (!editable) {
+                  return;
+                }
+                handleChange("navigationGoal", event.target.value);
+              }}
+              value={inputs.navigationGoal}
+              placeholder={navigationGoalPlaceholder}
+              className="nopan text-xs"
+            />
           </div>
-          <AutoResizingTextarea
-            onChange={(event) => {
-              if (!editable) {
-                return;
-              }
-              handleChange("navigationGoal", event.target.value);
-            }}
-            value={inputs.navigationGoal}
-            placeholder={navigationGoalPlaceholder}
-            className="nopan text-xs"
-          />
         </div>
         <Separator />
         <Accordion type="single" collapsible>