feat: [UIE-8840, UIE-8841, UIE-8842, UIE-8843, UIE-8844] - IAM RBAC: account settings permissions check (#12630)

* feat: [UIE-8840], [UIE-8841], [UIE-8842], [UIE-8843], [UIE-8844] - account settings permissions check

* Added changeset: IAM RBAC: add a permission check in Account Settings Tab

* fix

* e2e tests fix

* after review fix

* refactor: replace generic hasPermission prop with explicit usePermissions hook

* e2e test fix

* refactor: use update_account_settings permission instead of enable_linode_backups

* update changelog directly

---------

Co-authored-by: Conal Ryan <136115382+corya-akamai@users.noreply.github.com>
Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Co-authored-by: Banks Nussman <banks@nussman.us>

Author: 4 people

packages/manager/CHANGELOG.md

@@ -70,6 +70,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - DataStream: add destination's details for selected destination ([#12559](https://github.com/linode/manager/pull/12559))
 - IAM RBAC: Modify query parameter to allow varying use cases, return API errors, and return isLoading and isError values ([#12560](https://github.com/linode/manager/pull/12560))
 - IAM RBAC: add a permission check in Profile and Account/Billing ([#12561](https://github.com/linode/manager/pull/12561))
+- IAM RBAC: add a permission check in Account Settings Tab ([#12630](https://github.com/linode/manager/pull/12630))
 - Add subnet IPv6 to VPC create page ([#12563](https://github.com/linode/manager/pull/12563))
 - Add/update inline docs for ACLP Alerts logic ([#12578](https://github.com/linode/manager/pull/12578))
 - ACLP: add checkbox functionality in `AlertRegions`.  ([#12582](https://github.com/linode/manager/pull/12582))

packages/manager/src/components/MaintenancePolicySelect/MaintenancePolicySelect.tsx

@@ -109,7 +109,9 @@ export const MaintenancePolicySelect = (props: Props) => {
               </InputAdornment>
             ),
         },
-        tooltipText: (
+        tooltipText: disabled ? (
+          "You don't have permission to change this setting."
+        ) : (
           <Stack spacing={2}>
             <Typography>
               <strong>Migrate:</strong> {MIGRATE_TOOLTIP_TEXT}

packages/manager/src/features/Account/AutoBackups.tsx

@@ -11,6 +11,8 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Link } from 'src/components/Link';
 
+import { usePermissions } from '../IAM/hooks/usePermissions';
+
 import type { Theme } from '@mui/material/styles';
 
 const useStyles = makeStyles()((theme: Theme) => ({
@@ -47,7 +49,9 @@ const AutoBackups = (props: Props) => {
   } = props;
 
   const { classes } = useStyles();
-
+  const { data: permissions } = usePermissions('account', [
+    'update_account_settings',
+  ]);
   return (
     <Paper>
       <Typography variant="h2">Backup Auto Enrollment</Typography>
@@ -77,7 +81,9 @@ const AutoBackups = (props: Props) => {
               <Toggle
                 checked={isManagedCustomer ? true : backups_enabled}
                 data-qa-toggle-auto-backup
-                disabled={!!isManagedCustomer}
+                disabled={
+                  !!isManagedCustomer || !permissions.update_account_settings
+                }
                 onChange={onChange}
               />
             }

packages/manager/src/features/Account/CloseAccountSetting.test.tsx

@@ -14,8 +14,14 @@ import {
 // Mock the useProfile hook to immediately return the expected data, circumventing the HTTP request and loading state.
 const queryMocks = vi.hoisted(() => ({
   useProfile: vi.fn().mockReturnValue({}),
+  userPermissions: vi.fn(() => ({
+    data: { cancel_account: true },
+  })),
 }));
 
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+}));
 vi.mock('@linode/queries', async () => {
   const actual = await vi.importActual('@linode/queries');
   return {
@@ -104,4 +110,18 @@ describe('Close Account Settings', () => {
     expect(button).not.toHaveAttribute('disabled');
     expect(button).toHaveAttribute('aria-disabled', 'true');
   });
+
+  it('should disable Close Account button if the user does not have close_account permissions', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      data: { cancel_account: false },
+    });
+    queryMocks.useProfile.mockReturnValue({
+      data: profileFactory.build({ user_type: 'default' }),
+    });
+
+    const { getByTestId } = renderWithTheme(<CloseAccountSetting />);
+    const button = getByTestId('close-account-button');
+    expect(button).toBeInTheDocument();
+    expect(button).toBeDisabled();
+  });
 });

packages/manager/src/features/Account/CloseAccountSetting.tsx

@@ -2,18 +2,21 @@ import { useProfile } from '@linode/queries';
 import { Box, Button, Paper, Typography } from '@linode/ui';
 import * as React from 'react';
 
+import { usePermissions } from '../IAM/hooks/usePermissions';
 import CloseAccountDialog from './CloseAccountDialog';
 import {
   CHILD_USER_CLOSE_ACCOUNT_TOOLTIP_TEXT,
   PARENT_USER_CLOSE_ACCOUNT_TOOLTIP_TEXT,
   PROXY_USER_CLOSE_ACCOUNT_TOOLTIP_TEXT,
 } from './constants';
 
-const CloseAccountSetting = () => {
+export const CloseAccountSetting = () => {
   const [dialogOpen, setDialogOpen] = React.useState<boolean>(false);
 
   const { data: profile } = useProfile();
 
+  const { data: permissions } = usePermissions('account', ['cancel_account']);
+
   // Disable the Close Account button for users with a Parent/Proxy/Child user type.
   const isCloseAccountDisabled = Boolean(profile?.user_type !== 'default');
 
@@ -40,9 +43,13 @@ const CloseAccountSetting = () => {
           <Button
             buttonType="outlined"
             data-testid="close-account-button"
-            disabled={isCloseAccountDisabled}
+            disabled={isCloseAccountDisabled || !permissions.cancel_account}
             onClick={() => setDialogOpen(true)}
-            tooltipText={closeAccountButtonTooltipText}
+            tooltipText={
+              !permissions.cancel_account
+                ? "You don't have permission to close this account."
+                : closeAccountButtonTooltipText
+            }
           >
             Close Account
           </Button>

packages/manager/src/features/Account/DefaultFirewalls.test.tsx

@@ -11,6 +11,17 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { DefaultFirewalls } from './DefaultFirewalls';
 
+const queryMocks = vi.hoisted(() => ({
+  useProfile: vi.fn().mockReturnValue({}),
+  userPermissions: vi.fn(() => ({
+    data: { update_account_settings: true },
+  })),
+}));
+
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+}));
+
 describe('NetworkInterfaces', () => {
   it('renders the NetworkInterfaces section', async () => {
     const account = accountFactory.build({
@@ -50,4 +61,50 @@ describe('NetworkInterfaces', () => {
     expect(getByText('NodeBalancers Firewall')).toBeVisible();
     expect(getByText('Save')).toBeVisible();
   });
+
+  it('should disable Save button and all select boxes if the user does not have "update_account_settings" permissions', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      data: { update_account_settings: false },
+    });
+    const account = accountFactory.build({
+      capabilities: ['Linode Interfaces'],
+    });
+
+    server.use(
+      http.get('*/v4/account', () => HttpResponse.json(account)),
+      http.get('*/v4beta/networking/firewalls/settings', () =>
+        HttpResponse.json(firewallSettingsFactory.build())
+      ),
+      http.get('*/v4beta/networking/firewalls', () =>
+        HttpResponse.json(makeResourcePage(firewallFactory.buildList(1)))
+      )
+    );
+
+    const { getByLabelText, getByText } = renderWithTheme(
+      <DefaultFirewalls />,
+      {
+        flags: { linodeInterfaces: { enabled: true } },
+      }
+    );
+
+    const configurationSelect = getByLabelText(
+      'Configuration Profile Interfaces Firewall'
+    );
+    expect(configurationSelect).toHaveAttribute('disabled');
+
+    const linodePublicSelect = getByLabelText(
+      'Linode Interfaces - Public Interface Firewall'
+    );
+    expect(linodePublicSelect).toHaveAttribute('disabled');
+
+    const linodeVPCSelect = getByLabelText(
+      'Linode Interfaces - VPC Interface Firewall'
+    );
+    expect(linodeVPCSelect).toHaveAttribute('disabled');
+
+    const nodeBalancerSelect = getByLabelText('NodeBalancers Firewall');
+    expect(nodeBalancerSelect).toHaveAttribute('disabled');
+
+    expect(getByText('Save')).toHaveAttribute('aria-disabled', 'true');
+  });
 });

packages/manager/src/features/Account/DefaultFirewalls.tsx

@@ -22,6 +22,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { useIsLinodeInterfacesEnabled } from 'src/utilities/linodes';
 
 import { FirewallSelect } from '../Firewalls/components/FirewallSelect';
+import { usePermissions } from '../IAM/hooks/usePermissions';
 
 import type { UpdateFirewallSettings } from '@linode/api-v4';
 
@@ -38,7 +39,9 @@ export const DefaultFirewalls = () => {
   } = useFirewallSettingsQuery({ enabled: isLinodeInterfacesEnabled });
 
   const { mutateAsync: updateFirewallSettings } = useMutateFirewallSettings();
-
+  const { data: permissions } = usePermissions('account', [
+    'update_account_settings',
+  ]);
   const values = {
     default_firewall_ids: { ...firewallSettings?.default_firewall_ids },
   };
@@ -117,6 +120,7 @@ export const DefaultFirewalls = () => {
               render={({ field, fieldState }) => (
                 <FirewallSelect
                   disableClearable
+                  disabled={!permissions.update_account_settings}
                   errorText={fieldState.error?.message}
                   hideDefaultChips
                   label="Configuration Profile Interfaces Firewall"
@@ -132,6 +136,7 @@ export const DefaultFirewalls = () => {
               render={({ field, fieldState }) => (
                 <FirewallSelect
                   disableClearable
+                  disabled={!permissions.update_account_settings}
                   errorText={fieldState.error?.message}
                   hideDefaultChips
                   label="Linode Interfaces - Public Interface Firewall"
@@ -147,6 +152,7 @@ export const DefaultFirewalls = () => {
               render={({ field, fieldState }) => (
                 <FirewallSelect
                   disableClearable
+                  disabled={!permissions.update_account_settings}
                   errorText={fieldState.error?.message}
                   hideDefaultChips
                   label="Linode Interfaces - VPC Interface Firewall"
@@ -165,6 +171,7 @@ export const DefaultFirewalls = () => {
               render={({ field, fieldState }) => (
                 <FirewallSelect
                   disableClearable
+                  disabled={!permissions.update_account_settings}
                   errorText={fieldState.error?.message}
                   hideDefaultChips
                   label="NodeBalancers Firewall"
@@ -179,7 +186,7 @@ export const DefaultFirewalls = () => {
         <Box sx={(theme) => ({ marginTop: theme.spacingFunction(16) })}>
           <Button
             buttonType="outlined"
-            disabled={!isDirty}
+            disabled={!isDirty || !permissions.update_account_settings}
             loading={isSubmitting}
             type="submit"
           >

packages/manager/src/features/Account/EnableManaged.tsx

@@ -16,6 +16,8 @@ import { ConfirmationDialog } from 'src/components/ConfirmationDialog/Confirmati
 import { Link } from 'src/components/Link';
 import { SupportLink } from 'src/components/SupportLink';
 
+import { usePermissions } from '../IAM/hooks/usePermissions';
+
 import type { APIError } from '@linode/api-v4/lib/types';
 
 interface Props {
@@ -30,6 +32,7 @@ interface ContentProps {
 export const ManagedContent = (props: ContentProps) => {
   const { isManaged, openConfirmationModal } = props;
 
+  const { data: permissions } = usePermissions('account', ['enable_managed']);
   if (isManaged) {
     return (
       <Typography>
@@ -49,7 +52,11 @@ export const ManagedContent = (props: ContentProps) => {
         <Link to="https://linode.com/managed">Learn more</Link>.
       </Typography>
       <Box>
-        <Button buttonType="outlined" onClick={openConfirmationModal}>
+        <Button
+          buttonType="outlined"
+          disabled={!permissions.enable_managed}
+          onClick={openConfirmationModal}
+        >
           Add Linode Managed
         </Button>
       </Box>
@@ -65,6 +72,7 @@ export const EnableManaged = (props: Props) => {
   const [error, setError] = React.useState<string | undefined>();
   const [isLoading, setLoading] = React.useState<boolean>(false);
 
+  const { data: permissions } = usePermissions('account', ['enable_managed']);
   const linodeCount = linodes?.results ?? 0;
 
   const handleClose = () => {
@@ -94,6 +102,7 @@ export const EnableManaged = (props: Props) => {
         'data-testid': 'submit-managed-enrollment',
         label: 'Add Linode Managed',
         loading: isLoading,
+        disabled: !permissions.enable_managed,
         onClick: handleSubmit,
       }}
       secondaryButtonProps={{

packages/manager/src/features/Account/MaintenancePolicy.test.tsx

@@ -9,6 +9,16 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { MaintenancePolicy } from './MaintenancePolicy';
 
+const queryMocks = vi.hoisted(() => ({
+  useProfile: vi.fn().mockReturnValue({}),
+  userPermissions: vi.fn(() => ({
+    data: { update_account_settings: true },
+  })),
+}));
+
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+}));
 describe('MaintenancePolicy', () => {
   it('renders the MaintenancePolicy section', () => {
     const { getByText } = renderWithTheme(<MaintenancePolicy />);
@@ -50,4 +60,19 @@ describe('MaintenancePolicy', () => {
       );
     });
   });
+
+  it('should disable "Save Maintenance Policy" button and the selectbox if the user does not have "update_account_settings" permission', () => {
+    queryMocks.userPermissions.mockReturnValue({
+      data: { update_account_settings: false },
+    });
+    const { getByText, getByLabelText } = renderWithTheme(
+      <MaintenancePolicy />
+    );
+
+    expect(getByLabelText('Maintenance Policy')).toHaveAttribute('disabled');
+    expect(getByText('Save Maintenance Policy')).toHaveAttribute(
+      'aria-disabled',
+      'true'
+    );
+  });
 });

packages/manager/src/features/Account/MaintenancePolicy.tsx

@@ -22,6 +22,8 @@ import { MaintenancePolicySelect } from 'src/components/MaintenancePolicySelect/
 import { useFlags } from 'src/hooks/useFlags';
 import { useUpcomingMaintenanceNotice } from 'src/hooks/useUpcomingMaintenanceNotice';
 
+import { usePermissions } from '../IAM/hooks/usePermissions';
+
 import type { MaintenancePolicyValues } from 'src/hooks/useUpcomingMaintenanceNotice.ts';
 
 export const MaintenancePolicy = () => {
@@ -31,7 +33,9 @@ export const MaintenancePolicy = () => {
   const { mutateAsync: updateAccountSettings } = useMutateAccountSettings();
 
   const flags = useFlags();
-
+  const { data: permissions } = usePermissions('account', [
+    'update_account_settings',
+  ]);
   const {
     control,
     formState: { isDirty, isSubmitting },
@@ -90,6 +94,7 @@ export const MaintenancePolicy = () => {
             name="maintenance_policy"
             render={({ field, fieldState }) => (
               <MaintenancePolicySelect
+                disabled={!permissions.update_account_settings}
                 errorText={fieldState.error?.message}
                 hideDefaultChip
                 onChange={(policy) => field.onChange(policy.slug)}
@@ -100,7 +105,7 @@ export const MaintenancePolicy = () => {
           <Box marginTop={2}>
             <Button
               buttonType="outlined"
-              disabled={!isDirty}
+              disabled={!isDirty || !permissions.update_account_settings}
               loading={isSubmitting}
               type="submit"
             >