fix(storage) simplify volume detail page and fix small issues

src/pages/projects/forms/DiskSizeSelector.tsx

@@ -33,7 +33,7 @@ const DiskSizeSelector: FC<Props> = ({ value, setMemoryLimit, disabled }) => {
           step="Any"
           placeholder="Enter value"
           onChange={(e) => setMemoryLimit(e.target.value + limit.unit)}
-          value={limit.value}
+          value={value?.match(/^\d/) ? limit.value : ""}
           disabled={disabled}
         />
         <Select

src/pages/storage/CustomIsoList.tsx

@@ -5,6 +5,7 @@ import {
   List,
   MainTable,
   SearchBox,
+  useNotify,
 } from "@canonical/react-components";
 import { humanFileSize, isoTimeToString } from "util/helpers";
 import { useQuery } from "@tanstack/react-query";
@@ -20,6 +21,7 @@ interface Props {
 }
 
 const CustomIsoList: FC<Props> = ({ project }) => {
+  const notify = useNotify();
   const [query, setQuery] = useState<string>("");
 
   const { data: images = [], isLoading } = useQuery({
@@ -57,6 +59,9 @@ const CustomIsoList: FC<Props> = ({ project }) => {
               pool={image.pool ?? ""}
               volume={image.volume}
               project={project}
+              onFinish={() =>
+                notify.success(`Custom iso ${image.aliases} deleted.`)
+              }
             />,
           ]}
         />

src/pages/storage/StorageDetail.tsx

@@ -59,7 +59,7 @@ const StorageDetail: FC = () => {
 
   return (
     <main className="l-main">
-      <div className="p-panel instance-detail-page">
+      <div className="p-panel">
         <StorageDetailHeader
           name={name}
           storagePool={storagePool}

src/pages/storage/StorageDetailHeader.tsx

@@ -6,7 +6,7 @@ import * as Yup from "yup";
 import { LxdStoragePool } from "types/storage";
 import { renameStoragePool } from "api/storage-pools";
 import DeleteStorageBtn from "pages/storage/actions/DeleteStorageBtn";
-import { testDuplicateName } from "util/storagePool";
+import { testDuplicateStoragePoolName } from "util/storagePool";
 import { useNotify } from "@canonical/react-components";
 
 interface Props {
@@ -22,7 +22,7 @@ const StorageDetailHeader: FC<Props> = ({ name, storagePool, project }) => {
 
   const RenameSchema = Yup.object().shape({
     name: Yup.string()
-      .test(...testDuplicateName(project, controllerState))
+      .test(...testDuplicateStoragePoolName(project, controllerState))
       .required("This field is required"),
   });
 

src/pages/storage/StoragePoolForm.tsx

@@ -26,7 +26,7 @@ import {
   zfsDriver,
 } from "util/storageOptions";
 import ItemName from "components/ItemName";
-import { testDuplicateName } from "util/storagePool";
+import { testDuplicateStoragePoolName } from "util/storagePool";
 import NotificationRow from "components/NotificationRow";
 
 const StoragePoolForm: FC = () => {
@@ -37,7 +37,9 @@ const StoragePoolForm: FC = () => {
 
   const StorageSchema = Yup.object().shape({
     name: Yup.string()
-      .test(...testDuplicateName(panelParams.project, controllerState))
+      .test(
+        ...testDuplicateStoragePoolName(panelParams.project, controllerState)
+      )
       .required("This field is required"),
   });
 

src/pages/storage/StorageUsedBy.tsx

@@ -84,7 +84,7 @@ const StorageUsedBy: FC<Props> = ({ storage, project }) => {
           <td>
             <ExpandableList
               items={data[SNAPSHOTS].map((item) => (
-                <div key={`${item.name}-${item.project}`}>
+                <div key={`${item.instance}-${item.name}-${item.project}`}>
                   <Link
                     to={`/ui/project/${item.project}/instances/detail/${item.instance}/snapshots`}
                   >

src/pages/storage/StorageVolumeDetail.tsx

@@ -77,7 +77,7 @@ const StorageVolumeDetail: FC = () => {
 
   return (
     <main className="l-main">
-      <div className="p-panel instance-detail-page">
+      <div className="p-panel">
         <StorageVolumeHeader
           storagePool={pool}
           volume={volume}
@@ -104,7 +104,7 @@ const StorageVolumeDetail: FC = () => {
             )}
 
             {activeTab === "configuration" && (
-              <div role="tabpanel" aria-labelledby="volumes">
+              <div role="tabpanel" aria-labelledby="configuration">
                 <StorageVolumeEdit volume={volume} pool={pool} />
               </div>
             )}

src/pages/storage/StorageVolumeHeader.tsx

@@ -5,10 +5,8 @@ import { useFormik } from "formik";
 import * as Yup from "yup";
 import { LxdStorageVolume } from "types/storage";
 import { renameStorageVolume } from "api/storage-pools";
-import { testDuplicateName } from "util/storageVolume";
+import { testDuplicateStorageVolumeName } from "util/storageVolume";
 import { useNotify } from "@canonical/react-components";
-import { useQueryClient } from "@tanstack/react-query";
-import { queryKeys } from "util/queryKeys";
 import DeleteStorageVolumeBtn from "pages/storage/actions/DeleteStorageVolumeBtn";
 
 interface Props {
@@ -21,12 +19,17 @@ const StorageVolumeHeader: FC<Props> = ({ volume, project, storagePool }) => {
   const navigate = useNavigate();
   const notify = useNotify();
   const controllerState = useState<AbortController | null>(null);
-  const queryClient = useQueryClient();
 
   const RenameSchema = Yup.object().shape({
     name: Yup.string()
       .test(
-        ...testDuplicateName(project, volume.type, storagePool, controllerState)
+        ...testDuplicateStorageVolumeName(
+          project,
+          volume.type,
+          storagePool,
+          controllerState,
+          volume.name
+        )
       )
       .required("This field is required"),
   });
@@ -56,13 +59,6 @@ const StorageVolumeHeader: FC<Props> = ({ volume, project, storagePool }) => {
         })
         .finally(() => {
           formik.setSubmitting(false);
-          void queryClient.invalidateQueries([
-            queryKeys.storage,
-            storagePool,
-            project,
-            volume.type,
-            volume.name,
-          ]);
         });
     },
   });
@@ -89,6 +85,14 @@ const StorageVolumeHeader: FC<Props> = ({ volume, project, storagePool }) => {
           project={project}
           appearance=""
           hasIcon={false}
+          onFinish={() => {
+            navigate(
+              `/ui/project/${project}/storage/detail/${storagePool}/volumes`,
+              notify.queue(
+                notify.success(`Storage volume ${volume.name} deleted.`)
+              )
+            );
+          }}
         />
       }
       isLoaded={true}

src/pages/storage/StorageVolumeOverview.tsx

@@ -52,16 +52,26 @@ const StorageVolumeOverview: FC<Props> = ({ project, volume }) => {
                 <td>{isoTimeToString(volume.created_at)}</td>
               </tr>
               <tr>
-                <th className="p-muted-heading">Config</th>
+                <th className="p-muted-heading">Custom config</th>
                 <td>
-                  {Object.entries(volume.config).map(([key, value], id) => {
-                    return (
-                      <div key={id}>
-                        <div>{key}</div>
-                        <div>{value}</div>
-                      </div>
-                    );
-                  })}
+                  {Object.entries(volume.config).length === 0 ? (
+                    "-"
+                  ) : (
+                    <table>
+                      <tbody>
+                        {Object.entries(volume.config).map(
+                          ([key, value], id) => {
+                            return (
+                              <tr key={id}>
+                                <th className="u-text--muted">{key}</th>
+                                <td>{value}</td>
+                              </tr>
+                            );
+                          }
+                        )}
+                      </tbody>
+                    </table>
+                  )}
                 </td>
               </tr>
             </tbody>

src/pages/storage/StorageVolumes.tsx

@@ -67,6 +67,7 @@ const StorageVolumes: FC = () => {
     return {
       columns: [
         {
+          // If the volume name contains a slash, it's a snapshot, and we don't want to link to it
           content: volume.name.includes("/") ? (
             volume.name
           ) : (
@@ -124,6 +125,9 @@ const StorageVolumes: FC = () => {
                 pool={pool}
                 volume={volume}
                 project={project}
+                onFinish={() => {
+                  notify.success(`Storage volume ${volume.name} deleted.`);
+                }}
               />
             </>
           ),

src/pages/storage/actions/DeleteStorageVolumeBtn.tsx

@@ -8,12 +8,12 @@ import {
   Icon,
   useNotify,
 } from "@canonical/react-components";
-import { useNavigate } from "react-router-dom";
 
 interface Props {
   pool: string;
   volume: LxdStorageVolume;
   project: string;
+  onFinish: () => void;
   appearance?: string;
   hasIcon?: boolean;
   label?: string;
@@ -23,11 +23,11 @@ const DeleteStorageVolumeBtn: FC<Props> = ({
   pool,
   project,
   volume,
+  onFinish,
   appearance = "base",
   hasIcon = true,
   label,
 }) => {
-  const navigate = useNavigate();
   const notify = useNotify();
   const [isLoading, setLoading] = useState(false);
   const queryClient = useQueryClient();
@@ -40,12 +40,7 @@ const DeleteStorageVolumeBtn: FC<Props> = ({
     setLoading(true);
 
     deleteStorageVolume(volume.name, pool, project)
-      .then(() =>
-        navigate(
-          `/ui/project/${project}/storage/detail/${pool}/volumes`,
-          notify.queue(notify.success(`Storage volume ${volume.name} deleted.`))
-        )
-      )
+      .then(onFinish)
       .catch((e) => {
         notify.failure("Storage volume deletion failed", e);
       })

src/pages/storage/forms/StorageVolumeCreate.tsx

@@ -8,7 +8,7 @@ import SubmitButton from "components/SubmitButton";
 import { createStorageVolume } from "api/storage-pools";
 import NotificationRow from "components/NotificationRow";
 import { useNavigate, useParams } from "react-router-dom";
-import { testDuplicateName } from "util/storageVolume";
+import { testDuplicateStorageVolumeName } from "util/storageVolume";
 import BaseLayout from "components/BaseLayout";
 import {
   StorageVolumeFormValues,
@@ -33,13 +33,21 @@ const StorageVolumeCreate: FC = () => {
 
   const StorageSchema = Yup.object().shape({
     name: Yup.string()
-      .test(...testDuplicateName(project, "custom", pool, controllerState))
+      .test(
+        ...testDuplicateStorageVolumeName(
+          project,
+          "custom",
+          pool,
+          controllerState
+        )
+      )
       .required("This field is required"),
   });
 
   const formik = useFormik<StorageVolumeFormValues>({
     initialValues: {
       content_type: "filesystem",
+      type: "custom",
       name: "",
       project: project,
       pool: pool,

src/pages/storage/forms/StorageVolumeForm.tsx

@@ -26,6 +26,7 @@ export interface StorageVolumeFormValues {
   pool: string;
   size?: string;
   content_type: "filesystem" | "block";
+  type: string;
   security_shifted?: string;
   security_unmapped?: string;
   snapshots_expiry?: string;
@@ -67,7 +68,7 @@ export const volumeFormToPayload = (
       [getVolumeKey("zfs_reserve_space")]: values.zfs_reserve_space,
     },
     project,
-    type: "custom",
+    type: values.type,
     content_type: values.content_type,
     description: "",
     location: "",

src/pages/storage/forms/StorageVolumeFormMain.tsx

@@ -23,8 +23,13 @@ const StorageVolumeFormMain: FC<Props> = ({ formik }) => {
             {...getFormProps(formik, "name")}
             type="text"
             label="Name"
-            disabled={formik.values.isReadOnly}
-            required
+            disabled={formik.values.isReadOnly || !formik.values.isCreating}
+            required={formik.values.isCreating}
+            help={
+              formik.values.isCreating
+                ? undefined
+                : "Click the name in the header to rename the instance"
+            }
           />
           <label className="p-form__label" htmlFor="limits_disk">
             Size

src/util/snapshots.tsx

@@ -22,7 +22,7 @@ export const isInstanceStateful = (instance: LxdInstance) => {
 export const getExpiresAt = (expirationDate: string, expirationTime: string) =>
   `${expirationDate}T${expirationTime}`;
 
-export const testDuplicateName = (
+export const testDuplicateSnapshotName = (
   instance: LxdInstance,
   controllerState: AbortControllerState,
   excludeName?: string
@@ -124,7 +124,9 @@ export const getSnapshotSchema = (
   return Yup.object().shape({
     name: Yup.string()
       .required("This field is required")
-      .test(...testDuplicateName(instance, controllerState, snapshotName))
+      .test(
+        ...testDuplicateSnapshotName(instance, controllerState, snapshotName)
+      )
       .test(...testForbiddenChars()),
     expirationDate: Yup.string()
       .nullable()

src/util/storagePool.tsx

@@ -2,7 +2,7 @@ import { AbortControllerState, checkDuplicateName } from "util/helpers";
 import { TestFunction } from "yup";
 import { AnyObject } from "yup/lib/types";
 
-export const testDuplicateName = (
+export const testDuplicateStoragePoolName = (
   project: string,
   controllerState: AbortControllerState
 ): [string, string, TestFunction<string | undefined, AnyObject>] => {

src/util/storageVolume.tsx

@@ -3,21 +3,25 @@ import { TestFunction } from "yup";
 import { AnyObject } from "yup/lib/types";
 import { LxdStoragePool } from "types/storage";
 
-export const testDuplicateName = (
+export const testDuplicateStorageVolumeName = (
   project: string,
   volumeType: string,
   storagePool: string,
-  controllerState: AbortControllerState
+  controllerState: AbortControllerState,
+  previousName?: string
 ): [string, string, TestFunction<string | undefined, AnyObject>] => {
   return [
     "deduplicate",
     "A storage volume with this name already exists",
     (value?: string) => {
-      return checkDuplicateName(
-        value,
-        project,
-        controllerState,
-        `storage-pools/${storagePool}/volumes/${volumeType}`
+      return (
+        value === previousName ||
+        checkDuplicateName(
+          value,
+          project,
+          controllerState,
+          `storage-pools/${storagePool}/volumes/${volumeType}`
+        )
       );
     },
   ];