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

Adjust task placeholders (#933)

Browse Source
This commit is contained in:
Kerem Yilmaz
2024-10-08 11:36:41 -07:00
committed by GitHub
parent 78c0a919da
commit e2bff34a07
11 changed files with 140 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import { getClient } from "@/api/AxiosClient";
import { CreateTaskRequest } from "@/api/types";
import { CreateTaskRequest, OrganizationApiResponse } from "@/api/types";
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
import { Button } from "@/components/ui/button";
import {
@@ -21,7 +21,7 @@ import { apiBaseUrl } from "@/util/env";
import { zodResolver } from "@hookform/resolvers/zod";
import { ReloadIcon } from "@radix-ui/react-icons";
import { ToastAction } from "@radix-ui/react-toast";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { AxiosError } from "axios";
import fetchToCurl from "fetch-to-curl";
import { useState } from "react";
@@ -91,12 +91,24 @@ function CreateNewTaskForm({ initialValues }: Props) {
]);
const [showAdvancedBaseContent, setShowAdvancedBaseContent] = useState(false);
const { data: organizations } = useQuery<Array<OrganizationApiResponse>>({
queryKey: ["organizations"],
queryFn: async () => {
const client = await getClient(credentialGetter);
return await client
.get("/organizations")
.then((response) => response.data.organizations);
},
});
const organization = organizations?.[0];
const form = useForm<CreateNewTaskFormValues>({
resolver: zodResolver(createNewTaskFormSchema),
defaultValues: initialValues,
values: {
...initialValues,
maxStepsOverride: MAX_STEPS_DEFAULT,
maxStepsOverride: null,
},
});
const { errors } = useFormState({ control: form.control });
@@ -106,6 +118,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
const taskRequest = createTaskRequestObject(formValues);
const client = await getClient(credentialGetter);
const includeOverrideHeader =
formValues.maxStepsOverride !== null &&
formValues.maxStepsOverride !== MAX_STEPS_DEFAULT;
return client.post<
ReturnType<typeof createTaskRequestObject>,
@@ -113,8 +126,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
>("/tasks", taskRequest, {
...(includeOverrideHeader && {
headers: {
"x-max-steps-override":
formValues.maxStepsOverride ?? MAX_STEPS_DEFAULT,
"x-max-steps-override": formValues.maxStepsOverride,
},
}),
});
@@ -237,8 +249,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="Use terms like complete or terminate to give completion directions"
{...field}
placeholder="Tell Skyvern what to do."
value={field.value === null ? "" : field.value}
/>
</FormControl>
@@ -345,8 +357,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="e.g. Extract the product price..."
{...field}
placeholder="What data do you need to extract?"
value={field.value === null ? "" : field.value}
/>
</FormControl>
@@ -428,9 +440,14 @@ function CreateNewTaskForm({ initialValues }: Props) {
{...field}
type="number"
min={1}
value={field.value}
value={field.value ?? ""}
placeholder={`Default: ${organization?.max_steps_per_run ?? MAX_STEPS_DEFAULT}`}
onChange={(event) => {
field.onChange(parseInt(event.target.value));
const value =
event.target.value === ""
? null
: Number(event.target.value);
field.onChange(value);
}}
/>
</FormControl>
@@ -458,8 +475,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
placeholder="https://"
value={field.value === null ? "" : field.value}
/>
</FormControl>
@@ -517,8 +534,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
placeholder="Provide your 2FA endpoint"
value={field.value === null ? "" : field.value}
/>
</FormControl>
@@ -543,8 +560,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="Idenfitifer"
{...field}
placeholder="Add an ID that links your TOTP to the task"
value={field.value === null ? "" : field.value}
/>
</FormControl>

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

@@ -21,7 +21,7 @@ import { apiBaseUrl } from "@/util/env";
import { zodResolver } from "@hookform/resolvers/zod";
import { ReloadIcon } from "@radix-ui/react-icons";
import { ToastAction } from "@radix-ui/react-toast";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { AxiosError } from "axios";
import fetchToCurl from "fetch-to-curl";
import { useState } from "react";
@@ -31,6 +31,7 @@ import { stringify as convertToYAML } from "yaml";
import { MAX_STEPS_DEFAULT } from "../constants";
import { TaskFormSection } from "./TaskFormSection";
import { savedTaskFormSchema, SavedTaskFormValues } from "./taskFormTypes";
import { OrganizationApiResponse } from "@/api/types";
type Props = {
initialValues: SavedTaskFormValues;
@@ -142,12 +143,24 @@ function SavedTaskForm({ initialValues }: Props) {
]);
const [showAdvancedBaseContent, setShowAdvancedBaseContent] = useState(false);
const { data: organizations } = useQuery<Array<OrganizationApiResponse>>({
queryKey: ["organizations"],
queryFn: async () => {
const client = await getClient(credentialGetter);
return await client
.get("/organizations")
.then((response) => response.data.organizations);
},
});
const organization = organizations?.[0];
const form = useForm<SavedTaskFormValues>({
resolver: zodResolver(savedTaskFormSchema),
defaultValues: initialValues,
values: {
...initialValues,
maxStepsOverride: initialValues.maxStepsOverride ?? MAX_STEPS_DEFAULT,
maxStepsOverride: initialValues.maxStepsOverride ?? null,
},
});
@@ -168,6 +181,7 @@ function SavedTaskForm({ initialValues }: Props) {
.then(() => {
const taskRequest = createTaskRequestObject(formValues);
const includeOverrideHeader =
formValues.maxStepsOverride !== null &&
formValues.maxStepsOverride !== MAX_STEPS_DEFAULT;
return client.post<
ReturnType<typeof createTaskRequestObject>,
@@ -404,8 +418,8 @@ function SavedTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="Use terms like complete or terminate to give completion directions"
{...field}
placeholder="Tell Skyvern what to do."
value={field.value === null ? "" : field.value}
/>
</FormControl>
@@ -512,8 +526,8 @@ function SavedTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="e.g. Extract the product price..."
{...field}
placeholder="What data do you need to extract?"
value={field.value === null ? "" : field.value}
/>
</FormControl>
@@ -600,9 +614,14 @@ function SavedTaskForm({ initialValues }: Props) {
{...field}
type="number"
min={1}
value={field.value}
value={field.value ?? ""}
placeholder={`Default: ${organization?.max_steps_per_run ?? MAX_STEPS_DEFAULT}`}
onChange={(event) => {
field.onChange(parseInt(event.target.value));
const value =
event.target.value === ""
? null
: Number(event.target.value);
field.onChange(value);
}}
/>
</FormControl>
@@ -630,8 +649,8 @@ function SavedTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
placeholder="https://"
value={field.value === null ? "" : field.value}
/>
</FormControl>
@@ -689,8 +708,8 @@ function SavedTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
placeholder="Provide your 2FA endpoint"
value={field.value === null ? "" : field.value}
/>
</FormControl>
@@ -715,8 +734,8 @@ function SavedTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="Idenfitifer"
{...field}
placeholder="Add an ID that links your TOTP to the task"
value={field.value === null ? "" : field.value}
/>
</FormControl>

2
skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts
View File

@@ -9,7 +9,7 @@ const createNewTaskFormSchemaBase = z.object({
dataExtractionGoal: z.string().or(z.null()),
navigationPayload: z.string().or(z.null()),
extractedInformationSchema: z.string().or(z.null()),
maxStepsOverride: z.number().optional(),
maxStepsOverride: z.number().or(z.null()).optional(),
totpVerificationUrl: z.string().or(z.null()),
totpIdentifier: z.string().or(z.null()),
errorCodeMapping: z.string().or(z.null()),