From a8046ebff8ec01aaf35982d7207efbead17d6ea9 Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Tue, 2 Jan 2024 19:58:36 +0100
Subject: [PATCH] Refacto storage tab

---
 .../src/widgets/forms/VMSelectIsoInput.tsx    | 42 +++++++++----------
 .../src/widgets/vms/VMDetails.tsx             | 35 ++++++++++------
 2 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/virtweb_frontend/src/widgets/forms/VMSelectIsoInput.tsx b/virtweb_frontend/src/widgets/forms/VMSelectIsoInput.tsx
index e33553a..7386e63 100644
--- a/virtweb_frontend/src/widgets/forms/VMSelectIsoInput.tsx
+++ b/virtweb_frontend/src/widgets/forms/VMSelectIsoInput.tsx
@@ -23,27 +23,6 @@ export function VMSelectIsoInput(p: {
 
   return (
     <>
-      <SelectInput
-        label="Attach an ISO file"
-        editable={p.editable}
-        value={undefined}
-        onValueChange={(v) => {
-          if (v) {
-            p.attachedISOs.push(v);
-            p.onChange(p.attachedISOs);
-          }
-        }}
-        options={[
-          { label: "None", value: undefined },
-          ...p.isoList.map((i) => {
-            return {
-              label: `${i.filename} ${filesize(i.size)}`,
-              value: i.filename,
-            };
-          }),
-        ]}
-      />
-
       {p.attachedISOs.map((isoName, num) => {
         const iso = p.isoList.find((d) => d.filename === isoName);
         return (
@@ -78,6 +57,27 @@ export function VMSelectIsoInput(p: {
           </ListItem>
         );
       })}
+
+      <SelectInput
+        label="Attach an ISO file"
+        editable={p.editable}
+        value={undefined}
+        onValueChange={(v) => {
+          if (v) {
+            p.attachedISOs.push(v);
+            p.onChange(p.attachedISOs);
+          }
+        }}
+        options={[
+          { label: "None", value: undefined },
+          ...p.isoList.map((i) => {
+            return {
+              label: `${i.filename} ${filesize(i.size)}`,
+              value: i.filename,
+            };
+          }),
+        ]}
+      />
     </>
   );
 }
diff --git a/virtweb_frontend/src/widgets/vms/VMDetails.tsx b/virtweb_frontend/src/widgets/vms/VMDetails.tsx
index 3c6dd20..10b7449 100644
--- a/virtweb_frontend/src/widgets/vms/VMDetails.tsx
+++ b/virtweb_frontend/src/widgets/vms/VMDetails.tsx
@@ -258,22 +258,31 @@ function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
   );
 }
 
+/**
+ * Storage section
+ */
 function VMDetailsTabStorage(p: DetailsInnerProps): React.ReactElement {
   return (
     <Grid container spacing={2}>
-      {/* Storage section */}
-      <EditSection title="Storage">
-        <VMSelectIsoInput
-          editable={p.editable}
-          isoList={p.isoList}
-          attachedISOs={p.vm.iso_files}
-          onChange={(v) => {
-            p.vm.iso_files = v;
-            p.onChange?.();
-          }}
-        />
-        <VMDisksList {...p} />
-      </EditSection>
+      {p.editable && p.vm.disks.length > 0 && (
+        <EditSection title="Disks storage">
+          <VMDisksList {...p} />
+        </EditSection>
+      )}
+
+      {(p.editable || p.vm.iso_files.length > 0) && (
+        <EditSection title="ISO storage">
+          <VMSelectIsoInput
+            editable={p.editable}
+            isoList={p.isoList}
+            attachedISOs={p.vm.iso_files}
+            onChange={(v) => {
+              p.vm.iso_files = v;
+              p.onChange?.();
+            }}
+          />
+        </EditSection>
+      )}
     </Grid>
   );
 }