UPDATE: connect FileMenu button to open confirmation modal

webapp/src/AppComponents/FileMenu.tsx

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { Menu, MenuItem, Modal } from "@mui/material";
 import { Check, FileDown, FileUp, Plus, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
+import { DeleteWorkbookDialog } from "./DeleteWorkbookDialog";
 import { UploadFileDialog } from "./UploadFileDialog";
 import { getModelsMetadata, getSelectedUuid } from "./storage";
 
@@ -18,6 +19,7 @@ export function FileMenu(props: {
   const models = getModelsMetadata();
   const uuids = Object.keys(models);
   const selectedUuid = getSelectedUuid();
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const elements = [];
   for (const uuid of uuids) {
@@ -88,16 +90,14 @@ export function FileMenu(props: {
             Download (.xlsx)
           </MenuItemText>
         </MenuItemWrapper>
-        <MenuItemWrapper>
+        <MenuItemWrapper
-          <StyledTrash />
-          <MenuItemText
           onClick={() => {
-              props.onDelete();
+            setDeleteDialogOpen(true);
             setMenuOpen(false);
           }}
         >
-            Delete workbook
+          <StyledTrash />
-          </MenuItemText>
+          <MenuItemText>Delete workbook</MenuItemText>
         </MenuItemWrapper>
         <MenuDivider />
         {elements}
@@ -127,6 +127,18 @@ export function FileMenu(props: {
           />
         </>
       </Modal>
+      <Modal
+        open={isDeleteDialogOpen}
+        onClose={() => setDeleteDialogOpen(false)}
+        aria-labelledby="delete-dialog-title"
+        aria-describedby="delete-dialog-description"
+      >
+        <DeleteWorkbookDialog
+          onClose={() => setDeleteDialogOpen(false)}
+          onConfirm={props.onDelete}
+          workbookName={selectedUuid ? models[selectedUuid] : ""}
+        />
+      </Modal>
     </>
   );
 }