Improve ISO list route UI

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -1,5 +1,7 @@
 import DeleteIcon from "@mui/icons-material/Delete";
 import DownloadIcon from "@mui/icons-material/Download";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+import RefreshIcon from "@mui/icons-material/Refresh";
 import {
   Alert,
   Button,
@@ -15,6 +17,7 @@ import { filesize } from "filesize";
 import React from "react";
 import { IsoFile, IsoFilesApi } from "../api/IsoFilesApi";
 import { ServerApi } from "../api/ServerApi";
+import { IsoCatalogDialog } from "../dialogs/IsoCatalogDialog";
 import { useAlert } from "../hooks/providers/AlertDialogProvider";
 import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
 import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
@@ -24,8 +27,6 @@ import { AsyncWidget } from "../widgets/AsyncWidget";
 import { FileInput } from "../widgets/forms/FileInput";
 import { VirtWebPaper } from "../widgets/VirtWebPaper";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
-import MenuBookIcon from "@mui/icons-material/MenuBook";
-import { IsoCatalogDialog } from "../dialogs/IsoCatalogDialog";
 
 export function IsoFilesRoute(): React.ReactElement {
   const [list, setList] = React.useState<IsoFile[] | undefined>();
@@ -53,11 +54,18 @@ export function IsoFilesRoute(): React.ReactElement {
           <VirtWebRouteContainer
             label="ISO files management"
             actions={
-              <Tooltip title="Open the ISO catalog">
-                <IconButton onClick={() => setIsoCatalog(true)}>
-                  <MenuBookIcon />
-                </IconButton>
-              </Tooltip>
+              <span>
+                <Tooltip title="Open the ISO catalog">
+                  <IconButton onClick={() => { setIsoCatalog(true); }}>
+                    <MenuBookIcon />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title="Refresh ISO list">
+                  <IconButton onClick={reload}>
+                    <RefreshIcon />
+                  </IconButton>
+                </Tooltip>
+              </span>
             }
           >
             <UploadIsoFileCard onFileUploaded={reload} />
@@ -68,7 +76,7 @@ export function IsoFilesRoute(): React.ReactElement {
       />
       <IsoCatalogDialog
         open={isoCatalog}
-        onClose={() => setIsoCatalog(false)}
+        onClose={() => { setIsoCatalog(false); }}
       />
     </>
   );
@@ -122,7 +130,7 @@ function UploadIsoFileCard(p: {
 
   if (uploadProgress !== null) {
     return (
-      <VirtWebPaper label="File upload">
+      <VirtWebPaper label="File upload" noHorizontalMargin>
         <Typography variant="body1">
           Upload in progress ({Math.floor(uploadProgress * 100)}%)...
         </Typography>
@@ -132,7 +140,7 @@ function UploadIsoFileCard(p: {
   }
 
   return (
-    <VirtWebPaper label="File upload">
+    <VirtWebPaper label="File upload" noHorizontalMargin>
       <div style={{ display: "flex", alignItems: "center" }}>
         <FileInput
           value={value}
@@ -180,7 +188,7 @@ function UploadIsoFileFromUrlCard(p: {
   };
 
   return (
-    <VirtWebPaper label="File upload from URL">
+    <VirtWebPaper label="File upload from URL" noHorizontalMargin>
       <div style={{ display: "flex", alignItems: "center" }}>
         <TextField
           label="URL"
@@ -297,38 +305,31 @@ function IsoFilesList(p: {
 
   return (
     <>
-      <VirtWebPaper label="Files list">
-        {/* Download notification */}
-        {dlProgress !== undefined && (
-          <Alert severity="info">
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-                overflow: "hidden",
-              }}
-            >
-              <Typography variant="body1">
-                Downloading... {dlProgress}%
-              </Typography>
-              <CircularProgress
-                variant="determinate"
-                size={"1.5rem"}
-                style={{ marginLeft: "10px" }}
-                value={dlProgress}
-              />
-            </div>
-          </Alert>
-        )}
-
-        {/* Files list table */}
-        <DataGrid
-          getRowId={(c) => c.filename}
-          rows={p.list}
-          columns={columns}
-        />
-      </VirtWebPaper>
+      {/* Download notification */}
+      {dlProgress !== undefined && (
+        <Alert severity="info">
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              overflow: "hidden",
+            }}
+          >
+            <Typography variant="body1">
+              Downloading... {dlProgress}%
+            </Typography>
+            <CircularProgress
+              variant="determinate"
+              size={"1.5rem"}
+              style={{ marginLeft: "10px" }}
+              value={dlProgress}
+            />
+          </div>
+        </Alert>
+      )}
+      {/* ISO files list table */}
+      <DataGrid getRowId={(c) => c.filename} rows={p.list} columns={columns} />
     </>
   );
 }