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

Rearrange task form (#492)

Browse Source
This commit is contained in:
Salih Altun
2024-06-19 19:15:11 +03:00
committed by GitHub
parent 627279d04f
commit a0b63028ef
3 changed files with 198 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
import { import {
Form, Form,
FormControl, FormControl,
FormDescription,
FormField, FormField,
FormItem, FormItem,
FormLabel, FormLabel,
@@ -37,6 +38,12 @@ import { apiBaseUrl } from "@/util/env";
import { useCredentialGetter } from "@/hooks/useCredentialGetter"; import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { useApiCredential } from "@/hooks/useApiCredential"; import { useApiCredential } from "@/hooks/useApiCredential";
import { AxiosError } from "axios"; import { AxiosError } from "axios";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
const createNewTaskFormSchema = z const createNewTaskFormSchema = z
.object({ .object({
@@ -181,6 +188,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
</TooltipProvider> </TooltipProvider>
</div> </div>
</FormLabel> </FormLabel>
<FormDescription>The starting URL for the task</FormDescription>
<FormControl> <FormControl>
<Input placeholder="example.com" {...field} /> <Input placeholder="example.com" {...field} />
</FormControl> </FormControl>
@@ -188,37 +196,6 @@ function CreateNewTaskForm({ initialValues }: Props) {
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="webhookCallbackUrl"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Webhook Callback URL
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{webhookCallbackUrlDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormControl>
<Input
placeholder="example.com"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="navigationGoal" name="navigationGoal"
@@ -239,6 +216,9 @@ function CreateNewTaskForm({ initialValues }: Props) {
</TooltipProvider> </TooltipProvider>
</div> </div>
</FormLabel> </FormLabel>
<FormDescription>
How do you want Skyvern to navigate?
</FormDescription>
<FormControl> <FormControl>
<Textarea <Textarea
rows={5} rows={5}
@@ -271,6 +251,10 @@ function CreateNewTaskForm({ initialValues }: Props) {
</TooltipProvider> </TooltipProvider>
</div> </div>
</FormLabel> </FormLabel>
<FormDescription>
If you want Skyvern to extract data after it's finished
navigating
</FormDescription>
<FormControl> <FormControl>
<Textarea <Textarea
rows={5} rows={5}
@@ -303,6 +287,10 @@ function CreateNewTaskForm({ initialValues }: Props) {
</TooltipProvider> </TooltipProvider>
</div> </div>
</FormLabel> </FormLabel>
<FormDescription>
Any context Skyvern needs to complete its actions (ex. text that
may be required to fill out forms)
</FormDescription>
<FormControl> <FormControl>
<Textarea <Textarea
rows={5} rows={5}
@@ -315,38 +303,85 @@ function CreateNewTaskForm({ initialValues }: Props) {
</FormItem> </FormItem>
)} )}
/> />
<FormField <Accordion type="single" collapsible>
control={form.control} <AccordionItem value="advanced-settings">
name="extractedInformationSchema" <AccordionTrigger>Advanced Settings</AccordionTrigger>
render={({ field }) => ( <AccordionContent className="space-y-8 px-1 py-4">
<FormItem> <FormField
<FormLabel> control={form.control}
<div className="flex gap-2"> name="extractedInformationSchema"
Extracted Information Schema render={({ field }) => (
<TooltipProvider> <FormItem>
<Tooltip> <FormLabel>
<TooltipTrigger asChild> <div className="flex gap-2">
<InfoCircledIcon /> Extracted Information Schema
</TooltipTrigger> <TooltipProvider>
<TooltipContent className="max-w-[250px]"> <Tooltip>
<p>{extractedInformationSchemaDescription}</p> <TooltipTrigger asChild>
</TooltipContent> <InfoCircledIcon />
</Tooltip> </TooltipTrigger>
</TooltipProvider> <TooltipContent className="max-w-[250px]">
</div> <p>{extractedInformationSchemaDescription}</p>
</FormLabel> </TooltipContent>
<FormControl> </Tooltip>
<Textarea </TooltipProvider>
placeholder="Extracted Information Schema" </div>
rows={5} </FormLabel>
{...field} <FormDescription>
value={field.value === null ? "" : field.value} Jsonc schema to force the json format for extracted
/> information
</FormControl> </FormDescription>
<FormMessage /> <FormControl>
</FormItem> <Textarea
)} placeholder="Extracted Information Schema"
/> rows={5}
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="webhookCallbackUrl"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Webhook Callback URL
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{webhookCallbackUrlDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
The URL of a webhook endpoint to send the extracted
information
</FormDescription>
<FormControl>
<Input
placeholder="example.com"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</AccordionContent>
</AccordionItem>
</Accordion>
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<Button <Button
type="button" type="button"

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

@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
import { import {
Form, Form,
FormControl, FormControl,
FormDescription,
FormField, FormField,
FormItem, FormItem,
FormLabel, FormLabel,
@@ -39,6 +40,12 @@ import {
} from "../data/descriptionHelperContent"; } from "../data/descriptionHelperContent";
import { SubmitEvent } from "@/types"; import { SubmitEvent } from "@/types";
import { AxiosError } from "axios"; import { AxiosError } from "axios";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
const savedTaskFormSchema = z const savedTaskFormSchema = z
.object({ .object({
@@ -291,6 +298,7 @@ function SavedTaskForm({ initialValues }: Props) {
</TooltipProvider> </TooltipProvider>
</div> </div>
</FormLabel> </FormLabel>
<FormDescription>The starting URL for the task</FormDescription>
<FormControl> <FormControl>
<Input placeholder="example.com" {...field} /> <Input placeholder="example.com" {...field} />
</FormControl> </FormControl>
@@ -298,37 +306,7 @@ function SavedTaskForm({ initialValues }: Props) {
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="webhookCallbackUrl"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Webhook Callback URL
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{webhookCallbackUrlDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormControl>
<Input
placeholder="example.com"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="navigationGoal" name="navigationGoal"
@@ -349,6 +327,9 @@ function SavedTaskForm({ initialValues }: Props) {
</TooltipProvider> </TooltipProvider>
</div> </div>
</FormLabel> </FormLabel>
<FormDescription>
How do you want Skyvern to navigate?
</FormDescription>
<FormControl> <FormControl>
<Textarea <Textarea
rows={5} rows={5}
@@ -381,6 +362,10 @@ function SavedTaskForm({ initialValues }: Props) {
</TooltipProvider> </TooltipProvider>
</div> </div>
</FormLabel> </FormLabel>
<FormDescription>
If you want Skyvern to extract data after it's finished
navigating
</FormDescription>
<FormControl> <FormControl>
<Textarea <Textarea
rows={5} rows={5}
@@ -413,6 +398,10 @@ function SavedTaskForm({ initialValues }: Props) {
</TooltipProvider> </TooltipProvider>
</div> </div>
</FormLabel> </FormLabel>
<FormDescription>
Any context Skyvern needs to complete its actions (ex. text that
may be required to fill out forms)
</FormDescription>
<FormControl> <FormControl>
<Textarea <Textarea
rows={5} rows={5}
@@ -425,38 +414,85 @@ function SavedTaskForm({ initialValues }: Props) {
</FormItem> </FormItem>
)} )}
/> />
<FormField <Accordion type="single" collapsible>
control={form.control} <AccordionItem value="advanced-settings">
name="extractedInformationSchema" <AccordionTrigger>Advanced Settings</AccordionTrigger>
render={({ field }) => ( <AccordionContent className="space-y-8 px-1 py-4">
<FormItem> <FormField
<FormLabel> control={form.control}
<div className="flex gap-2"> name="extractedInformationSchema"
Extracted Information Schema render={({ field }) => (
<TooltipProvider> <FormItem>
<Tooltip> <FormLabel>
<TooltipTrigger asChild> <div className="flex gap-2">
<InfoCircledIcon /> Extracted Information Schema
</TooltipTrigger> <TooltipProvider>
<TooltipContent className="max-w-[250px]"> <Tooltip>
<p>{extractedInformationSchemaDescription}</p> <TooltipTrigger asChild>
</TooltipContent> <InfoCircledIcon />
</Tooltip> </TooltipTrigger>
</TooltipProvider> <TooltipContent className="max-w-[250px]">
</div> <p>{extractedInformationSchemaDescription}</p>
</FormLabel> </TooltipContent>
<FormControl> </Tooltip>
<Textarea </TooltipProvider>
placeholder="Extracted Information Schema" </div>
rows={5} </FormLabel>
{...field} <FormDescription>
value={field.value === null ? "" : field.value} Jsonc schema to force the json format for extracted
/> information
</FormControl> </FormDescription>
<FormMessage /> <FormControl>
</FormItem> <Textarea
)} placeholder="Extracted Information Schema"
/> rows={5}
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="webhookCallbackUrl"
render={({ field }) => (
<FormItem>
<FormLabel>
<div className="flex gap-2">
Webhook Callback URL
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<InfoCircledIcon />
</TooltipTrigger>
<TooltipContent className="max-w-[250px]">
<p>{webhookCallbackUrlDescription}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</FormLabel>
<FormDescription>
The URL of a webhook endpoint to send the extracted
information
</FormDescription>
<FormControl>
<Input
placeholder="example.com"
{...field}
value={field.value === null ? "" : field.value}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</AccordionContent>
</AccordionItem>
</Accordion>
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<Button <Button
type="button" type="button"

2
skyvern-frontend/src/routes/tasks/create/SavedTasks.tsx
View File

@@ -28,7 +28,7 @@ function createEmptyTaskTemplate() {
parameter_type: "workflow", parameter_type: "workflow",
workflow_parameter_type: "json", workflow_parameter_type: "json",
key: "navigation_payload", key: "navigation_payload",
default_value: JSON.stringify({}), default_value: "null",
}, },
], ],
blocks: [ blocks: [