Merge pull request #820 from 190km/prevent-when-closing-terminal

feat: add prevent dialog when leaving a terminal

apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx

@@ -1,19 +1,22 @@
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import dynamic from "next/dynamic";
+import { useState } from "react";
 
 const Terminal = dynamic(
   () => import("./docker-terminal").then((e) => e.DockerTerminal),
   {
     ssr: false,
-	},
+  }
 );
 
 interface Props {
@@ -27,8 +30,27 @@ export const DockerTerminalModal = ({
   containerId,
   serverId,
 }: Props) => {
+  const [mainDialogOpen, setMainDialogOpen] = useState(false);
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+
+  const handleMainDialogOpenChange = (open: boolean) => {
+    if (!open) {
+      setConfirmDialogOpen(true);
+    } else {
+      setMainDialogOpen(true);
+    }
+  };
+
+  const handleConfirm = () => {
+    setConfirmDialogOpen(false);
+    setMainDialogOpen(false);
+  };
+
+  const handleCancel = () => {
+    setConfirmDialogOpen(false);
+  };
   return (
-		<Dialog>
+    <Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
       <DialogTrigger asChild>
         <DropdownMenuItem
           className="w-full cursor-pointer space-x-3"
@@ -50,6 +72,22 @@ export const DockerTerminalModal = ({
           containerId={containerId}
           serverId={serverId || ""}
         />
+        <Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Are you sure you want to close the terminal?</DialogTitle>
+              <DialogDescription>
+                By clicking the confirm button, the terminal will be closed.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button variant="outline" onClick={handleCancel}>
+                Cancel
+              </Button>
+              <Button onClick={handleConfirm}>Confirm</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </DialogContent>
     </Dialog>
   );

apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx

@@ -1,7 +1,9 @@
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -25,11 +27,11 @@ import { useEffect, useState } from "react";
 const Terminal = dynamic(
   () =>
     import("@/components/dashboard/docker/terminal/docker-terminal").then(
-			(e) => e.DockerTerminal,
+      (e) => e.DockerTerminal
     ),
   {
     ssr: false,
-	},
+  }
 );
 
 interface Props {
@@ -46,17 +48,37 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
     },
     {
       enabled: !!appName,
-		},
+    }
   );
   const [containerId, setContainerId] = useState<string | undefined>();
+  const [mainDialogOpen, setMainDialogOpen] = useState(false);
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+
+  const handleMainDialogOpenChange = (open: boolean) => {
+    if (!open) {
+      setConfirmDialogOpen(true);
+    } else {
+      setMainDialogOpen(true);
+    }
+  };
+
+  const handleConfirm = () => {
+    setConfirmDialogOpen(false);
+    setMainDialogOpen(false);
+  };
+
+  const handleCancel = () => {
+    setConfirmDialogOpen(false);
+  };
 
   useEffect(() => {
     if (data && data?.length > 0) {
       setContainerId(data[0]?.containerId);
     }
   }, [data]);
+
   return (
-		<Dialog>
+    <Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent className="max-h-[85vh]    overflow-y-auto sm:max-w-7xl">
         <DialogHeader>
@@ -96,6 +118,24 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
           id="terminal"
           containerId={containerId || "select-a-container"}
         />
+        <Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>
+                Are you sure you want to close the terminal?
+              </DialogTitle>
+              <DialogDescription>
+                By clicking the confirm button, the terminal will be closed.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button variant="outline" onClick={handleCancel}>
+                Cancel
+              </Button>
+              <Button onClick={handleConfirm}>Confirm</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </DialogContent>
     </Dialog>
   );