Add error code mapping to task (#890)

skyvern-frontend/src/api/types.ts

@@ -67,28 +67,31 @@ export type StepApiResponse = {
 };
 
 export type TaskApiResponse = {
-  request: {
+  request: CreateTaskRequest;
-    title: string | null;
-    url: string;
-    webhook_callback_url: string;
-    navigation_goal: string | null;
-    data_extraction_goal: string | null;
-    navigation_payload: string | object; // stringified JSON
-    error_code_mapping: null;
-    proxy_location: string;
-    extracted_information_schema: string | object;
-    totp_verification_url: string | null;
-    totp_identifier: string | null;
-  };
   task_id: string;
   status: Status;
   created_at: string; // ISO 8601
   modified_at: string; // ISO 8601
-  extracted_information: unknown;
+  extracted_information: Record<string, unknown> | string | null;
   screenshot_url: string | null;
   recording_url: string | null;
   failure_reason: string | null;
-  errors: unknown[];
+  errors: Array<Record<string, unknown>>;
+  max_steps_per_run: number | null;
+};
+
+export type CreateTaskRequest = {
+  title: string | null;
+  url: string;
+  webhook_callback_url: string | null;
+  navigation_goal: string | null;
+  data_extraction_goal: string | null;
+  navigation_payload: Record<string, unknown> | string | null;
+  extracted_information_schema: Record<string, unknown> | string | null;
+  error_code_mapping: Record<string, string> | null;
+  proxy_location: string | null;
+  totp_verification_url: string | null;
+  totp_identifier: string | null;
 };
 
 export type User = {

skyvern-frontend/src/router.tsx

@@ -1,24 +1,23 @@
 import { Navigate, Outlet, createBrowserRouter } from "react-router-dom";
 import { RootLayout } from "./routes/root/RootLayout";
-import { TasksPageLayout } from "./routes/tasks/TasksPageLayout";
-import { TaskTemplates } from "./routes/tasks/create/TaskTemplates";
-import { TaskList } from "./routes/tasks/list/TaskList";
 import { Settings } from "./routes/settings/Settings";
 import { SettingsPageLayout } from "./routes/settings/SettingsPageLayout";
-import { TaskDetails } from "./routes/tasks/detail/TaskDetails";
+import { TasksPageLayout } from "./routes/tasks/TasksPageLayout";
-import { CreateNewTaskLayout } from "./routes/tasks/create/CreateNewTaskLayout";
 import { CreateNewTaskFormPage } from "./routes/tasks/create/CreateNewTaskFormPage";
-import { TaskActions } from "./routes/tasks/detail/TaskActions";
+import { CreateNewTaskLayout } from "./routes/tasks/create/CreateNewTaskLayout";
-import { TaskRecording } from "./routes/tasks/detail/TaskRecording";
+import { TaskTemplates } from "./routes/tasks/create/TaskTemplates";
-import { TaskParameters } from "./routes/tasks/detail/TaskParameters";
-import { StepArtifactsLayout } from "./routes/tasks/detail/StepArtifactsLayout";
-import { CreateNewTaskFromPrompt } from "./routes/tasks/create/CreateNewTaskFromPrompt";
-import { WorkflowsPageLayout } from "./routes/workflows/WorkflowsPageLayout";
-import { Workflows } from "./routes/workflows/Workflows";
-import { WorkflowPage } from "./routes/workflows/WorkflowPage";
-import { WorkflowRunParameters } from "./routes/workflows/WorkflowRunParameters";
 import { RetryTask } from "./routes/tasks/create/retry/RetryTask";
+import { StepArtifactsLayout } from "./routes/tasks/detail/StepArtifactsLayout";
+import { TaskActions } from "./routes/tasks/detail/TaskActions";
+import { TaskDetails } from "./routes/tasks/detail/TaskDetails";
+import { TaskParameters } from "./routes/tasks/detail/TaskParameters";
+import { TaskRecording } from "./routes/tasks/detail/TaskRecording";
+import { TaskList } from "./routes/tasks/list/TaskList";
+import { WorkflowPage } from "./routes/workflows/WorkflowPage";
 import { WorkflowRun } from "./routes/workflows/WorkflowRun";
+import { WorkflowRunParameters } from "./routes/workflows/WorkflowRunParameters";
+import { Workflows } from "./routes/workflows/Workflows";
+import { WorkflowsPageLayout } from "./routes/workflows/WorkflowsPageLayout";
 import { WorkflowEditor } from "./routes/workflows/editor/WorkflowEditor";
 
 const router = createBrowserRouter([
@@ -74,10 +73,6 @@ const router = createBrowserRouter([
             index: true,
             element: <TaskTemplates />,
           },
-          {
-            path: "sk-prompt",
-            element: <CreateNewTaskFromPrompt />,
-          },
           {
             path: ":template",
             element: <CreateNewTaskFormPage />,

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

@@ -1,4 +1,5 @@
 import { getClient } from "@/api/AxiosClient";
+import { CreateTaskRequest } from "@/api/types";
 import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
 import { Button } from "@/components/ui/button";
 import {
@@ -10,6 +11,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 import { useToast } from "@/components/ui/use-toast";
 import { useApiCredential } from "@/hooks/useApiCredential";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
@@ -25,69 +27,24 @@ import fetchToCurl from "fetch-to-curl";
 import { useState } from "react";
 import { useForm, useFormState } from "react-hook-form";
 import { Link } from "react-router-dom";
-import { z } from "zod";
 import { MAX_STEPS_DEFAULT } from "../constants";
 import { TaskFormSection } from "./TaskFormSection";
-
+import {
-const createNewTaskFormSchema = z
+  createNewTaskFormSchema,
-  .object({
+  CreateNewTaskFormValues,
-    url: z.string().url({
+} from "./taskFormTypes";
-      message: "Invalid URL",
-    }),
-    webhookCallbackUrl: z.string().or(z.null()).optional(),
-    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(),
-    maxStepsOverride: z.number().optional(),
-    totpVerificationUrl: z.string().or(z.null()).optional(),
-    totpIdentifier: z.string().or(z.null()).optional(),
-  })
-  .superRefine(
-    (
-      { navigationGoal, dataExtractionGoal, extractedInformationSchema },
-      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;
-      }
-      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>;
 
 type Props = {
   initialValues: CreateNewTaskFormValues;
 };
 
-function transform(value: unknown) {
+function transform<T>(value: T): T | null {
   return value === "" ? null : value;
 }
 
-function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
+function createTaskRequestObject(
+  formValues: CreateNewTaskFormValues,
+): CreateTaskRequest {
   let extractedInformationSchema = null;
   if (formValues.extractedInformationSchema) {
     try {
@@ -98,8 +55,17 @@ function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
       extractedInformationSchema = formValues.extractedInformationSchema;
     }
   }
+  let errorCodeMapping = null;
+  if (formValues.errorCodeMapping) {
+    try {
+      errorCodeMapping = JSON.parse(formValues.errorCodeMapping);
+    } catch (e) {
+      errorCodeMapping = formValues.errorCodeMapping;
+    }
+  }
 
   return {
+    title: null,
     url: formValues.url,
     webhook_callback_url: transform(formValues.webhookCallbackUrl),
     navigation_goal: transform(formValues.navigationGoal),
@@ -109,6 +75,7 @@ function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
     extracted_information_schema: extractedInformationSchema,
     totp_verification_url: transform(formValues.totpVerificationUrl),
     totp_identifier: transform(formValues.totpIdentifier),
+    error_code_mapping: errorCodeMapping,
   };
 }
 
@@ -334,12 +301,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
                               language="json"
                               fontSize={12}
                               minHeight="96px"
-                              value={
+                              value={field.value === null ? "" : field.value}
-                                field.value === null ||
-                                typeof field.value === "undefined"
-                                  ? ""
-                                  : field.value
-                              }
                             />
                           </FormControl>
                           <FormMessage />
@@ -362,7 +324,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
           hasError={
             typeof errors.navigationPayload !== "undefined" ||
             typeof errors.maxStepsOverride !== "undefined" ||
-            typeof errors.webhookCallbackUrl !== "undefined"
+            typeof errors.webhookCallbackUrl !== "undefined" ||
+            typeof errors.errorCodeMapping !== "undefined"
           }
         >
           {section === "advanced" && (
@@ -389,12 +352,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
                               language="json"
                               fontSize={12}
                               minHeight="96px"
-                              value={
+                              value={field.value === null ? "" : field.value}
-                                field.value === null ||
-                                typeof field.value === "undefined"
-                                  ? ""
-                                  : field.value
-                              }
                             />
                           </FormControl>
                           <FormMessage />
@@ -465,6 +423,39 @@ function CreateNewTaskForm({ initialValues }: Props) {
                     </FormItem>
                   )}
                 />
+                <Separator />
+                <FormField
+                  control={form.control}
+                  name="errorCodeMapping"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Error Messages</h1>
+                            <h2 className="text-base text-slate-400">
+                              Specify any error outputs you would like to be
+                              notified about
+                            </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>
+                  )}
+                />
+                <Separator />
                 <FormField
                   control={form.control}
                   name="totpVerificationUrl"

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

@@ -47,8 +47,10 @@ function CreateNewTaskFormPage() {
   ).default_value;
 
   const dataSchema = data.workflow_definition.blocks[0].data_schema;
+  const errorCodeMapping =
+    data.workflow_definition.blocks[0].error_code_mapping;
 
-  const maxSteps = data.workflow_definition.blocks[0].max_steps_per_run;
+  const maxStepsOverride = data.workflow_definition.blocks[0].max_steps_per_run;
 
   return (
     <SavedTaskForm
@@ -63,10 +65,11 @@ function CreateNewTaskFormPage() {
           data.workflow_definition.blocks[0].data_extraction_goal,
         extractedInformationSchema: JSON.stringify(dataSchema, null, 2),
         navigationPayload,
-        maxSteps,
+        maxStepsOverride,
         totpIdentifier: data.workflow_definition.blocks[0].totp_identifier,
         totpVerificationUrl:
           data.workflow_definition.blocks[0].totp_verification_url,
+        errorCodeMapping: JSON.stringify(errorCodeMapping, null, 2),
       }}
     />
   );

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

@@ -1,44 +0,0 @@
-import { useLocation } from "react-router-dom";
-import { CreateNewTaskForm } from "./CreateNewTaskForm";
-import { MagicWandIcon } from "@radix-ui/react-icons";
-
-function CreateNewTaskFromPrompt() {
-  const location = useLocation();
-
-  const state = location.state.data;
-  return (
-    <section className="space-y-8">
-      <header className="flex flex-col gap-4">
-        <div className="flex items-center gap-4">
-          <MagicWandIcon className="h-6 w-6" />
-          <h1 className="text-3xl font-bold">Create New Task</h1>
-        </div>
-        <p>
-          Prompt: <span>{state.user_prompt}</span>
-        </p>
-        <p>
-          Below are the parameters we generated automatically. You can go ahead
-          and create the task if everything looks correct.
-        </p>
-      </header>
-      <CreateNewTaskForm
-        initialValues={{
-          url: state.url,
-          navigationGoal: state.navigation_goal,
-          dataExtractionGoal: state.data_extraction_goal,
-          extractedInformationSchema: JSON.stringify(
-            state.extracted_information_schema,
-            null,
-            2,
-          ),
-          navigationPayload: JSON.stringify(state.navigation_payload, null, 2),
-          webhookCallbackUrl: "",
-          totpIdentifier: null,
-          totpVerificationUrl: null,
-        }}
-      />
-    </section>
-  );
-}
-
-export { CreateNewTaskFromPrompt };

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

@@ -28,62 +28,9 @@ import { useState } from "react";
 import { useForm, useFormState } from "react-hook-form";
 import { Link, useParams } from "react-router-dom";
 import { stringify as convertToYAML } from "yaml";
-import { z } from "zod";
 import { MAX_STEPS_DEFAULT } from "../constants";
 import { TaskFormSection } from "./TaskFormSection";
-
+import { savedTaskFormSchema, SavedTaskFormValues } from "./taskFormTypes";
-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(),
-    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(),
-    maxSteps: z.number().optional(),
-    totpVerificationUrl: z.string().or(z.null()).optional(),
-    totpIdentifier: z.string().or(z.null()).optional(),
-  })
-  .superRefine(
-    (
-      { navigationGoal, dataExtractionGoal, extractedInformationSchema },
-      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;
-      }
-      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>;
 
 type Props = {
   initialValues: SavedTaskFormValues;
@@ -105,17 +52,26 @@ function createTaskRequestObject(formValues: SavedTaskFormValues) {
     }
   }
 
+  let errorCodeMapping = null;
+  if (formValues.errorCodeMapping) {
+    try {
+      errorCodeMapping = JSON.parse(formValues.errorCodeMapping);
+    } catch (e) {
+      errorCodeMapping = formValues.errorCodeMapping;
+    }
+  }
+
   return {
     url: formValues.url,
     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: transform(formValues.navigationPayload),
     extracted_information_schema: extractedInformationSchema,
     totp_verification_url: transform(formValues.totpVerificationUrl),
     totp_identifier: transform(formValues.totpIdentifier),
+    error_code_mapping: errorCodeMapping,
   };
 }
 
@@ -131,6 +87,15 @@ function createTaskTemplateRequestObject(values: SavedTaskFormValues) {
     }
   }
 
+  let errorCodeMapping = null;
+  if (values.errorCodeMapping) {
+    try {
+      errorCodeMapping = JSON.parse(values.errorCodeMapping);
+    } catch (e) {
+      errorCodeMapping = values.errorCodeMapping;
+    }
+  }
+
   return {
     title: values.title,
     description: values.description,
@@ -154,9 +119,10 @@ function createTaskTemplateRequestObject(values: SavedTaskFormValues) {
           navigation_goal: values.navigationGoal,
           data_extraction_goal: values.dataExtractionGoal,
           data_schema: extractedInformationSchema,
-          max_steps_per_run: values.maxSteps,
+          max_steps_per_run: values.maxStepsOverride,
           totp_verification_url: values.totpVerificationUrl,
           totp_identifier: values.totpIdentifier,
+          error_code_mapping: errorCodeMapping,
         },
       ],
     },
@@ -178,7 +144,7 @@ function SavedTaskForm({ initialValues }: Props) {
     defaultValues: initialValues,
     values: {
       ...initialValues,
-      maxSteps: initialValues.maxSteps ?? MAX_STEPS_DEFAULT,
+      maxStepsOverride: initialValues.maxStepsOverride ?? MAX_STEPS_DEFAULT,
     },
   });
 
@@ -199,7 +165,7 @@ function SavedTaskForm({ initialValues }: Props) {
         .then(() => {
           const taskRequest = createTaskRequestObject(formValues);
           const includeOverrideHeader =
-            formValues.maxSteps !== MAX_STEPS_DEFAULT;
+            formValues.maxStepsOverride !== MAX_STEPS_DEFAULT;
           return client.post<
             ReturnType<typeof createTaskRequestObject>,
             { data: { task_id: string } }
@@ -207,7 +173,7 @@ function SavedTaskForm({ initialValues }: Props) {
             ...(includeOverrideHeader && {
               headers: {
                 "x-max-steps-override":
-                  formValues.maxSteps ?? MAX_STEPS_DEFAULT,
+                  formValues.maxStepsOverride ?? MAX_STEPS_DEFAULT,
               },
             }),
           });
@@ -523,8 +489,9 @@ function SavedTaskForm({ initialValues }: Props) {
           onClick={() => setSection("advanced")}
           hasError={
             typeof errors.navigationPayload !== "undefined" ||
-            typeof errors.maxSteps !== "undefined" ||
+            typeof errors.maxStepsOverride !== "undefined" ||
-            typeof errors.webhookCallbackUrl !== "undefined"
+            typeof errors.webhookCallbackUrl !== "undefined" ||
+            typeof errors.errorCodeMapping !== "undefined"
           }
         >
           {section === "advanced" && (
@@ -567,7 +534,7 @@ function SavedTaskForm({ initialValues }: Props) {
                 />
                 <FormField
                   control={form.control}
-                  name="maxSteps"
+                  name="maxStepsOverride"
                   render={({ field }) => (
                     <FormItem>
                       <div className="flex gap-16">
@@ -627,6 +594,39 @@ function SavedTaskForm({ initialValues }: Props) {
                     </FormItem>
                   )}
                 />
+                <Separator />
+                <FormField
+                  control={form.control}
+                  name="errorCodeMapping"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex gap-16">
+                        <FormLabel>
+                          <div className="w-72">
+                            <h1 className="text-lg">Error Messages</h1>
+                            <h2 className="text-base text-slate-400">
+                              Specify any error outputs you would like to be
+                              notified about
+                            </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>
+                  )}
+                />
+                <Separator />
                 <FormField
                   control={form.control}
                   name="totpVerificationUrl"

skyvern-frontend/src/routes/tasks/create/retry/RetryTask.tsx

@@ -35,6 +35,9 @@ function RetryTask() {
         webhookCallbackUrl: task.request.webhook_callback_url,
         totpIdentifier: task.request.totp_identifier,
         totpVerificationUrl: task.request.totp_verification_url,
+        errorCodeMapping: task.request.error_code_mapping
+          ? JSON.stringify(task.request.error_code_mapping, null, 2)
+          : "",
       }}
     />
   );

skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts

@@ -0,0 +1,81 @@
+import { z } from "zod";
+
+const createNewTaskFormSchemaBase = z.object({
+  url: z.string().url({
+    message: "Invalid URL",
+  }),
+  webhookCallbackUrl: z.string().or(z.null()),
+  navigationGoal: z.string().or(z.null()),
+  dataExtractionGoal: z.string().or(z.null()),
+  navigationPayload: z.string().or(z.null()),
+  extractedInformationSchema: z.string().or(z.null()),
+  maxStepsOverride: z.number().optional(),
+  totpVerificationUrl: z.string().or(z.null()),
+  totpIdentifier: z.string().or(z.null()),
+  errorCodeMapping: z.string().or(z.null()),
+});
+
+const savedTaskFormSchemaBase = createNewTaskFormSchemaBase.extend({
+  title: z.string().min(1, "Title is required"),
+  description: z.string(),
+  proxyLocation: z.string().or(z.null()),
+});
+
+function refineTaskFormValues(
+  values: CreateNewTaskFormValues | SavedTaskFormValues,
+  ctx: z.RefinementCtx,
+) {
+  const {
+    navigationGoal,
+    dataExtractionGoal,
+    extractedInformationSchema,
+    errorCodeMapping,
+  } = values;
+  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"],
+    });
+  }
+  if (extractedInformationSchema) {
+    try {
+      JSON.parse(extractedInformationSchema);
+    } catch (e) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Invalid JSON",
+        path: ["extractedInformationSchema"],
+      });
+    }
+  }
+  if (errorCodeMapping) {
+    try {
+      JSON.parse(errorCodeMapping);
+    } catch (e) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Invalid JSON",
+        path: ["errorCodeMapping"],
+      });
+    }
+  }
+}
+
+export const createNewTaskFormSchema =
+  createNewTaskFormSchemaBase.superRefine(refineTaskFormValues);
+
+export const savedTaskFormSchema =
+  savedTaskFormSchemaBase.superRefine(refineTaskFormValues);
+
+export type CreateNewTaskFormValues = z.infer<
+  typeof createNewTaskFormSchemaBase
+>;
+export type SavedTaskFormValues = z.infer<typeof savedTaskFormSchemaBase>;

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

@@ -1,11 +1,16 @@
+import { CreateNewTaskFormValues } from "../create/taskFormTypes";
 import { SampleCase } from "../types";
 
 export const blank = {
   url: "https://www.example.com",
-  navigationGoal: null,
+  navigationGoal: "",
-  dataExtractionGoal: null,
+  dataExtractionGoal: "",
   navigationPayload: null,
   extractedInformationSchema: null,
+  webhookCallbackUrl: null,
+  totpIdentifier: null,
+  totpVerificationUrl: null,
+  errorCodeMapping: null,
 };
 
 export const bci_seguros = {
@@ -30,6 +35,10 @@ export const bci_seguros = {
     "km approx a recorrer": "28,000",
   },
   extractedInformationSchema: null,
+  webhookCallbackUrl: null,
+  totpIdentifier: null,
+  totpVerificationUrl: null,
+  errorCodeMapping: null,
 };
 
 export const california_edd = {
@@ -47,6 +56,10 @@ export const california_edd = {
     phone_number: "412-444-1234",
   },
   extractedInformationSchema: null,
+  webhookCallbackUrl: null,
+  totpIdentifier: null,
+  totpVerificationUrl: null,
+  errorCodeMapping: null,
 };
 
 export const finditparts = {
@@ -59,6 +72,10 @@ export const finditparts = {
     product_id: "W01-377-8537",
   },
   extractedInformationSchema: null,
+  webhookCallbackUrl: null,
+  totpIdentifier: null,
+  totpVerificationUrl: null,
+  errorCodeMapping: null,
 };
 
 export const job_application = {
@@ -73,6 +90,10 @@ export const job_application = {
       "https://writing.colostate.edu/guides/documents/resume/functionalSample.pdf",
     cover_letter: "Generate a compelling cover letter for me",
   },
+  webhookCallbackUrl: null,
+  totpIdentifier: null,
+  totpVerificationUrl: null,
+  errorCodeMapping: null,
 };
 
 export const geico = {
@@ -263,6 +284,10 @@ export const geico = {
     },
     type: "object",
   },
+  webhookCallbackUrl: null,
+  totpIdentifier: null,
+  totpVerificationUrl: null,
+  errorCodeMapping: null,
 };
 
 export function getSample(sample: SampleCase) {
@@ -329,15 +354,14 @@ function generatePhoneNumber() {
 }
 
 function transformKV([key, value]: [string, unknown]) {
-  if (value === null) {
+  if (value !== null && typeof value === "object") {
-    return [key, ""];
-  }
-  if (typeof value === "object") {
     return [key, JSON.stringify(value, null, 2)];
   }
   return [key, value];
 }
 
-export function getSampleForInitialFormValues(sample: SampleCase) {
+export function getSampleForInitialFormValues(
+  sample: SampleCase,
+): CreateNewTaskFormValues {
   return Object.fromEntries(Object.entries(getSample(sample)).map(transformKV));
 }