feat: [WD-19336] Storage volumes permission checks

src/api/instances.tsx

@@ -21,6 +21,7 @@ export const instanceEntitlements = [
   "can_delete",
   "can_edit",
   "can_exec",
+  "can_view",
   "can_manage_backups",
   "can_manage_snapshots",
   "can_update_state",

src/api/storage-volumes.tsx

@@ -10,7 +10,11 @@ import axios from "axios";
 import type { LxdApiResponse } from "types/apiResponse";
 import { withEntitlementsQuery } from "util/entitlements/api";
 
-export const storageVolumeEntitlements = ["can_delete", "can_edit"];
+export const storageVolumeEntitlements = [
+  "can_delete",
+  "can_edit",
+  "can_manage_snapshots",
+];
 
 export const fetchStorageVolumes = async (
   pool: string,

src/pages/storage/MigrateVolumeBtn.tsx

@@ -12,6 +12,7 @@ import { useNavigate } from "react-router-dom";
 import ResourceLabel from "components/ResourceLabel";
 import ResourceLink from "components/ResourceLink";
 import { migrateStorageVolume } from "api/storage-volumes";
+import { useStorageVolumeEntitlements } from "util/entitlements/storage-volumes";
 
 interface Props {
   storageVolume: LxdStorageVolume;
@@ -32,6 +33,7 @@ const MigrateVolumeBtn: FC<Props> = ({
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [isVolumeLoading, setVolumeLoading] = useState(false);
+  const { canEditVolume } = useStorageVolumeEntitlements();
 
   const handleSuccess = (
     newTarget: string,
@@ -157,7 +159,7 @@ const MigrateVolumeBtn: FC<Props> = ({
         type="button"
         className={classname}
         loading={isVolumeLoading}
-        disabled={isVolumeLoading}
+        disabled={!canEditVolume(storageVolume) || isVolumeLoading}
         title="Migrate volume"
       >
         <Icon name="machines" />

src/pages/storage/StorageVolumeHeader.tsx

@@ -16,6 +16,7 @@ import { useSupportedFeatures } from "context/useSupportedFeatures";
 import ResourceLink from "components/ResourceLink";
 import ResourceLabel from "components/ResourceLabel";
 import { renameStorageVolume } from "api/storage-volumes";
+import { useStorageVolumeEntitlements } from "util/entitlements/storage-volumes";
 
 interface Props {
   volume: LxdStorageVolume;
@@ -28,6 +29,7 @@ const StorageVolumeHeader: FC<Props> = ({ volume, project }) => {
   const toastNotify = useToastNotification();
   const controllerState = useState<AbortController | null>(null);
   const { hasClusterInternalCustomVolumeCopy } = useSupportedFeatures();
+  const { canEditVolume } = useStorageVolumeEntitlements();
 
   const RenameSchema = Yup.object().shape({
     name: Yup.string()
@@ -123,7 +125,9 @@ const StorageVolumeHeader: FC<Props> = ({ volume, project }) => {
       renameDisabledReason={
         (volume.used_by?.length ?? 0) > 0
           ? "Can not rename, volume is currently in use."
-          : undefined
+          : !canEditVolume(volume)
+            ? "You do not have permission to rename this volume"
+            : undefined
       }
     />
   );

src/pages/storage/StorageVolumeNameLink.tsx

@@ -8,6 +8,8 @@ import {
   hasVolumeDetailPage,
 } from "util/storageVolume";
 import { useCurrentProject } from "context/useCurrentProject";
+import { useInstances } from "context/useInstances";
+import { useImagesInProject } from "context/useImages";
 
 interface Props {
   volume: LxdStorageVolume;
@@ -23,21 +25,44 @@ const StorageVolumeNameLink: FC<Props> = ({
 }) => {
   const { project } = useCurrentProject();
   const isExternalLink = !hasVolumeDetailPage(volume);
-  const caption = overrideName ? overrideName : volume.name;
+
+  const isInstance =
+    volume.type === "container" || volume.type === "virtual-machine";
+  const { data: instances = [] } = useInstances(volume.project);
+  const instance =
+    isInstance && instances.find((instance) => instance.name === volume.name);
+
+  const isImage = volume.type === "image";
+  const { data: images = [] } = useImagesInProject(volume.project);
+  const image =
+    isImage && images.find((image) => image.fingerprint === volume.name);
+
+  const isCustom = volume.type === "custom";
+  const displayLink = instance || image || isCustom;
+
+  const caption = overrideName
+    ? displayLink
+      ? overrideName
+      : ""
+    : volume.name;
 
   return (
     <div className={classnames("u-flex", className)}>
       <div
         className={classnames("u-truncate", "volume-name-link")}
-        title={caption}
+        title={volume.name}
       >
-        <Link
-          to={generateLinkForVolumeDetail(volume, project?.name ?? "")}
-          className={isExternalLink ? "has-icon" : undefined}
-        >
-          {caption}
-          {isExternalLink && <Icon name={ICONS.externalLink} />}
-        </Link>
+        {displayLink ? (
+          <Link
+            to={generateLinkForVolumeDetail(volume, project?.name ?? "")}
+            className={isExternalLink ? "has-icon" : undefined}
+          >
+            {caption}
+            {isExternalLink && <Icon name={ICONS.externalLink} />}
+          </Link>
+        ) : (
+          caption
+        )}
       </div>
     </div>
   );

src/pages/storage/StorageVolumes.tsx

@@ -373,7 +373,7 @@ const StorageVolumes: FC = () => {
           <Icon className="external-link-icon" name="external-link" />
         </a>
       </p>
-      <CreateVolumeBtn project={project} className="empty-state-button" />
+      <CreateVolumeBtn projectName={project} className="empty-state-button" />
     </EmptyState>
   ) : (
     <div className="storage-volumes">
@@ -425,7 +425,7 @@ const StorageVolumes: FC = () => {
           {hasVolumes && (
             <PageHeader.BaseActions>
               <CreateVolumeBtn
-                project={project}
+                projectName={project}
                 defaultPool={defaultPoolForVolumeCreate}
                 className="u-float-right u-no-margin--bottom"
               />

src/pages/storage/actions/CreateVolumeBtn.tsx

@@ -2,20 +2,28 @@ import type { FC } from "react";
 import { Button, Icon } from "@canonical/react-components";
 import { useNavigate } from "react-router-dom";
 import { useSmallScreen } from "context/useSmallScreen";
+import { useProjectEntitlements } from "util/entitlements/projects";
+import { useProject } from "context/useProjects";
 
 interface Props {
-  project: string;
+  projectName: string;
   defaultPool?: string;
   className?: string;
 }
 
-const CreateVolumeBtn: FC<Props> = ({ project, className, defaultPool }) => {
+const CreateVolumeBtn: FC<Props> = ({
+  projectName,
+  className,
+  defaultPool,
+}) => {
   const navigate = useNavigate();
   const isSmallScreen = useSmallScreen();
+  const { canCreateStorageVolumes } = useProjectEntitlements();
+  const { data: project } = useProject(projectName);
 
   const handleAdd = () => {
     navigate(
-      `/ui/project/${project}/storage/volumes/create${
+      `/ui/project/${projectName}/storage/volumes/create${
         defaultPool ? `?pool=${defaultPool}` : ""
       }`,
     );
@@ -27,6 +35,7 @@ const CreateVolumeBtn: FC<Props> = ({ project, className, defaultPool }) => {
       hasIcon={!isSmallScreen}
       onClick={handleAdd}
       className={className}
+      disabled={!canCreateStorageVolumes(project)}
     >
       {!isSmallScreen && <Icon name="plus" light />}
       <span>Create volume</span>

src/pages/storage/actions/DuplicateVolumeBtn.tsx

@@ -3,6 +3,7 @@ import { Button, Icon } from "@canonical/react-components";
 import DuplicateVolumeForm from "../forms/DuplicateVolumeForm";
 import type { LxdStorageVolume } from "types/storage";
 import { usePortal } from "@canonical/react-components";
+import { useProjectEntitlements } from "util/entitlements/projects";
 
 interface Props {
   volume: LxdStorageVolume;
@@ -12,6 +13,7 @@ interface Props {
 
 const DuplicateVolumeBtn: FC<Props> = ({ volume, className, onClose }) => {
   const { openPortal, closePortal, isOpen, Portal } = usePortal();
+  const { canCreateStorageVolumes } = useProjectEntitlements();
 
   const handleClose = () => {
     closePortal();
@@ -31,6 +33,7 @@ const DuplicateVolumeBtn: FC<Props> = ({ volume, className, onClose }) => {
         className={className}
         onClick={openPortal}
         title="Duplicate volume"
+        disabled={!canCreateStorageVolumes(volume)}
       >
         <Icon name="canvas" />
         <span>Duplicate</span>

src/pages/storage/actions/snapshots/VolumeAddSnapshotBtn.tsx

@@ -3,6 +3,7 @@ import type { LxdStorageVolume } from "types/storage";
 import { Button, Icon, Tooltip } from "@canonical/react-components";
 import { usePortal } from "@canonical/react-components";
 import CreateVolumeSnapshotForm from "pages/storage/forms/CreateVolumeSnapshotForm";
+import { useStorageVolumeEntitlements } from "util/entitlements/storage-volumes";
 
 interface Props {
   volume: LxdStorageVolume;
@@ -18,6 +19,7 @@ const VolumeAddSnapshotBtn: FC<Props> = ({
   className,
 }) => {
   const { openPortal, closePortal, isOpen, Portal } = usePortal();
+  const { canManageStorageVolumeSnapshots } = useStorageVolumeEntitlements();
 
   return (
     <>
@@ -37,9 +39,11 @@ const VolumeAddSnapshotBtn: FC<Props> = ({
           title={
             isDisabled
               ? `Snapshot creation is blocked for project ${volume.project}`
-              : "Add Snapshot"
+              : !canManageStorageVolumeSnapshots(volume)
+                ? "You do not have permission to create or delete snapshots of this volume."
+                : "Add Snapshot"
           }
-          disabled={isDisabled}
+          disabled={isDisabled || !canManageStorageVolumeSnapshots(volume)}
           className={className}
         >
           <Icon name="add-canvas" />

src/util/entitlements/storage-volumes.tsx

@@ -11,8 +11,16 @@ export const useStorageVolumeEntitlements = () => {
   const canEditVolume = (volume?: LxdStorageVolume) =>
     hasEntitlement(isFineGrained, "can_edit", volume?.access_entitlements);
 
+  const canManageStorageVolumeSnapshots = (volume?: LxdStorageVolume) =>
+    hasEntitlement(
+      isFineGrained,
+      "can_manage_snapshots",
+      volume?.access_entitlements,
+    );
+
   return {
     canDeleteVolume,
     canEditVolume,
+    canManageStorageVolumeSnapshots,
   };
 };