Add delete action in workflows table (#802)

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

skyvern-frontend/src/components/icons/GarbageIcon.tsx

@@ -1,5 +1,5 @@
 type Props = {
-  className: string;
+  className?: string;
 };
 
 function GarbageIcon({ className }: Props) {

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

@@ -28,7 +28,6 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { basicTimeFormat } from "@/util/timeFormat";
 import { cn } from "@/util/utils";
 import {
-  CounterClockwiseClockIcon,
   Pencil2Icon,
   PlayIcon,
   PlusIcon,
@@ -36,10 +35,10 @@ import {
 } from "@radix-ui/react-icons";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useSearchParams } from "react-router-dom";
-import { WorkflowsBetaAlertCard } from "./WorkflowsBetaAlertCard";
-import { WorkflowTitle } from "./WorkflowTitle";
-import { WorkflowCreateYAMLRequest } from "./types/workflowYamlTypes";
 import { stringify as convertToYAML } from "yaml";
+import { DeleteWorkflowButton } from "./editor/DeleteWorkflowButton";
+import { WorkflowCreateYAMLRequest } from "./types/workflowYamlTypes";
+import { WorkflowTitle } from "./WorkflowTitle";
 
 const emptyWorkflowRequest: WorkflowCreateYAMLRequest = {
   title: "New Workflow",
@@ -114,10 +113,6 @@ function Workflows() {
     },
   });
 
-  if (workflows?.length === 0 && workflowsPage === 1) {
-    return <WorkflowsBetaAlertCard />;
-  }
-
   function handleRowClick(
     event: React.MouseEvent<HTMLTableCellElement>,
     workflowPermanentId: string,
@@ -215,25 +210,6 @@ function Workflows() {
                     </TableCell>
                     <TableCell>
                       <div className="flex justify-end gap-2">
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <Button
-                                size="icon"
-                                variant="outline"
-                                onClick={(event) => {
-                                  handleIconClick(
-                                    event,
-                                    `/workflows/${workflow.workflow_permanent_id}/runs`,
-                                  );
-                                }}
-                              >
-                                <CounterClockwiseClockIcon className="h-4 w-4" />
-                              </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>View Past Runs</TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
                         <TooltipProvider>
                           <Tooltip>
                             <TooltipTrigger asChild>
@@ -272,6 +248,9 @@ function Workflows() {
                             <TooltipContent>Create New Run</TooltipContent>
                           </Tooltip>
                         </TooltipProvider>
+                        <DeleteWorkflowButton
+                          id={workflow.workflow_permanent_id}
+                        />
                       </div>
                     </TableCell>
                   </TableRow>

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

@@ -1,37 +0,0 @@
-import { Button } from "@/components/ui/button";
-
-function WorkflowsBetaAlertCard() {
-  return (
-    <div className="flex flex-col items-center rounded-lg bg-slate-900 p-4 shadow">
-      <header>
-        <h1 className="py-4 text-3xl">Workflows (Beta)</h1>
-      </header>
-      <div>Workflows through UI are currently under construction.</div>
-      <div>
-        Today, you can create and run workflows through the Skyvern API.
-      </div>
-      <div className="flex gap-4 py-4">
-        <Button variant="secondary" asChild>
-          <a
-            href="https://docs.skyvern.com/workflows/creating-workflows"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            See the workflow docs
-          </a>
-        </Button>
-        <Button asChild>
-          <a
-            href="https://meetings.hubspot.com/skyvern/demo"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Book a demo
-          </a>
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export { WorkflowsBetaAlertCard };

skyvern-frontend/src/routes/workflows/editor/DeleteWorkflowButton.tsx

@@ -0,0 +1,94 @@
+import { getClient } from "@/api/AxiosClient";
+import { GarbageIcon } from "@/components/icons/GarbageIcon";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { toast } from "@/components/ui/use-toast";
+import { useCredentialGetter } from "@/hooks/useCredentialGetter";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+type Props = {
+  id: string;
+};
+
+function DeleteWorkflowButton({ id }: Props) {
+  const credentialGetter = useCredentialGetter();
+  const queryClient = useQueryClient();
+
+  const deleteWorkflowMutation = useMutation({
+    mutationFn: async (id: string) => {
+      const client = await getClient(credentialGetter);
+      return client.delete(`/workflows/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["workflows"],
+      });
+    },
+    onError: (error: AxiosError) => {
+      toast({
+        variant: "destructive",
+        title: "Failed to delete workflow",
+        description: error.message,
+      });
+    },
+  });
+
+  return (
+    <Dialog>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DialogTrigger asChild>
+              <Button size="icon" variant="outline">
+                <GarbageIcon className="h-4 w-4" />
+              </Button>
+            </DialogTrigger>
+          </TooltipTrigger>
+          <TooltipContent>Delete Workflow</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+          <DialogDescription>This workflow will be deleted.</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="secondary">Cancel</Button>
+          </DialogClose>
+          <Button
+            variant="destructive"
+            onClick={() => {
+              deleteWorkflowMutation.mutate(id);
+            }}
+            disabled={deleteWorkflowMutation.isPending}
+          >
+            {deleteWorkflowMutation.isPending && (
+              <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { DeleteWorkflowButton };