From 851b84cecfe89ebda4fb45a4bc4c556223f7f56d Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Fri, 11 Oct 2024 08:42:31 -0700
Subject: [PATCH] Make stream zoomable (#961)

---
 .../src/components/ZoomableImage.tsx          |  2 +-
 .../src/routes/tasks/detail/TaskActions.tsx   |  3 +-
 .../src/routes/workflows/WorkflowRun.tsx      |  3 +-
 .../workflows/editor/DeleteWorkflowButton.tsx | 94 +++++++++++++++++++
 4 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 skyvern-frontend/src/routes/workflows/editor/DeleteWorkflowButton.tsx

diff --git a/skyvern-frontend/src/components/ZoomableImage.tsx b/skyvern-frontend/src/components/ZoomableImage.tsx
index 4d37c0e33..d205d757f 100644
--- a/skyvern-frontend/src/components/ZoomableImage.tsx
+++ b/skyvern-frontend/src/components/ZoomableImage.tsx
@@ -33,7 +33,7 @@ function ZoomableImage(props: HTMLImageElementProps) {
       <img
         {...props}
         onClick={openModal}
-        className={clsx("cursor-pointer object-contain", props.className)}
+        className={clsx("cursor-zoom-in object-contain", props.className)}
       />
       {modalOpen && (
         <div
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
index 3be2c729f..6af2513b1 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx
@@ -16,6 +16,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { toast } from "@/components/ui/use-toast";
 import { envCredential } from "@/util/env";
 import { statusIsNotFinalized, statusIsRunningOrQueued } from "../types";
+import { ZoomableImage } from "@/components/ZoomableImage";
 
 type StreamMessage = {
   task_id: string;
@@ -227,7 +228,7 @@ function TaskActions() {
     if (task?.status === Status.Running && streamImgSrc.length > 0) {
       return (
         <div className="h-full w-full">
-          <img src={`data:image/png;base64,${streamImgSrc}`} />
+          <ZoomableImage src={`data:image/png;base64,${streamImgSrc}`} />
         </div>
       );
     }
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index 6d6983b33..e2c875033 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -46,6 +46,7 @@ import { useWorkflowQuery } from "./hooks/useWorkflowQuery";
 import fetchToCurl from "fetch-to-curl";
 import { useApiCredential } from "@/hooks/useApiCredential";
 import { copyText } from "@/util/copyText";
+import { ZoomableImage } from "@/components/ZoomableImage";
 
 type StreamMessage = {
   task_id: string;
@@ -214,7 +215,7 @@ function WorkflowRun() {
     if (workflowRun?.status === Status.Running && streamImgSrc.length > 0) {
       return (
         <div className="h-full w-full">
-          <img src={`data:image/png;base64,${streamImgSrc}`} />
+          <ZoomableImage src={`data:image/png;base64,${streamImgSrc}`} />
         </div>
       );
     }
diff --git a/skyvern-frontend/src/routes/workflows/editor/DeleteWorkflowButton.tsx b/skyvern-frontend/src/routes/workflows/editor/DeleteWorkflowButton.tsx
new file mode 100644
index 000000000..5bd7bdbd5
--- /dev/null
+++ b/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 };