From 054de55b11bf85c06fe9e23108efca78cefc56a9 Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Wed, 2 Oct 2024 07:45:05 -0700
Subject: [PATCH] Move navigation payload to base content (#894)

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

diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
index 1e7a3c2b..7f3696ca 100644
--- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
@@ -87,6 +87,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
   const [section, setSection] = useState<"base" | "extraction" | "advanced">(
     "base",
   );
+  const [showAdvancedBaseContent, setShowAdvancedBaseContent] = useState(false);
 
   const form = useForm<CreateNewTaskFormValues>({
     resolver: zodResolver(createNewTaskFormSchema),
@@ -233,6 +234,67 @@ function CreateNewTaskForm({ initialValues }: Props) {
                     </FormItem>
                   )}
                 />
+                {showAdvancedBaseContent ? (
+                  <div className="border-t border-dashed pt-4">
+                    <FormField
+                      control={form.control}
+                      name="navigationPayload"
+                      render={({ field }) => (
+                        <FormItem>
+                          <div className="flex gap-16">
+                            <FormLabel>
+                              <div className="w-72">
+                                <h1 className="text-lg">Navigation Payload</h1>
+                                <h2 className="text-base text-slate-400">
+                                  Specify important parameters, routes, or
+                                  states
+                                </h2>
+                              </div>
+                              <Button
+                                className="mt-4"
+                                type="button"
+                                variant="tertiary"
+                                onClick={() => {
+                                  setShowAdvancedBaseContent(false);
+                                }}
+                                size="sm"
+                              >
+                                Hide Advanced Settings
+                              </Button>
+                            </FormLabel>
+                            <div className="w-full">
+                              <FormControl>
+                                <CodeEditor
+                                  {...field}
+                                  language="json"
+                                  fontSize={12}
+                                  minHeight="96px"
+                                  value={
+                                    field.value === null ? "" : field.value
+                                  }
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </div>
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                ) : (
+                  <div>
+                    <Button
+                      type="button"
+                      variant="tertiary"
+                      onClick={() => {
+                        setShowAdvancedBaseContent(true);
+                      }}
+                      size="sm"
+                    >
+                      Show Advanced Settings
+                    </Button>
+                  </div>
+                )}
               </div>
             </div>
           )}
@@ -331,36 +393,6 @@ function CreateNewTaskForm({ initialValues }: Props) {
           {section === "advanced" && (
             <div className="space-y-6">
               <div className="space-y-4">
-                <FormField
-                  control={form.control}
-                  name="navigationPayload"
-                  render={({ field }) => (
-                    <FormItem>
-                      <div className="flex gap-16">
-                        <FormLabel>
-                          <div className="w-72">
-                            <h1 className="text-lg">Navigation Payload</h1>
-                            <h2 className="text-base text-slate-400">
-                              Specify important parameters, routes, or states
-                            </h2>
-                          </div>
-                        </FormLabel>
-                        <div className="w-full">
-                          <FormControl>
-                            <CodeEditor
-                              {...field}
-                              language="json"
-                              fontSize={12}
-                              minHeight="96px"
-                              value={field.value === null ? "" : field.value}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </div>
-                      </div>
-                    </FormItem>
-                  )}
-                />
                 <FormField
                   control={form.control}
                   name="maxStepsOverride"
diff --git a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
index 2c19e0bd..5a270b86 100644
--- a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
@@ -138,6 +138,7 @@ function SavedTaskForm({ initialValues }: Props) {
   const [section, setSection] = useState<"base" | "extraction" | "advanced">(
     "base",
   );
+  const [showAdvancedBaseContent, setShowAdvancedBaseContent] = useState(false);
 
   const form = useForm<SavedTaskFormValues>({
     resolver: zodResolver(savedTaskFormSchema),
@@ -398,6 +399,67 @@ function SavedTaskForm({ initialValues }: Props) {
                     </FormItem>
                   )}
                 />
+                {showAdvancedBaseContent ? (
+                  <div className="border-t border-dashed pt-4">
+                    <FormField
+                      control={form.control}
+                      name="navigationPayload"
+                      render={({ field }) => (
+                        <FormItem>
+                          <div className="flex gap-16">
+                            <FormLabel>
+                              <div className="w-72">
+                                <h1 className="text-lg">Navigation Payload</h1>
+                                <h2 className="text-base text-slate-400">
+                                  Specify important parameters, routes, or
+                                  states
+                                </h2>
+                              </div>
+                              <Button
+                                className="mt-4"
+                                type="button"
+                                variant="tertiary"
+                                onClick={() => {
+                                  setShowAdvancedBaseContent(false);
+                                }}
+                                size="sm"
+                              >
+                                Hide Advanced Settings
+                              </Button>
+                            </FormLabel>
+                            <div className="w-full">
+                              <FormControl>
+                                <CodeEditor
+                                  {...field}
+                                  language="json"
+                                  fontSize={12}
+                                  minHeight="96px"
+                                  value={
+                                    field.value === null ? "" : field.value
+                                  }
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </div>
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                ) : (
+                  <div>
+                    <Button
+                      type="button"
+                      variant="tertiary"
+                      onClick={() => {
+                        setShowAdvancedBaseContent(true);
+                      }}
+                      size="sm"
+                    >
+                      Show Advanced Settings
+                    </Button>
+                  </div>
+                )}
               </div>
             </div>
           )}
@@ -497,41 +559,6 @@ function SavedTaskForm({ initialValues }: Props) {
           {section === "advanced" && (
             <div className="space-y-6">
               <div className="space-y-4">
-                <FormField
-                  control={form.control}
-                  name="navigationPayload"
-                  render={({ field }) => (
-                    <FormItem>
-                      <div className="flex gap-16">
-                        <FormLabel>
-                          <div className="w-72">
-                            <h1 className="text-lg">Navigation Payload</h1>
-                            <h2 className="text-base text-slate-400">
-                              Specify important parameters, routes, or states
-                            </h2>
-                          </div>
-                        </FormLabel>
-                        <div className="w-full">
-                          <FormControl>
-                            <CodeEditor
-                              {...field}
-                              language="json"
-                              fontSize={12}
-                              minHeight="96px"
-                              value={
-                                field.value === null ||
-                                typeof field.value === "undefined"
-                                  ? ""
-                                  : field.value
-                              }
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </div>
-                      </div>
-                    </FormItem>
-                  )}
-                />
                 <FormField
                   control={form.control}
                   name="maxStepsOverride"