vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add error code mapping to task (#890)

Browse Source
This commit is contained in:
Kerem Yilmaz
2024-09-30 09:08:27 -07:00
committed by GitHub
parent e6ccea1c86
commit 59c28f9a02
9 changed files with 270 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
View File

@@ -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";
const createNewTaskFormSchema = z
.object({
url: z.string().url({
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>;
import {
createNewTaskFormSchema,
CreateNewTaskFormValues,
} from "./taskFormTypes";
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={
field.value === null ||
typeof field.value === "undefined"
? ""
: field.value
}
value={field.value === null ? "" : 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={
field.value === null ||
typeof field.value === "undefined"
? ""
: field.value
}
value={field.value === null ? "" : 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"

7
skyvern-frontend/src/routes/tasks/create/CreateNewTaskFormPage.tsx
View File

@@ -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),
}}
/>
);

44
skyvern-frontend/src/routes/tasks/create/CreateNewTaskFromPrompt.tsx
View File

@@ -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 };

124
skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
View File

@@ -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";
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>;
import { savedTaskFormSchema, SavedTaskFormValues } from "./taskFormTypes";
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.webhookCallbackUrl !== "undefined"
typeof errors.maxStepsOverride !== "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"

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

@@ -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)
: "",
}}
/>
);

81
skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts Normal file
View File

@@ -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>;