feat: [UIE-8871] - IAM RBAC: Firewall linodes permissions check (#12500)

mpolotsk-akamai · smans-akamai · rodonnel-akamai · web-flow · commit 5cbf8db4b39c · 2025-07-25T09:09:22.000-07:00
* feat: [UIE-8871] - firewall linodes permissions check

* Added changeset: Implement the new RBAC permission hook in Firewall Linodes tab

* applying feedback: part 1

* Fixing linting errors and updating tests

* Fix Kamils concerns

* Delete changeset, update changelog entry

---------

Co-authored-by: Sam Mans &lt;smans@akamai.com&gt;
Co-authored-by: rodonnel-akamai &lt;rodonnel@akamai.com&gt;
Co-authored-by: Conal Ryan &lt;136115382+corya-akamai@users.noreply.github.com&gt;
Co-authored-by: mjac0bs &lt;mjacobs@akamai.com&gt;
diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md
@@ -78,6 +78,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Edit node pool configuration in LKE cluster create flow ([#12552](https://github.com/linode/manager/pull/12552))
 - IAM RBAC: fix error message for the one account_admin in the account ([#12556](https://github.com/linode/manager/pull/12556))
 - Show GPU warning notice conditionally based on policy type - display for "migrate" policy but hide for "power-off-on" policy ([#12512](https://github.com/linode/manager/pull/12512))
+- IAM RBAC: Implement the new RBAC permission hook in Firewall Linodes tab ([#12500](https://github.com/linode/manager/pull/12500))
+
 
 ## [2025-07-21] - v1.146.2
 
diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.test.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.test.tsx
@@ -1,3 +1,5 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
@@ -15,6 +17,15 @@ const props = {
 
 const queryMocks = vi.hoisted(() => ({
   useParams: vi.fn().mockReturnValue({}),
+  userPermissions: vi.fn(() => ({
+    permissions: {
+      create_firewall_device: false,
+    },
+  })),
+}));
+
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
 }));
 
 vi.mock('@tanstack/react-router', async () => {
@@ -49,4 +60,50 @@ describe('AddLinodeDrawer', () => {
     const { getByText } = renderWithTheme(<AddLinodeDrawer {...props} />);
     expect(getByText('Add')).toBeInTheDocument();
   });
+
+  it('should disable "Add" button if the user does not have create_firewall_device permission', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: {
+        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 addButton = getByRole('button', {
+      name: 'Add',
+    });
+    expect(addButton).toBeInTheDocument();
+    expect(addButton).toBeDisabled();
+  });
+
+  it('should enable "Add" button if the user has create_firewall_device permission', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: {
+        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 option = await screen.findByText('linode-5');
+    await userEvent.click(option);
+
+    const addButton = getByRole('button', {
+      name: 'Add',
+    });
+    expect(addButton).toBeInTheDocument();
+    expect(addButton).toBeEnabled();
+  });
 });
diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.tsx
@@ -23,6 +23,7 @@ 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 { getLinodeInterfaceType } from 'src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/utilities';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { useIsLinodeInterfacesEnabled } from 'src/utilities/linodes';
@@ -58,6 +59,12 @@ export const AddLinodeDrawer = (props: Props) => {
 
   const firewall = data?.find((firewall) => firewall.id === Number(id));
 
+  const { permissions } = usePermissions(
+    'firewall',
+    ['create_firewall_device'],
+    firewall?.id
+  );
+
   const { data: allLinodes } = useAllLinodesQuery({}, {});
 
   const linodesUsingLinodeInterfaces =
@@ -371,7 +378,7 @@ export const AddLinodeDrawer = (props: Props) => {
         {isLinodeInterfacesEnabled &&
           selectedLinodesWithMultipleInterfaces.length > 0 && (
             <Typography marginTop={3}>
-              {`${selectedLinodesWithMultipleInterfaces.length === 1 ? 'This Linode has' : 'The following Linodes have'} 
+              {`${selectedLinodesWithMultipleInterfaces.length === 1 ? 'This Linode has' : 'The following Linodes have'}
             multiple interfaces that a firewall can be applied to. Select which interface to apply the firewall to.`}
             </Typography>
           )}
@@ -409,7 +416,9 @@ export const AddLinodeDrawer = (props: Props) => {
           })}
         <ActionsPanel
           primaryButtonProps={{
-            disabled: selectedLinodes.length === 0,
+            disabled:
+              selectedLinodes.length === 0 ||
+              !permissions.create_firewall_device,
             label: 'Add',
             loading: addDeviceIsLoading,
             onClick: handleSubmit,
diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.test.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.test.tsx
@@ -18,6 +18,11 @@ const queryMocks = vi.hoisted(() => ({
   }),
   useParams: vi.fn().mockReturnValue({}),
   useSearch: vi.fn().mockReturnValue({}),
+  usePermissions: vi.fn(() => ({
+    permissions: {
+      create_firewall_device: false,
+    },
+  })),
 }));
 
 vi.mock('@tanstack/react-router', async () => {
@@ -39,10 +44,13 @@ vi.mock('src/hooks/useOrderV2', async () => {
   };
 });
 
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.usePermissions,
+}));
+
 const baseProps = (
   type: FirewallDeviceEntityType
 ): FirewallDeviceLandingProps => ({
-  disabled: false,
   firewallId: 1,
   firewallLabel: 'test',
   type,
@@ -86,8 +94,13 @@ services.forEach((service: FirewallDeviceEntityType) => {
         expect(table).toBeInTheDocument();
       });
 
-      if (prop.disabled) {
+      if (serviceName !== 'Linode') {
         it(`should contain a disabled Add ${serviceName} button`, () => {
+          queryMocks.usePermissions.mockReturnValue({
+            permissions: {
+              create_firewall_device: false,
+            },
+          });
           const { getByTestId } = renderWithTheme(
             <FirewallDeviceLanding {...prop} />
           );
@@ -105,8 +118,13 @@ services.forEach((service: FirewallDeviceEntityType) => {
         });
       }
 
-      if (!prop.disabled) {
+      if (serviceName !== 'Linode') {
         it(`should contain an enabled Add ${serviceName} button`, () => {
+          queryMocks.usePermissions.mockReturnValue({
+            permissions: {
+              create_firewall_device: true,
+            },
+          });
           const { getByTestId } = renderWithTheme(
             <FirewallDeviceLanding {...prop} />
           );
@@ -116,6 +134,11 @@ services.forEach((service: FirewallDeviceEntityType) => {
         });
 
         it(`should navigate to Add ${serviceName} To Firewall drawer when enabled`, async () => {
+          queryMocks.usePermissions.mockReturnValue({
+            permissions: {
+              create_firewall_device: true,
+            },
+          });
           const mockNavigate = vi.fn();
           queryMocks.useNavigate.mockReturnValue(mockNavigate);
 
@@ -136,6 +159,43 @@ services.forEach((service: FirewallDeviceEntityType) => {
           });
         });
       }
+
+      if (serviceName === 'Linode') {
+        it('should disable "Add Linodes to Firewall" button if the user does not have create_firewall_device permission', async () => {
+          queryMocks.usePermissions.mockReturnValue({
+            permissions: {
+              create_firewall_device: false,
+            },
+          });
+
+          const { getByTestId } = await renderWithTheme(
+            <FirewallDeviceLanding {...prop} />,
+            {
+              initialRoute: `/firewalls/1/linodes`,
+            }
+          );
+          const addButton = getByTestId('add-device-button');
+          expect(addButton).toBeInTheDocument();
+          expect(addButton).toBeDisabled();
+        });
+        it('should enable "Add Linodes to Firewall" button if the user has create_firewall_device permission', async () => {
+          queryMocks.usePermissions.mockReturnValue({
+            permissions: {
+              create_firewall_device: true,
+            },
+          });
+
+          const { getByTestId } = await renderWithTheme(
+            <FirewallDeviceLanding {...prop} />,
+            {
+              initialRoute: `/firewalls/1/linodes`,
+            }
+          );
+          const addButton = getByTestId('add-device-button');
+          expect(addButton).toBeInTheDocument();
+          expect(addButton).toBeEnabled();
+        });
+      }
     });
   });
 });
diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.tsx
@@ -5,6 +5,7 @@ import { useLocation, useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 
 import { AddLinodeDrawer } from './AddLinodeDrawer';
 import { AddNodebalancerDrawer } from './AddNodebalancerDrawer';
@@ -15,18 +16,22 @@ import { RemoveDeviceDialog } from './RemoveDeviceDialog';
 import type { FirewallDevice, FirewallDeviceEntityType } from '@linode/api-v4';
 
 export interface FirewallDeviceLandingProps {
-  disabled: boolean;
   firewallId: number;
   firewallLabel: string;
   type: FirewallDeviceEntityType;
 }
 
 export const FirewallDeviceLanding = React.memo(
   (props: FirewallDeviceLandingProps) => {
-    const { disabled, firewallId, firewallLabel, type } = props;
+    const { firewallId, firewallLabel, type } = props;
     const theme = useTheme();
     const navigate = useNavigate();
     const location = useLocation();
+    const { permissions } = usePermissions(
+      'firewall',
+      ['create_firewall_device', 'delete_firewall_device'],
+      firewallId
+    );
     const helperText =
       'Assign one or more services to this firewall. You can add services later if you want to customize your rules first.';
 
@@ -60,6 +65,8 @@ export const FirewallDeviceLanding = React.memo(
     );
 
     const formattedType = formattedTypes[type];
+    const isCreateDeviceDisabled = !permissions.create_firewall_device;
+    const isRemoveDeviceDisabled = !permissions.delete_firewall_device;
 
     // If the user initiates a history -/+ to a /remove route and the device is not found,
     // push navigation to the appropriate /linodes or /nodebalancers route.
@@ -76,8 +83,9 @@ export const FirewallDeviceLanding = React.memo(
     }, [device, location.pathname, firewallId, type, navigate]);
 
     return (
+      // TODO: Matching old behavior. Do we want separate messages for when the user can't create or remove devices?
       <>
-        {disabled ? (
+        {permissions && isCreateDeviceDisabled && isRemoveDeviceDisabled ? (
           <Notice
             text={
               "You don't have permissions to modify this Firewall. Please contact an account administrator for details."
@@ -119,7 +127,7 @@ export const FirewallDeviceLanding = React.memo(
               <Button
                 buttonType="primary"
                 data-testid="add-device-button"
-                disabled={disabled}
+                disabled={isCreateDeviceDisabled}
                 onClick={handleOpen}
               >
                 Add {formattedType}s to Firewall
@@ -129,7 +137,7 @@ export const FirewallDeviceLanding = React.memo(
         </Grid>
         <FirewallDeviceTable
           deviceType={type}
-          disabled={disabled}
+          disabled={isRemoveDeviceDisabled}
           firewallId={firewallId}
           handleRemoveDevice={(device) => {
             setDevice(device);
diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/RemoveDeviceDialog.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/RemoveDeviceDialog.tsx
@@ -9,6 +9,7 @@ import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 
 import { formattedTypes } from './constants';
 
@@ -51,6 +52,22 @@ export const RemoveDeviceDialog = React.memo((props: Props) => {
 
   const deviceDialog = formattedTypes[deviceType ?? 'linode'];
 
+  const { permissions: firewallPermissions } = usePermissions(
+    'firewall',
+    ['delete_firewall_device'],
+    firewallId
+  );
+
+  const { permissions: linodePermissions } = usePermissions(
+    'linode',
+    ['update_linode'],
+    device?.entity.id
+  );
+
+  const deleteDisabled =
+    !firewallPermissions.delete_firewall_device ||
+    !linodePermissions.update_linode;
+
   const onDelete = async () => {
     if (!device) {
       return;
@@ -120,6 +137,7 @@ export const RemoveDeviceDialog = React.memo((props: Props) => {
             label: primaryButtonText,
             loading: isPending,
             onClick: onDelete,
+            disabled: deleteDisabled,
           }}
           secondaryButtonProps={{
             label: 'Cancel',
diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx
