fix: [UIE-9737] - IAM Permissions performance improvements: Firewall entity assignment (#13153)

* Permission model switch

* Added changeset: IAM Permissions performance improvements: Firewall entity assignment

Author: abailly-akamai

packages/manager/.changeset/pr-13153-fixed-1764672225221.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+IAM Permissions performance improvements: Firewall entity assignment ([#13153](https://github.com/linode/manager/pull/13153))

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

@@ -6,48 +6,31 @@ 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 {
   device: FirewallDevice;
   disabled: boolean;
+  isLinodeUpdatable: boolean;
+  isNodebalancerUpdatable: boolean;
+  isPermissionsLoading: boolean;
 }
 
 export const FirewallDeviceActionMenu = React.memo(
   (props: FirewallDeviceActionMenuProps) => {
-    const { device, disabled, handleRemoveDevice } = props;
+    const {
+      device,
+      disabled,
+      handleRemoveDevice,
+      isLinodeUpdatable,
+      isNodebalancerUpdatable,
+      isPermissionsLoading,
+    } = 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;
+      type === 'nodebalancer' ? !isNodebalancerUpdatable : !isLinodeUpdatable;
 
     return (
       <InlineMenuAction
@@ -59,7 +42,9 @@ export const FirewallDeviceActionMenu = React.memo(
         tooltip={
           disabledDueToPermissions
             ? `You do not have permission to modify this ${type === 'nodebalancer' ? 'NodeBalancer' : 'Linode'}.`
-            : undefined
+            : disabled
+              ? 'You do not have permission to remove the device from this firewall.'
+              : undefined
         }
       />
     );

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

@@ -2,30 +2,32 @@ import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { accountFactory, firewallDeviceFactory } from 'src/factories';
-import { http, HttpResponse, server } from 'src/mocks/testServer';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { FirewallDeviceRow } from './FirewallDeviceRow';
 
 import type { FirewallDeviceEntityType } from '@linode/api-v4';
 
 const queryMocks = vi.hoisted(() => ({
-  userPermissions: vi.fn(() => ({
-    data: {
-      update_linode: true,
-    },
-  })),
+  useAccount: vi.fn().mockReturnValue({}),
 }));
 
-vi.mock('src/features/IAM/hooks/usePermissions', () => ({
-  usePermissions: queryMocks.userPermissions,
-}));
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return {
+    ...actual,
+    useAccount: queryMocks.useAccount,
+  };
+});
 
 const props = {
   device: firewallDeviceFactory.build(),
   disabled: false,
   handleRemoveDevice: vi.fn(),
   isLinodeRelatedDevice: true,
+  isLinodeUpdatable: true,
+  isNodebalancerUpdatable: true,
+  isPermissionsLoading: false,
 };
 
 const INTERFACE_TEXT = 'Configuration Profile Interface';
@@ -36,11 +38,11 @@ describe('FirewallDeviceRow', () => {
       capabilities: ['Linode Interfaces'],
     });
 
-    server.use(
-      http.get('*/v4*/account', () => {
-        return HttpResponse.json(account);
-      })
-    );
+    queryMocks.useAccount.mockReturnValue({
+      data: account,
+      isLoading: false,
+      error: null,
+    });
 
     const { getAllByRole, getByText, findByText } = renderWithTheme(
       <FirewallDeviceRow {...props} />,

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

@@ -9,6 +9,7 @@ import { TableContentWrapper } from 'src/components/TableContentWrapper/TableCon
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
+import { useGetAllUserEntitiesByPermission } from 'src/features/IAM/hooks/useGetAllUserEntitiesByPermission';
 import { useOrderV2 } from 'src/hooks/useOrderV2';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
@@ -47,6 +48,26 @@ export const FirewallDeviceTable = React.memo(
       isLoading,
     } = useAllFirewallDevicesQuery(firewallId);
 
+    const {
+      data: updatableLinodes = [],
+      isLoading: isLinodePermissionsLoading,
+      error: linodePermissionsError,
+    } = useGetAllUserEntitiesByPermission({
+      entityType: 'linode',
+      permission: 'update_linode',
+      enabled: type === 'linode',
+    });
+
+    const {
+      data: updatableNodebalancers = [],
+      isLoading: isNodebalancerPermissionsLoading,
+      error: nodebalancerPermissionsError,
+    } = useGetAllUserEntitiesByPermission({
+      entityType: 'nodebalancer',
+      permission: 'update_nodebalancer',
+      enabled: type === 'nodebalancer',
+    });
+
     const devices =
       allDevices?.filter((device) =>
         type === 'linode' && isLinodeInterfacesEnabled
@@ -82,12 +103,20 @@ export const FirewallDeviceTable = React.memo(
 
     const isLinodeRelatedDevice = type === 'linode';
 
+    const permissionsError =
+      linodePermissionsError || nodebalancerPermissionsError;
+
     const _error = error
       ? getAPIErrorOrDefault(
           error,
           `Unable to retrieve ${formattedTypes[deviceType]}s`
         )
-      : undefined;
+      : permissionsError
+        ? getAPIErrorOrDefault(
+            permissionsError,
+            `Unable to retrieve ${formattedTypes[deviceType]}s`
+          )
+        : undefined;
 
     const ariaLabel = `List of ${formattedTypes[deviceType]}s attached to this firewall`;
 
@@ -152,6 +181,16 @@ export const FirewallDeviceTable = React.memo(
                   disabled={disabled}
                   handleRemoveDevice={handleRemoveDevice}
                   isLinodeRelatedDevice={isLinodeRelatedDevice}
+                  isLinodeUpdatable={updatableLinodes?.some(
+                    (linode) => linode.id === thisDevice.entity.id
+                  )}
+                  isNodebalancerUpdatable={updatableNodebalancers?.some(
+                    (nodebalancer) => nodebalancer.id === thisDevice.entity.id
+                  )}
+                  isPermissionsLoading={
+                    isLinodePermissionsLoading ||
+                    isNodebalancerPermissionsLoading
+                  }
                   key={`device-row-${thisDevice.id}`}
                 />
               ))}