Allow root disk device to have a custom name (#913)

## Done

- Allow root disk device to have a custom name

## QA

1. Run the LXD-UI:
- On the demo server via the link posted by @webteam-app below. This is
only available for PRs created by collaborators of the repo. Ask
@mas-who or @edlerd for access.
- With a local copy of this branch, [build and run as described in the
docs](../CONTRIBUTING.md#setting-up-for-development).
2. Perform the following QA steps:
- create an instance where the root storage is overridden / set on the
instance itself
- edit instance in yaml editor, rename root device from "root" to
another name, i.e. "rooty-root", save changes
- ensure the guided forms (devices > disk) display the root device
properly and custom volumes work as expected.

src/components/forms/DiskDeviceFormCustom.tsx

@@ -15,7 +15,10 @@ import { getConfigurationRowBase } from "components/ConfigurationRow";
 import DetachDiskDeviceBtn from "pages/instances/actions/DetachDiskDeviceBtn";
 import classnames from "classnames";
 import { LxdStorageVolume } from "types/storage";
-import { isDiskDeviceMountPointMissing } from "util/instanceValidation";
+import {
+  isDiskDeviceMountPointMissing,
+  isRootDisk,
+} from "util/instanceValidation";
 import { ensureEditMode } from "util/instanceEdit";
 import { getExistingDeviceNames } from "util/devices";
 import { LxdProfile } from "types/profile";
@@ -29,7 +32,7 @@ interface Props {
 const DiskDeviceFormCustom: FC<Props> = ({ formik, project, profiles }) => {
   const readOnly = (formik.values as EditInstanceFormValues).readOnly;
   const customVolumes = formik.values.devices
-    .filter((device) => device.name !== "root" && device.type === "disk")
+    .filter((item) => item.type === "disk" && !isRootDisk(item))
     .map((device) => device as FormDiskDevice);
 
   const focusField = (name: string) => {

src/components/forms/DiskDeviceFormRoot.tsx

@@ -12,7 +12,7 @@ import DiskSizeSelector from "components/forms/DiskSizeSelector";
 import { LxdStoragePool } from "types/storage";
 import { LxdProfile } from "types/profile";
 import { removeDevice } from "util/formDevices";
-import { hasNoRootDisk } from "util/instanceValidation";
+import { hasNoRootDisk, isRootDisk } from "util/instanceValidation";
 import { ensureEditMode } from "util/instanceEdit";
 
 interface Props {
@@ -29,9 +29,7 @@ const DiskDeviceFormRoot: FC<Props> = ({
   profiles,
 }) => {
   const readOnly = (formik.values as EditInstanceFormValues).readOnly;
-  const rootIndex = formik.values.devices.findIndex(
-    (item) => item.type === "disk" && item.name === "root",
-  );
+  const rootIndex = formik.values.devices.findIndex(isRootDisk);
   const hasRootStorage = rootIndex !== -1;
   const formRootDevice = formik.values.devices[
     rootIndex
@@ -46,7 +44,7 @@ const DiskDeviceFormRoot: FC<Props> = ({
     const copy = [...formik.values.devices];
     copy.push({
       type: "disk",
-      name: "root",
+      name: inheritValue?.name ? inheritValue.name : "root",
       path: "/",
       pool: inheritValue ? inheritValue.pool : (pools[0]?.name ?? undefined),
     });

src/util/configInheritance.tsx

@@ -258,7 +258,10 @@ export const getInheritedRootStorage = (
     .find((item) => (item.device as LxdDiskDevice).path === "/");
 
   if (rootDisk) {
-    return [rootDisk.device as LxdDiskDevice, rootDisk.source];
+    return [
+      { ...rootDisk.device, name: rootDisk.key } as LxdDiskDevice,
+      rootDisk.source,
+    ];
   }
 
   return [null, "LXD"];

src/util/instanceValidation.tsx

@@ -18,8 +18,12 @@ export const hasNoRootDisk = (
   return missingRoot(values.devices) && !inheritsRoot(values, profiles);
 };
 
+export const isRootDisk = (device: FormDevice): device is FormDiskDevice => {
+  return device.type === "disk" && device.path === "/" && !device.source;
+};
+
 const missingRoot = (devices: FormDevice[]): boolean => {
-  return !devices.some((item) => item.type === "disk" && item.name === "root");
+  return !devices.some(isRootDisk);
 };
 
 const inheritsRoot = (