From 440c2fe087e3d41c5fb554e1387294d03f3e5d53 Mon Sep 17 00:00:00 2001 From: "samanhappy@qq.com" Date: Tue, 1 Apr 2025 22:36:05 +0800 Subject: [PATCH] feat: add DeleteDialog component for server removal confirmation; integrate with ServerCard --- public/components/DeleteDialog.jsx | 32 ++++++++++++++++++++++++++++++ public/index.html | 1 + public/js/app.js | 18 ++++++++++++++--- 3 files changed, 48 insertions(+), 3 deletions(-) create mode 100644 public/components/DeleteDialog.jsx diff --git a/public/components/DeleteDialog.jsx b/public/components/DeleteDialog.jsx new file mode 100644 index 0000000..b8df23d --- /dev/null +++ b/public/components/DeleteDialog.jsx @@ -0,0 +1,32 @@ +function DeleteDialog({ isOpen, onClose, onConfirm, serverName }) { + return ( +
+
+
+

Delete Server

+
+

+ Are you sure you want to delete server {serverName}? This action cannot be undone. +

+
+
+ + +
+
+
+
+ ); +} + +module.exports = DeleteDialog; diff --git a/public/index.html b/public/index.html index 93bdbb2..412a01d 100644 --- a/public/index.html +++ b/public/index.html @@ -12,6 +12,7 @@
+ \ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js index 9d7f223..94ba533 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -44,12 +44,16 @@ function ToolCard({ tool }) { function ServerCard({ server, onRemove }) { const [isExpanded, setIsExpanded] = useState(false); + const [showDeleteDialog, setShowDeleteDialog] = useState(false); const handleRemove = (e) => { e.stopPropagation(); - if (confirm(`Are you sure you want to delete server ${server.name}?`)) { - onRemove(server.name); - } + setShowDeleteDialog(true); + }; + + const handleConfirmDelete = () => { + onRemove(server.name); + setShowDeleteDialog(false); }; return ( @@ -72,6 +76,14 @@ function ServerCard({ server, onRemove }) { + + setShowDeleteDialog(false)} + onConfirm={handleConfirmDelete} + serverName={server.name} + /> + {isExpanded && server.tools && (

Available Tools