Add JSON validation to task creation (#501)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

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

@@ -60,23 +60,39 @@ const createNewTaskFormSchema = z
     extractedInformationSchema: z.string().or(z.null()).optional(),
     maxStepsOverride: z.number().optional(),
   })
-  .superRefine(({ navigationGoal, dataExtractionGoal }, ctx) => {
+  .superRefine(
-    if (!navigationGoal && !dataExtractionGoal) {
+    (
-      ctx.addIssue({
+      { navigationGoal, dataExtractionGoal, extractedInformationSchema },
-        code: z.ZodIssueCode.custom,
+      ctx,
-        message:
+    ) => {
-          "At least one of navigation goal or data extraction goal must be provided",
+      if (!navigationGoal && !dataExtractionGoal) {
-        path: ["navigationGoal"],
+        ctx.addIssue({
-      });
+          code: z.ZodIssueCode.custom,
-      ctx.addIssue({
+          message:
-        code: z.ZodIssueCode.custom,
+            "At least one of navigation goal or data extraction goal must be provided",
-        message:
+          path: ["navigationGoal"],
-          "At least one of navigation goal or data extraction goal must be provided",
+        });
-        path: ["dataExtractionGoal"],
+        ctx.addIssue({
-      });
+          code: z.ZodIssueCode.custom,
-      return z.NEVER;
+          message:
-    }
+            "At least one of navigation goal or data extraction goal must be provided",
-  });
+          path: ["dataExtractionGoal"],
+        });
+        return z.NEVER;
+      }
+      if (extractedInformationSchema) {
+        try {
+          JSON.parse(extractedInformationSchema);
+        } catch (e) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: "Invalid JSON",
+            path: ["extractedInformationSchema"],
+          });
+        }
+      }
+    },
+  );
 
 export type CreateNewTaskFormValues = z.infer<typeof createNewTaskFormSchema>;
 
@@ -89,6 +105,17 @@ function transform(value: unknown) {
 }
 
 function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
+  let extractedInformationSchema = null;
+  if (formValues.extractedInformationSchema) {
+    try {
+      extractedInformationSchema = JSON.parse(
+        formValues.extractedInformationSchema,
+      );
+    } catch (e) {
+      extractedInformationSchema = formValues.extractedInformationSchema;
+    }
+  }
+
   return {
     url: formValues.url,
     webhook_callback_url: transform(formValues.webhookCallbackUrl),
@@ -96,9 +123,7 @@ function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
     data_extraction_goal: transform(formValues.dataExtractionGoal),
     proxy_location: "RESIDENTIAL",
     navigation_payload: transform(formValues.navigationPayload),
-    extracted_information_schema: transform(
+    extracted_information_schema: extractedInformationSchema,
-      formValues.extractedInformationSchema,
-    ),
   };
 }
 

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

@@ -110,6 +110,17 @@ function transform(value: unknown) {
 }
 
 function createTaskRequestObject(formValues: SavedTaskFormValues) {
+  let extractedInformationSchema = null;
+  if (formValues.extractedInformationSchema) {
+    try {
+      extractedInformationSchema = JSON.parse(
+        formValues.extractedInformationSchema,
+      );
+    } catch (e) {
+      extractedInformationSchema = formValues.extractedInformationSchema;
+    }
+  }
+
   return {
     url: formValues.url,
     webhook_callback_url: transform(formValues.webhookCallbackUrl),
@@ -118,9 +129,7 @@ function createTaskRequestObject(formValues: SavedTaskFormValues) {
     proxy_location: transform(formValues.proxyLocation),
     error_code_mapping: null,
     navigation_payload: transform(formValues.navigationPayload),
-    extracted_information_schema: transform(
+    extracted_information_schema: extractedInformationSchema,
-      formValues.extractedInformationSchema,
-    ),
   };
 }