Can delete uploaded ISO files

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -1,16 +1,24 @@
-import { Button, LinearProgress, TextField, Typography } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import {
+  Button,
+  IconButton,
+  LinearProgress,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import { filesize } from "filesize";
 import { MuiFileInput } from "mui-file-input";
 import React from "react";
 import { IsoFile, IsoFilesApi } from "../api/IsoFilesApi";
 import { ServerApi } from "../api/ServerApi";
 import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+import { AsyncWidget } from "../widgets/AsyncWidget";
 import { VirtWebPaper } from "../widgets/VirtWebPaper";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
-import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
-import { AsyncWidget } from "../widgets/AsyncWidget";
-import { DataGrid, GridColDef, GridRowsProp } from "@mui/x-data-grid";
+import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
 
 export function IsoFilesRoute(): React.ReactElement {
   const [list, setList] = React.useState<IsoFile[] | undefined>();
@@ -172,6 +180,33 @@ function IsoFilesList(p: {
   list: IsoFile[];
   onReload: () => void;
 }): React.ReactElement {
+  const confirm = useConfirm();
+  const alert = useAlert();
+  const loadingMessage = useLoadingMessage();
+  const snackbar = useSnackbar();
+
+  const deleteIso = async (entry: IsoFile) => {
+    if (
+      !(await confirm(
+        `Do you really want to delete this file (${entry.filename}) ?`
+      ))
+    )
+      return;
+
+    loadingMessage.show("Deleting ISO file...");
+
+    try {
+      await IsoFilesApi.Delete(entry);
+      snackbar("The file has been successfully deleted!");
+      p.onReload();
+    } catch (e) {
+      console.error(e);
+      alert("Failed to delete file!");
+    }
+
+    loadingMessage.hide();
+  };
+
   if (p.list.length === 0)
     return (
       <Typography variant="body1" style={{ textAlign: "center" }}>
@@ -189,6 +224,20 @@ function IsoFilesList(p: {
         return filesize(params.row.size);
       },
     },
+    {
+      field: "actions",
+      headerName: "",
+      width: 70,
+      renderCell(params) {
+        return (
+          <>
+            <IconButton onClick={() => deleteIso(params.row)}>
+              <DeleteIcon />
+            </IconButton>
+          </>
+        );
+      },
+    },
   ];
 
   return (