feat: [M3-7684] - Disable Volume Action Menu Buttons for Restricted Users

packages/manager/.changeset/pr-10641-added-1720011097638.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Disable Volume Action Menu buttons for restricted users ([#10641](https://github.com/linode/manager/pull/10641))

packages/manager/src/features/Volumes/VolumesActionMenu.tsx

@@ -6,6 +6,8 @@ import * as React from 'react';
 
 import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
+import { getRestrictedResourceText } from 'src/features/Account/utils';
+import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 
 export interface ActionHandlers {
   handleAttach: () => void;
@@ -32,42 +34,88 @@ export const VolumesActionMenu = (props: Props) => {
   const theme = useTheme<Theme>();
   const matchesSmDown = useMediaQuery(theme.breakpoints.down('md'));
 
+  const isVolumeReadOnly = useIsResourceRestricted({
+    grantLevel: 'read_only',
+    grantType: 'volume',
+    id: volume.id,
+  });
+
   const actions: Action[] = [
     {
       onClick: handlers.handleDetails,
       title: 'Show Config',
     },
     {
+      disabled: isVolumeReadOnly,
       onClick: handlers.handleEdit,
       title: 'Edit',
+      tooltip: isVolumeReadOnly
+        ? getRestrictedResourceText({
+            action: 'edit',
+            isSingular: true,
+            resourceType: 'Volumes',
+          })
+        : undefined,
     },
     {
+      disabled: isVolumeReadOnly,
       onClick: handlers.handleResize,
       title: 'Resize',
+      tooltip: isVolumeReadOnly
+        ? getRestrictedResourceText({
+            action: 'resize',
+            isSingular: true,
+            resourceType: 'Volumes',
+          })
+        : undefined,
     },
     {
+      disabled: isVolumeReadOnly,
       onClick: handlers.handleClone,
       title: 'Clone',
+      tooltip: isVolumeReadOnly
+        ? getRestrictedResourceText({
+            action: 'clone',
+            isSingular: true,
+            resourceType: 'Volumes',
+          })
+        : undefined,
     },
   ];
 
   if (!attached && isVolumesLanding) {
     actions.push({
+      disabled: isVolumeReadOnly,
       onClick: handlers.handleAttach,
       title: 'Attach',
+      tooltip: isVolumeReadOnly
+        ? "You don't have permissions to attach this Volume. \
+        Please contact your account administrator to request the necessary permissions."
+        : undefined,
     });
   } else {
     actions.push({
+      disabled: isVolumeReadOnly,
       onClick: handlers.handleDetach,
       title: 'Detach',
+      tooltip: isVolumeReadOnly
+        ? "You don't have permissions to detach this Volume. \
+        Please contact your account administrator to request the necessary permissions."
+        : undefined,
     });
   }
 
   actions.push({
-    disabled: attached,
+    disabled: isVolumeReadOnly || attached,
     onClick: handlers.handleDelete,
     title: 'Delete',
-    tooltip: attached
+    tooltip: isVolumeReadOnly
+      ? getRestrictedResourceText({
+          action: 'delete',
+          isSingular: true,
+          resourceType: 'Volumes',
+        })
+      : attached
       ? 'Your volume must be detached before it can be deleted.'
       : undefined,
   });
@@ -82,8 +130,10 @@ export const VolumesActionMenu = (props: Props) => {
           return (
             <InlineMenuAction
               actionText={action.title}
+              disabled={action.disabled}
               key={action.title}
               onClick={action.onClick}
+              tooltip={action.tooltip}
             />
           );
         })}