add pop up

Author: GREENRAT-K405

src/component/TabBar.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
     MdEdit, MdClose, MdAdd,
 } from 'react-icons/md';
@@ -8,19 +8,34 @@ import localStorageManager from '../graph-builder/local-storage-manager';
 import { actionType as T } from '../reducer';
 import { newProject, editDetails } from '../toolbarActions/toolbarFunctions';
 import './tabBar.css';
+import ConfirmModal from './modals/ConfirmModal';
 
 const TabBar = ({ superState, dispatcher }) => {
-    const closeTab = (i, e) => {
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [tabToClose, setTabToClose] = useState(null);
+
+    const handleRequestCloseTab = (i, e) => {
         e.stopPropagation();
-        // eslint-disable-next-line no-alert
-        if (!window.confirm('Do you confirm to close the tab? This action is irreversable.')) return;
+        setTabToClose(i);
+        setConfirmOpen(true);
+    };
+
+    const handleConfirmClose = () => {
+        const i = tabToClose;
+        setConfirmOpen(false);
+        setTabToClose(null);
         localStorageManager.remove(superState.graphs[i] ? superState.graphs[i].graphID : null);
         dispatcher({ type: T.REMOVE_GRAPH, payload: i });
         if (!superState.curGraphIndex && superState.graphs.length === 1) {
             dispatcher({ type: T.SET_CUR_INSTANCE, payload: null });
             dispatcher({ type: T.SET_CUR_INDEX, payload: -1 });
         }
     };
+
+    const handleCancelClose = () => {
+        setConfirmOpen(false);
+        setTabToClose(null);
+    };
     const editCur = (e) => {
         e.stopPropagation();
         editDetails(superState, dispatcher);
@@ -80,7 +95,7 @@ const TabBar = ({ superState, dispatcher }) => {
                     ) : <></>}
                     <button
                         className="tab-act close"
-                        onClick={closeTab.bind(this, i)}
+                        onClick={handleRequestCloseTab.bind(this, i)}
                         type="button"
                         data-tip="Close current Workflow (Ctrl + Shift + L)"
                         data-for="header-tab"
@@ -90,6 +105,13 @@ const TabBar = ({ superState, dispatcher }) => {
                     <ReactTooltip place="bottom" type="dark" effect="solid" id="header-tab" />
                 </div>
             ))}
+            <ConfirmModal
+                isOpen={confirmOpen}
+                title="Close Tab"
+                message="Do you confirm to close the tab? This action is irreversible."
+                onConfirm={handleConfirmClose}
+                onCancel={handleCancelClose}
+            />
         </div>
     );
 };

src/component/modals/ConfirmModal.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ParentModal from './ParentModal';
+import './confirmModal.css';
+
+const ConfirmModal = ({
+    isOpen, title, message, onConfirm, onCancel,
+}) => (
+    <ParentModal ModelOpen={isOpen} closeModal={onCancel} title={title}>
+        <div className="confirm-modal-content">
+            <div className="confirm-modal-message">{message}</div>
+            <div className="confirm-modal-actions">
+                <button type="button" className="confirm-btn" onClick={onConfirm}>Yes</button>
+                <button type="button" className="cancel-btn" onClick={onCancel}>No</button>
+            </div>
+        </div>
+    </ParentModal>
+);
+
+export default ConfirmModal;

src/component/modals/confirmModal.css

@@ -0,0 +1,34 @@
+.confirm-modal-content {
+  padding: 20px;
+  text-align: center;
+}
+.confirm-modal-message {
+  margin-bottom: 20px;
+  font-size: 1.1em;
+}
+.confirm-modal-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+.confirm-btn, .cancel-btn {
+  padding: 8px 20px;
+  font-size: 1em;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.confirm-btn {
+  background: #d9534f;
+  color: #fff;
+}
+.cancel-btn {
+  background: #f0f0f0;
+  color: #333;
+}
+.confirm-btn:hover {
+  background: #c9302c;
+}
+.cancel-btn:hover {
+  background: #e0e0e0;
+}