Saving tasks in UI (#346)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
2024-05-20 08:27:36 -07:00
parent 5acdddf67e
commit dc10ea3c32
27 changed files with 1513 additions and 325 deletions
--- a/skyvern-frontend/src/routes/tasks/create/SavedTaskCard.tsx
+++ b/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 };