Salih/fix both goals empty bug (#348)

skyvern-frontend/src/api/types.ts

@@ -60,8 +60,8 @@ export type TaskApiResponse = {
     title: string | null;
     url: string;
     webhook_callback_url: string;
-    navigation_goal: string;
-    data_extraction_goal: string;
+    navigation_goal: string | null;
+    data_extraction_goal: string | null;
     navigation_payload: string | object; // stringified JSON
     error_code_mapping: null;
     proxy_location: string;

skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx

@@ -37,16 +37,34 @@ import { apiBaseUrl } from "@/util/env";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useApiCredential } from "@/hooks/useApiCredential";
 
-const createNewTaskFormSchema = z.object({
-  url: z.string().url({
-    message: "Invalid URL",
-  }),
-  webhookCallbackUrl: z.string().or(z.null()).optional(), // url maybe, but shouldn't be validated as one
-  navigationGoal: z.string().or(z.null()).optional(),
-  dataExtractionGoal: z.string().or(z.null()).optional(),
-  navigationPayload: z.string().or(z.null()).optional(),
-  extractedInformationSchema: z.string().or(z.null()).optional(),
-});
+const createNewTaskFormSchema = z
+  .object({
+    url: z.string().url({
+      message: "Invalid URL",
+    }),
+    webhookCallbackUrl: z.string().or(z.null()).optional(), // url maybe, but shouldn't be validated as one
+    navigationGoal: z.string().or(z.null()).optional(),
+    dataExtractionGoal: z.string().or(z.null()).optional(),
+    navigationPayload: z.string().or(z.null()).optional(),
+    extractedInformationSchema: z.string().or(z.null()).optional(),
+  })
+  .superRefine(({ navigationGoal, dataExtractionGoal }, ctx) => {
+    if (!navigationGoal && !dataExtractionGoal) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message:
+          "At least one of navigation goal or data extraction goal must be provided",
+        path: ["navigationGoal"],
+      });
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message:
+          "At least one of navigation goal or data extraction goal must be provided",
+        path: ["dataExtractionGoal"],
+      });
+      return z.NEVER;
+    }
+  });
 
 export type CreateNewTaskFormValues = z.infer<typeof createNewTaskFormSchema>;
 
@@ -54,16 +72,22 @@ type Props = {
   initialValues: CreateNewTaskFormValues;
 };
 
+function transform(value: unknown) {
+  return value === "" ? null : value;
+}
+
 function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
   return {
     url: formValues.url,
-    webhook_callback_url: formValues.webhookCallbackUrl ?? "",
-    navigation_goal: formValues.navigationGoal ?? "",
-    data_extraction_goal: formValues.dataExtractionGoal ?? "",
+    webhook_callback_url: transform(formValues.webhookCallbackUrl),
+    navigation_goal: transform(formValues.navigationGoal),
+    data_extraction_goal: transform(formValues.dataExtractionGoal),
     proxy_location: "NONE",
     error_code_mapping: null,
-    navigation_payload: formValues.navigationPayload,
-    extracted_information_schema: formValues.extractedInformationSchema,
+    navigation_payload: transform(formValues.navigationPayload),
+    extracted_information_schema: transform(
+      formValues.extractedInformationSchema,
+    ),
   };
 }
 
@@ -266,7 +290,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
                   rows={5}
                   placeholder="Navigation Payload"
                   {...field}
-                  value={field.value ?? ""}
+                  value={field.value === null ? "" : field.value}
                 />
               </FormControl>
               <FormMessage />
@@ -298,7 +322,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
                   placeholder="Extracted Information Schema"
                   rows={5}
                   {...field}
-                  value={field.value ?? ""}
+                  value={field.value === null ? "" : field.value}
                 />
               </FormControl>
               <FormMessage />

skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx

@@ -37,20 +37,39 @@ import {
   urlDescription,
   webhookCallbackUrlDescription,
 } from "../data/descriptionHelperContent";
+import { SubmitEvent } from "@/types";
 
-const savedTaskFormSchema = z.object({
-  title: z.string().min(1, "Title is required"),
-  description: z.string(),
-  url: z.string().url({
-    message: "Invalid URL",
-  }),
-  proxyLocation: z.string().or(z.null()).optional(),
-  webhookCallbackUrl: z.string().or(z.null()).optional(), // url maybe, but shouldn't be validated as one
-  navigationGoal: z.string().or(z.null()).optional(),
-  dataExtractionGoal: z.string().or(z.null()).optional(),
-  navigationPayload: z.string().or(z.null()).optional(),
-  extractedInformationSchema: z.string().or(z.null()).optional(),
-});
+const savedTaskFormSchema = z
+  .object({
+    title: z.string().min(1, "Title is required"),
+    description: z.string(),
+    url: z.string().url({
+      message: "Invalid URL",
+    }),
+    proxyLocation: z.string().or(z.null()).optional(),
+    webhookCallbackUrl: z.string().or(z.null()).optional(), // url maybe, but shouldn't be validated as one
+    navigationGoal: z.string().or(z.null()).optional(),
+    dataExtractionGoal: z.string().or(z.null()).optional(),
+    navigationPayload: z.string().or(z.null()).optional(),
+    extractedInformationSchema: z.string().or(z.null()).optional(),
+  })
+  .superRefine(({ navigationGoal, dataExtractionGoal }, ctx) => {
+    if (!navigationGoal && !dataExtractionGoal) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message:
+          "At least one of navigation goal or data extraction goal must be provided",
+        path: ["navigationGoal"],
+      });
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message:
+          "At least one of navigation goal or data extraction goal must be provided",
+        path: ["dataExtractionGoal"],
+      });
+      return z.NEVER;
+    }
+  });
 
 export type SavedTaskFormValues = z.infer<typeof savedTaskFormSchema>;
 
@@ -58,16 +77,22 @@ type Props = {
   initialValues: SavedTaskFormValues;
 };
 
+function transform(value: unknown) {
+  return value === "" ? null : value;
+}
+
 function createTaskRequestObject(formValues: SavedTaskFormValues) {
   return {
     url: formValues.url,
-    webhook_callback_url: formValues.webhookCallbackUrl ?? "",
-    navigation_goal: formValues.navigationGoal ?? "",
-    data_extraction_goal: formValues.dataExtractionGoal ?? "",
-    proxy_location: formValues.proxyLocation,
+    webhook_callback_url: transform(formValues.webhookCallbackUrl),
+    navigation_goal: transform(formValues.navigationGoal),
+    data_extraction_goal: transform(formValues.dataExtractionGoal),
+    proxy_location: transform(formValues.proxyLocation),
     error_code_mapping: null,
-    navigation_payload: formValues.navigationPayload,
-    extracted_information_schema: formValues.extractedInformationSchema,
+    navigation_payload: transform(formValues.navigationPayload),
+    extracted_information_schema: transform(
+      formValues.extractedInformationSchema,
+    ),
   };
 }
 
@@ -179,13 +204,30 @@ function SavedTaskForm({ initialValues }: Props) {
     },
   });
 
-  function onSubmit(values: SavedTaskFormValues) {
+  function handleCreate(values: SavedTaskFormValues) {
     createTaskMutation.mutate(values);
   }
 
+  function handleSave(values: SavedTaskFormValues) {
+    saveTaskMutation.mutate(values);
+  }
+
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+      <form
+        onSubmit={(event) => {
+          const submitter = (
+            (event.nativeEvent as SubmitEvent).submitter as HTMLButtonElement
+          ).value;
+          if (submitter === "save") {
+            form.handleSubmit(handleSave)(event);
+          }
+          if (submitter === "create") {
+            form.handleSubmit(handleCreate)(event);
+          }
+        }}
+        className="space-y-8"
+      >
         <FormField
           control={form.control}
           name="title"
@@ -359,7 +401,7 @@ function SavedTaskForm({ initialValues }: Props) {
                   rows={5}
                   placeholder="Navigation Payload"
                   {...field}
-                  value={field.value ?? ""}
+                  value={field.value === null ? "" : field.value}
                 />
               </FormControl>
               <FormMessage />
@@ -391,7 +433,7 @@ function SavedTaskForm({ initialValues }: Props) {
                   placeholder="Extracted Information Schema"
                   rows={5}
                   {...field}
-                  value={field.value ?? ""}
+                  value={field.value === null ? "" : field.value}
                 />
               </FormControl>
               <FormMessage />
@@ -423,11 +465,10 @@ function SavedTaskForm({ initialValues }: Props) {
           </Button>
           {isDirty && (
             <Button
-              type="button"
+              type="submit"
+              name="save"
+              value="save"
               variant="secondary"
-              onClick={() => {
-                saveTaskMutation.mutate(form.getValues());
-              }}
               disabled={saveTaskMutation.isPending}
             >
               {saveTaskMutation.isPending && (
@@ -437,7 +478,12 @@ function SavedTaskForm({ initialValues }: Props) {
             </Button>
           )}
 
-          <Button type="submit" disabled={createTaskMutation.isPending}>
+          <Button
+            type="submit"
+            name="create"
+            value="create"
+            disabled={createTaskMutation.isPending}
+          >
             {createTaskMutation.isPending && (
               <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
             )}

skyvern-frontend/src/routes/tasks/data/sampleTaskData.ts

@@ -2,6 +2,10 @@ import { SampleCase } from "../types";
 
 export const blank = {
   url: "https://www.example.com",
+  navigationGoal: null,
+  dataExtractionGoal: null,
+  navigationPayload: null,
+  extractedInformationSchema: null,
 };
 
 export const bci_seguros = {
@@ -25,12 +29,14 @@ export const bci_seguros = {
     "tipo de combustible": "Bencina",
     "km approx a recorrer": "28,000",
   },
+  extractedInformationSchema: null,
 };
 
 export const california_edd = {
   url: "https://eddservices.edd.ca.gov/acctservices/AccountManagement/AccountServlet?Command=NEW_SIGN_UP",
   navigationGoal:
     "Navigate through the employer services online enrollment form. Terminate when the form is completed",
+  dataExtractionGoal: null,
   navigationPayload: {
     username: "isthisreal1",
     password: "Password123!",
@@ -40,6 +46,7 @@ export const california_edd = {
     email: "isthisreal1@gmail.com",
     phone_number: "412-444-1234",
   },
+  extractedInformationSchema: null,
 };
 
 export const finditparts = {
@@ -51,6 +58,7 @@ export const finditparts = {
   navigationPayload: {
     product_id: "W01-377-8537",
   },
+  extractedInformationSchema: null,
 };
 
 export const geico = {
@@ -263,49 +271,16 @@ export function getSample(sample: SampleCase) {
   }
 }
 
-export function getSampleForInitialFormValues(sample: SampleCase) {
-  switch (sample) {
-    case "geico":
-      return {
-        ...geico,
-        navigationPayload: JSON.stringify(geico.navigationPayload, null, 2),
-        extractedInformationSchema: JSON.stringify(
-          geico.extractedInformationSchema,
-          null,
-          2,
-        ),
-      };
-    case "finditparts":
-      return {
-        ...finditparts,
-        navigationPayload: JSON.stringify(
-          finditparts.navigationPayload,
-          null,
-          2,
-        ),
-      };
-    case "california_edd":
-      return {
-        ...california_edd,
-        navigationPayload: JSON.stringify(
-          california_edd.navigationPayload,
-          null,
-          2,
-        ),
-      };
-    case "bci_seguros":
-      return {
-        ...bci_seguros,
-        navigationPayload: JSON.stringify(
-          bci_seguros.navigationPayload,
-          null,
-          2,
-        ),
-      };
-    case "blank": {
-      return {
-        ...blank,
-      };
-    }
+function transformKV([key, value]: [string, unknown]) {
+  if (value === null) {
+    return [key, ""];
   }
+  if (typeof value === "object") {
+    return [key, JSON.stringify(value, null, 2)];
+  }
+  return [key, value];
+}
+
+export function getSampleForInitialFormValues(sample: SampleCase) {
+  return Object.fromEntries(Object.entries(getSample(sample)).map(transformKV));
 }

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -165,7 +165,7 @@ function TaskDetails() {
                 <Label className="w-40 shrink-0">Navigation Goal</Label>
                 <Textarea
                   rows={5}
-                  value={task.request.navigation_goal}
+                  value={task.request.navigation_goal ?? ""}
                   readOnly
                 />
               </div>

skyvern-frontend/src/types.ts

@@ -0,0 +1,3 @@
+export type SubmitEvent = Event & {
+  submitter: Element;
+};