Can change disk bus after disk creation

virtweb_frontend/src/widgets/forms/DiskBusSelect.tsx

@@ -4,12 +4,16 @@ import { SelectInput } from "./SelectInput";
 export function DiskBusSelect(p: {
   editable: boolean;
   value: DiskBusType;
+  label?: string;
   onValueChange: (value: DiskBusType) => void;
+  size?: "medium" | "small";
+  disableUnderline?: boolean;
+  disableBottomMargin?: boolean;
 }): React.ReactElement {
   return (
     <SelectInput
       {...p}
-      label="Disk bus type"
+      label={p.label ?? "Disk bus type"}
       options={[
         { label: "virtio", value: "Virtio" },
         { label: "sata", value: "SATA" },

virtweb_frontend/src/widgets/forms/SelectInput.tsx

@@ -17,8 +17,11 @@ export function SelectInput(p: {
   value?: string;
   editable: boolean;
   label?: string;
+  size?: "medium" | "small";
   options: SelectOption[];
   onValueChange: (o?: string) => void;
+  disableUnderline?: boolean;
+  disableBottomMargin?: boolean;
 }): React.ReactElement {
   if (!p.editable && !p.value) return <></>;
 
@@ -28,12 +31,18 @@ export function SelectInput(p: {
   }
 
   return (
-    <FormControl fullWidth variant="standard" style={{ marginBottom: "15px" }}>
+    <FormControl
+      fullWidth
+      variant="standard"
+      style={{ marginBottom: p.disableBottomMargin ? "0px" : "15px" }}
+    >
       {p.label && <InputLabel>{p.label}</InputLabel>}
       <Select
+        {...p}
         value={p.value ?? ""}
-        label={p.label}
-        onChange={(e) => { p.onValueChange(e.target.value); }}
+        onChange={(e) => {
+          p.onValueChange(e.target.value);
+        }}
       >
         {p.options.map((e) => (
           <MenuItem

virtweb_frontend/src/widgets/forms/VMDisksList.tsx

@@ -1,30 +1,20 @@
-import { mdiHarddisk, mdiHarddiskPlus } from "@mdi/js";
+import { mdiHarddiskPlus } from "@mdi/js";
 import Icon from "@mdi/react";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import DeleteIcon from "@mui/icons-material/Delete";
-import {
-  Avatar,
-  Button,
-  IconButton,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Paper,
-  Tooltip,
-} from "@mui/material";
-import { filesize } from "filesize";
+import { Button, IconButton, Paper, Tooltip } from "@mui/material";
 import React from "react";
+import { DiskImage } from "../../api/DiskImageApi";
 import { ServerApi } from "../../api/ServerApi";
 import { VMFileDisk, VMInfo, VMState } from "../../api/VMApi";
 import { ConvertDiskImageDialog } from "../../dialogs/ConvertDiskImageDialog";
 import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
+import { VMDiskFileWidget } from "../vms/VMDiskFileWidget";
 import { CheckboxInput } from "./CheckboxInput";
+import { DiskBusSelect } from "./DiskBusSelect";
+import { DiskImageSelect } from "./DiskImageSelect";
 import { SelectInput } from "./SelectInput";
 import { TextInput } from "./TextInput";
-import { DiskImageSelect } from "./DiskImageSelect";
-import { DiskImage } from "../../api/DiskImageApi";
-import { DiskBusSelect } from "./DiskBusSelect";
-import { VMDiskFileWidget } from "../vms/VMDiskFileWidget";
 
 export function VMDisksList(p: {
   vm: VMInfo;
@@ -126,7 +116,7 @@ function DiskInfo(p: {
   if (!p.editable || !p.disk.new)
     return (
       <VMDiskFileWidget
-        disk={p.disk}
+        {...p}
         secondaryAction={
           <>
             {p.editable && (
@@ -209,6 +199,7 @@ function DiskInfo(p: {
         }}
       />
 
+      {/* Raw disk: choose sparse mode */}
       {p.disk.format === "Raw" && (
         <CheckboxInput
           editable