feat: [UIE-8933] - IAM RBAC: permission check for linode network tab

packages/manager/.changeset/pr-12458-upcoming-features-1751453800789.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Implement the new RBAC permission hook in Linode Network tab ([#12458](https://github.com/linode/manager/pull/12458))

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

@@ -1,15 +1,45 @@
-import { waitFor } from '@testing-library/react';
+import {
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
 import * as React from 'react';
 
 import { firewallFactory } from 'src/factories';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { http, HttpResponse, server } from 'src/mocks/testServer';
-import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
+import {
+  mockMatchMedia,
+  renderWithTheme,
+  renderWithThemeAndRouter,
+} from 'src/utilities/testHelpers';
 
 import { LinodeFirewalls } from './LinodeFirewalls';
 
-beforeAll(() => mockMatchMedia());
+const navigate = vi.fn();
+
+vi.mock('@tanstack/react-router', async () => {
+  const actual = await vi.importActual('@tanstack/react-router');
+  return {
+    ...actual,
+    useNavigate: queryMocks.useNavigate,
+  };
+});
 
+const queryMocks = vi.hoisted(() => ({
+  userPermissions: vi.fn(() => ({
+    permissions: {
+      apply_linode_firewalls: false,
+      delete_firewall_device: false,
+    },
+  })),
+  useNavigate: vi.fn(() => navigate),
+}));
+
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+}));
+beforeAll(() => mockMatchMedia());
 describe('LinodeFirewalls', () => {
   it('should render', () => {
     const wrapper = renderWithTheme(<LinodeFirewalls linodeID={1} />);
@@ -41,4 +71,88 @@ describe('LinodeFirewalls', () => {
 
     expect(wrapper.queryByTestId('data-qa-linode-firewall-row'));
   });
+
+  it("should enable 'Add Firewall' button if the user has apply_linode_firewalls permission", async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: {
+        ...queryMocks.userPermissions().permissions,
+        apply_linode_firewalls: true,
+      },
+    });
+
+    const { getByText } = await renderWithThemeAndRouter(
+      <LinodeFirewalls linodeID={1} />
+    );
+    const addFirewallBtn = getByText('Add Firewall');
+    expect(addFirewallBtn).toBeInTheDocument();
+    expect(addFirewallBtn).toBeEnabled();
+  });
+
+  it("should disable 'Add Firewall' button if the user doesn't have apply_linode_firewalls permission", async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: {
+        ...queryMocks.userPermissions().permissions,
+        apply_linode_firewalls: false,
+      },
+    });
+
+    const { getByText } = await renderWithThemeAndRouter(
+      <LinodeFirewalls linodeID={1} />
+    );
+    const addFirewallBtn = getByText('Add Firewall');
+    expect(addFirewallBtn).toBeInTheDocument();
+    expect(addFirewallBtn).toBeDisabled();
+  });
+
+  it("should enable 'Unassign' button if the user has delete_firewall_device permission", async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: {
+        ...queryMocks.userPermissions().permissions,
+        delete_firewall_device: true,
+      },
+    });
+
+    server.use(
+      http.get('*/linode/instances/1/firewalls', () => {
+        return HttpResponse.json(makeResourcePage([firewallFactory.build()]));
+      })
+    );
+
+    const { getByText } = await renderWithThemeAndRouter(
+      <LinodeFirewalls linodeID={1} />
+    );
+
+    const loadingTestId = 'table-row-loading';
+    await waitForElementToBeRemoved(() => screen.queryByTestId(loadingTestId));
+
+    const unassignFirewallBtn = getByText('Unassign');
+    expect(unassignFirewallBtn).toBeInTheDocument();
+    expect(unassignFirewallBtn).toBeEnabled();
+  });
+
+  it("should disable 'Unassign' button if the user doesn't have delete_firewall_device permission", async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: {
+        ...queryMocks.userPermissions().permissions,
+        delete_firewall_device: false,
+      },
+    });
+
+    server.use(
+      http.get('*/linode/instances/1/firewalls', () => {
+        return HttpResponse.json(makeResourcePage([firewallFactory.build()]));
+      })
+    );
+
+    const { getByText } = await renderWithThemeAndRouter(
+      <LinodeFirewalls linodeID={1} />
+    );
+
+    const loadingTestId = 'table-row-loading';
+    await waitForElementToBeRemoved(screen.queryByTestId(loadingTestId));
+
+    const unassignFirewallBtn = getByText('Unassign');
+    expect(unassignFirewallBtn).toBeInTheDocument();
+    expect(unassignFirewallBtn).toBeDisabled();
+  });
 });

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

@@ -11,18 +11,28 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
 import { RemoveDeviceDialog } from 'src/features/Firewalls/FirewallDetail/Devices/RemoveDeviceDialog';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 
 import { AddFirewallForm } from './AddFirewallForm';
 import { LinodeFirewallsRow } from './LinodeFirewallsRow';
 
 import type { Firewall, FirewallDevice } from '@linode/api-v4';
-
+const NO_PERMISSIONS_TOOLTIP_TEXT =
+  "You don't have permissions to add Firewall.";
+const MORE_THAN_ONE_FIREWALL_TOOLTIP_TEXT =
+  'Linodes can only have one Firewall assigned.';
 interface LinodeFirewallsProps {
   linodeID: number;
 }
 
 export const LinodeFirewalls = (props: LinodeFirewallsProps) => {
   const { linodeID } = props;
+  const { permissions } = usePermissions(
+    'linode',
+    ['apply_linode_firewalls'],
+    linodeID,
+    true
+  );
 
   const {
     data: attachedFirewallData,
@@ -86,9 +96,16 @@ export const LinodeFirewalls = (props: LinodeFirewallsProps) => {
         </Typography>
         <Button
           buttonType="primary"
-          disabled={attachedFirewallData && attachedFirewallData.results >= 1}
+          disabled={
+            (attachedFirewallData && attachedFirewallData.results >= 1) ||
+            !permissions.apply_linode_firewalls
+          }
           onClick={() => setIsAddFirewalDrawerOpen(true)}
-          tooltipText="Linodes can only have one Firewall assigned."
+          tooltipText={
+            !permissions.apply_linode_firewalls
+              ? NO_PERMISSIONS_TOOLTIP_TEXT
+              : MORE_THAN_ONE_FIREWALL_TOOLTIP_TEXT
+          }
         >
           Add Firewall
         </Button>

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

@@ -1,9 +1,8 @@
-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';
 
@@ -17,16 +16,14 @@ export const LinodeFirewallsActionMenu = (
 ) => {
   const { firewallID, onUnassign } = props;
 
-  const { data: profile } = useProfile();
-  const { data: grants } = useGrants();
-
-  const userCanModifyFirewall = checkIfUserCanModifyFirewall(
+  const { permissions } = usePermissions(
+    'firewall',
+    ['delete_firewall_device'],
     firewallID,
-    profile,
-    grants
+    true
   );
 
-  const disabledProps = !userCanModifyFirewall
+  const disabledProps = !permissions.delete_firewall_device
     ? {
         disabled: true,
         tooltip: NO_PERMISSIONS_TOOLTIP_TEXT,
@@ -48,6 +45,7 @@ export const LinodeFirewallsActionMenu = (
       disabled={action.disabled}
       key={action.title}
       onClick={action.onClick}
+      tooltip={action.tooltip}
     />
   );
 };

packages/manager/src/mocks/serverHandlers.ts

@@ -963,7 +963,7 @@ export const handlers = [
     return HttpResponse.json(response);
   }),
   http.get('*/linode/instances/:id/firewalls', async () => {
-    const firewalls = firewallFactory.buildList(10);
+    const firewalls = firewallFactory.buildList(1);
     firewallFactory.resetSequenceNumber();
     return HttpResponse.json(makeResourcePage(firewalls));
   }),