diff --git a/skyvern-frontend/src/components/ProxySelector.tsx b/skyvern-frontend/src/components/ProxySelector.tsx new file mode 100644 index 00000000..3b9ae91e --- /dev/null +++ b/skyvern-frontend/src/components/ProxySelector.tsx @@ -0,0 +1,41 @@ +import { ProxyLocation } from "@/api/types"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "./ui/select"; + +type Props = { + value: ProxyLocation | null; + onChange: (value: ProxyLocation) => void; +}; + +function ProxySelector({ value, onChange }: Props) { + return ( + + ); +} + +export { ProxySelector }; diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx index 2de85892..a83570a4 100644 --- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx +++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx @@ -1,5 +1,9 @@ import { getClient } from "@/api/AxiosClient"; -import { CreateTaskRequest, OrganizationApiResponse } from "@/api/types"; +import { + CreateTaskRequest, + OrganizationApiResponse, + ProxyLocation, +} from "@/api/types"; import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea"; import { Button } from "@/components/ui/button"; import { @@ -33,6 +37,7 @@ import { createNewTaskFormSchema, CreateNewTaskFormValues, } from "./taskFormTypes"; +import { ProxySelector } from "@/components/ProxySelector"; type Props = { initialValues: CreateNewTaskFormValues; @@ -70,7 +75,7 @@ function createTaskRequestObject( webhook_callback_url: transform(formValues.webhookCallbackUrl), navigation_goal: transform(formValues.navigationGoal), data_extraction_goal: transform(formValues.dataExtractionGoal), - proxy_location: "RESIDENTIAL", + proxy_location: formValues.proxyLocation ?? ProxyLocation.Residential, navigation_payload: transform(formValues.navigationPayload), extracted_information_schema: extractedInformationSchema, totp_verification_url: transform(formValues.totpVerificationUrl), @@ -105,10 +110,10 @@ function CreateNewTaskForm({ initialValues }: Props) { const form = useForm({ resolver: zodResolver(createNewTaskFormSchema), - defaultValues: initialValues, - values: { + defaultValues: { ...initialValues, - maxStepsOverride: null, + maxStepsOverride: initialValues.maxStepsOverride ?? null, + proxyLocation: initialValues.proxyLocation ?? ProxyLocation.Residential, }, }); const { errors } = useFormState({ control: form.control }); @@ -486,6 +491,38 @@ function CreateNewTaskForm({ initialValues }: Props) { )} /> + { + return ( + +
+ +
+
+ Proxy Location +
+

+ Route Skyvern through one of our available + proxies. +

+
+
+
+ + + + +
+
+
+ ); + }} + /> diff --git a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx index aebb7f6f..ba616587 100644 --- a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx +++ b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx @@ -31,7 +31,8 @@ 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"; +import { OrganizationApiResponse, ProxyLocation } from "@/api/types"; +import { ProxySelector } from "@/components/ProxySelector"; type Props = { initialValues: SavedTaskFormValues; @@ -157,10 +158,10 @@ function SavedTaskForm({ initialValues }: Props) { const form = useForm({ resolver: zodResolver(savedTaskFormSchema), - defaultValues: initialValues, - values: { + defaultValues: { ...initialValues, maxStepsOverride: initialValues.maxStepsOverride ?? null, + proxyLocation: initialValues.proxyLocation ?? ProxyLocation.Residential, }, }); @@ -662,6 +663,38 @@ function SavedTaskForm({ initialValues }: Props) { )} /> + { + return ( + +
+ +
+
+ Proxy Location +
+

+ Route Skyvern through one of our available + proxies. +

+
+
+
+ + + + +
+
+
+ ); + }} + /> diff --git a/skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts b/skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts index e4555d80..042ec93b 100644 --- a/skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts +++ b/skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts @@ -1,3 +1,4 @@ +import { ProxyLocation } from "@/api/types"; import { z } from "zod"; const createNewTaskFormSchemaBase = z.object({ @@ -13,12 +14,12 @@ const createNewTaskFormSchemaBase = z.object({ totpVerificationUrl: z.string().or(z.null()), totpIdentifier: z.string().or(z.null()), errorCodeMapping: z.string().or(z.null()), + proxyLocation: z.nativeEnum(ProxyLocation).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( diff --git a/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx b/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx index e2e6e2a8..6a1def87 100644 --- a/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx +++ b/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx @@ -24,13 +24,7 @@ import { WorkflowParameter } from "./types/workflowTypes"; import { Input } from "@/components/ui/input"; import { z } from "zod"; import { ProxyLocation } from "@/api/types"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; +import { ProxySelector } from "@/components/ProxySelector"; type Props = { workflowParameters: Array; @@ -316,34 +310,10 @@ function RunWorkflowForm({ workflowParameters, initialValues }: Props) {
- +