upcoming: [M3-10414] - Redirect /account/billing → /billing when feature flag is enabled (linode#12670)

* Added new feature flag to support PrimaryNav changes

* Add Administration section to the primary Nav

* Update PrimaryNav.tsx

* Added changeset: Added a new feature flag and Administration section in the Primary Nav

* Test coverage

* disable the flag in cypress tests

* Rename Account section to Administration in the top right menu

* Added changeset: IAM: Rename Account section to Administration in the top right menu

* Show new chip next to Identity and Access link

* Update packages/manager/.changeset/pr-12633-upcoming-features-1754346094060.md

Co-authored-by: Mariah Jacobs <[email protected]>

* Mock the iamRbacPrimaryNavChanges feature flag to be disabled in Cypress tests

* Add billing page route

* upadate primarynav

* Add billing landing page

* Add Billing details page

* Replace new feature chip with Beta chip - @aaleksee-akamai

* Update packages/manager/.changeset/pr-12640-upcoming-features-1754423037270.md

Co-authored-by: Connie Liu <[email protected]>

* Add login history link - @coliu-akamai

* Add billing link in the UserMenuPopover

* Update the all sublinks in billing page wrt new billing route

* Added changeset: Redirect /account/billing → /billing when feature flag is enabled

* disabel the iamRbacPrimaryNavChanges in cypress tests

* Code cleanup add redirects at router level

* Fix the broken cypress tests and pr feedback - @dwiley-akamai

* catch invalid billing routes

---------

Co-authored-by: Mariah Jacobs <[email protected]>
Co-authored-by: Connie Liu <[email protected]>

Author: 3 people

packages/manager/.changeset/pr-12670-upcoming-features-1755005813066.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Redirect /account/billing → /billing when feature flag is enabled ([#12670](https://github.com/linode/manager/pull/12670))

packages/manager/cypress/e2e/core/account/quotas-nav.spec.ts

@@ -8,6 +8,7 @@ describe('Quotas accessible when limitsEvolution feature flag enabled', () => {
       limitsEvolution: {
         enabled: true,
       },
+      iamRbacPrimaryNavChanges: false,
     }).as('getFeatureFlags');
   });
   it('can navigate directly to Quotas page', () => {
@@ -50,6 +51,7 @@ describe('Quotas inaccessible when limitsEvolution feature flag disabled', () =>
       limitsEvolution: {
         enabled: false,
       },
+      iamRbacPrimaryNavChanges: false,
     }).as('getFeatureFlags');
   });
   it('Quotas page is inaccessible', () => {

packages/manager/cypress/e2e/core/account/restricted-user-details-pages.spec.ts

@@ -105,6 +105,7 @@ describe('restricted user details pages', () => {
     mockAppendFeatureFlags({
       apl: false,
       dbaasV2: { beta: false, enabled: false },
+      iamRbacPrimaryNavChanges: false,
     });
   });
 

packages/manager/cypress/e2e/core/billing/billing-contact.spec.ts

@@ -85,6 +85,7 @@ describe('Billing Contact', () => {
       taxId: {
         enabled: true,
       },
+      iamRbacPrimaryNavChanges: false,
     });
   });
   it('Mask Contact Info', () => {

packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts

@@ -9,6 +9,7 @@ import {
   mockGetInvoice,
   mockGetInvoiceItems,
 } from 'support/intercepts/account';
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 import { ui } from 'support/ui';
 import { buildArray } from 'support/util/arrays';
 import { formatUsd } from 'support/util/currency';
@@ -30,6 +31,11 @@ const getRegionLabel = (regionId: string) => {
 };
 
 describe('Account invoices', () => {
+  beforeEach(() => {
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    });
+  });
   /*
    * - Confirms that invoice items are listed on invoice details page using mock API data.
    * - Confirms that each invoice item is displayed with correct accompanying info.

packages/manager/cypress/e2e/core/billing/credit-card-expired-banner.spec.ts

@@ -1,4 +1,5 @@
 import { mockGetAccount } from 'support/intercepts/account';
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 import { mockGetUserPreferences } from 'support/intercepts/profile';
 import { ui } from 'support/ui';
 
@@ -9,7 +10,12 @@ const creditCardExpiredBannerNotice =
 
 describe('Credit Card Expired Banner', () => {
   beforeEach(() => {
-    mockGetUserPreferences({ dismissed_notifications: {} });
+    mockGetUserPreferences({
+      dismissed_notifications: {},
+    });
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    }).as('getFeatureFlags');
   });
 
   it('appears when the expiration date is in the past', () => {

packages/manager/cypress/e2e/core/billing/google-pay.spec.ts

@@ -1,4 +1,5 @@
 import { mockGetPaymentMethods } from 'support/intercepts/account';
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 import { ui } from 'support/ui';
 
 import type { CreditCardData, PaymentMethod } from '@linode/api-v4';
@@ -56,6 +57,11 @@ const braintreeURL =
   'https://+(payments.braintree-api.com|payments.sandbox.braintree-api.com)/*';
 
 describe('Google Pay', () => {
+  beforeEach(() => {
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    });
+  });
   it('adds google pay method', () => {
     cy.intercept(braintreeURL).as('braintree');
     mockGetPaymentMethods(mockPaymentMethods).as('getPaymentMethods');

packages/manager/cypress/e2e/core/billing/restricted-user-billing.spec.ts

@@ -6,6 +6,7 @@ import { grantsFactory, profileFactory } from '@linode/utilities';
 import { paymentMethodFactory } from '@src/factories';
 import { accountUserFactory } from '@src/factories/accountUsers';
 import { mockGetPaymentMethods, mockGetUser } from 'support/intercepts/account';
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 import {
   mockGetProfile,
   mockGetProfileGrants,
@@ -223,6 +224,9 @@ const assertMakeAPaymentEnabled = () => {
 describe('restricted user billing flows', () => {
   beforeEach(() => {
     mockGetPaymentMethods(mockPaymentMethods);
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    });
   });
 
   /*

packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts

@@ -8,6 +8,7 @@ import {
   mockGetPaymentMethods,
   mockGetPayments,
 } from 'support/intercepts/account';
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 import { mockGetProfile, mockUpdateProfile } from 'support/intercepts/profile';
 import { ui } from 'support/ui';
 import { buildArray } from 'support/util/arrays';
@@ -117,6 +118,11 @@ const assertPaymentInfo = (payment: Payment, timezone: string) => {
 
 authenticate();
 describe('Billing Activity Feed', () => {
+  beforeEach(() => {
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    });
+  });
   /*
    * - Uses mocked API data to confirm that invoices and payments are listed on billing page.
    * - Confirms that invoice and payment labels, dates, and totals are displayed as expected.

packages/manager/cypress/e2e/core/linodes/rebuild-linode.spec.ts

@@ -178,6 +178,10 @@ describe('rebuild linode', () => {
     getLatestImage(almaLinuxImageLabel).then((value: Image) => {
       almaLinuxImageLabel = value.label;
     });
+
+    mockAppendFeatureFlags({
+      iamRbacPrimaryNavChanges: false,
+    });
   });
 
   /*