[Frontend] Marc/frontend granular city/state geo proxy (#4156)

skyvern-frontend/src/routes/browserSessions/BrowserSessions.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { ProxyLocation } from "@/api/types";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {

skyvern-frontend/src/routes/browserSessions/hooks/useCreateBrowserSessionMutation.ts

@@ -5,6 +5,7 @@ import { useMutation } from "@tanstack/react-query";
 import { getClient } from "@/api/AxiosClient";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { BrowserSession } from "@/routes/workflows/types/browserSessionTypes";
+import { ProxyLocation } from "@/api/types";
 
 function useCreateBrowserSessionMutation() {
   const queryClient = useQueryClient();
@@ -16,7 +17,7 @@ function useCreateBrowserSessionMutation() {
       proxyLocation = null,
       timeout = null,
     }: {
-      proxyLocation: string | null;
+      proxyLocation: ProxyLocation | null;
       timeout: number | null;
     }) => {
       const client = await getClient(credentialGetter, "sans-api-v1");

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

@@ -15,7 +15,16 @@ const createNewTaskFormSchemaBase = z.object({
   totpIdentifier: z.string().or(z.null()),
   cdpAddress: z.string().or(z.null()),
   errorCodeMapping: z.string().or(z.null()),
-  proxyLocation: z.nativeEnum(ProxyLocation).or(z.null()),
+  proxyLocation: z
+    .union([
+      z.nativeEnum(ProxyLocation),
+      z.object({
+        country: z.string(),
+        subdivision: z.string().optional(),
+        city: z.string().optional(),
+      }),
+    ])
+    .nullable(),
   includeActionHistoryInVerification: z.boolean().or(z.null()).default(false),
   maxScreenshotScrolls: z.number().or(z.null()).default(null),
 });

skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx

@@ -244,7 +244,7 @@ function RunWorkflowForm({
     defaultValues: {
       ...initialValues,
       webhookCallbackUrl: initialSettings.webhookCallbackUrl,
-      proxyLocation: initialSettings.proxyLocation,
+      proxyLocation: initialSettings.proxyLocation ?? ProxyLocation.Residential,
       browserSessionId: null,
       cdpAddress: initialSettings.cdpAddress,
       maxScreenshotScrolls: initialSettings.maxScreenshotScrolls,
@@ -342,7 +342,7 @@ function RunWorkflowForm({
     form.reset({
       ...initialValues,
       webhookCallbackUrl: initialSettings.webhookCallbackUrl,
-      proxyLocation: initialSettings.proxyLocation,
+      proxyLocation: initialSettings.proxyLocation ?? ProxyLocation.Residential,
       browserSessionId: null,
       cdpAddress: initialSettings.cdpAddress,
       maxScreenshotScrolls: initialSettings.maxScreenshotScrolls,

skyvern-frontend/src/routes/workflows/types/workflowYamlTypes.ts

@@ -1,11 +1,11 @@
-import { RunEngine } from "@/api/types";
+import { ProxyLocation, RunEngine } from "@/api/types";
 import { WorkflowBlockType } from "./workflowTypes";
 import { WorkflowModel } from "./workflowTypes";
 
 export type WorkflowCreateYAMLRequest = {
   title: string;
   description?: string | null;
-  proxy_location?: string | null;
+  proxy_location?: ProxyLocation | null;
   webhook_callback_url?: string | null;
   persist_browser_session?: boolean;
   model?: WorkflowModel | null;