fix: [M3-9566, 7066] - Disable action menu buttons for Database with tooltip text and enable Delete Cluster for read/write grant user (linode#11890)

* fix: [M3-9566] - Disable action menu for Database with tootip text

* Added changeset: Disable action menu for `Database` with tooltip text

* enable delete cluster button with read/write access user

* disable suspend button

* Update changeset description

Author: hasyed-akamai

packages/manager/.changeset/pr-11890-fixed-1742471963025.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Disable action menu for `Database` with tooltip text and enable `Delete Cluster` for `read/write` grant users ([#11890](https://github.com/linode/manager/pull/11890))

packages/manager/src/features/Account/utils.ts

@@ -18,6 +18,8 @@ export type ActionType =
   | 'rebuild'
   | 'rescue'
   | 'resize'
+  | 'resume'
+  | 'suspend'
   | 'view';
 
 interface GetRestrictedResourceText {

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx

@@ -1,3 +1,4 @@
+import { useProfile } from '@linode/queries';
 import { Divider, Paper, Stack, Typography } from '@linode/ui';
 import * as React from 'react';
 
@@ -16,7 +17,6 @@ import {
   isDefaultDatabase,
   useIsDatabasesEnabled,
 } from 'src/features/Databases/utilities';
-import { useProfile } from '@linode/queries';
 
 import AccessControls from '../AccessControls';
 import DatabaseSettingsDeleteClusterDialog from './DatabaseSettingsDeleteClusterDialog';
@@ -148,7 +148,7 @@ export const DatabaseSettings: React.FC<Props> = (props) => {
           <DatabaseSettingsMenuItem
             buttonText="Delete Cluster"
             descriptiveText={deleteClusterCopy}
-            disabled={Boolean(profile?.restricted)}
+            disabled={disabled}
             onClick={onDeleteCluster}
             sectionTitle="Delete the Cluster"
           />

packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx

@@ -3,13 +3,16 @@ import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
+import { getRestrictedResourceText } from 'src/features/Account/utils';
+import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import { useResumeDatabaseMutation } from 'src/queries/databases/databases';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { useIsDatabasesEnabled } from '../utilities';
 
 import type { DatabaseStatus, Engine } from '@linode/api-v4';
 import type { Action } from 'src/components/ActionMenu/ActionMenu';
+import type { ActionType } from 'src/features/Account/utils';
 
 interface Props {
   databaseEngine: Engine;
@@ -63,48 +66,73 @@ export const DatabaseActionMenu = (props: Props) => {
     }
   };
 
+  const isDatabaseReadOnly = useIsResourceRestricted({
+    grantLevel: 'read_only',
+    grantType: 'database',
+    id: databaseId,
+  });
+
+  const getTooltipText = (action: ActionType) => {
+    return isDatabaseReadOnly
+      ? getRestrictedResourceText({
+          action,
+          isSingular: true,
+          resourceType: 'Databases',
+        })
+      : undefined;
+  };
+
   const actions: Action[] = [
     {
-      disabled: isDatabaseNotRunning || isDatabaseSuspended,
+      disabled:
+        isDatabaseNotRunning || isDatabaseSuspended || isDatabaseReadOnly,
       onClick: handlers.handleManageAccessControls,
       title: 'Manage Access Controls',
+      tooltip: getTooltipText('edit'),
     },
     {
-      disabled: isDatabaseNotRunning || isDatabaseSuspended,
+      disabled:
+        isDatabaseNotRunning || isDatabaseSuspended || isDatabaseReadOnly,
       onClick: handlers.handleResetPassword,
       title: 'Reset Root Password',
+      tooltip: getTooltipText('edit'),
     },
     {
-      disabled: isDatabaseNotRunning || isDatabaseSuspended,
+      disabled:
+        isDatabaseNotRunning || isDatabaseSuspended || isDatabaseReadOnly,
       onClick: () => {
         history.push({
           pathname: `/databases/${databaseEngine}/${databaseId}/resize`,
         });
       },
       title: 'Resize',
+      tooltip: getTooltipText('resize'),
     },
     {
-      disabled: isDatabaseNotRunning,
+      disabled: isDatabaseNotRunning || isDatabaseReadOnly,
       onClick: handlers.handleDelete,
       title: 'Delete',
+      tooltip: getTooltipText('delete'),
     },
   ];
 
   if (isDatabasesV2GA) {
     actions.unshift({
-      disabled: databaseStatus !== 'active',
+      disabled: databaseStatus !== 'active' || isDatabaseReadOnly,
       onClick: () => {
         handlers.handleSuspend();
       },
       title: 'Suspend',
+      tooltip: getTooltipText('suspend'),
     });
 
     actions.splice(4, 0, {
-      disabled: !isDatabaseSuspended,
+      disabled: !isDatabaseSuspended || isDatabaseReadOnly,
       onClick: () => {
         handleResume();
       },
       title: 'Resume',
+      tooltip: getTooltipText('resume'),
     });
   }