feat: [UIE-8845, UIE-8832, UIE-8834, UIE-8833] - IAM RBAC: add a permission check in Profile and Account (#12561)

* feat: [UIE-8845] - IAM RBAC: add a permission check in Profile and IAM

* feat: [UIE-8834] - IAM RBAC: add a permission check in Accunt/billing

* Added changeset: IAM RBAC: add a permission check in Profile and Account/Billing

* unit tests fix

* e2e tests fix

---------

Co-authored-by: mpolotsk <[email protected]>
Co-authored-by: Conal Ryan <[email protected]>

Author: 3 people

packages/manager/.changeset/pr-12561-upcoming-features-1753283335594.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+IAM RBAC: add a permission check in Profile and Account/Billing ([#12561](https://github.com/linode/manager/pull/12561))

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.test.tsx

@@ -11,6 +11,19 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { PaymentMethodRow } from './PaymentMethodRow';
 
+const queryMocks = vi.hoisted(() => ({
+  userPermissions: vi.fn(() => ({
+    permissions: {
+      make_billing_payment: false,
+      update_account: false,
+    },
+  })),
+}));
+
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+}));
+
 vi.mock('@linode/api-v4/lib/account', async () => {
   const actual = await vi.importActual('@linode/api-v4/lib/account');
   return {
@@ -132,7 +145,12 @@ describe('Payment Method Row', () => {
 
   it('Calls `onDelete` callback when "Delete" action is clicked', async () => {
     const mockFunction = vi.fn();
-
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: {
+        make_billing_payment: false,
+        update_account: true,
+      },
+    });
     const { getByLabelText, getByText } = renderWithTheme(
       <PayPalScriptProvider options={{ clientId: PAYPAL_CLIENT_ID }}>
         <PaymentMethodRow
@@ -153,6 +171,12 @@ describe('Payment Method Row', () => {
   });
 
   it('Makes payment method default when "Make Default" action is clicked', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: {
+        make_billing_payment: true,
+        update_account: true,
+      },
+    });
     const paymentMethod = paymentMethodFactory.build({
       data: {
         card_type: 'Visa',
@@ -177,6 +201,58 @@ describe('Payment Method Row', () => {
     expect(makeDefaultPaymentMethod).toBeCalledTimes(1);
   });
 
+  it('should disable "Make a Payment" button if the user does not have make_billing_payment permissions', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: {
+        make_billing_payment: false,
+        update_account: false,
+      },
+    });
+    const { getByLabelText, getByText } = renderWithTheme(
+      <PayPalScriptProvider options={{ clientId: PAYPAL_CLIENT_ID }}>
+        <PaymentMethodRow
+          onDelete={vi.fn()}
+          paymentMethod={paymentMethodFactory.build({ is_default: true })}
+        />
+      </PayPalScriptProvider>
+    );
+
+    const actionMenu = getByLabelText('Action menu for card ending in 1881');
+    await userEvent.click(actionMenu);
+
+    const makePaymentButton = getByText('Make a Payment');
+    expect(makePaymentButton).toBeVisible();
+    expect(
+      makePaymentButton.closest('li')?.getAttribute('aria-disabled')
+    ).toEqual('true');
+  });
+
+  it('should enable "Make a Payment" button if the user has make_billing_payment permissions', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: {
+        make_billing_payment: true,
+        update_account: false,
+      },
+    });
+    const { getByLabelText, getByText } = renderWithTheme(
+      <PayPalScriptProvider options={{ clientId: PAYPAL_CLIENT_ID }}>
+        <PaymentMethodRow
+          onDelete={vi.fn()}
+          paymentMethod={paymentMethodFactory.build({ is_default: true })}
+        />
+      </PayPalScriptProvider>
+    );
+
+    const actionMenu = getByLabelText('Action menu for card ending in 1881');
+    await userEvent.click(actionMenu);
+
+    const makePaymentButton = getByText('Make a Payment');
+    expect(makePaymentButton).toBeVisible();
+    expect(
+      makePaymentButton.closest('li')?.getAttribute('aria-disabled')
+    ).not.toEqual('true');
+  });
+
   it('Opens "Make a Payment" drawer with the payment method preselected if "Make a Payment" action is clicked', async () => {
     const paymentMethods = [
       paymentMethodFactory.build({

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx

@@ -7,6 +7,7 @@ import * as React from 'react';
 
 import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import CreditCard from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 
 import { ThirdPartyPayment } from './ThirdPartyPayment';
 
@@ -18,10 +19,6 @@ interface Props {
    * Whether the user is a child user.
    */
   isChildUser?: boolean | undefined;
-  /**
-   * Whether the user is a restricted user.
-   */
-  isRestrictedUser?: boolean | undefined;
   /**
    * Function called when the delete button in the Action Menu is pressed.
    */
@@ -38,14 +35,19 @@ interface Props {
  */
 export const PaymentMethodRow = (props: Props) => {
   const theme = useTheme();
-  const { isRestrictedUser, onDelete, paymentMethod } = props;
+  const { onDelete, paymentMethod, isChildUser } = props;
   const { is_default, type } = paymentMethod;
   const { enqueueSnackbar } = useSnackbar();
   const navigate = useNavigate();
 
   const { mutateAsync: makePaymentMethodDefault } =
     useMakeDefaultPaymentMethodMutation(props.paymentMethod.id);
 
+  const { permissions } = usePermissions('account', [
+    'make_billing_payment',
+    'update_account',
+  ]);
+
   const makeDefault = () => {
     makePaymentMethodDefault().catch((errors) =>
       enqueueSnackbar(
@@ -57,7 +59,7 @@ export const PaymentMethodRow = (props: Props) => {
 
   const actions: Action[] = [
     {
-      disabled: isRestrictedUser,
+      disabled: isChildUser || !permissions.make_billing_payment,
       onClick: () => {
         navigate({
           to: '/account/billing',
@@ -71,15 +73,17 @@ export const PaymentMethodRow = (props: Props) => {
       title: 'Make a Payment',
     },
     {
-      disabled: isRestrictedUser || paymentMethod.is_default,
+      disabled:
+        isChildUser || !permissions.update_account || paymentMethod.is_default,
       onClick: makeDefault,
       title: 'Make Default',
       tooltip: paymentMethod.is_default
         ? 'This is already your default payment method.'
         : undefined,
     },
     {
-      disabled: isRestrictedUser || paymentMethod.is_default,
+      disabled:
+        isChildUser || !permissions.update_account || paymentMethod.is_default,
       onClick: onDelete,
       title: 'Delete',
       tooltip: paymentMethod.is_default

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { AccountLanding } from './AccountLanding';
+
+const queryMocks = vi.hoisted(() => ({
+  userPermissions: vi.fn(() => ({
+    permissions: { make_billing_payment: false },
+  })),
+}));
+
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+}));
+
+describe('AccountLanding', () => {
+  it('should disable "Make a Payment" button if the user does not have make_billing_payment permission', async () => {
+    const { getByRole } = renderWithTheme(<AccountLanding />);
+
+    const addTagBtn = getByRole('button', {
+      name: 'Make a Payment',
+    });
+    expect(addTagBtn).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('should enable "Make a Payment" button if the user has make_billing_payment permission', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: { make_billing_payment: true },
+    });
+
+    const { getByRole } = renderWithTheme(<AccountLanding />);
+
+    const addTagBtn = getByRole('button', {
+      name: 'Make a Payment',
+    });
+    expect(addTagBtn).not.toHaveAttribute('aria-disabled', 'true');
+  });
+});

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

@@ -23,6 +23,7 @@ import { useTabs } from 'src/hooks/useTabs';
 import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnalytics';
 
 import { PlatformMaintenanceBanner } from '../../components/PlatformMaintenanceBanner/PlatformMaintenanceBanner';
+import { usePermissions } from '../IAM/hooks/usePermissions';
 import { SwitchAccountButton } from './SwitchAccountButton';
 import { SwitchAccountDrawer } from './SwitchAccountDrawer';
 
@@ -38,6 +39,8 @@ export const AccountLanding = () => {
   const { data: profile } = useProfile();
   const { limitsEvolution } = useFlags();
 
+  const { permissions } = usePermissions('account', ['make_billing_payment']);
+
   const [isDrawerOpen, setIsDrawerOpen] = React.useState<boolean>(false);
   const sessionContext = React.useContext(switchAccountSessionContext);
 
@@ -55,11 +58,7 @@ export const AccountLanding = () => {
 
   const showQuotasTab = limitsEvolution?.enabled ?? false;
 
-  const isReadOnly =
-    useRestrictedGlobalGrantCheck({
-      globalGrantType: 'account_access',
-      permittedGrantLevel: 'read_write',
-    }) || isChildUser;
+  const isReadOnly = !permissions.make_billing_payment || isChildUser;
 
   const isChildAccountAccessRestricted = useRestrictedGlobalGrantCheck({
     globalGrantType: 'child_account_access',

packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.test.tsx

@@ -12,6 +12,18 @@ import BillingSummary from './BillingSummary';
 const accountBalanceText = 'account-balance-text';
 const accountBalanceValue = 'account-balance-value';
 
+const queryMocks = vi.hoisted(() => ({
+  userPermissions: vi.fn(() => ({
+    permissions: {
+      create_promo_code: false,
+    },
+  })),
+}));
+
+vi.mock('src/features/IAM/hooks/usePermissions', () => ({
+  usePermissions: queryMocks.userPermissions,
+}));
+
 vi.mock('@linode/api-v4/lib/account', async () => {
   const actual = await vi.importActual('@linode/api-v4/lib/account');
   return {
@@ -165,4 +177,38 @@ describe('BillingSummary', () => {
     expect(getByTestId('drawer')).toBeVisible();
     expect(getByTestId('drawer-title').textContent).toEqual('Make a Payment');
   });
+
+  it('does not display the "Add a promo code" button if user does not have create_promo_code permission', async () => {
+    const { queryByText } = renderWithTheme(
+      <PayPalScriptProvider options={{ clientId: PAYPAL_CLIENT_ID }}>
+        <BillingSummary balance={5} balanceUninvoiced={5} paymentMethods={[]} />
+      </PayPalScriptProvider>,
+      {
+        initialRoute: '/account/billing',
+      }
+    );
+    expect(queryByText('Add a promo code')).not.toBeInTheDocument();
+  });
+
+  it('displays the "Add a promo code" button if user has create_promo_code permission', async () => {
+    queryMocks.userPermissions.mockReturnValue({
+      permissions: {
+        create_promo_code: true,
+      },
+    });
+    const { queryByText } = renderWithTheme(
+      <PayPalScriptProvider options={{ clientId: PAYPAL_CLIENT_ID }}>
+        <BillingSummary
+          balance={-10}
+          balanceUninvoiced={5}
+          paymentMethods={[]}
+          promotions={[]}
+        />
+      </PayPalScriptProvider>,
+      {
+        initialRoute: '/account/billing',
+      }
+    );
+    expect(queryByText('Add a promo code')).toBeInTheDocument();
+  });
 });

packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx

@@ -1,16 +1,12 @@
-import {
-  useAccount,
-  useGrants,
-  useNotificationsQuery,
-  useProfile,
-} from '@linode/queries';
+import { useAccount, useGrants, useNotificationsQuery } from '@linode/queries';
 import { Box, Button, Divider, TooltipIcon, Typography } from '@linode/ui';
 import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/material/styles';
 import { useNavigate, useSearch } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { Currency } from 'src/components/Currency';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 import { isWithinDays } from 'src/utilities/date';
 
 import { BillingPaper } from '../../BillingDetail';
@@ -33,9 +29,8 @@ export const BillingSummary = (props: BillingSummaryProps) => {
 
   const { data: notifications } = useNotificationsQuery();
   const { data: account } = useAccount();
-  const { data: profile } = useProfile();
 
-  const isRestrictedUser = profile?.restricted;
+  const { permissions } = usePermissions('account', ['create_promo_code']);
 
   const [isPromoDialogOpen, setIsPromoDialogOpen] =
     React.useState<boolean>(false);
@@ -154,7 +149,7 @@ export const BillingSummary = (props: BillingSummaryProps) => {
 
   const showAddPromoLink =
     balance <= 0 &&
-    !isRestrictedUser &&
+    permissions.create_promo_code &&
     isWithinDays(90, account?.active_since) &&
     promotions?.length === 0;