Add confirm dialog

backend/diagrams/diagram_dvir.json

@@ -1,40 +0,0 @@
-{
-  "nodes": [
-    {
-      "id": "1",
-      "type": "custom",
-      "data": {
-        "label": "Node 1",
-        "icon": "https://s3.dvirlabs.com/lab-icons/default.svg"
-      },
-      "position": {
-        "x": 303.3305220688578,
-        "y": 269.54671638680003
-      },
-      "width": 104,
-      "height": 104
-    },
-    {
-      "id": "2",
-      "type": "custom",
-      "data": {
-        "label": "Node 2",
-        "icon": "https://s3.dvirlabs.com/lab-icons/default.svg"
-      },
-      "position": {
-        "x": 87.45932948916324,
-        "y": 183.0493678043483
-      },
-      "width": 104,
-      "height": 104
-    }
-  ],
-  "edges": [
-    {
-      "id": "reactflow__edge-1source-left-2target-right",
-      "source": "1",
-      "target": "2",
-      "animated": true
-    }
-  ]
-}

frontend/package.json

@@ -10,7 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^19.1.0",
+    "react-confirm-alert": "^3.0.6",
     "react-dom": "^19.1.0",
     "react-toastify": "^11.0.5",
     "reactflow": "^11.11.4"

frontend/src/components/Diagram.jsx

@@ -7,6 +7,9 @@ import ReactFlow, {
   useEdgesState,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
+import { confirmAlert } from 'react-confirm-alert';
+import 'react-confirm-alert/src/react-confirm-alert.css';
+import '../styles/ConfirmDialog.css';
 import {
   fetchDiagramByName,
   saveDiagramByName,
@@ -155,21 +158,37 @@ function Diagram() {
       toast.warn("❌ Cannot delete 'default' diagram or nothing selected.");
       return;
     }
-    if (!confirm(`Delete "${diagramName}"?`)) return;
-    try {
-      await deleteDiagramByName(diagramName);
-      const updatedList = diagramList.filter(name => name !== diagramName);
-      setDiagramList(updatedList);
-      const newSelected = updatedList[0] || null;
-      setDiagramName(newSelected);
-      setNodes([]);
-      setEdges([]);
-      toast.success(`🗑️ Diagram "${diagramName}" deleted`);
-    } catch (err) {
-      toast.error(`❌ Failed to delete diagram "${diagramName}"`);
-    }
+
+    confirmAlert({
+      title: 'Are you sure?',
+      message: `Delete "${diagramName}"?`,
+      buttons: [
+        {
+          label: 'Yes',
+          onClick: async () => {
+            try {
+              await deleteDiagramByName(diagramName);
+              const updatedList = diagramList.filter(name => name !== diagramName);
+              setDiagramList(updatedList);
+              const newSelected = updatedList[0] || null;
+              setDiagramName(newSelected);
+              setNodes([]);
+              setEdges([]);
+              toast.success(`🗑️ Diagram "${diagramName}" deleted`);
+            } catch (err) {
+              toast.error(`❌ Failed to delete diagram "${diagramName}"`);
+            }
+          }
+        },
+        {
+          label: 'No',
+          onClick: () => {} // do nothing
+        }
+      ]
+    });
   };
 
+
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
       <div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10, display: 'flex', alignItems: 'center', gap: 10 }}>

frontend/src/styles/ConfirmDialog.css

@@ -0,0 +1,24 @@
+.react-confirm-alert-overlay {
+  background: rgba(0, 0, 0, 0.6); /* כהה ונעים לעין */
+  z-index: 1000;
+}
+
+.react-confirm-alert-body {
+  background-color: #e6e3e3;
+  color: #333;
+}
+
+.react-confirm-alert-button-group button {
+  margin: 0 10px;
+  padding: 8px 18px;
+  border: none;
+  border-radius: 6px;
+  font-weight: bold;
+  background-color: #333;
+  color: white;
+  cursor: pointer;
+}
+
+.react-confirm-alert-button-group button:hover {
+  background-color: #555;
+}