Saving tasks in UI (#346)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

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

@@ -1,67 +0,0 @@
-import { useId, useState } from "react";
-import { CreateNewTaskForm } from "./CreateNewTaskForm";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { SampleCase } from "../types";
-import { getSampleForInitialFormValues } from "../data/sampleTaskData";
-import { Label } from "@/components/ui/label";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-
-function CreateNewTask() {
-  const [selectedCase, setSelectedCase] = useState<SampleCase>("geico");
-  const caseInputId = useId();
-
-  return (
-    <div className="flex flex-col gap-8 max-w-6xl mx-auto p-8 pt-0">
-      <div className="flex gap-4 items-center">
-        <Label htmlFor={caseInputId} className="whitespace-nowrap">
-          Select a sample:
-        </Label>
-        <Select
-          value={selectedCase}
-          onValueChange={(value) => {
-            setSelectedCase(value as SampleCase);
-          }}
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="Select a case" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="geico">Geico</SelectItem>
-            <SelectItem value="finditparts">Finditparts</SelectItem>
-            <SelectItem value="california_edd">California_EDD</SelectItem>
-            <SelectItem value="bci_seguros">bci_seguros</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-      <Card>
-        <CardHeader className="border-b-2">
-          <CardTitle className="text-lg">Create a new task</CardTitle>
-          <CardDescription>
-            Fill out the form below to create a new task. You can select a
-            sample from above to prefill the form with sample data.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <CreateNewTaskForm
-            key={selectedCase}
-            initialValues={getSampleForInitialFormValues(selectedCase)}
-          />
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-export { CreateNewTask };

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>

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

@@ -0,0 +1,61 @@
+import { useParams } from "react-router-dom";
+import { CreateNewTaskForm } from "./CreateNewTaskForm";
+import { getSampleForInitialFormValues } from "../data/sampleTaskData";
+import { SampleCase, sampleCases } from "../types";
+import { SavedTaskForm } from "./SavedTaskForm";
+import { useQuery } from "@tanstack/react-query";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { getClient } from "@/api/AxiosClient";
+
+function CreateNewTaskFormPage() {
+  const { template } = useParams();
+  const credentialGetter = useCredentialGetter();
+
+  const { data, isFetching } = useQuery({
+    queryKey: ["workflows", template],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      return client
+        .get(`/workflows/${template}`)
+        .then((response) => response.data);
+    },
+    enabled: !!template && !sampleCases.includes(template as SampleCase),
+  });
+
+  if (!template) {
+    return <div>Invalid template</div>;
+  }
+
+  if (sampleCases.includes(template as SampleCase)) {
+    return (
+      <CreateNewTaskForm
+        key={template}
+        initialValues={getSampleForInitialFormValues(template as SampleCase)}
+      />
+    );
+  }
+
+  if (isFetching) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <SavedTaskForm
+      initialValues={{
+        title: data.title,
+        description: data.description,
+        webhookCallbackUrl: data.webhook_callback_url,
+        proxyLocation: data.proxy_location,
+        url: data.workflow_definition.blocks[0].url,
+        navigationGoal: data.workflow_definition.blocks[0].navigation_goal,
+        dataExtractionGoal:
+          data.workflow_definition.blocks[0].data_extraction_goal,
+        extractedInformationSchema:
+          data.workflow_definition.blocks[0].data_schema,
+        navigationPayload: data.workflow_definition.parameters[0].default_value,
+      }}
+    />
+  );
+}
+
+export { CreateNewTaskFormPage };

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

@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom";
+
+function CreateNewTaskLayout() {
+  return (
+    <main className="max-w-6xl mx-auto px-8">
+      <Outlet />
+    </main>
+  );
+}
+
+export { CreateNewTaskLayout };

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

@@ -0,0 +1,144 @@
+import { getClient } from "@/api/AxiosClient";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { toast } from "@/components/ui/use-toast";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { DotsHorizontalIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+type Props = {
+  workflowId: string;
+  title: string;
+  description: string;
+  url: string;
+};
+
+function SavedTaskCard({ workflowId, title, url, description }: Props) {
+  const [open, setOpen] = useState(false);
+  const credentialGetter = useCredentialGetter();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+
+  const deleteTaskMutation = useMutation({
+    mutationFn: async (id: string) => {
+      const client = await getClient(credentialGetter);
+      return client
+        .delete(`/workflows/${id}`)
+        .then((response) => response.data);
+    },
+    onError: (error) => {
+      toast({
+        variant: "destructive",
+        title: "There was an error while deleting the template",
+        description: error.message,
+      });
+      setOpen(false);
+    },
+    onSuccess: () => {
+      toast({
+        title: "Template deleted",
+        description: "Template deleted successfully",
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["workflows"],
+      });
+      setOpen(false);
+      navigate("/create");
+    },
+  });
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex justify-between items-center">
+          <span className="overflow-hidden text-ellipsis whitespace-nowrap ">
+            {title}
+          </span>
+          <Dialog open={open} onOpenChange={setOpen}>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <DotsHorizontalIcon className="cursor-pointer" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-56">
+                <DropdownMenuLabel>Template Actions</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DialogTrigger asChild>
+                  <DropdownMenuItem
+                    onSelect={() => {
+                      setOpen(true);
+                    }}
+                  >
+                    Delete Template
+                  </DropdownMenuItem>
+                </DialogTrigger>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Are you absolutely sure?</DialogTitle>
+                <DialogDescription>
+                  Are you sure you want to delete this task template?
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <Button variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+                <Button
+                  variant="destructive"
+                  onClick={() => {
+                    deleteTaskMutation.mutate(workflowId);
+                  }}
+                  disabled={deleteTaskMutation.isPending}
+                >
+                  {deleteTaskMutation.isPending && (
+                    <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+                  )}
+                  Delete
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </CardTitle>
+        <CardDescription className="overflow-hidden text-ellipsis whitespace-nowrap">
+          {url}
+        </CardDescription>
+      </CardHeader>
+      <CardContent
+        className="h-48 overflow-scroll hover:bg-muted/40 cursor-pointer"
+        onClick={() => {
+          navigate(workflowId);
+        }}
+      >
+        {description}
+      </CardContent>
+    </Card>
+  );
+}
+
+export { SavedTaskCard };

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

@@ -0,0 +1,452 @@
+import { getClient } from "@/api/AxiosClient";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useToast } from "@/components/ui/use-toast";
+import { useApiCredential } from "@/hooks/useApiCredential";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { apiBaseUrl } from "@/util/env";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { InfoCircledIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { ToastAction } from "@radix-ui/react-toast";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import fetchToCurl from "fetch-to-curl";
+import { useForm, useFormState } from "react-hook-form";
+import { Link, useParams } from "react-router-dom";
+import { stringify as convertToYAML } from "yaml";
+import { z } from "zod";
+import {
+  dataExtractionGoalDescription,
+  extractedInformationSchemaDescription,
+  navigationGoalDescription,
+  navigationPayloadDescription,
+  urlDescription,
+  webhookCallbackUrlDescription,
+} from "../data/descriptionHelperContent";
+
+const savedTaskFormSchema = z.object({
+  title: z.string().min(1, "Title is required"),
+  description: z.string(),
+  url: z.string().url({
+    message: "Invalid URL",
+  }),
+  proxyLocation: z.string().or(z.null()).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 SavedTaskFormValues = z.infer<typeof savedTaskFormSchema>;
+
+type Props = {
+  initialValues: SavedTaskFormValues;
+};
+
+function createTaskRequestObject(formValues: SavedTaskFormValues) {
+  return {
+    url: formValues.url,
+    webhook_callback_url: formValues.webhookCallbackUrl ?? "",
+    navigation_goal: formValues.navigationGoal ?? "",
+    data_extraction_goal: formValues.dataExtractionGoal ?? "",
+    proxy_location: formValues.proxyLocation,
+    error_code_mapping: null,
+    navigation_payload: formValues.navigationPayload,
+    extracted_information_schema: formValues.extractedInformationSchema,
+  };
+}
+
+function createTaskTemplateRequestObject(values: SavedTaskFormValues) {
+  return {
+    title: values.title,
+    description: values.description,
+    webhook_callback_url: values.webhookCallbackUrl,
+    proxy_location: values.proxyLocation,
+    workflow_definition: {
+      parameters: [
+        {
+          parameter_type: "workflow",
+          workflow_parameter_type: "json",
+          key: "navigation_payload",
+          default_value: JSON.stringify(values.navigationPayload),
+        },
+      ],
+      blocks: [
+        {
+          block_type: "task",
+          label: "Task 1",
+          url: values.url,
+          navigation_goal: values.navigationGoal,
+          data_extraction_goal: values.dataExtractionGoal,
+          data_schema: values.extractedInformationSchema,
+        },
+      ],
+    },
+  };
+}
+
+function SavedTaskForm({ initialValues }: Props) {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const credentialGetter = useCredentialGetter();
+  const apiCredential = useApiCredential();
+  const { template } = useParams();
+
+  const form = useForm<SavedTaskFormValues>({
+    resolver: zodResolver(savedTaskFormSchema),
+    defaultValues: initialValues,
+  });
+
+  const { isDirty } = useFormState({ control: form.control });
+
+  const createTaskMutation = useMutation({
+    mutationFn: async (formValues: SavedTaskFormValues) => {
+      const taskRequest = createTaskRequestObject(formValues);
+      const client = await getClient(credentialGetter);
+      return client.post<
+        ReturnType<typeof createTaskRequestObject>,
+        { data: { task_id: string } }
+      >("/tasks", taskRequest);
+    },
+    onError: (error) => {
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: error.message,
+      });
+    },
+    onSuccess: (response) => {
+      toast({
+        title: "Task Created",
+        description: `${response.data.task_id} created successfully.`,
+        action: (
+          <ToastAction altText="View">
+            <Button asChild>
+              <Link to={`/tasks/${response.data.task_id}`}>View</Link>
+            </Button>
+          </ToastAction>
+        ),
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["tasks"],
+      });
+    },
+  });
+
+  const saveTaskMutation = useMutation({
+    mutationFn: async (formValues: SavedTaskFormValues) => {
+      const saveTaskRequest = createTaskTemplateRequestObject(formValues);
+      const client = await getClient(credentialGetter);
+      const yaml = convertToYAML(saveTaskRequest);
+      return client
+        .put(`/workflows/${template}`, yaml, {
+          headers: {
+            "Content-Type": "text/plain",
+          },
+        })
+        .then((response) => response.data);
+    },
+    onError: (error) => {
+      toast({
+        variant: "destructive",
+        title: "There was an error while saving changes",
+        description: error.message,
+      });
+    },
+    onSuccess: () => {
+      toast({
+        title: "Changes saved",
+        description: "Changes saved successfully",
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["workflows", template],
+      });
+    },
+  });
+
+  function onSubmit(values: SavedTaskFormValues) {
+    createTaskMutation.mutate(values);
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="title"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Title *</FormLabel>
+              <FormControl>
+                <Input placeholder="Title" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Textarea placeholder="Description" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="url"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <div className="flex gap-2">
+                  URL *
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <InfoCircledIcon />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-[250px]">
+                        <p>{urlDescription}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              </FormLabel>
+              <FormControl>
+                <Input placeholder="example.com" {...field} />
+              </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>
+              <FormControl>
+                <Input
+                  placeholder="example.com"
+                  {...field}
+                  value={field.value === null ? "" : field.value}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="navigationGoal"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <div className="flex gap-2">
+                  Navigation Goal
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <InfoCircledIcon />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-[250px]">
+                        <p>{navigationGoalDescription}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  rows={5}
+                  placeholder="Navigation Goal"
+                  {...field}
+                  value={field.value === null ? "" : field.value}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="dataExtractionGoal"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <div className="flex gap-2">
+                  Data Extraction Goal
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <InfoCircledIcon />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-[250px]">
+                        <p>{dataExtractionGoalDescription}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  rows={5}
+                  placeholder="Data Extraction Goal"
+                  {...field}
+                  value={field.value === null ? "" : field.value}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="navigationPayload"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <div className="flex gap-2">
+                  Navigation Payload
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <InfoCircledIcon />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-[250px]">
+                        <p>{navigationPayloadDescription}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  rows={5}
+                  placeholder="Navigation Payload"
+                  {...field}
+                  value={field.value ?? ""}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="extractedInformationSchema"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <div className="flex gap-2">
+                  Extracted Information Schema
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <InfoCircledIcon />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-[250px]">
+                        <p>{extractedInformationSchemaDescription}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              </FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Extracted Information Schema"
+                  rows={5}
+                  {...field}
+                  value={field.value ?? ""}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="flex justify-end gap-3">
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={async () => {
+              const curl = fetchToCurl({
+                method: "POST",
+                url: `${apiBaseUrl}/tasks`,
+                body: createTaskRequestObject(form.getValues()),
+                headers: {
+                  "Content-Type": "application/json",
+                  "x-api-key": apiCredential ?? "<your-api-key>",
+                },
+              });
+              await navigator.clipboard.writeText(curl);
+              toast({
+                title: "Copied cURL",
+                description: "cURL copied to clipboard",
+              });
+            }}
+          >
+            Copy cURL
+          </Button>
+          {isDirty && (
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => {
+                saveTaskMutation.mutate(form.getValues());
+              }}
+              disabled={saveTaskMutation.isPending}
+            >
+              {saveTaskMutation.isPending && (
+                <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Save Changes
+            </Button>
+          )}
+
+          <Button type="submit" disabled={createTaskMutation.isPending}>
+            {createTaskMutation.isPending && (
+              <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Run Task
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}
+
+export { SavedTaskForm };

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

@@ -0,0 +1,134 @@
+import { getClient } from "@/api/AxiosClient";
+import { queryClient } from "@/api/QueryClient";
+import { WorkflowApiResponse } from "@/api/types";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { toast } from "@/components/ui/use-toast";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { PlusIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { stringify as convertToYAML } from "yaml";
+import { SavedTaskCard } from "./SavedTaskCard";
+
+function createEmptyTaskTemplate() {
+  return {
+    title: "New Template",
+    description: "",
+    webhook_callback_url: null,
+    proxy_location: "NONE",
+    workflow_definition: {
+      parameters: [
+        {
+          parameter_type: "workflow",
+          workflow_parameter_type: "json",
+          key: "navigation_payload",
+          default_value: JSON.stringify({}),
+        },
+      ],
+      blocks: [
+        {
+          block_type: "task",
+          label: "New Template",
+          url: "https://example.com",
+          navigation_goal: "",
+          data_extraction_goal: null,
+          data_schema: null,
+        },
+      ],
+    },
+  };
+}
+
+function SavedTasks() {
+  const credentialGetter = useCredentialGetter();
+  const navigate = useNavigate();
+
+  const { data } = useQuery<Array<WorkflowApiResponse>>({
+    queryKey: ["workflows"],
+    queryFn: async () => {
+      const client = await getClient(credentialGetter);
+      return client.get("/workflows").then((response) => response.data);
+    },
+  });
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const request = createEmptyTaskTemplate();
+      const client = await getClient(credentialGetter);
+      const yaml = convertToYAML(request);
+      return client
+        .post<string, { data: { workflow_permanent_id: string } }>(
+          "/workflows",
+          yaml,
+          {
+            headers: {
+              "Content-Type": "text/plain",
+            },
+          },
+        )
+        .then((response) => response.data);
+    },
+    onError: (error) => {
+      toast({
+        variant: "destructive",
+        title: "There was an error while saving changes",
+        description: error.message,
+      });
+    },
+    onSuccess: (response) => {
+      toast({
+        title: "New template created",
+        description: "Your template was created successfully",
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["workflows"],
+      });
+      navigate(`/create/${response.workflow_permanent_id}`);
+    },
+  });
+
+  return (
+    <div className="grid grid-cols-4 gap-4">
+      <Card
+        onClick={() => {
+          if (mutation.isPending) {
+            return;
+          }
+          mutation.mutate();
+        }}
+      >
+        <CardHeader>
+          <CardTitle>New Template</CardTitle>
+          <CardDescription className="whitespace-nowrap overflow-hidden text-ellipsis">
+            Create your own template
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex h-48 justify-center items-center hover:bg-muted/40 cursor-pointer">
+          {!mutation.isPending && <PlusIcon className="w-12 h-12" />}
+          {mutation.isPending && (
+            <ReloadIcon className="animate-spin w-12 h-12" />
+          )}
+        </CardContent>
+      </Card>
+      {data?.map((workflow) => {
+        return (
+          <SavedTaskCard
+            key={workflow.workflow_permanent_id}
+            workflowId={workflow.workflow_permanent_id}
+            title={workflow.title}
+            description={workflow.description}
+            url={workflow.workflow_definition.blocks[0]?.url ?? ""}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export { SavedTasks };

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

@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const taskTemplateFormSchema = z.object({
+  title: z.string().min(1, "Title can't be empty"),
+  description: z.string(),
+});
+
+export type TaskTemplateFormValues = z.infer<typeof taskTemplateFormSchema>;

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

@@ -0,0 +1,86 @@
+import { SampleCase } from "../types";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { useNavigate } from "react-router-dom";
+import { SavedTasks } from "./SavedTasks";
+import { getSample } from "../data/sampleTaskData";
+
+const templateSamples: {
+  [key in SampleCase]: {
+    title: string;
+    description: string;
+  };
+} = {
+  blank: {
+    title: "Blank",
+    description: "Create task from a blank template",
+  },
+  geico: {
+    title: "Geico",
+    description: "Generate an auto insurance quote",
+  },
+  finditparts: {
+    title: "Finditparts",
+    description: "Find a product and add it to cart",
+  },
+  california_edd: {
+    title: "California_EDD",
+    description: "Fill the employer services online enrollment form",
+  },
+  bci_seguros: {
+    title: "bci_seguros",
+    description: "Generate an auto insurance quote",
+  },
+};
+
+function TaskTemplates() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="max-w-6xl mx-auto px-8">
+      <section className="py-4">
+        <header>
+          <h1 className="text-3xl">Skyvern Templates</h1>
+        </header>
+        <Separator className="mt-2 mb-8" />
+        <div className="grid grid-cols-4 gap-4">
+          {Object.entries(templateSamples).map(([sampleKey, sample]) => {
+            return (
+              <Card key={sampleKey}>
+                <CardHeader>
+                  <CardTitle>{sample.title}</CardTitle>
+                  <CardDescription className="overflow-hidden text-ellipsis whitespace-nowrap">
+                    {getSample(sampleKey as SampleCase).url}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent
+                  className="h-48 hover:bg-muted/40 cursor-pointer"
+                  onClick={() => {
+                    navigate(sampleKey);
+                  }}
+                >
+                  {sample.description}
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </section>
+      <section className="py-4">
+        <header>
+          <h1 className="text-3xl">Your Templates</h1>
+        </header>
+        <Separator className="mt-2 mb-8" />
+        <SavedTasks />
+      </section>
+    </div>
+  );
+}
+
+export { TaskTemplates };