Saving tasks in UI (#346)

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

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 };