Vps 75/when a scenario is being deleted, a pop up appears to prevent the user from deleting a scenario by accident

frontend/src/components/DeleteModal.jsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import Button from "@mui/material/Button";
+import { Dialog, DialogActions, DialogTitle } from "@mui/material";
+import DeleteButton from "./DeleteButton";
+
+function DeleteModal({ onDelete, currentScenario }) {
+  const [open, setOpen] = useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleDelete = () => {
+    onDelete();
+    handleClose();
+  };
+
+  return (
+    <div>
+      <DeleteButton
+        className="btn side"
+        variant="contained"
+        onClick={handleClickOpen}
+        disabled={!currentScenario}
+      >
+        Delete
+      </DeleteButton>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>Are you sure you want to delete the scenario?</DialogTitle>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Go Back
+          </Button>
+          <DeleteButton onClick={handleDelete}>Delete</DeleteButton>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}
+
+export default DeleteModal;

frontend/src/components/SideBar.jsx

@@ -6,9 +6,9 @@ import ScenarioContext from "../context/ScenarioContext";
 import AccessLevel from "../enums/route.access.level";
 import { useDelete, usePost } from "../hooks/crudHooks";
 import styles from "../styling/SideBar.module.scss";
-import DeleteButton from "./DeleteButton";
 import HelpButton from "./HelpButton";
 import CreateScenerioCard from "./CreateScenarioCard";
+import DeleteModal from "./DeleteModal";
 
 /**
  * Component used for navigation and executing actions located at the left side of the screen.
@@ -152,15 +152,10 @@ export default function SideBar() {
             </Button>
           </li>
           <li>
-            <DeleteButton
-              className="btn side contained"
-              color="default"
-              variant="contained"
-              disabled={!currentScenario}
-              onClick={deleteScenario}
-            >
-              Delete
-            </DeleteButton>
+            <DeleteModal
+              onDelete={deleteScenario}
+              currentScenario={currentScenario}
+            />
           </li>
           <li>
             <Button

frontend/src/components/__tests__/__snapshots__/SideBar.test.js.snap

@@ -94,30 +94,32 @@ exports[`Side Bar component snapshot test 1`] = `
       </a>
     </li>
     <li>
-      <button
-        className="MuiButtonBase-root MuiButton-root WithStyles(ForwardRef(Button))-root-1 MuiButton-contained btn side contained Mui-disabled Mui-disabled"
-        disabled={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onDragLeave={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        onMouseDown={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
-        tabIndex={-1}
-        type="button"
-      >
-        <span
-          className="MuiButton-label"
+      <div>
+        <button
+          className="MuiButtonBase-root MuiButton-root WithStyles(ForwardRef(Button))-root-1 MuiButton-contained btn side Mui-disabled Mui-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onDragLeave={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          tabIndex={-1}
+          type="button"
         >
-          Delete
-        </span>
-      </button>
+          <span
+            className="MuiButton-label"
+          >
+            Delete
+          </span>
+        </button>
+      </div>
     </li>
     <li>
       <button

frontend/src/containers/pages/__tests__/__snapshots__/ScenarioSelectionPage.test.js.snap

@@ -70,20 +70,22 @@ exports[`Scenario Selection page snapshot test 1`] = `
             </a>
           </li>
           <li>
-            <button
-              class="MuiButtonBase-root MuiButton-root WithStyles(ForwardRef(Button))-root-1 MuiButton-contained btn side contained"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label"
+            <div>
+              <button
+                class="MuiButtonBase-root MuiButton-root WithStyles(ForwardRef(Button))-root-1 MuiButton-contained btn side"
+                tabindex="0"
+                type="button"
               >
-                Delete
-              </span>
-              <span
-                class="MuiTouchRipple-root"
-              />
-            </button>
+                <span
+                  class="MuiButton-label"
+                >
+                  Delete
+                </span>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </button>
+            </div>
           </li>
           <li>
             <button