feat: [UIE-9204] - IAM RBAC: replace grants in Firewalls (linode#12902)

* feat: [UIE-9204] - IAM RBAC: replace grants for nodebalancer

* replace grants for linodes

* fix menu button

* fix perm check for menu

* Added changeset: IAM RBAC: replace grants with usePermission hook for Firewalls

* clean up

* minor changes

* add loading state to usePermissions hook

* fix loading state

Author: aaleksee-akamai

packages/manager/.changeset/pr-12902-changed-1758618381547.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+IAM RBAC: replace grants with usePermission hook for Firewalls ([#12902](https://github.com/linode/manager/pull/12902))

packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.test.tsx

@@ -1,5 +1,4 @@
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/react';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
@@ -13,19 +12,20 @@ const props = {
   helperText,
   onClose,
   open: true,
+  disabled: true,
 };
 
 const queryMocks = vi.hoisted(() => ({
   useParams: vi.fn().mockReturnValue({}),
-  userPermissions: vi.fn(() => ({
-    data: {
-      create_firewall_device: false,
-    },
-  })),
+  useQueryWithPermissions: vi.fn().mockReturnValue({
+    data: [],
+    isLoading: false,
+    isError: false,
+  }),
 }));
 
 vi.mock('src/features/IAM/hooks/usePermissions', () => ({
-  usePermissions: queryMocks.userPermissions,
+  useQueryWithPermissions: queryMocks.useQueryWithPermissions,
 }));
 
 vi.mock('@tanstack/react-router', async () => {
@@ -62,20 +62,11 @@ describe('AddLinodeDrawer', () => {
   });
 
   it('should disable "Add" button if the user does not have create_firewall_device permission', async () => {
-    queryMocks.userPermissions.mockReturnValue({
-      data: {
-        create_firewall_device: false,
-      },
-    });
-
     const { getByRole } = renderWithTheme(<AddLinodeDrawer {...props} />);
 
-    const autocomplete = screen.getByRole('combobox');
-    await userEvent.click(autocomplete);
-    await userEvent.type(autocomplete, 'linode-5');
-
-    const option = await screen.findByText('linode-5');
-    await userEvent.click(option);
+    const select = getByRole('combobox');
+    expect(select).toBeInTheDocument();
+    expect(select).toBeDisabled();
 
     const addButton = getByRole('button', {
       name: 'Add',
@@ -85,25 +76,15 @@ describe('AddLinodeDrawer', () => {
   });
 
   it('should enable "Add" button if the user has create_firewall_device permission', async () => {
-    queryMocks.userPermissions.mockReturnValue({
-      data: {
-        create_firewall_device: true,
-      },
-    });
-
-    const { getByRole } = renderWithTheme(<AddLinodeDrawer {...props} />);
-
-    const autocomplete = screen.getByRole('combobox');
-    await userEvent.click(autocomplete);
-    await userEvent.type(autocomplete, 'linode-5');
+    const { getByRole } = renderWithTheme(
+      <AddLinodeDrawer {...props} disabled={false} />
+    );
 
-    const option = await screen.findByText('linode-5');
-    await userEvent.click(option);
+    const select = getByRole('combobox');
+    expect(select).toBeInTheDocument();
 
-    const addButton = getByRole('button', {
-      name: 'Add',
+    await waitFor(() => {
+      expect(select).toBeEnabled();
     });
-    expect(addButton).toBeInTheDocument();
-    expect(addButton).toBeEnabled();
   });
 });

packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.tsx

@@ -3,8 +3,6 @@ import {
   useAddFirewallDeviceMutation,
   useAllFirewallsQuery,
   useAllLinodesQuery,
-  useGrants,
-  useProfile,
 } from '@linode/queries';
 import { LinodeSelect } from '@linode/shared';
 import {
@@ -14,7 +12,6 @@ import {
   Notice,
   Typography,
 } from '@linode/ui';
-import { getEntityIdsByPermission } from '@linode/utilities';
 import { useTheme } from '@mui/material';
 import { useQueries } from '@tanstack/react-query';
 import { useParams } from '@tanstack/react-router';
@@ -23,7 +20,8 @@ import * as React from 'react';
 
 import { Link } from 'src/components/Link';
 import { SupportLink } from 'src/components/SupportLink';
-import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
+import { getRestrictedResourceText } from 'src/features/Account/utils';
+import { useQueryWithPermissions } from 'src/features/IAM/hooks/usePermissions';
 import { getLinodeInterfaceType } from 'src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/utilities';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { useIsLinodeInterfacesEnabled } from 'src/utilities/linodes';
@@ -32,6 +30,7 @@ import { sanitizeHTML } from 'src/utilities/sanitizeHTML';
 import type { Linode, LinodeInterfaces } from '@linode/api-v4';
 
 interface Props {
+  disabled: boolean;
   helperText: string;
   onClose: () => void;
   open: boolean;
@@ -44,31 +43,28 @@ interface InterfaceDeviceInfo {
 }
 
 export const AddLinodeDrawer = (props: Props) => {
-  const { helperText, onClose, open } = props;
+  const { helperText, onClose, open, disabled } = props;
 
   const { id } = useParams({ strict: false });
 
   const { enqueueSnackbar } = useSnackbar();
 
-  const { data: grants } = useGrants();
-  const { data: profile } = useProfile();
   const { isLinodeInterfacesEnabled } = useIsLinodeInterfacesEnabled();
-  const isRestrictedUser = Boolean(profile?.restricted);
 
   const { data, error, isLoading } = useAllFirewallsQuery();
 
   const firewall = data?.find((firewall) => firewall.id === Number(id));
 
-  const { data: permissions } = usePermissions(
-    'firewall',
-    ['create_firewall_device'],
-    firewall?.id
-  );
-
-  const { data: allLinodes } = useAllLinodesQuery({}, {});
+  const { data: availableLinodes, isLoading: availableLinodesLoading } =
+    useQueryWithPermissions<Linode>(
+      useAllLinodesQuery({}, {}),
+      'linode',
+      ['update_linode'],
+      open
+    );
 
   const linodesUsingLinodeInterfaces =
-    allLinodes?.filter((l) => l.interface_generation === 'linode') ?? [];
+    availableLinodes?.filter((l) => l.interface_generation === 'linode') ?? [];
 
   const allFirewallEntities = React.useMemo(
     () => data?.map((firewall) => firewall.entities).flat() ?? [],
@@ -90,15 +86,6 @@ export const AddLinodeDrawer = (props: Props) => {
     [allFirewallEntities]
   );
 
-  // If a user is restricted, they can not add a read-only Linode to a firewall.
-  const readOnlyLinodeIds = React.useMemo(
-    () =>
-      isRestrictedUser
-        ? getEntityIdsByPermission(grants, 'linode', 'read_only')
-        : [],
-    [grants, isRestrictedUser]
-  );
-
   // Keeps track of Linode and its eligible Linode Interfaces if they exist (eligible = a non-vlan interface that isn't already assigned to a firewall)
   // Key is Linode ID. Value is an object containing the Linode object and the Linode's interfaces
   const linodesAndEligibleInterfaces = useQueries({
@@ -130,12 +117,7 @@ export const AddLinodeDrawer = (props: Props) => {
     },
   });
 
-  const linodeOptions = allLinodes?.filter((linode) => {
-    // Exclude read only Linodes
-    if (readOnlyLinodeIds.includes(linode.id)) {
-      return false;
-    }
-
+  const linodeOptions = availableLinodes?.filter((linode) => {
     // Exclude a Linode if it uses Linode Interfaces but has no eligible interfaces
     if (linode.interface_generation === 'linode') {
       return Boolean(linodesAndEligibleInterfaces[linode.id]);
@@ -366,10 +348,19 @@ export const AddLinodeDrawer = (props: Props) => {
           handleSubmit();
         }}
       >
+        {disabled && (
+          <Notice
+            text={getRestrictedResourceText({
+              resourceType: 'Firewalls',
+            })}
+            variant="error"
+          />
+        )}
         {localError ? errorNotice() : null}
         <LinodeSelect
-          disabled={isLoading}
+          disabled={isLoading || availableLinodesLoading || disabled}
           helperText={helperText}
+          loading={availableLinodesLoading}
           multiple
           onSelectionChange={(linodes) => onSelectionChange(linodes)}
           options={linodeOptions}
@@ -416,9 +407,7 @@ export const AddLinodeDrawer = (props: Props) => {
           })}
         <ActionsPanel
           primaryButtonProps={{
-            disabled:
-              selectedLinodes.length === 0 ||
-              !permissions.create_firewall_device,
+            disabled: selectedLinodes.length === 0 || disabled,
             label: 'Add',
             loading: addDeviceIsLoading,
             onClick: handleSubmit,

packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.test.tsx

@@ -17,6 +17,21 @@ const props = {
 
 const queryMocks = vi.hoisted(() => ({
   useParams: vi.fn().mockReturnValue({}),
+  userPermissions: vi.fn(() => ({
+    data: {
+      create_firewall_device: true,
+    },
+  })),
+  useQueryWithPermissions: vi.fn().mockReturnValue({
+    data: [],
+    isLoading: false,
+    isError: false,
+  }),
+}));
+
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+  useQueryWithPermissions: queryMocks.useQueryWithPermissions,
 }));
 
 vi.mock('@tanstack/react-router', async () => {

packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.tsx

@@ -1,11 +1,8 @@
 import {
   useAddFirewallDeviceMutation,
   useAllFirewallsQuery,
-  useGrants,
-  useProfile,
 } from '@linode/queries';
 import { ActionsPanel, Drawer, Notice } from '@linode/ui';
-import { getEntityIdsByPermission } from '@linode/utilities';
 import { useTheme } from '@mui/material';
 import { useParams } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
@@ -32,9 +29,6 @@ export const AddNodebalancerDrawer = (props: Props) => {
   const { helperText, onClose, open, disabled } = props;
   const { enqueueSnackbar } = useSnackbar();
   const { id } = useParams({ strict: false });
-  const { data: grants } = useGrants();
-  const { data: profile } = useProfile();
-  const isRestrictedUser = Boolean(profile?.restricted);
 
   const { data, error, isLoading } = useAllFirewallsQuery(open);
 
@@ -149,20 +143,14 @@ export const AddNodebalancerDrawer = (props: Props) => {
     }
   };
 
-  // If a user is restricted, they can not add a read-only Nodebalancer to a firewall.
-  const readOnlyNodebalancerIds = isRestrictedUser
-    ? getEntityIdsByPermission(grants, 'nodebalancer', 'read_only')
-    : [];
-
   const assignedNodeBalancers = data
     ?.map((firewall) => firewall.entities)
     .flat()
     ?.filter((service) => service.type === 'nodebalancer');
 
   const nodebalancerOptionsFilter = (nodebalancer: NodeBalancer) => {
-    return (
-      !readOnlyNodebalancerIds.includes(nodebalancer.id) &&
-      !assignedNodeBalancers?.some((service) => service.id === nodebalancer.id)
+    return !assignedNodeBalancers?.some(
+      (service) => service.id === nodebalancer.id
     );
   };
 

packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceActionMenu.tsx

@@ -6,6 +6,8 @@ export interface ActionHandlers {
   handleRemoveDevice: (device: FirewallDevice) => void;
 }
 
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
+
 import type { FirewallDevice } from '@linode/api-v4';
 
 export interface FirewallDeviceActionMenuProps extends ActionHandlers {
@@ -17,12 +19,48 @@ export const FirewallDeviceActionMenu = React.memo(
   (props: FirewallDeviceActionMenuProps) => {
     const { device, disabled, handleRemoveDevice } = props;
 
+    const { type } = device.entity;
+
+    const { data: linodePermissions, isLoading: isLinodePermissionsLoading } =
+      usePermissions(
+        'linode',
+        ['update_linode'],
+        device?.entity.id,
+        type !== 'nodebalancer'
+      );
+
+    const {
+      data: nodebalancerPermissions,
+      isLoading: isNodebalancerPermissionsLoading,
+    } = usePermissions(
+      'nodebalancer',
+      ['update_nodebalancer'],
+      device?.entity.id,
+      type === 'nodebalancer'
+    );
+
+    const disabledDueToPermissions =
+      type === 'nodebalancer'
+        ? !nodebalancerPermissions?.update_nodebalancer
+        : !linodePermissions?.update_linode;
+
+    const isPermissionsLoading =
+      type === 'nodebalancer'
+        ? isNodebalancerPermissionsLoading
+        : isLinodePermissionsLoading;
+
     return (
       <InlineMenuAction
         actionText="Remove"
-        disabled={disabled}
+        disabled={disabled || disabledDueToPermissions}
         key="Remove"
+        loading={isPermissionsLoading}
         onClick={() => handleRemoveDevice(device)}
+        tooltip={
+          disabledDueToPermissions
+            ? `You do not have permission to modify this ${type === 'nodebalancer' ? 'NodeBalancer' : 'Linode'}.`
+            : undefined
+        }
       />
     );
   }

packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.test.tsx

@@ -23,6 +23,11 @@ const queryMocks = vi.hoisted(() => ({
       create_firewall_device: false,
     },
   })),
+  useQueryWithPermissions: vi.fn().mockReturnValue({
+    data: [],
+    isLoading: false,
+    isError: false,
+  }),
 }));
 
 vi.mock('@tanstack/react-router', async () => {
@@ -46,6 +51,7 @@ vi.mock('src/hooks/useOrderV2', async () => {
 
 vi.mock('src/features/IAM/hooks/usePermissions', () => ({
   usePermissions: queryMocks.usePermissions,
+  useQueryWithPermissions: queryMocks.useQueryWithPermissions,
 }));
 
 const baseProps = (