From a0b63028efecf677d925cb44fa76dc1b555c4b9b Mon Sep 17 00:00:00 2001
From: Salih Altun <salih@skyvern.com>
Date: Wed, 19 Jun 2024 19:15:11 +0300
Subject: [PATCH] Rearrange task form (#492)

---
 .../routes/tasks/create/CreateNewTaskForm.tsx | 161 ++++++++++-------
 .../src/routes/tasks/create/SavedTaskForm.tsx | 162 +++++++++++-------
 .../src/routes/tasks/create/SavedTasks.tsx    |   2 +-
 3 files changed, 198 insertions(+), 127 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
index 733bd744..90f6010d 100644
--- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -37,6 +38,12 @@ import { apiBaseUrl } from "@/util/env";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useApiCredential } from "@/hooks/useApiCredential";
 import { AxiosError } from "axios";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 
 const createNewTaskFormSchema = z
   .object({
@@ -181,6 +188,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
                   </TooltipProvider>
                 </div>
               </FormLabel>
+              <FormDescription>The starting URL for the task</FormDescription>
               <FormControl>
                 <Input placeholder="example.com" {...field} />
               </FormControl>
@@ -188,37 +196,6 @@ function CreateNewTaskForm({ initialValues }: Props) {
             </FormItem>
           )}
         />
-        <FormField
-          control={form.control}
-          name="webhookCallbackUrl"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  Webhook Callback URL
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{webhookCallbackUrlDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormControl>
-                <Input
-                  placeholder="example.com"
-                  {...field}
-                  value={field.value === null ? "" : field.value}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
         <FormField
           control={form.control}
           name="navigationGoal"
@@ -239,6 +216,9 @@ function CreateNewTaskForm({ initialValues }: Props) {
                   </TooltipProvider>
                 </div>
               </FormLabel>
+              <FormDescription>
+                How do you want Skyvern to navigate?
+              </FormDescription>
               <FormControl>
                 <Textarea
                   rows={5}
@@ -271,6 +251,10 @@ function CreateNewTaskForm({ initialValues }: Props) {
                   </TooltipProvider>
                 </div>
               </FormLabel>
+              <FormDescription>
+                If you want Skyvern to extract data after it's finished
+                navigating
+              </FormDescription>
               <FormControl>
                 <Textarea
                   rows={5}
@@ -303,6 +287,10 @@ function CreateNewTaskForm({ initialValues }: Props) {
                   </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}
@@ -315,38 +303,85 @@ function CreateNewTaskForm({ initialValues }: Props) {
             </FormItem>
           )}
         />
-        <FormField
-          control={form.control}
-          name="extractedInformationSchema"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  Extracted Information Schema
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{extractedInformationSchemaDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="Extracted Information Schema"
-                  rows={5}
-                  {...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="extractedInformationSchema"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <div className="flex gap-2">
+                        Extracted Information Schema
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <InfoCircledIcon />
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-[250px]">
+                              <p>{extractedInformationSchemaDescription}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    </FormLabel>
+                    <FormDescription>
+                      Jsonc schema to force the json format for extracted
+                      information
+                    </FormDescription>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Extracted Information Schema"
+                        rows={5}
+                        {...field}
+                        value={field.value === null ? "" : field.value}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="webhookCallbackUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <div className="flex gap-2">
+                        Webhook Callback URL
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <InfoCircledIcon />
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-[250px]">
+                              <p>{webhookCallbackUrlDescription}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    </FormLabel>
+                    <FormDescription>
+                      The URL of a webhook endpoint to send the extracted
+                      information
+                    </FormDescription>
+                    <FormControl>
+                      <Input
+                        placeholder="example.com"
+                        {...field}
+                        value={field.value === null ? "" : field.value}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+
         <div className="flex justify-end gap-3">
           <Button
             type="button"
diff --git a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
index aae304b0..2d25bb9e 100644
--- a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -39,6 +40,12 @@ import {
 } from "../data/descriptionHelperContent";
 import { SubmitEvent } from "@/types";
 import { AxiosError } from "axios";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 
 const savedTaskFormSchema = z
   .object({
@@ -291,6 +298,7 @@ function SavedTaskForm({ initialValues }: Props) {
                   </TooltipProvider>
                 </div>
               </FormLabel>
+              <FormDescription>The starting URL for the task</FormDescription>
               <FormControl>
                 <Input placeholder="example.com" {...field} />
               </FormControl>
@@ -298,37 +306,7 @@ function SavedTaskForm({ initialValues }: Props) {
             </FormItem>
           )}
         />
-        <FormField
-          control={form.control}
-          name="webhookCallbackUrl"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  Webhook Callback URL
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{webhookCallbackUrlDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormControl>
-                <Input
-                  placeholder="example.com"
-                  {...field}
-                  value={field.value === null ? "" : field.value}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
+
         <FormField
           control={form.control}
           name="navigationGoal"
@@ -349,6 +327,9 @@ function SavedTaskForm({ initialValues }: Props) {
                   </TooltipProvider>
                 </div>
               </FormLabel>
+              <FormDescription>
+                How do you want Skyvern to navigate?
+              </FormDescription>
               <FormControl>
                 <Textarea
                   rows={5}
@@ -381,6 +362,10 @@ function SavedTaskForm({ initialValues }: Props) {
                   </TooltipProvider>
                 </div>
               </FormLabel>
+              <FormDescription>
+                If you want Skyvern to extract data after it's finished
+                navigating
+              </FormDescription>
               <FormControl>
                 <Textarea
                   rows={5}
@@ -413,6 +398,10 @@ function SavedTaskForm({ initialValues }: Props) {
                   </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}
@@ -425,38 +414,85 @@ function SavedTaskForm({ initialValues }: Props) {
             </FormItem>
           )}
         />
-        <FormField
-          control={form.control}
-          name="extractedInformationSchema"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                <div className="flex gap-2">
-                  Extracted Information Schema
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <InfoCircledIcon />
-                      </TooltipTrigger>
-                      <TooltipContent className="max-w-[250px]">
-                        <p>{extractedInformationSchemaDescription}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-              </FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="Extracted Information Schema"
-                  rows={5}
-                  {...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="extractedInformationSchema"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <div className="flex gap-2">
+                        Extracted Information Schema
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <InfoCircledIcon />
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-[250px]">
+                              <p>{extractedInformationSchemaDescription}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    </FormLabel>
+                    <FormDescription>
+                      Jsonc schema to force the json format for extracted
+                      information
+                    </FormDescription>
+                    <FormControl>
+                      <Textarea
+                        placeholder="Extracted Information Schema"
+                        rows={5}
+                        {...field}
+                        value={field.value === null ? "" : field.value}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="webhookCallbackUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <div className="flex gap-2">
+                        Webhook Callback URL
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <InfoCircledIcon />
+                            </TooltipTrigger>
+                            <TooltipContent className="max-w-[250px]">
+                              <p>{webhookCallbackUrlDescription}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    </FormLabel>
+                    <FormDescription>
+                      The URL of a webhook endpoint to send the extracted
+                      information
+                    </FormDescription>
+                    <FormControl>
+                      <Input
+                        placeholder="example.com"
+                        {...field}
+                        value={field.value === null ? "" : field.value}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+
         <div className="flex justify-end gap-3">
           <Button
             type="button"
diff --git a/skyvern-frontend/src/routes/tasks/create/SavedTasks.tsx b/skyvern-frontend/src/routes/tasks/create/SavedTasks.tsx
index d5ed78b1..46e4db43 100644
--- a/skyvern-frontend/src/routes/tasks/create/SavedTasks.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/SavedTasks.tsx
@@ -28,7 +28,7 @@ function createEmptyTaskTemplate() {
           parameter_type: "workflow",
           workflow_parameter_type: "json",
           key: "navigation_payload",
-          default_value: JSON.stringify({}),
+          default_value: "null",
         },
       ],
       blocks: [