canonical · mas-who · Feb 19, 2025 · Feb 6, 2025
diff --git a/src/api/instances.tsx b/src/api/instances.tsx
@@ -15,7 +15,15 @@ import axios, { AxiosResponse } from "axios";
 import type { UploadState } from "types/storage";
 import { withEntitlementsQuery } from "util/entitlements/api";
 
-export const instanceEntitlements = ["can_update_state"];
+export const instanceEntitlements = [
+  "can_update_state",
+  "can_delete",
+  "can_edit",
+  "can_manage_backups",
+  "can_manage_snapshots",
+  "can_exec",
+  "can_access_console",
+];
 
 export const fetchInstance = (
   name: string,

diff --git a/src/api/projects.tsx b/src/api/projects.tsx
@@ -8,6 +8,7 @@ const projectEntitlements = [
   "can_create_images",
   "can_create_image_aliases",
   "can_create_instances",
+  "can_create_storage_volumes",
 ];
 
 export const fetchProjects = (

diff --git a/src/components/ConfigurationRow.tsx b/src/components/ConfigurationRow.tsx
@@ -75,6 +75,22 @@ export const getConfigurationRow = ({
     }
   };
 
+  const isDisabled = () => {
+    return disabled || !!formik.values.editRestriction;
+  };
+
+  const getDisabledReasonOrTitle = (title?: string) => {
+    if (formik.values.editRestriction) {
+      return formik.values.editRestriction;
+    }
+
+    if (disabledReason) {
+      return disabledReason;
+    }
+
+    return title;
+  };
+
   const getForm = (): ReactNode => {
     return (
       <div className="override-form">
@@ -86,7 +102,7 @@ export const getConfigurationRow = ({
               onBlur: formik.handleBlur,
               onChange: formik.handleChange,
               value,
-              disabled,
+              disabled: isDisabled(),
               help: (
                 <ConfigFieldDescription
                   description={
@@ -104,8 +120,8 @@ export const getConfigurationRow = ({
           onClick={toggleDefault}
           type="button"
           appearance="base"
-          title={disabled ? disabledReason : "Clear override"}
-          disabled={disabled}
+          title={getDisabledReasonOrTitle("Clear override")}
+          disabled={isDisabled()}
           hasIcon
           className="u-no-margin--bottom"
         >
@@ -124,9 +140,9 @@ export const getConfigurationRow = ({
   );
 
   const wrapDisabledTooltip = (children: ReactNode): ReactNode => {
-    if (disabled && disabledReason) {
+    if ((disabled && disabledReason) || formik.values.editRestriction) {
       return (
-        <Tooltip message={disabledReason} position="right">
+        <Tooltip message={getDisabledReasonOrTitle()} position="right">
           {children}
         </Tooltip>
       );
@@ -150,14 +166,10 @@ export const getConfigurationRow = ({
             className="u-no-margin--bottom"
             type="button"
             appearance="base"
-            title={
-              disabled
-                ? disabledReason
-                : isOverridden
-                  ? "Edit"
-                  : "Create override"
-            }
-            disabled={disabled}
+            title={getDisabledReasonOrTitle(
+              isOverridden ? "Edit" : "Create override",
+            )}
+            disabled={isDisabled()}
             hasIcon
           >
             <Icon name="edit" />
@@ -173,9 +185,9 @@ export const getConfigurationRow = ({
         onClick={toggleDefault}
         className="u-no-margin--bottom"
         type="button"
-        disabled={disabled}
+        disabled={isDisabled()}
         appearance="base"
-        title="Create override"
+        title={formik.values.editRestriction ?? "Create override"}
         hasIcon
       >
         <Icon name="edit" />

diff --git a/src/components/NetworkListTable.tsx b/src/components/NetworkListTable.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
-import { MainTable } from "@canonical/react-components";
+import { MainTable, Notification } from "@canonical/react-components";
 import Loader from "components/Loader";
 import { fetchNetworks } from "api/networks";
 import { isNicDevice } from "util/devices";
@@ -34,7 +34,8 @@ const NetworkListTable: FC<Props> = ({ onFailure, devices }) => {
     .filter(isNicDevice)
     .map((network) => network.network);
 
-  const hasNetworks = networkDevices.length > 0;
+  const instanceHasNetworks = networkDevices.length > 0;
+  const userHasNetworks = networks.length > 0;
 
   const networksHeaders = [
     { content: "Name", sortKey: "name", className: "u-text--muted" },
@@ -100,20 +101,34 @@ const NetworkListTable: FC<Props> = ({ onFailure, devices }) => {
       };
     });
 
-  return (
-    <>
-      {isLoading && <Loader text="Loading networks..." />}
-      {!isLoading && hasNetworks && (
-        <MainTable
-          headers={networksHeaders}
-          rows={networksRows}
-          sortable
-          className={"network-table"}
-        />
-      )}
-      {!isLoading && !hasNetworks && <>-</>}
-    </>
-  );
+  const getContent = () => {
+    if (isLoading) {
+      return <Loader text="Loading networks..." />;
+    }
+
+    if (instanceHasNetworks && !userHasNetworks) {
+      return (
+        <Notification severity="caution" title="Restricted permissions">
+          You do not have permission to view network details.
+        </Notification>
+      );
+    }
+
+    if (!instanceHasNetworks) {
+      return <>-</>;
+    }
+
+    return (
+      <MainTable
+        headers={networksHeaders}
+        rows={networksRows}
+        sortable
+        className={"network-table"}
+      />
+    );
+  };
+
+  return getContent();
 };
 
 export default NetworkListTable;
diff --git a/src/components/forms/CloudInitForm.tsx b/src/components/forms/CloudInitForm.tsx
@@ -76,7 +76,8 @@ const CloudInitForm: FC<Props> = ({ formik }) => {
             }}
             type="button"
             appearance="base"
-            title={"Clear override"}
+            title={formik.values.editRestriction ?? "Clear override"}
+            disabled={!!formik.values.editRestriction}
             hasIcon
             className="u-no-margin--bottom"
           >
@@ -92,8 +93,9 @@ const CloudInitForm: FC<Props> = ({ formik }) => {
           className="u-no-margin--bottom"
           type="button"
           appearance="base"
-          title="Create override"
+          title={formik.values.editRestriction ?? "Create override"}
           hasIcon
+          disabled={!!formik.values.editRestriction}
         >
           <Icon name="edit" />
         </Button>

diff --git a/src/components/forms/DiskDeviceFormCustom.tsx b/src/components/forms/DiskDeviceFormCustom.tsx
@@ -79,11 +79,12 @@ const DiskDeviceFormCustom: FC<Props> = ({ formik, project, profiles }) => {
       className="u-no-margin--bottom"
       hasIcon
       dense
-      title="Edit"
+      title={formik.values.editRestriction ?? "Edit"}
       onClick={() => {
         ensureEditMode(formik);
         focusField(fieldName);
       }}
+      disabled={!!formik.values.editRestriction}
     >
       <Icon name="edit" />
     </Button>
@@ -108,6 +109,7 @@ const DiskDeviceFormCustom: FC<Props> = ({ formik, project, profiles }) => {
               ensureEditMode(formik);
               void formik.setFieldValue(`devices.${index}.name`, name);
             }}
+            disableReason={formik.values.editRestriction}
           />
         ),
         inherited: "",
@@ -117,6 +119,7 @@ const DiskDeviceFormCustom: FC<Props> = ({ formik, project, profiles }) => {
               ensureEditMode(formik);
               removeDevice(index, formik);
             }}
+            disabledReason={formik.values.editRestriction}
           />
         ),
       }),
@@ -149,8 +152,9 @@ const DiskDeviceFormCustom: FC<Props> = ({ formik, project, profiles }) => {
                 id: `devices.${index}.pool`,
                 appearance: "base",
                 className: "u-no-margin--bottom",
-                title: "Select storage volume",
+                title: formik.values.editRestriction ?? "Select storage volume",
                 dense: true,
+                disabled: !!formik.values.editRestriction,
               }}
             >
               <Icon name="edit" />

diff --git a/src/components/forms/DiskDeviceFormInherited.tsx b/src/components/forms/DiskDeviceFormInherited.tsx
@@ -54,12 +54,13 @@ const DiskDeviceFormInherited: FC<Props> = ({
           <Button
             appearance="base"
             type="button"
-            title="Reattach device"
+            title={formik.values.editRestriction ?? "Reattach device"}
             onClick={() => {
               ensureEditMode(formik);
               removeDevice(noneDeviceId, formik);
             }}
             className="has-icon u-no-margin--bottom"
+            disabled={!!formik.values.editRestriction}
           >
             <Icon name="connected"></Icon>
             <span>Reattach</span>
@@ -70,6 +71,7 @@ const DiskDeviceFormInherited: FC<Props> = ({
               ensureEditMode(formik);
               addNoneDevice(item.key, formik);
             }}
+            disabledReason={formik.values.editRestriction}
           />
         ),
       }),
@@ -82,6 +84,7 @@ const DiskDeviceFormInherited: FC<Props> = ({
           inheritValue: item.disk.source,
           readOnly: readOnly,
           isDeactivated: isNoneDevice,
+          disabledReason: formik.values.editRestriction,
         }),
       );
     } else {
@@ -95,6 +98,7 @@ const DiskDeviceFormInherited: FC<Props> = ({
           ),
           readOnly: readOnly,
           isDeactivated: isNoneDevice,
+          disabledReason: formik.values.editRestriction,
         }),
       );
     }
@@ -105,6 +109,7 @@ const DiskDeviceFormInherited: FC<Props> = ({
         inheritValue: item.disk.path,
         readOnly: readOnly,
         isDeactivated: isNoneDevice,
+        disabledReason: formik.values.editRestriction,
       }),
     );
   });

diff --git a/src/components/forms/DiskDeviceFormRoot.tsx b/src/components/forms/DiskDeviceFormRoot.tsx
@@ -66,9 +66,10 @@ const DiskDeviceFormRoot: FC<Props> = ({ formik, pools, profiles }) => {
                   }}
                   type="button"
                   appearance="base"
-                  title="Clear override"
+                  title={formik.values.editRestriction ?? "Clear override"}
                   hasIcon
                   className="u-no-margin--bottom"
+                  disabled={!!formik.values.editRestriction}
                 >
                   <Icon name="close" className="clear-configuration-icon" />
                 </Button>
@@ -81,9 +82,10 @@ const DiskDeviceFormRoot: FC<Props> = ({ formik, pools, profiles }) => {
                 }}
                 type="button"
                 appearance="base"
-                title="Create override"
+                title={formik.values.editRestriction ?? "Create override"}
                 className="u-no-margin--bottom"
                 hasIcon
+                disabled={!!formik.values.editRestriction}
               >
                 <Icon name="edit" />
               </Button>
@@ -97,6 +99,7 @@ const DiskDeviceFormRoot: FC<Props> = ({ formik, pools, profiles }) => {
             inheritValue: inheritValue?.pool ?? "",
             inheritSource,
             readOnly: readOnly,
+            disabledReason: formik.values.editRestriction,
             overrideValue: hasRootStorage && (
               <>
                 {formRootDevice?.pool}
@@ -148,6 +151,7 @@ const DiskDeviceFormRoot: FC<Props> = ({ formik, pools, profiles }) => {
               inheritValue?.size ?? (inheritValue ? "unlimited" : ""),
             inheritSource,
             readOnly: readOnly,
+            disabledReason: formik.values.editRestriction,
             overrideValue: hasRootStorage && (
               <>
                 {formRootDevice?.size ?? "unlimited"}
@@ -158,9 +162,10 @@ const DiskDeviceFormRoot: FC<Props> = ({ formik, pools, profiles }) => {
                   }}
                   type="button"
                   appearance="base"
-                  title="Edit"
+                  title={formik.values.editRestriction ?? "Edit"}
                   className="u-no-margin--bottom"
                   hasIcon
+                  disabled={!!formik.values.editRestriction}
                 >
                   <Icon name="edit" />
                 </Button>

diff --git a/src/components/forms/GPUDeviceForm.tsx b/src/components/forms/GPUDeviceForm.tsx
@@ -103,7 +103,7 @@ const GPUDevicesForm: FC<Props> = ({ formik, project }) => {
           <Button
             appearance="base"
             type="button"
-            title="Reattach volume"
+            title="Reattach GPU"
             onClick={() => {
               ensureEditMode(formik);
               removeDevice(noneDeviceId, formik);
@@ -123,6 +123,8 @@ const GPUDevicesForm: FC<Props> = ({ formik, project }) => {
             }}
             className="has-icon u-no-margin--bottom"
             dense
+            title={formik.values.editRestriction ?? "Detach GPU"}
+            disabled={!!formik.values.editRestriction}
           >
             <Icon name="disconnect"></Icon>
             <span>Detach</span>
@@ -165,6 +167,7 @@ const GPUDevicesForm: FC<Props> = ({ formik, project }) => {
               ensureEditMode(formik);
               void formik.setFieldValue(`devices.${index}.name`, name);
             }}
+            disableReason={formik.values.editRestriction}
           />
         ),
         inherited: "",
@@ -179,7 +182,8 @@ const GPUDevicesForm: FC<Props> = ({ formik, project }) => {
             appearance="base"
             hasIcon
             dense
-            title="Detach GPU"
+            title={formik.values.editRestriction ?? "Detach GPU"}
+            disabled={!!formik.values.editRestriction}
           >
             <Icon name="disconnect" />
             <span>Detach</span>
@@ -213,6 +217,7 @@ const GPUDevicesForm: FC<Props> = ({ formik, project }) => {
               void formik.setFieldValue(`devices.${index}.pci`, pci);
               void formik.setFieldValue(`devices.${index}.id`, id);
             }}
+            disableReason={formik.values.editRestriction}
           />
         ),
         readOnly: false,
@@ -269,6 +274,7 @@ const GPUDevicesForm: FC<Props> = ({ formik, project }) => {
           ensureEditMode(formik);
           addGPUCard(card);
         }}
+        disabledReason={formik.values.editRestriction}
       />
     </ScrollableForm>
   );