Saving tasks in UI

skyvern-frontend/package.json

@@ -42,11 +42,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.1",
-    "react-medium-image-zoom": "^5.1.11",
     "react-router-dom": "^6.22.3",
     "serve-handler": "^6.1.5",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
+    "yaml": "^2.4.2",
     "zod": "^3.22.4",
     "zustand": "^4.5.2"
   },

skyvern-frontend/src/api/QueryClient.ts

@@ -3,7 +3,7 @@ import { QueryClient } from "@tanstack/react-query";
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 1000 * 60 * 5, // 5 minutes
+      staleTime: Infinity,
     },
   },
 });

skyvern-frontend/src/api/types.ts

@@ -65,7 +65,7 @@ export type TaskApiResponse = {
     navigation_payload: string | object; // stringified JSON
     error_code_mapping: null;
     proxy_location: string;
-    extracted_information_schema: string;
+    extracted_information_schema: string | object;
   };
   task_id: string;
   status: Status;
@@ -101,3 +101,50 @@ export type ApiKeyApiResponse = {
   token_type: string;
   valid: boolean;
 };
+
+export type WorkflowParameter = {
+  workflow_parameter_id: string;
+  workflow_parameter_type?: string;
+  key: string;
+  description: string | null;
+  workflow_id: string;
+  parameter_type: "workflow"; // TODO other values
+  default_value?: string;
+  created_at: string | null;
+  modified_at: string | null;
+  deleted_at: string | null;
+};
+
+export type WorkflowBlock = {
+  label: string;
+  block_type: string;
+  output_parameter?: null;
+  continue_on_failure: boolean;
+  url: string;
+  title: string;
+  navigation_goal: string;
+  data_extraction_goal: string;
+  data_schema: object | null;
+  error_code_mapping: null; // ?
+  max_retries: number | null;
+  max_steps_per_run: number | null;
+  parameters: []; // ?
+};
+
+export type WorkflowApiResponse = {
+  workflow_id: string;
+  organization_id: string;
+  title: string;
+  workflow_permanent_id: string;
+  version: number;
+  description: string;
+  workflow_definition: {
+    parameters: Array<WorkflowParameter>;
+    blocks: Array<WorkflowBlock>;
+  };
+  proxy_location: string;
+  webhook_callback_url: string;
+  created_at: string;
+  modified_at: string;
+  deleted_at: string | null;
+};

skyvern-frontend/src/components/ui/dropdown-menu.tsx

@@ -86,7 +86,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
     )}

skyvern-frontend/src/router.tsx

@@ -1,11 +1,13 @@
 import { Navigate, createBrowserRouter } from "react-router-dom";
 import { RootLayout } from "./routes/root/RootLayout";
 import { TasksPageLayout } from "./routes/tasks/TasksPageLayout";
-import { CreateNewTask } from "./routes/tasks/create/CreateNewTask";
+import { TaskTemplates } from "./routes/tasks/create/TaskTemplates";
 import { TaskList } from "./routes/tasks/list/TaskList";
 import { Settings } from "./routes/settings/Settings";
 import { SettingsPageLayout } from "./routes/settings/SettingsPageLayout";
 import { TaskDetails } from "./routes/tasks/detail/TaskDetails";
+import { CreateNewTaskLayout } from "./routes/tasks/create/CreateNewTaskLayout";
+import { CreateNewTaskFormPage } from "./routes/tasks/create/CreateNewTaskFormPage";
 
 const router = createBrowserRouter([
   {
@@ -32,7 +34,17 @@ const router = createBrowserRouter([
       },
       {
         path: "create",
-        element: <CreateNewTask />,
+        element: <CreateNewTaskLayout />,
+        children: [
+          {
+            index: true,
+            element: <TaskTemplates />,
+          },
+          {
+            path: ":template",
+            element: <CreateNewTaskFormPage />,
+          },
+        ],
       },
       {
         path: "settings",

skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx

@@ -23,7 +23,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { getClient } from "@/api/AxiosClient";
 import { useToast } from "@/components/ui/use-toast";
-import { InfoCircledIcon } from "@radix-ui/react-icons";
+import { InfoCircledIcon, ReloadIcon } from "@radix-ui/react-icons";
 import {
   Tooltip,
   TooltipContent,
@@ -41,11 +41,11 @@ const createNewTaskFormSchema = z.object({
   url: z.string().url({
     message: "Invalid URL",
   }),
-  webhookCallbackUrl: z.string().optional(), // url maybe, but shouldn't be validated as one
-  navigationGoal: z.string().optional(),
-  dataExtractionGoal: z.string().optional(),
-  navigationPayload: z.string().optional(),
-  extractedInformationSchema: z.string().optional(),
+  webhookCallbackUrl: z.string().or(z.null()).optional(), // url maybe, but shouldn't be validated as one
+  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(),
 });
 
 export type CreateNewTaskFormValues = z.infer<typeof createNewTaskFormSchema>;
@@ -62,8 +62,8 @@ function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
     data_extraction_goal: formValues.dataExtractionGoal ?? "",
     proxy_location: "NONE",
     error_code_mapping: null,
-    navigation_payload: formValues.navigationPayload ?? "",
-    extracted_information_schema: formValues.extractedInformationSchema ?? "",
+    navigation_payload: formValues.navigationPayload,
+    extracted_information_schema: formValues.extractedInformationSchema,
   };
 }
 
@@ -90,7 +90,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
     onError: (error) => {
       toast({
         variant: "destructive",
-        title: "Error",
+        title: "There was an error creating the task.",
         description: error.message,
       });
     },
@@ -126,7 +126,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
             <FormItem>
               <FormLabel>
                 <div className="flex gap-2">
-                  URL*
+                  URL *
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger asChild>
@@ -167,7 +167,11 @@ function CreateNewTaskForm({ initialValues }: Props) {
                 </div>
               </FormLabel>
               <FormControl>
-                <Input placeholder="example.com" {...field} />
+                <Input
+                  placeholder="example.com"
+                  {...field}
+                  value={field.value === null ? "" : field.value}
+                />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -194,7 +198,12 @@ function CreateNewTaskForm({ initialValues }: Props) {
                 </div>
               </FormLabel>
               <FormControl>
-                <Textarea rows={5} placeholder="Navigation Goal" {...field} />
+                <Textarea
+                  rows={5}
+                  placeholder="Navigation Goal"
+                  {...field}
+                  value={field.value === null ? "" : field.value}
+                />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -225,6 +234,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
                   rows={5}
                   placeholder="Data Extraction Goal"
                   {...field}
+                  value={field.value === null ? "" : field.value}
                 />
               </FormControl>
               <FormMessage />
@@ -256,6 +266,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
                   rows={5}
                   placeholder="Navigation Payload"
                   {...field}
+                  value={field.value ?? ""}
                 />
               </FormControl>
               <FormMessage />
@@ -287,6 +298,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
                   placeholder="Extracted Information Schema"
                   rows={5}
                   {...field}
+                  value={field.value ?? ""}
                 />
               </FormControl>
               <FormMessage />
@@ -296,7 +308,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
         <div className="flex justify-end gap-3">
           <Button
             type="button"
-            variant="outline"
+            variant="secondary"
             onClick={async () => {
               const curl = fetchToCurl({
                 method: "POST",
@@ -316,7 +328,12 @@ function CreateNewTaskForm({ initialValues }: Props) {
           >
             Copy cURL
           </Button>
-          <Button type="submit">Create</Button>
+          <Button type="submit" disabled={mutation.isPending}>
+            {mutation.isPending && (
+              <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Create
+          </Button>
         </div>
       </form>
     </Form>