Can change disk bus after disk creation

virtweb_frontend/src/widgets/vms/VMDiskFileWidget.tsx

@@ -3,15 +3,20 @@ import { Icon } from "@mdi/react";
 import { Avatar, ListItem, ListItemAvatar, ListItemText } from "@mui/material";
 import { filesize } from "filesize";
 import { VMFileDisk } from "../../api/VMApi";
+import { DiskBusSelect } from "../forms/DiskBusSelect";
 
 export function VMDiskFileWidget(p: {
+  editable?: boolean;
   disk: VMFileDisk;
   secondaryAction?: React.ReactElement;
+  onChange?: () => void;
 }): React.ReactElement {
-  const info = [p.disk.bus, filesize(p.disk.size), p.disk.format];
+  const info = [filesize(p.disk.size), p.disk.format];
 
   if (p.disk.format === "Raw") info.push(p.disk.is_sparse ? "Sparse" : "Fixed");
 
+  if (!p.editable) info.push(p.disk.bus);
+
   return (
     <ListItem secondaryAction={p.secondaryAction}>
       <ListItemAvatar>
@@ -32,7 +37,35 @@ export function VMDiskFileWidget(p: {
             )}
           </>
         }
-        secondary={info.join(" - ")}
+        secondary={
+          <div style={{ display: "flex", alignItems: "center" }}>
+            {p.editable ? (
+              <div
+                style={{
+                  maxWidth: "80px",
+                  display: "inline-block",
+                  marginRight: "10px",
+                }}
+              >
+                <DiskBusSelect
+                  onValueChange={(v) => {
+                    p.disk.bus = v;
+                    p.onChange?.();
+                  }}
+                  label=""
+                  editable
+                  value={p.disk.bus}
+                  size="small"
+                  disableUnderline
+                  disableBottomMargin
+                />
+              </div>
+            ) : (
+              ""
+            )}
+            <div style={{ height: "100%" }}>{info.join(" - ")}</div>
+          </div>
+        }
       />
     </ListItem>
   );