add confirm button, update actions

frontend/src/components/util.tsx

@@ -155,3 +155,29 @@ export const ActionWithDialog = ({
     </Dialog>
   );
 };
+
+export const ConfirmButton = ({
+  title,
+  icon,
+  intent,
+  disabled,
+  onClick,
+}: {
+  title: string;
+  icon: ReactNode;
+  intent?: ButtonProps["intent"];
+  disabled?: boolean;
+  onClick?: () => void;
+}) => {
+  const [confirmed, set] = useState(false);
+
+  return (
+    <ActionButton
+      title={confirmed ? "Confirm" : title}
+      icon={icon}
+      intent={intent}
+      disabled={disabled}
+      onClick={confirmed ? onClick : () => set(true)}
+    />
+  );
+};

frontend/src/resources/build/components/actions.tsx

@@ -1,11 +1,11 @@
-import { ActionButton } from "@components/util";
+import { ConfirmButton } from "@components/util";
 import { useExecute } from "@hooks";
 import { Hammer } from "lucide-react";
 
 export const RebuildBuild = ({ buildId }: { buildId: string }) => {
   const { mutate, isLoading } = useExecute("RunBuild");
   return (
-    <ActionButton
+    <ConfirmButton
       intent="success"
       title="Build"
       icon={<Hammer className="h-4 w-4" />}

frontend/src/resources/deployment/components/actions.tsx

@@ -1,17 +1,7 @@
-import { ActionButton, ActionWithDialog } from "@components/util";
+import { ActionWithDialog, ConfirmButton } from "@components/util";
 import { RefreshCw, Play, Trash, Pause } from "lucide-react";
-import { useExecute, useRead, useWrite } from "@hooks";
+import { useExecute, useRead } from "@hooks";
 import { DockerContainerState } from "@monitor/client/dist/types";
-import { useState } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@ui/dialog";
-import { Input } from "@ui/input";
-import { Button } from "@ui/button";
 import { useNavigate } from "react-router-dom";
 
 interface DeploymentId {
@@ -23,7 +13,7 @@ export const RedeployContainer = ({ deployment_id }: DeploymentId) => {
   const deployments = useRead("ListDeployments", {}).data;
   const deployment = deployments?.find((d) => d.id === deployment_id);
   return (
-    <ActionButton
+    <ConfirmButton
       title={deployment?.status ? "Redeploy" : "Deploy"}
       intent="success"
       icon={<RefreshCw className="h-4 w-4" />}
@@ -94,47 +84,19 @@ export const RemoveContainer = ({ deployment_id }: DeploymentId) => {
 
 export const DeleteDeployment = ({ id }: { id: string }) => {
   const nav = useNavigate();
-  const deployments = useRead("ListDeployments", {}).data;
-  const deployment = deployments?.find((d) => d.id === id);
-  const { mutate, isLoading } = useWrite("DeleteDeployment", {
-    onSuccess: () => nav("/deployments"),
-  });
-  const [open, setOpen] = useState(false);
-  const [name, setName] = useState("");
+  const { data: d } = useRead("GetDeployment", { id });
+  const { mutateAsync, isLoading } = useExecute("RemoveContainer");
 
-  return (
-    <>
-      <ActionButton
-        title="Delete"
-        intent="danger"
-        icon={<Trash className="h-4 w-4" />}
-        onClick={() => setOpen(true)}
-        disabled={isLoading}
-      />
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Delete Deployment</DialogTitle>
-          </DialogHeader>
-          <div className="flex flex-col gap-2">
-            <p>
-              Are you sure you wish to delete this deployment? If so, please
-              type in <b>{deployment?.name}</b> below
-            </p>
-            <Input value={name} onChange={(e) => setName(e.target.value)} />
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              intent="danger"
-              disabled={name !== deployment?.name || isLoading}
-              onClick={() => mutate({ id })}
-            >
-              Delete
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
+  if (!d) return null;
+  <ActionWithDialog
+    name={d.name}
+    title="Delete Deployment"
+    intent="danger"
+    icon={<Trash className="h-4 w-4" />}
+    onClick={async () => {
+      await mutateAsync({ deployment_id: id });
+      nav("/");
+    }}
+    disabled={isLoading}
+  />;
 };