feat: [UIE-9481] - IAM: add perm check for the drawer

packages/manager/.changeset/pr-13043-added-1761922908861.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+IAM: add a permission check for delete nodebalancer drawer ([#13043](https://github.com/linode/manager/pull/13043))

packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.test.tsx

@@ -22,6 +22,15 @@ const queryMocks = vi.hoisted(() => ({
   useMatch: vi.fn(() => ({})),
   useNavigate: vi.fn(() => navigate),
   usePreferences: vi.fn().mockReturnValue({}),
+  userPermissions: vi.fn(() => ({
+    data: {
+      delete_nodebalancer: true,
+    },
+  })),
+}));
+
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
 }));
 
 vi.mock('@linode/queries', async () => {
@@ -77,4 +86,26 @@ describe('NodeBalancerDeleteDialog', () => {
     await userEvent.click(getByText('Cancel'));
     expect(navigate).toHaveBeenCalled();
   });
+
+  it('enables inputs and buttons if there is a delete_nodebalancer permissions', () => {
+    const { getByTestId } = renderWithTheme(
+      <NodeBalancerDeleteDialog {...props} />
+    );
+
+    expect(getByTestId('textfield-input')).toBeEnabled();
+  });
+
+  it('disables inputs and buttons if no delete_nodebalancer permission', () => {
+    queryMocks.userPermissions.mockReturnValue({
+      data: {
+        delete_nodebalancer: false,
+      },
+    });
+    const { getByTestId } = renderWithTheme(
+      <NodeBalancerDeleteDialog {...props} />
+    );
+
+    expect(getByTestId('confirm')).toBeDisabled();
+    expect(getByTestId('textfield-input')).toBeDisabled();
+  });
 });

packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx

@@ -5,6 +5,9 @@ import * as React from 'react';
 
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 
+import { getRestrictedResourceText } from '../Account/utils';
+import { usePermissions } from '../IAM/hooks/usePermissions';
+
 import type { APIError, NodeBalancer } from '@linode/api-v4';
 
 interface Props {
@@ -28,6 +31,12 @@ export const NodeBalancerDeleteDialog = ({
     selectedNodeBalancer?.id ?? -1
   );
 
+  const { data: permissions } = usePermissions(
+    'nodebalancer',
+    ['delete_nodebalancer'],
+    selectedNodeBalancer?.id,
+    open
+  );
   const label = selectedNodeBalancer?.label;
 
   const onDelete = async () => {
@@ -37,6 +46,8 @@ export const NodeBalancerDeleteDialog = ({
 
   return (
     <TypeToConfirmDialog
+      disableTypeToConfirmInput={!permissions?.delete_nodebalancer}
+      disableTypeToConfirmSubmit={!permissions?.delete_nodebalancer}
       entity={{
         action: 'deletion',
         name: label,
@@ -62,6 +73,15 @@ export const NodeBalancerDeleteDialog = ({
       title={`Delete${label ? ` ${label}` : ''}?`}
       typographyStyle={{ marginTop: '20px' }}
     >
+      {!permissions.delete_nodebalancer && (
+        <Notice
+          text={getRestrictedResourceText({
+            resourceType: 'NodeBalancers',
+            action: 'delete',
+          })}
+          variant="error"
+        />
+      )}
       <Notice variant="warning">
         <Typography style={{ fontSize: '0.875rem' }}>
           Deleting this NodeBalancer is permanent and can’t be undone.