change: [UIE-8836] - IAM RBAC permissions for Billing Activity (linode#12660)

* BillingActivityPanel

* Added changeset: IAM RBAC permissions for Billing Activity

* list_invoice_items

* cleanup

* moar cleanuo

* Added changeset: Implemented `disabled` parameters for payments & invoices queries

* update changeset

* feedback @coliu-akamai

Author: abailly-akamai

packages/manager/.changeset/pr-12660-changed-1754915328052.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+IAM RBAC permissions for Billing Activity ([#12660](https://github.com/linode/manager/pull/12660))

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

@@ -6,7 +6,7 @@ import {
   useProfile,
   useRegionsQuery,
 } from '@linode/queries';
-import { Autocomplete, Typography } from '@linode/ui';
+import { Autocomplete, Notice, Typography, WarningIcon } from '@linode/ui';
 import { getAll, useSet } from '@linode/utilities';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
@@ -37,6 +37,7 @@ import {
   printInvoice,
   printPayment,
 } from 'src/features/Billing/PdfGenerator/PdfGenerator';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 import { useFlags } from 'src/hooks/useFlags';
 import { useOrderV2 } from 'src/hooks/useOrderV2';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
@@ -199,6 +200,16 @@ export const BillingActivityPanel = React.memo((props: Props) => {
     preferenceKey: 'billing-activity-order',
   });
 
+  const { data: permissions } = usePermissions('account', [
+    'list_billing_payments',
+    'list_billing_invoices',
+    'list_invoice_items',
+  ]);
+
+  const canViewInvoices = permissions.list_billing_invoices;
+  const canViewPayments = permissions.list_billing_payments;
+  const canViewInvoiceDetails = permissions.list_invoice_items;
+
   const isAkamaiCustomer = account?.billing_source === 'akamai';
   const { classes } = useStyles();
   const flags = useFlags();
@@ -218,13 +229,13 @@ export const BillingActivityPanel = React.memo((props: Props) => {
     data: payments,
     error: accountPaymentsError,
     isLoading: accountPaymentsLoading,
-  } = useAllAccountPayments({}, filter);
+  } = useAllAccountPayments({}, filter, canViewPayments);
 
   const {
     data: invoices,
     error: accountInvoicesError,
     isLoading: accountInvoicesLoading,
-  } = useAllAccountInvoices({}, filter);
+  } = useAllAccountInvoices({}, filter, canViewInvoices);
 
   const downloadInvoicePDF = React.useCallback(
     (invoiceId: number) => {
@@ -356,7 +367,19 @@ export const BillingActivityPanel = React.memo((props: Props) => {
       return (
         <TableRowEmpty
           colSpan={NUM_COLS}
-          message="No Billing & Payment History found."
+          message={
+            canViewInvoices && canViewPayments ? (
+              'No Billing & Payment History found.'
+            ) : (
+              <>
+                <WarningIcon
+                  style={{ position: 'relative', top: 4, marginRight: 2 }}
+                  width={16}
+                />{' '}
+                You do not have permission to view billing or payment history.
+              </>
+            )
+          }
         />
       );
     }
@@ -365,6 +388,7 @@ export const BillingActivityPanel = React.memo((props: Props) => {
         const lastItem = idx === orderedPaginatedData.length - 1;
         return (
           <ActivityFeedItem
+            canViewInvoiceDetails={canViewInvoiceDetails}
             downloadPDF={
               thisItem.type === 'invoice'
                 ? downloadInvoicePDF
@@ -428,6 +452,16 @@ export const BillingActivityPanel = React.memo((props: Props) => {
             <Autocomplete
               className={classes.transactionType}
               disableClearable
+              disabled={!canViewInvoices && !canViewPayments}
+              filterOptions={(options) => {
+                if (!canViewInvoices) {
+                  return options.filter((option) => option.value !== 'invoice');
+                }
+                if (!canViewPayments) {
+                  return options.filter((option) => option.value !== 'payment');
+                }
+                return options;
+              }}
               label="Transaction Types"
               noMarginTop
               onChange={(_, item) => {
@@ -457,6 +491,16 @@ export const BillingActivityPanel = React.memo((props: Props) => {
             />
           </div>
         </StyledBillingAndPaymentHistoryHeader>
+        {(canViewInvoices && !canViewPayments) ||
+        (!canViewInvoices && canViewPayments) ? (
+          <Notice
+            spacingBottom={20}
+            text={`You do not have permission to view ${
+              canViewInvoices ? 'payments' : 'invoices'
+            } history.`}
+            variant="error"
+          />
+        ) : null}
         <Table aria-label="List of Invoices and Payments" sx={{ border: 0 }}>
           <TableHead>
             <TableRow>
@@ -473,8 +517,9 @@ export const BillingActivityPanel = React.memo((props: Props) => {
               >
                 Amount
               </TableSortCell>
-
-              <TableCell className={classes.pdfDownloadColumn} />
+              {canViewInvoiceDetails && (
+                <TableCell className={classes.pdfDownloadColumn} />
+              )}
             </TableRow>
           </TableHead>
           <TableBody>{renderTableContent()}</TableBody>
@@ -503,6 +548,7 @@ const StyledBillingAndPaymentHistoryHeader = styled('div', {
 // <ActivityFeedItem />
 // =============================================================================
 interface ActivityFeedItemProps extends ActivityFeedItem {
+  canViewInvoiceDetails: boolean;
   downloadPDF: (id: number) => void;
   hasError: boolean;
   isLoading: boolean;
@@ -515,6 +561,7 @@ export const ActivityFeedItem = React.memo((props: ActivityFeedItemProps) => {
   const { iamRbacPrimaryNavChanges } = useFlags();
 
   const {
+    canViewInvoiceDetails,
     date,
     downloadPDF,
     hasError,
@@ -544,7 +591,7 @@ export const ActivityFeedItem = React.memo((props: ActivityFeedItemProps) => {
   return (
     <TableRow data-testid={`${type}-${id}`} sx={sxRow}>
       <TableCell>
-        {type === 'invoice' ? (
+        {type === 'invoice' && canViewInvoiceDetails ? (
           <Link
             to={
               iamRbacPrimaryNavChanges
@@ -564,14 +611,16 @@ export const ActivityFeedItem = React.memo((props: ActivityFeedItemProps) => {
       <TableCell className={classes.totalColumn}>
         <Currency quantity={total} wrapInParentheses={total < 0} />
       </TableCell>
-      <TableCell className={classes.pdfDownloadColumn}>
-        <InlineMenuAction
-          actionText={action.title}
-          className={action.className}
-          loading={isLoading}
-          onClick={action.onClick}
-        />
-      </TableCell>
+      {canViewInvoiceDetails && (
+        <TableCell className={classes.pdfDownloadColumn}>
+          <InlineMenuAction
+            actionText={action.title}
+            className={action.className}
+            loading={isLoading}
+            onClick={action.onClick}
+          />
+        </TableCell>
+      )}
     </TableRow>
   );
 });

packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx

@@ -22,6 +22,7 @@ import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { Link } from 'src/components/Link';
 import { printInvoice } from 'src/features/Billing/PdfGenerator/PdfGenerator';
+import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
 import { useFlags } from 'src/hooks/useFlags';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
@@ -41,6 +42,9 @@ export const InvoiceDetail = () => {
       : '/account/billing/invoices/$invoiceId',
   });
   const theme = useTheme();
+  const { data: permissions } = usePermissions('account', [
+    'list_invoice_items',
+  ]);
 
   const csvRef = React.useRef<any>(undefined);
 
@@ -59,6 +63,10 @@ export const InvoiceDetail = () => {
   const shouldShowRegion = invoiceCreatedAfterDCPricingLaunch(invoice?.date);
 
   const requestData = () => {
+    if (!permissions.list_invoice_items) {
+      return;
+    }
+
     setLoading(true);
 
     const getAllInvoiceItems = getAll<InvoiceItem>((params, filter) =>
@@ -86,6 +94,14 @@ export const InvoiceDetail = () => {
     requestData();
   }, []);
 
+  if (!permissions.list_invoice_items) {
+    return (
+      <Notice variant="error">
+        You do not have permission to view invoice details.
+      </Notice>
+    );
+  }
+
   const printInvoicePDF = async (
     account: Account,
     invoice: Invoice,

packages/manager/src/features/CloudPulse/Utils/FilterBuilder.ts

@@ -634,11 +634,11 @@ export const getFilters = (
   return FILTER_CONFIG.get(dashboard.id)?.filters.filter((config) =>
     isServiceAnalyticsIntegration
       ? config.configuration.neededInViews.includes(
-        CloudPulseAvailableViews.service
-      )
+          CloudPulseAvailableViews.service
+        )
       : config.configuration.neededInViews.includes(
-        CloudPulseAvailableViews.central
-      )
+          CloudPulseAvailableViews.central
+        )
   );
 };
 

packages/queries/.changeset/pr-12660-added-1754985893442.md

@@ -0,0 +1,5 @@
+---
+"@linode/queries": Added
+---
+
+Implemented `enabled` parameters for payments & invoices queries ([#12660](https://github.com/linode/manager/pull/12660))

packages/queries/src/account/billing.ts

@@ -10,22 +10,26 @@ import type { APIError, Filter, Params } from '@linode/api-v4/lib/types';
 export const useAllAccountInvoices = (
   params: Params = {},
   filter: Filter = {},
+  enabled: boolean = true,
 ) => {
   return useQuery<Invoice[], APIError[]>({
     ...accountQueries.invoices(params, filter),
     ...queryPresets.oneTimeFetch,
     placeholderData: keepPreviousData,
+    enabled,
   });
 };
 
 export const useAllAccountPayments = (
   params: Params = {},
   filter: Filter = {},
+  enabled: boolean = true,
 ) => {
   return useQuery<Payment[], APIError[]>({
     ...accountQueries.payments(params, filter),
     ...queryPresets.oneTimeFetch,
     placeholderData: keepPreviousData,
+    enabled,
   });
 };