🔄 synced local 'skyvern-frontend/src/' with remote 'skyvern-frontend/…

…src/'  > [!IMPORTANT] > Add new components for enhanced parameter handling in workflow nodes, replacing existing components and improving functionality across various node files. > > - **Components**: > - Add `WorkflowBlockInput`, `WorkflowBlockInputTextarea`, and `WorkflowBlockParameterSelect` for parameter handling. > - **Integration**: > - Replace `AutoResizingTextarea` with `WorkflowBlockInputTextarea` in `ActionNode.tsx`, `ExtractionNode.tsx`, and `FileDownloadNode.tsx`. > - Add parameter selection in `NavigationNode.tsx` and `TaskNode.tsx` using `WorkflowBlockParameterSelect`. > - **State Management**: > - Use `useWorkflowParametersState` in `TaskNode.tsx` for managing workflow parameters. > - **Misc**: > - Add `parameterInputOptions` in `TaskNode.tsx` to combine workflow and output parameters. > > <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=Skyvern-AI%2Fskyvern-cloud&utm_source=github&utm_medium=referral)<sup> for d951eeb248f89efd7c6d78de0f77c5e96cab3000. It will automatically update as commits are pushed.</sup>
Skyvern-AI · Dec 10, 2024 · 3500b2d · 3500b2d
1 parent 5830758
commit 3500b2d
Show file tree

Hide file tree

Showing 10 changed files with 430 additions and 190 deletions.
diff --git a/skyvern-frontend/src/components/WorkflowBlockInput.tsx b/skyvern-frontend/src/components/WorkflowBlockInput.tsx
@@ -0,0 +1,22 @@
+import { PlusIcon } from "@radix-ui/react-icons";
+import { cn } from "@/util/utils";
+import { Input } from "./ui/input";
+
+type Props = React.ComponentProps<typeof Input> & {
+  onIconClick: () => void;
+};
+
+function WorkflowBlockInput(props: Props) {
+  return (
+    <div className="relative">
+      <Input {...props} className={cn("pr-9", props.className)} />
+      <div className="absolute right-0 top-0 flex size-9 cursor-pointer items-center justify-center">
+        <div className="rounded p-1 hover:bg-muted" onClick={props.onIconClick}>
+          <PlusIcon className="size-4" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { WorkflowBlockInput };
diff --git a/skyvern-frontend/src/components/WorkflowBlockInputTextarea.tsx b/skyvern-frontend/src/components/WorkflowBlockInputTextarea.tsx
@@ -0,0 +1,25 @@
+import { PlusIcon } from "@radix-ui/react-icons";
+import { cn } from "@/util/utils";
+import { AutoResizingTextarea } from "./AutoResizingTextarea/AutoResizingTextarea";
+
+type Props = React.ComponentProps<typeof AutoResizingTextarea> & {
+  onIconClick: () => void;
+};
+
+function WorkflowBlockInputTextarea(props: Props) {
+  return (
+    <div className="relative">
+      <AutoResizingTextarea
+        {...props}
+        className={cn("pr-9", props.className)}
+      />
+      <div className="absolute right-0 top-0 flex size-9 cursor-pointer items-center justify-center">
+        <div className="rounded p-1 hover:bg-muted" onClick={props.onIconClick}>
+          <PlusIcon className="size-4" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { WorkflowBlockInputTextarea };
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx
@@ -1,4 +1,3 @@
-import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
 import {
   Accordion,
   AccordionContent,
@@ -22,6 +21,8 @@ import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
 import { Switch } from "@/components/ui/switch";
 import { ClickIcon } from "@/components/icons/ClickIcon";
 import { placeholders, helpTooltips } from "../../helpContent";
+import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
+import { WorkflowBlockParameterSelect } from "../WorkflowBlockParameterSelect";
 
 const urlTooltip =
   "The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off.";
@@ -31,6 +32,9 @@ const navigationGoalTooltip =
 const navigationGoalPlaceholder = 'Input {{ name }} into "Name" field.';
 
 function ActionNode({ id, data }: NodeProps<ActionNode>) {
+  const [parametersPanelField, setParametersPanelField] = useState<
+    string | null
+  >(null);
   const { updateNodeData } = useReactFlow();
   const { editable } = data;
   const [label, setLabel] = useNodeLabelChangeHandler({
@@ -102,7 +106,10 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
               <Label className="text-xs text-slate-300">URL</Label>
               <HelpTooltip content={urlTooltip} />
             </div>
-            <AutoResizingTextarea
+            <WorkflowBlockInputTextarea
+              onIconClick={() => {
+                setParametersPanelField("url");
+              }}
               onChange={(event) => {
                 if (!editable) {
                   return;
@@ -121,7 +128,10 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
               </Label>
               <HelpTooltip content={navigationGoalTooltip} />
             </div>
-            <AutoResizingTextarea
+            <WorkflowBlockInputTextarea
+              onIconClick={() => {
+                setParametersPanelField("navigationGoal");
+              }}
               onChange={(event) => {
                 if (!editable) {
                   return;
@@ -309,11 +319,11 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                       content={helpTooltips["action"]["totpVerificationUrl"]}
                     />
                   </div>
-                  <AutoResizingTextarea
+                  <WorkflowBlockInputTextarea
+                    onIconClick={() => {
+                      setParametersPanelField("totpVerificationUrl");
+                    }}
                     onChange={(event) => {
-                      if (!editable) {
-                        return;
-                      }
                       handleChange("totpVerificationUrl", event.target.value);
                     }}
                     value={inputs.totpVerificationUrl ?? ""}
@@ -330,7 +340,10 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
                       content={helpTooltips["action"]["totpIdentifier"]}
                     />
                   </div>
-                  <AutoResizingTextarea
+                  <WorkflowBlockInputTextarea
+                    onIconClick={() => {
+                      setParametersPanelField("totpIdentifier");
+                    }}
                     onChange={(event) => {
                       if (!editable) {
                         return;
@@ -347,6 +360,25 @@ function ActionNode({ id, data }: NodeProps<ActionNode>) {
           </AccordionItem>
         </Accordion>
       </div>
+      {typeof parametersPanelField === "string" && (
+        <WorkflowBlockParameterSelect
+          nodeId={id}
+          onClose={() => setParametersPanelField(null)}
+          onAdd={(parameterKey) => {
+            if (parametersPanelField === null || !editable) {
+              return;
+            }
+            if (parametersPanelField in inputs) {
+              const currentValue =
+                inputs[parametersPanelField as keyof typeof inputs];
+              handleChange(
+                parametersPanelField,
+                `${currentValue ?? ""}{{ ${parameterKey} }}`,
+              );
+            }
+          }}
+        />
+      )}
     </div>
   );
 }

diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/ExtractionNode/ExtractionNode.tsx
@@ -1,4 +1,3 @@
-import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
 import {
   Accordion,
   AccordionContent,
@@ -23,8 +22,13 @@ import type { ExtractionNode } from "./types";
 import { ExtractIcon } from "@/components/icons/ExtractIcon";
 
 import { helpTooltips, placeholders } from "../../helpContent";
+import { WorkflowBlockParameterSelect } from "../WorkflowBlockParameterSelect";
+import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
 
 function ExtractionNode({ id, data }: NodeProps<ExtractionNode>) {
+  const [parametersPanelField, setParametersPanelField] = useState<
+    string | null
+  >(null);
   const { updateNodeData } = useReactFlow();
   const { editable } = data;
   const [label, setLabel] = useNodeLabelChangeHandler({
@@ -96,7 +100,10 @@ function ExtractionNode({ id, data }: NodeProps<ExtractionNode>) {
               content={helpTooltips["extraction"]["dataExtractionGoal"]}
             />
           </div>
-          <AutoResizingTextarea
+          <WorkflowBlockInputTextarea
+            onIconClick={() => {
+              setParametersPanelField("dataExtractionGoal");
+            }}
             onChange={(event) => {
               if (!editable) {
                 return;
@@ -256,6 +263,25 @@ function ExtractionNode({ id, data }: NodeProps<ExtractionNode>) {
           </AccordionItem>
         </Accordion>
       </div>
+      {typeof parametersPanelField === "string" && (
+        <WorkflowBlockParameterSelect
+          nodeId={id}
+          onClose={() => setParametersPanelField(null)}
+          onAdd={(parameterKey) => {
+            if (parametersPanelField === null || !editable) {
+              return;
+            }
+            if (parametersPanelField in inputs) {
+              const currentValue =
+                inputs[parametersPanelField as keyof typeof inputs];
+              handleChange(
+                parametersPanelField,
+                `${currentValue ?? ""}{{ ${parameterKey} }}`,
+              );
+            }
+          }}
+        />
+      )}
     </div>
   );
 }

diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/FileDownloadNode/FileDownloadNode.tsx
@@ -1,4 +1,3 @@
-import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
 import { HelpTooltip } from "@/components/HelpTooltip";
 import {
   Accordion,
@@ -22,6 +21,8 @@ import { NodeActionMenu } from "../NodeActionMenu";
 import { errorMappingExampleValue } from "../types";
 import type { FileDownloadNode } from "./types";
 import { helpTooltips, placeholders } from "../../helpContent";
+import { WorkflowBlockParameterSelect } from "../WorkflowBlockParameterSelect";
+import { WorkflowBlockInputTextarea } from "@/components/WorkflowBlockInputTextarea";
 
 const urlTooltip =
   "The URL Skyvern is navigating to. Leave this field blank to pick up from where the last block left off.";
@@ -31,6 +32,9 @@ const navigationGoalTooltip =
 const navigationGoalPlaceholder = "Tell Skyvern which file to download.";
 
 function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
+  const [parametersPanelField, setParametersPanelField] = useState<
+    string | null
+  >(null);
   const { updateNodeData } = useReactFlow();
   const { editable } = data;
   const [label, setLabel] = useNodeLabelChangeHandler({
@@ -104,11 +108,11 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
               <Label className="text-xs text-slate-300">URL</Label>
               <HelpTooltip content={urlTooltip} />
             </div>
-            <AutoResizingTextarea
+            <WorkflowBlockInputTextarea
+              onIconClick={() => {
+                setParametersPanelField("url");
+              }}
               onChange={(event) => {
-                if (!editable) {
-                  return;
-                }
                 handleChange("url", event.target.value);
               }}
               value={inputs.url}
@@ -121,11 +125,11 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
               <Label className="text-xs text-slate-300">Download Goal</Label>
               <HelpTooltip content={navigationGoalTooltip} />
             </div>
-            <AutoResizingTextarea
+            <WorkflowBlockInputTextarea
+              onIconClick={() => {
+                setParametersPanelField("navigationGoal");
+              }}
               onChange={(event) => {
-                if (!editable) {
-                  return;
-                }
                 handleChange("navigationGoal", event.target.value);
               }}
               value={inputs.navigationGoal}
@@ -161,9 +165,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
                     min="0"
                     value={inputs.maxRetries ?? ""}
                     onChange={(event) => {
-                      if (!editable) {
-                        return;
-                      }
                       const value =
                         event.target.value === ""
                           ? null
@@ -188,9 +189,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
                     min="0"
                     value={inputs.maxStepsOverride ?? ""}
                     onChange={(event) => {
-                      if (!editable) {
-                        return;
-                      }
                       const value =
                         event.target.value === ""
                           ? null
@@ -213,9 +211,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
                       checked={inputs.errorCodeMapping !== "null"}
                       disabled={!editable}
                       onCheckedChange={(checked) => {
-                        if (!editable) {
-                          return;
-                        }
                         handleChange(
                           "errorCodeMapping",
                           checked
@@ -231,9 +226,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
                         language="json"
                         value={inputs.errorCodeMapping}
                         onChange={(value) => {
-                          if (!editable) {
-                            return;
-                          }
                           handleChange("errorCodeMapping", value);
                         }}
                         className="nowheel nopan"
@@ -256,9 +248,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
                     <Switch
                       checked={inputs.continueOnFailure}
                       onCheckedChange={(checked) => {
-                        if (!editable) {
-                          return;
-                        }
                         handleChange("continueOnFailure", checked);
                       }}
                     />
@@ -277,9 +266,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
                     <Switch
                       checked={inputs.cacheActions}
                       onCheckedChange={(checked) => {
-                        if (!editable) {
-                          return;
-                        }
                         handleChange("cacheActions", checked);
                       }}
                     />
@@ -301,9 +287,6 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
                     className="nopan w-52 text-xs"
                     value={inputs.downloadSuffix ?? ""}
                     onChange={(event) => {
-                      if (!editable) {
-                        return;
-                      }
                       handleChange("downloadSuffix", event.target.value);
                     }}
                   />
@@ -318,11 +301,11 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
                       content={helpTooltips["download"]["totpVerificationUrl"]}
                     />
                   </div>
-                  <AutoResizingTextarea
+                  <WorkflowBlockInputTextarea
+                    onIconClick={() => {
+                      setParametersPanelField("totpVerificationUrl");
+                    }}
                     onChange={(event) => {
-                      if (!editable) {
-                        return;
-                      }
                       handleChange("totpVerificationUrl", event.target.value);
                     }}
                     value={inputs.totpVerificationUrl ?? ""}
@@ -341,11 +324,11 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
                       content={helpTooltips["download"]["totpIdentifier"]}
                     />
                   </div>
-                  <AutoResizingTextarea
+                  <WorkflowBlockInputTextarea
+                    onIconClick={() => {
+                      setParametersPanelField("totpIdentifier");
+                    }}
                     onChange={(event) => {
-                      if (!editable) {
-                        return;
-                      }
                       handleChange("totpIdentifier", event.target.value);
                     }}
                     value={inputs.totpIdentifier ?? ""}
@@ -358,6 +341,25 @@ function FileDownloadNode({ id, data }: NodeProps<FileDownloadNode>) {
           </AccordionItem>
         </Accordion>
       </div>
+      {typeof parametersPanelField === "string" && (
+        <WorkflowBlockParameterSelect
+          nodeId={id}
+          onClose={() => setParametersPanelField(null)}
+          onAdd={(parameterKey) => {
+            if (parametersPanelField === null || !editable) {
+              return;
+            }
+            if (parametersPanelField in inputs) {
+              const currentValue =
+                inputs[parametersPanelField as keyof typeof inputs];
+              handleChange(
+                parametersPanelField,
+                `${currentValue ?? ""}{{ ${parameterKey} }}`,
+              );
+            }
+          }}
+        />
+      )}
     </div>
   );
 }