fix: [M3-10497], [M3-10495], [M3-10493], [M3-10494] - Fix Invoice pagination, unwanted hyphen in service transfers breadcrumb, restricted message in quotas and open make a payment drawer when IAM nav is enabled

packages/manager/.changeset/pr-12726-fixed-1755622668154.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Cannot open payment method "Make a Payment" drawer when IAM nav is enabled ([#12726](https://github.com/linode/manager/pull/12726))

packages/manager/.changeset/pr-12726-fixed-1755622692185.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Cannot navigate invoice pagination when IAM nav is enabled ([#12726](https://github.com/linode/manager/pull/12726))

packages/manager/.changeset/pr-12726-fixed-1755622731861.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Service transfers details page breadcrumb contains hyphen ([#12726](https://github.com/linode/manager/pull/12726))

packages/manager/.changeset/pr-12726-fixed-1755622756270.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Redirect does not occur when IAM navigation is enabled and Quotas is disabled ([#12726](https://github.com/linode/manager/pull/12726))

packages/manager/src/GoTo.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 
 import { useIsDatabasesEnabled } from './features/Databases/utilities';
 import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
+import { useFlags } from './hooks/useFlags';
 import { useGlobalKeyboardListener } from './hooks/useGlobalKeyboardListener';
 
 import type { SelectOption } from '@linode/ui';
@@ -16,6 +17,8 @@ export const GoTo = React.memo(() => {
   const { data: grants } = useGrants();
   const { data: profile } = useProfile();
 
+  const { iamRbacPrimaryNavChanges } = useFlags();
+
   const isManagedAccount = accountSettings?.managed ?? false;
 
   const hasAccountAccess =
@@ -103,11 +106,22 @@ export const GoTo = React.memo(() => {
         display: 'Marketplace',
         href: '/linodes/create/marketplace',
       },
-      {
-        display: 'Account',
-        hide: !hasAccountAccess,
-        href: '/account/billing',
-      },
+      ...(iamRbacPrimaryNavChanges
+        ? [
+            { display: 'Billing', href: '/billing' },
+            { display: 'Identity & Access', href: '/iam' },
+            { display: 'Login History', href: '/login-history' },
+            { display: 'Service Transfers', href: '/service-transfers' },
+            { display: 'Maintenance', href: '/maintenance' },
+            { display: 'Settings', href: '/settings' },
+          ]
+        : [
+            {
+              display: 'Account',
+              hide: !hasAccountAccess,
+              href: '/account/billing',
+            },
+          ]),
       {
         display: 'Help & Support',
         href: '/support',
@@ -117,7 +131,12 @@ export const GoTo = React.memo(() => {
         href: '/profile/display',
       },
     ],
-    [hasAccountAccess, isManagedAccount, isPlacementGroupsEnabled]
+    [
+      hasAccountAccess,
+      isManagedAccount,
+      isPlacementGroupsEnabled,
+      iamRbacPrimaryNavChanges,
+    ]
   );
 
   const options: SelectOption<string>[] = React.useMemo(

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

@@ -8,6 +8,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 { useFlags } from 'src/hooks/useFlags';
 
 import { ThirdPartyPayment } from './ThirdPartyPayment';
 
@@ -39,6 +40,7 @@ export const PaymentMethodRow = (props: Props) => {
   const { is_default, type } = paymentMethod;
   const { enqueueSnackbar } = useSnackbar();
   const navigate = useNavigate();
+  const flags = useFlags();
 
   const { mutateAsync: makePaymentMethodDefault } =
     useMakeDefaultPaymentMethodMutation(props.paymentMethod.id);
@@ -63,7 +65,7 @@ export const PaymentMethodRow = (props: Props) => {
       disabled: isChildUser || !permissions.make_billing_payment,
       onClick: () => {
         navigate({
-          to: '/account/billing',
+          to: flags?.iamRbacPrimaryNavChanges ? '/billing' : '/account/billing',
           search: (prev) => ({
             ...prev,
             action: 'make-payment',

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

@@ -327,6 +327,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
         isIAMBeta,
         isIAMEnabled,
         iamRbacPrimaryNavChanges,
+        limitsEvolution,
       ]
     );
 

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

@@ -37,7 +37,7 @@ export const AccountLanding = () => {
   });
   const { data: account } = useAccount();
   const { data: profile } = useProfile();
-  const { limitsEvolution } = useFlags();
+  const { iamRbacPrimaryNavChanges, limitsEvolution } = useFlags();
 
   const { data: permissions } = usePermissions('account', [
     'make_billing_payment',
@@ -104,10 +104,10 @@ export const AccountLanding = () => {
   React.useEffect(() => {
     if (match.routeId === '/account/quotas' && !showQuotasTab) {
       navigate({
-        to: '/account/billing',
+        to: iamRbacPrimaryNavChanges ? '/quotas' : '/account/billing',
       });
     }
-  }, [match.routeId, showQuotasTab, navigate]);
+  }, [match.routeId, showQuotasTab, navigate, iamRbacPrimaryNavChanges]);
 
   const handleAccountSwitch = () => {
     if (isParentTokenExpired) {

packages/manager/src/features/Account/constants.ts

@@ -14,6 +14,7 @@ export const grantTypeMap = {
   longview: 'Longview Clients',
   nodebalancer: 'NodeBalancers',
   placementGroups: 'Placement Groups',
+  quotas: 'Quotas',
   stackscript: 'StackScripts',
   volume: 'Volumes',
   vpc: 'VPCs',

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

@@ -100,7 +100,7 @@ export const BillingLanding = () => {
             search: { action: 'make-payment' },
           })
         : {},
-    title: 'Account',
+    title: 'Billing',
   };
 
   return (

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

@@ -184,9 +184,12 @@ export const BillingActivityPanel = React.memo((props: Props) => {
   const { data: profile } = useProfile();
   const { data: account } = useAccount();
   const { data: regions } = useRegionsQuery();
+  const flags = useFlags();
 
   const pagination = usePaginationV2({
-    currentRoute: '/account/billing',
+    currentRoute: flags?.iamRbacPrimaryNavChanges
+      ? '/billing'
+      : '/account/billing',
     preferenceKey: 'billing-activity-pagination',
   });
   const { handleOrderChange, order, orderBy } = useOrderV2({
@@ -195,7 +198,7 @@ export const BillingActivityPanel = React.memo((props: Props) => {
         order: 'desc',
         orderBy: 'amount',
       },
-      from: '/account/billing',
+      from: flags?.iamRbacPrimaryNavChanges ? '/billing' : '/account/billing',
     },
     preferenceKey: 'billing-activity-order',
   });
@@ -212,7 +215,6 @@ export const BillingActivityPanel = React.memo((props: Props) => {
 
   const isAkamaiCustomer = account?.billing_source === 'akamai';
   const { classes } = useStyles();
-  const flags = useFlags();
   const pdfErrors = useSet();
   const pdfLoading = useSet();
 

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate.tsx

@@ -96,7 +96,7 @@ export const EntityTransfersCreate = () => {
           crumbOverrides: [
             {
               label: 'Service Transfers',
-              position: 2,
+              position: flags?.iamRbacPrimaryNavChanges ? 1 : 2,
             },
           ],
           labelOptions: { noCap: true },

packages/manager/src/features/GlobalNotifications/CreditCardExpiredBanner.tsx

@@ -4,10 +4,12 @@ import { useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
+import { useFlags } from 'src/hooks/useFlags';
 import { isCreditCardExpired } from 'src/utilities/creditCard';
 
 export const CreditCardExpiredBanner = () => {
   const navigate = useNavigate();
+  const flags = useFlags();
 
   const { data: account } = useAccount();
 
@@ -29,7 +31,13 @@ export const CreditCardExpiredBanner = () => {
       actionButton={
         <Button
           buttonType="primary"
-          onClick={() => navigate({ to: '/account/billing' })}
+          onClick={() =>
+            navigate({
+              to: flags?.iamRbacPrimaryNavChanges
+                ? '/billing'
+                : '/account/billing',
+            })
+          }
         >
           Update Card
         </Button>

packages/manager/src/features/GlobalNotifications/EmailBounce.tsx

@@ -13,6 +13,8 @@ import { useNavigate } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
+import { useFlags } from 'src/hooks/useFlags';
+
 import { StyledGrid } from './EmailBounce.styles';
 
 import type { Theme } from '@mui/material/styles';
@@ -26,6 +28,7 @@ export const EmailBounceNotificationSection = React.memo(() => {
   const { data: profile } = useProfile();
   const { mutateAsync: updateProfile } = useMutateProfile();
   const { data: notifications } = useNotificationsQuery();
+  const flags = useFlags();
 
   const navigate = useNavigate();
 
@@ -54,7 +57,9 @@ export const EmailBounceNotificationSection = React.memo(() => {
         <EmailBounceNotification
           changeEmail={() =>
             navigate({
-              to: '/account/billing',
+              to: flags?.iamRbacPrimaryNavChanges
+                ? '/billing'
+                : '/account/billing',
               search: { contactDrawerOpen: true, focusEmail: true },
             })
           }

packages/manager/src/features/GlobalNotifications/TaxCollectionBanner.tsx

@@ -55,7 +55,10 @@ export const TaxCollectionBanner = () => {
     <Button
       buttonType="primary"
       onClick={() =>
-        navigate({ to: '/account/billing', search: { action: 'edit' } })
+        navigate({
+          to: flags?.iamRbacPrimaryNavChanges ? '/billing' : '/account/billing',
+          search: { action: 'edit' },
+        })
       }
       sx={(theme) => ({
         marginLeft: theme.spacing(2),

packages/manager/src/routes/quotas/QuotasRoute.tsx

@@ -1,14 +1,17 @@
+import { NotFound } from '@linode/ui';
 import { Outlet } from '@tanstack/react-router';
 import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { useFlags } from 'src/hooks/useFlags';
 
 export const QuotasRoute = () => {
+  const { limitsEvolution } = useFlags();
   return (
     <React.Suspense fallback={<SuspenseLoader />}>
       <ProductInformationBanner bannerLocation="Account" />
-      <Outlet />
+      {limitsEvolution?.enabled ? <Outlet /> : <NotFound />}
     </React.Suspense>
   );
 };