From f16a1b3779758aadd0935291201f5db13fbef010 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Fri, 11 Oct 2024 13:19:14 -0700
Subject: [PATCH] Task node help text update (#963)

---
 .../editor/nodes/TaskNode/TaskNode.tsx        | 155 ++++++++++--------
 .../TaskNode/TaskNodeParametersPanel.tsx      |   5 +-
 .../workflows/editor/nodes/TaskNode/types.ts  |  21 +++
 3 files changed, 112 insertions(+), 69 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
index 7c913f92..b533f8d3 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
@@ -89,7 +89,7 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
 
   const basicContent = (
     <>
-      <div className="space-y-1">
+      <div className="space-y-2">
         <Label className="text-xs text-slate-300">URL</Label>
         <AutoResizingTextarea
           value={inputs.url}
@@ -104,8 +104,11 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
           placeholder={fieldPlaceholders["url"]}
         />
       </div>
-      <div className="space-y-1">
-        <Label className="text-xs text-slate-300">Goal</Label>
+      <div className="space-y-2">
+        <div className="flex gap-2">
+          <Label className="text-xs text-slate-300">Goal</Label>
+          <HelpTooltip content={helpTooltipContent["navigationGoal"]} />
+        </div>
         <AutoResizingTextarea
           onChange={(event) => {
             if (!editable) {
@@ -118,7 +121,7 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
           className="nopan text-xs"
         />
       </div>
-      <div className="space-y-1">
+      <div className="space-y-2">
         <TaskNodeParametersPanel
           availableOutputParameters={outputParameterKeys}
           parameters={data.parameterKeys}
@@ -134,17 +137,10 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
     <>
       <Accordion type="multiple" defaultValue={["content"]}>
         <AccordionItem value="content">
-          <AccordionTrigger>
-            <div className="flex w-full items-center justify-between">
-              <div>Content</div>
-              <div>
-                <HelpTooltip content={helpTooltipContent["base"]} />
-              </div>
-            </div>
-          </AccordionTrigger>
+          <AccordionTrigger>Content</AccordionTrigger>
           <AccordionContent className="pl-[1.5rem] pr-1">
             <div className="space-y-4">
-              <div className="space-y-1">
+              <div className="space-y-2">
                 <Label className="text-xs text-slate-300">URL</Label>
                 <AutoResizingTextarea
                   onChange={(event) => {
@@ -158,8 +154,11 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                   className="nopan text-xs"
                 />
               </div>
-              <div className="space-y-1">
-                <Label className="text-xs text-slate-300">Goal</Label>
+              <div className="space-y-2">
+                <div className="flex gap-2">
+                  <Label className="text-xs text-slate-300">Goal</Label>
+                  <HelpTooltip content={helpTooltipContent["navigationGoal"]} />
+                </div>
                 <AutoResizingTextarea
                   onChange={(event) => {
                     if (!editable) {
@@ -172,7 +171,7 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                   className="nopan text-xs"
                 />
               </div>
-              <div className="space-y-1">
+              <div className="space-y-2">
                 <TaskNodeParametersPanel
                   availableOutputParameters={outputParameterKeys}
                   parameters={data.parameterKeys}
@@ -185,20 +184,18 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="extraction">
-          <AccordionTrigger>
-            <div className="flex w-full items-center justify-between">
-              <div>Extraction</div>
-              <div>
-                <HelpTooltip content={helpTooltipContent["extraction"]} />
-              </div>
-            </div>
-          </AccordionTrigger>
+          <AccordionTrigger>Extraction</AccordionTrigger>
           <AccordionContent className="pl-[1.5rem] pr-1">
             <div className="space-y-4">
-              <div className="space-y-1">
-                <Label className="text-xs text-slate-300">
-                  Data Extraction Goal
-                </Label>
+              <div className="space-y-2">
+                <div className="flex gap-2">
+                  <Label className="text-xs text-slate-300">
+                    Data Extraction Goal
+                  </Label>
+                  <HelpTooltip
+                    content={helpTooltipContent["dataExtractionGoal"]}
+                  />
+                </div>
                 <AutoResizingTextarea
                   onChange={(event) => {
                     if (!editable) {
@@ -212,8 +209,13 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                 />
               </div>
               <div className="space-y-2">
-                <div className="flex gap-2">
-                  <Label className="text-xs text-slate-300">Data Schema</Label>
+                <div className="flex gap-4">
+                  <div className="flex gap-2">
+                    <Label className="text-xs text-slate-300">
+                      Data Schema
+                    </Label>
+                    <HelpTooltip content={helpTooltipContent["dataSchema"]} />
+                  </div>
                   <Checkbox
                     checked={inputs.dataSchema !== "null"}
                     onCheckedChange={(checked) => {
@@ -249,20 +251,16 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="limits">
-          <AccordionTrigger>
-            <div className="flex w-full items-center justify-between">
-              <div>Limits</div>
-              <div>
-                <HelpTooltip content={helpTooltipContent["limits"]} />
-              </div>
-            </div>
-          </AccordionTrigger>
+          <AccordionTrigger>Limits</AccordionTrigger>
           <AccordionContent className="pl-[1.5rem] pr-1 pt-1">
             <div className="space-y-4">
               <div className="flex items-center justify-between">
-                <Label className="text-xs font-normal text-slate-300">
-                  Max Retries
-                </Label>
+                <div className="flex gap-2">
+                  <Label className="text-xs font-normal text-slate-300">
+                    Max Retries
+                  </Label>
+                  <HelpTooltip content={helpTooltipContent["maxRetries"]} />
+                </div>
                 <Input
                   type="number"
                   placeholder={fieldPlaceholders["maxRetries"]}
@@ -282,9 +280,14 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                 />
               </div>
               <div className="flex items-center justify-between">
-                <Label className="text-xs font-normal text-slate-300">
-                  Max Steps Override
-                </Label>
+                <div className="flex gap-2">
+                  <Label className="text-xs font-normal text-slate-300">
+                    Max Steps Override
+                  </Label>
+                  <HelpTooltip
+                    content={helpTooltipContent["maxStepsOverride"]}
+                  />
+                </div>
                 <Input
                   type="number"
                   placeholder={fieldPlaceholders["maxStepsOverride"]}
@@ -304,9 +307,14 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                 />
               </div>
               <div className="flex items-center justify-between">
-                <Label className="text-xs font-normal text-slate-300">
-                  Complete on Download
-                </Label>
+                <div className="flex gap-2">
+                  <Label className="text-xs font-normal text-slate-300">
+                    Complete on Download
+                  </Label>
+                  <HelpTooltip
+                    content={helpTooltipContent["completeOnDownload"]}
+                  />
+                </div>
                 <div className="w-52">
                   <Switch
                     checked={inputs.allowDownloads}
@@ -320,9 +328,12 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                 </div>
               </div>
               <div className="flex items-center justify-between">
-                <Label className="text-xs font-normal text-slate-300">
-                  File Suffix
-                </Label>
+                <div className="flex gap-2">
+                  <Label className="text-xs font-normal text-slate-300">
+                    File Suffix
+                  </Label>
+                  <HelpTooltip content={helpTooltipContent["fileSuffix"]} />
+                </div>
                 <Input
                   type="text"
                   placeholder={fieldPlaceholders["downloadSuffix"]}
@@ -337,10 +348,15 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                 />
               </div>
               <div className="space-y-2">
-                <div className="flex gap-2">
-                  <Label className="text-xs font-normal text-slate-300">
-                    Error Messages
-                  </Label>
+                <div className="flex gap-4">
+                  <div className="flex gap-2">
+                    <Label className="text-xs font-normal text-slate-300">
+                      Error Messages
+                    </Label>
+                    <HelpTooltip
+                      content={helpTooltipContent["errorCodeMapping"]}
+                    />
+                  </div>
                   <Checkbox
                     checked={inputs.errorCodeMapping !== "null"}
                     disabled={!editable}
@@ -377,20 +393,18 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="totp">
-          <AccordionTrigger>
-            <div className="flex w-full items-center justify-between">
-              <div>Two-Factor Authentication</div>
-              <div>
-                <HelpTooltip content={helpTooltipContent["totp"]} />
-              </div>
-            </div>
-          </AccordionTrigger>
+          <AccordionTrigger>Two-Factor Authentication</AccordionTrigger>
           <AccordionContent className="pl-[1.5rem] pr-1">
             <div className="space-y-4">
-              <div className="space-y-1">
-                <Label className="text-xs text-slate-300">
-                  2FA Verification URL
-                </Label>
+              <div className="space-y-2">
+                <div className="flex gap-2">
+                  <Label className="text-xs text-slate-300">
+                    2FA Verification URL
+                  </Label>
+                  <HelpTooltip
+                    content={helpTooltipContent["totpVerificationUrl"]}
+                  />
+                </div>
                 <AutoResizingTextarea
                   onChange={(event) => {
                     if (!editable) {
@@ -403,8 +417,13 @@ function TaskNode({ id, data }: NodeProps<TaskNode>) {
                   className="nopan text-xs"
                 />
               </div>
-              <div className="space-y-1">
-                <Label className="text-xs text-slate-300">2FA Identifier</Label>
+              <div className="space-y-2">
+                <div className="flex gap-2">
+                  <Label className="text-xs text-slate-300">
+                    2FA Identifier
+                  </Label>
+                  <HelpTooltip content={helpTooltipContent["totpIdentifier"]} />
+                </div>
                 <AutoResizingTextarea
                   onChange={(event) => {
                     if (!editable) {
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx
index 5afa2182..096eb8e6 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNodeParametersPanel.tsx
@@ -1,5 +1,7 @@
 import { MultiSelect } from "@/components/ui/multi-select";
 import { useWorkflowParametersState } from "../../useWorkflowParametersState";
+import { HelpTooltip } from "@/components/HelpTooltip";
+import { helpTooltipContent } from "./types";
 
 type Props = {
   availableOutputParameters: Array<string>;
@@ -25,9 +27,10 @@ function TaskNodeParametersPanel({
   });
 
   return (
-    <div className="space-y-1">
+    <div className="space-y-2">
       <header className="flex gap-2">
         <h1 className="text-xs text-slate-300">Parameters</h1>
+        <HelpTooltip content={helpTooltipContent["parameters"]} />
       </header>
       <MultiSelect
         value={parameters}
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/types.ts b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/types.ts
index 30ccba8e..cb67f24f 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/types.ts
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/types.ts
@@ -49,6 +49,27 @@ export const helpTooltipContent = {
   limits:
     "Give Skyvern limitations, such as number of retries on failure, the number of maximum steps, the option to download and append suffix identifiers, and return message for errors Skyvern encounters.",
   totp: "Link your internal TOTP storage system to relay 2FA codes we encounter straight to Skyvern. If you have multiple tasks running simultaneously, make sure to link an identifier so Skyvern knows which TOTP URL goes with which task.",
+  navigationGoal:
+    "Give Skyvern an objective. Make sure to include when the task is complete, when it should self-terminate, and any guardrails.",
+  parameters:
+    "Define placeholder values using the “parameters” drop down that you predefine or redefine run-to-run.",
+  dataExtractionGoal:
+    "Tell Skyvern what data you would like to scrape at the end of your run.",
+  dataSchema: "Specify a format for extracted data in JSON.",
+  maxRetries:
+    "Specify how many times you would like a step within a task to retry upon failure.",
+  maxStepsOverride:
+    "Specify the maximum number of steps a task can take in total.",
+  completeOnDownload:
+    "Allow Skyvern to auto-complete the task when it downloads a file.",
+  fileSuffix:
+    "If you allow complete on download, you can opt-in to add a suffix identifier.",
+  errorCodeMapping:
+    "Knowing about why a task terminated can be important, specify error messages here.",
+  totpVerificationUrl:
+    "If you have an internal system for storing TOTP codes, link the endpoint here.",
+  totpIdentifier:
+    "If you are running multiple tasks or workflows at once, you will need to give the task an identifier to know that this TOTP goes with this task.",
 } as const;
 
 export const fieldPlaceholders = {