feat: [UIE-9144] - IAM RBAC: perm check nodebalancer settings tab

packages/manager/.changeset/pr-12871-added-1757674703754.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+IAM RBAC: Implements IAM RBAC permissions for NodeBalancer settings tab ([#12871](https://github.com/linode/manager/pull/12871))

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/AddFirewallForm.tsx

@@ -1,5 +1,8 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { useAddFirewallDeviceMutation } from '@linode/queries';
+import {
+  useAddFirewallDeviceMutation,
+  useAllFirewallsQuery,
+} from '@linode/queries';
 import { ActionsPanel, Stack, Typography } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import React from 'react';
@@ -10,8 +13,9 @@ import { number, object } from 'yup';
 import { Link } from 'src/components/Link';
 import { FirewallSelect } from 'src/features/Firewalls/components/FirewallSelect';
 import { formattedTypes } from 'src/features/Firewalls/FirewallDetail/Devices/constants';
+import { useQueryWithPermissions } from 'src/features/IAM/hooks/usePermissions';
 
-import type { FirewallDeviceEntityType } from '@linode/api-v4';
+import type { Firewall, FirewallDeviceEntityType } from '@linode/api-v4';
 
 interface Values {
   firewallId: number;
@@ -35,6 +39,12 @@ export const AddFirewallForm = (props: Props) => {
 
   const { mutateAsync } = useAddFirewallDeviceMutation();
 
+  const { data: availableFirewalls } = useQueryWithPermissions<Firewall>(
+    useAllFirewallsQuery(),
+    'firewall',
+    ['create_firewall_device']
+  );
+
   const form = useForm<Values>({
     resolver: yupResolver(schema) as Resolver<Values>,
   });
@@ -66,6 +76,7 @@ export const AddFirewallForm = (props: Props) => {
               errorText={fieldState.error?.message}
               label="Firewall"
               onChange={(e, value) => field.onChange(value?.id)}
+              options={availableFirewalls}
               placeholder="Select a Firewall"
               textFieldProps={{
                 inputRef: field.ref,

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsActionMenu.tsx

@@ -1,30 +1,36 @@
-import { useGrants, useProfile } from '@linode/queries';
 import * as React from 'react';
 
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { NO_PERMISSIONS_TOOLTIP_TEXT } from 'src/features/Firewalls/FirewallLanding/constants';
-import { checkIfUserCanModifyFirewall } from 'src/features/Firewalls/shared';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 
 import type { Action } from 'src/components/ActionMenu/ActionMenu';
 
 interface Props {
   firewallID: number;
+  nodeBalancerId: number;
   onUnassign: () => void;
 }
 
 export const NodeBalancerFirewallsActionMenu = (props: Props) => {
-  const { firewallID, onUnassign } = props;
+  const { firewallID, onUnassign, nodeBalancerId } = props;
 
-  const { data: profile } = useProfile();
-  const { data: grants } = useGrants();
+  const { data: firewallPermissions } = usePermissions(
+    'firewall',
+    ['delete_firewall_device'],
+    firewallID
+  );
 
-  const userCanModifyFirewall = checkIfUserCanModifyFirewall(
-    firewallID,
-    profile,
-    grants
+  const { data: nodeBalancerPermissions } = usePermissions(
+    'nodebalancer',
+    ['update_nodebalancer'],
+    nodeBalancerId
   );
 
-  const disabledProps = !userCanModifyFirewall
+  const disabledProps = !(
+    firewallPermissions.delete_firewall_device &&
+    nodeBalancerPermissions.update_nodebalancer
+  )
     ? {
         disabled: true,
         tooltip: NO_PERMISSIONS_TOOLTIP_TEXT,
@@ -46,6 +52,7 @@ export const NodeBalancerFirewallsActionMenu = (props: Props) => {
       disabled={action.disabled}
       key={action.title}
       onClick={action.onClick}
+      tooltip={action.tooltip}
     />
   );
 };

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsRow.test.tsx

@@ -2,7 +2,6 @@ import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { firewallFactory } from 'src/factories';
-import { checkIfUserCanModifyFirewall } from 'src/features/Firewalls/shared';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { NodeBalancerFirewallsRow } from './NodeBalancerFirewallsRow';
@@ -14,6 +13,16 @@ vi.mock('src/features/Firewalls/shared');
 
 const queryMocks = vi.hoisted(() => ({
   useNodeBalancersFirewallsQuery: vi.fn().mockReturnValue({ data: undefined }),
+  userPermissions: vi.fn(() => ({
+    data: {
+      delete_firewall_device: true,
+      update_nodebalancer: true,
+    },
+  })),
+}));
+
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
 }));
 
 vi.mock('@linode/queries', async () => {
@@ -33,7 +42,6 @@ const props = {
 
 describe('NodeBalancerFirewallsRow', () => {
   beforeEach(() => {
-    vi.mocked(checkIfUserCanModifyFirewall).mockReturnValue(true);
     queryMocks.useNodeBalancersFirewallsQuery.mockReturnValue({
       data: { data: [firewall] },
     });
@@ -65,7 +73,12 @@ describe('NodeBalancerFirewallsRow', () => {
   });
 
   it('disables unassigning the firewall if user cannot modify firewall', async () => {
-    vi.mocked(checkIfUserCanModifyFirewall).mockReturnValue(false);
+    queryMocks.userPermissions.mockReturnValue({
+      data: {
+        delete_firewall_device: false,
+        update_nodebalancer: false,
+      },
+    });
     const { getByTestId } = renderWithTheme(
       <NodeBalancerFirewallsRow {...props} />
     );

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsRow.tsx

@@ -22,7 +22,7 @@ interface Props {
 }
 
 export const NodeBalancerFirewallsRow = (props: Props) => {
-  const { firewall, onClickUnassign } = props;
+  const { firewall, onClickUnassign, nodeBalancerId } = props;
 
   const { id: firewallID, label, rules, status } = firewall;
 
@@ -41,6 +41,7 @@ export const NodeBalancerFirewallsRow = (props: Props) => {
       <TableCell actionCell>
         <NodeBalancerFirewallsActionMenu
           firewallID={firewallID}
+          nodeBalancerId={nodeBalancerId}
           onUnassign={onClickUnassign}
         />
       </TableCell>

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.test.tsx

@@ -2,7 +2,6 @@ import { nodeBalancerFactory } from '@linode/utilities';
 import * as React from 'react';
 
 import { firewallFactory } from 'src/factories';
-import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { NodeBalancerSettings } from './NodeBalancerSettings';
@@ -16,6 +15,16 @@ const queryMocks = vi.hoisted(() => ({
   useNodeBalancerQuery: vi.fn().mockReturnValue({ data: undefined }),
   useNodeBalancersFirewallsQuery: vi.fn().mockReturnValue({ data: undefined }),
   useParams: vi.fn().mockReturnValue({}),
+  userPermissions: vi.fn(() => ({
+    data: {
+      update_nodebalancer: true,
+      delete_nodebalancer: true,
+    },
+  })),
+}));
+
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
 }));
 
 vi.mock('@linode/queries', async () => {
@@ -90,7 +99,12 @@ describe('NodeBalancerSettings', () => {
   });
 
   it('disables inputs and buttons if the Node Balancer is read only', () => {
-    vi.mocked(useIsResourceRestricted).mockReturnValue(true);
+    queryMocks.userPermissions.mockReturnValue({
+      data: {
+        update_nodebalancer: false,
+        delete_nodebalancer: false,
+      },
+    });
     const { getByLabelText, getByTestId } = renderWithTheme(
       <NodeBalancerSettings />
     );

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx

@@ -14,7 +14,7 @@ import { useMatch, useNavigate, useParams } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 
 import { NodeBalancerDeleteDialog } from '../NodeBalancerDeleteDialog';
 import { NodeBalancerFirewalls } from './NodeBalancerFirewalls';
@@ -26,11 +26,11 @@ export const NodeBalancerSettings = () => {
   const { id } = useParams({ strict: false });
   const { data: nodebalancer } = useNodeBalancerQuery(Number(id), Boolean(id));
 
-  const isNodeBalancerReadOnly = useIsResourceRestricted({
-    grantLevel: 'read_only',
-    grantType: 'nodebalancer',
-    id: nodebalancer?.id,
-  });
+  const { data: permissions } = usePermissions(
+    'nodebalancer',
+    ['update_nodebalancer', 'delete_nodebalancer'],
+    nodebalancer?.id
+  );
 
   const {
     error: labelError,
@@ -80,7 +80,7 @@ export const NodeBalancerSettings = () => {
       <Accordion defaultExpanded heading="NodeBalancer Label">
         <TextField
           data-qa-label-panel
-          disabled={isNodeBalancerReadOnly}
+          disabled={!permissions.update_nodebalancer}
           errorText={labelError?.[0].reason}
           label="Label"
           onChange={(e) => setLabel(e.target.value)}
@@ -90,7 +90,9 @@ export const NodeBalancerSettings = () => {
         <Button
           buttonType="primary"
           data-qa-label-save
-          disabled={isNodeBalancerReadOnly || label === nodebalancer.label}
+          disabled={
+            !permissions.update_nodebalancer || label === nodebalancer.label
+          }
           loading={isUpdatingLabel}
           onClick={() => updateNodeBalancerLabel({ label })}
           sx={sxButton}
@@ -104,7 +106,7 @@ export const NodeBalancerSettings = () => {
       <Accordion defaultExpanded heading="Client Connection Throttle">
         <TextField
           data-qa-connection-throttle
-          disabled={isNodeBalancerReadOnly}
+          disabled={!permissions.update_nodebalancer}
           errorText={throttleError?.[0].reason}
           InputProps={{
             endAdornment: (
@@ -140,7 +142,7 @@ export const NodeBalancerSettings = () => {
         <Button
           buttonType="primary"
           data-testid="delete-nodebalancer"
-          disabled={isNodeBalancerReadOnly}
+          disabled={!permissions.delete_nodebalancer}
           onClick={() =>
             navigate({
               params: { id: String(id) },