Add JSON validation to extracted information schema (#493)

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

@@ -46,6 +46,8 @@ function CreateNewTaskFormPage() {
     (parameter: WorkflowParameter) => parameter.key === "navigation_payload",
   ).default_value;
 
+  const dataSchema = data.workflow_definition.blocks[0].data_schema;
+
   return (
     <SavedTaskForm
       initialValues={{
@@ -57,8 +59,7 @@ function CreateNewTaskFormPage() {
         navigationGoal: data.workflow_definition.blocks[0].navigation_goal,
         dataExtractionGoal:
           data.workflow_definition.blocks[0].data_extraction_goal,
-        extractedInformationSchema:
+        extractedInformationSchema: JSON.stringify(dataSchema, null, 2),
-          data.workflow_definition.blocks[0].data_schema,
         navigationPayload,
       }}
     />

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

@@ -61,23 +61,39 @@ const savedTaskFormSchema = z
     navigationPayload: z.string().or(z.null()).optional(),
     extractedInformationSchema: z.string().or(z.null()).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 SavedTaskFormValues = z.infer<typeof savedTaskFormSchema>;
 
@@ -105,6 +121,17 @@ function createTaskRequestObject(formValues: SavedTaskFormValues) {
 }
 
 function createTaskTemplateRequestObject(values: SavedTaskFormValues) {
+  let extractedInformationSchema = null;
+  if (values.extractedInformationSchema) {
+    try {
+      extractedInformationSchema = JSON.parse(
+        values.extractedInformationSchema,
+      );
+    } catch (e) {
+      extractedInformationSchema = values.extractedInformationSchema;
+    }
+  }
+
   return {
     title: values.title,
     description: values.description,
@@ -126,7 +153,7 @@ function createTaskTemplateRequestObject(values: SavedTaskFormValues) {
           url: values.url,
           navigation_goal: values.navigationGoal,
           data_extraction_goal: values.dataExtractionGoal,
-          data_schema: values.extractedInformationSchema,
+          data_schema: extractedInformationSchema,
         },
       ],
     },