From 3ee98f35b2dd9c3aaec0d855b8cfe3b3e93f5f04 Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Fri, 23 Aug 2024 14:41:58 +0300
Subject: [PATCH] Move navigation payload inside advanced accordion (#718)

---
 .../routes/tasks/create/CreateNewTaskForm.tsx | 72 +++++++++----------
 .../src/routes/tasks/create/SavedTaskForm.tsx | 72 +++++++++----------
 2 files changed, 72 insertions(+), 72 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
index 6bd4d686..69010562 100644
--- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
@@ -324,46 +324,46 @@ function CreateNewTaskForm({ initialValues }: Props) {
             </FormItem>
           )}
         />
-        <FormField
-          control={form.control}
-          name="navigationPayload"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  Navigation Payload
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{navigationPayloadDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormDescription>
-                Any context Skyvern needs to complete its actions (ex. text that
-                may be required to fill out forms)
-              </FormDescription>
-              <FormControl>
-                <Textarea
-                  rows={5}
-                  placeholder="Navigation Payload"
-                  {...field}
-                  value={field.value === null ? "" : field.value}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
         <Accordion type="single" collapsible>
           <AccordionItem value="advanced-settings">
             <AccordionTrigger>Advanced Settings</AccordionTrigger>
             <AccordionContent className="space-y-8 px-1 py-4">
+              <FormField
+                control={form.control}
+                name="navigationPayload"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <div className="flex gap-2">
+                        Navigation Payload
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <InfoCircledIcon />
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-[250px]">
+                              <p>{navigationPayloadDescription}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    </FormLabel>
+                    <FormDescription>
+                      Any context Skyvern needs to complete its actions (ex.
+                      text that may be required to fill out forms)
+                    </FormDescription>
+                    <FormControl>
+                      <Textarea
+                        rows={5}
+                        placeholder="Navigation Payload"
+                        {...field}
+                        value={field.value === null ? "" : field.value}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
               <FormField
                 control={form.control}
                 name="extractedInformationSchema"
diff --git a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
index 7014d6ce..278b1ea0 100644
--- a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
@@ -451,46 +451,46 @@ function SavedTaskForm({ initialValues }: Props) {
             </FormItem>
           )}
         />
-        <FormField
-          control={form.control}
-          name="navigationPayload"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  Navigation Payload
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{navigationPayloadDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormDescription>
-                Any context Skyvern needs to complete its actions (ex. text that
-                may be required to fill out forms)
-              </FormDescription>
-              <FormControl>
-                <Textarea
-                  rows={5}
-                  placeholder="Navigation Payload"
-                  {...field}
-                  value={field.value === null ? "" : field.value}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
         <Accordion type="single" collapsible>
           <AccordionItem value="advanced-settings">
             <AccordionTrigger>Advanced Settings</AccordionTrigger>
             <AccordionContent className="space-y-8 px-1 py-4">
+              <FormField
+                control={form.control}
+                name="navigationPayload"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <div className="flex gap-2">
+                        Navigation Payload
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <InfoCircledIcon />
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-[250px]">
+                              <p>{navigationPayloadDescription}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    </FormLabel>
+                    <FormDescription>
+                      Any context Skyvern needs to complete its actions (ex.
+                      text that may be required to fill out forms)
+                    </FormDescription>
+                    <FormControl>
+                      <Textarea
+                        rows={5}
+                        placeholder="Navigation Payload"
+                        {...field}
+                        value={field.value === null ? "" : field.value}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
               <FormField
                 control={form.control}
                 name="extractedInformationSchema"