upcoming: [M3-10416] - Redirect /account/quotas → /quotas when feature flag is enabled (linode#12693)

* 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

* Show Users & Grants link for non beta users

* Added changeset:  Restrict access to the Identity & Access link from the Primary Nav for non-beta users

* replace 'account/quotas' with flat route '/quotas'

* Load Quotas Landing page or /quotas route

* Fix the test PrimaryNav

---------

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

Author: 3 people

packages/manager/.changeset/pr-12692-upcoming-features-1755112059114.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+ Restrict access to the Identity & Access link from the Primary Nav for non-beta users ([#12692](https://github.com/linode/manager/pull/12692))

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

@@ -340,6 +340,11 @@ describe('PrimaryNav', () => {
         beta: true,
         enabled: true,
       },
+      limitsEvolution: {
+        enabled: true,
+        requestForIncreaseDisabledForAll: true,
+        requestForIncreaseDisabledForInternalAccountsOnly: true,
+      },
     };
 
     queryMocks.useIsIAMEnabled.mockReturnValue({

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

@@ -61,6 +61,7 @@ export type NavEntity =
   | 'Service Transfers'
   | 'Settings'
   | 'StackScripts'
+  | 'Users & Grants'
   | 'Volumes'
   | 'VPC';
 
@@ -105,7 +106,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
       flags.aclpAlerting?.recentActivity ||
       flags.aclpAlerting?.notificationChannels);
 
-  const isIAMRbacPrimaryNavChangesEnabled = flags?.iamRbacPrimaryNavChanges;
+  const { iamRbacPrimaryNavChanges, limitsEvolution } = flags;
 
   const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
   const { isDatabasesEnabled, isDatabasesV2Beta } = useIsDatabasesEnabled();
@@ -251,13 +252,13 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
               },
               {
                 display: 'Identity & Access',
-                hide: !isIAMEnabled || isIAMRbacPrimaryNavChangesEnabled,
+                hide: !isIAMEnabled || iamRbacPrimaryNavChanges,
                 to: '/iam',
                 isBeta: isIAMBeta,
               },
               {
                 display: 'Account',
-                hide: isIAMRbacPrimaryNavChangesEnabled,
+                hide: iamRbacPrimaryNavChanges,
                 to: '/account',
               },
               {
@@ -269,14 +270,19 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
           },
         ];
 
-        if (isIAMRbacPrimaryNavChangesEnabled) {
+        if (iamRbacPrimaryNavChanges) {
           groups.splice(groups.length - 1, 0, {
             icon: <CoreUser />,
             links: [
               {
                 display: 'Billing',
                 to: '/billing',
               },
+              {
+                display: 'Users & Grants',
+                hide: isIAMEnabled,
+                to: '/account/users',
+              },
               {
                 display: 'Identity & Access',
                 hide: !isIAMEnabled,
@@ -285,7 +291,8 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
               },
               {
                 display: 'Quotas',
-                to: '/account/quotas', // TODO: replace with '/quotas' when flat route is added
+                hide: !limitsEvolution?.enabled,
+                to: '/quotas',
               },
               {
                 display: 'Login History',
@@ -319,7 +326,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
         isACLPEnabled,
         isIAMBeta,
         isIAMEnabled,
-        isIAMRbacPrimaryNavChangesEnabled,
+        iamRbacPrimaryNavChanges,
       ]
     );
 

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

@@ -12,6 +12,7 @@ import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { Link } from 'src/components/Link';
+import { useFlags } from 'src/hooks/useFlags';
 
 import { QuotasTable } from './QuotasTable';
 import { useGetLocationsForQuotaService } from './utils';
@@ -22,6 +23,8 @@ import type { Theme } from '@mui/material';
 
 export const Quotas = () => {
   const navigate = useNavigate();
+  const flags = useFlags();
+
   const [selectedLocation, setSelectedLocation] =
     React.useState<null | SelectOption<Quota['region_applied']>>(null);
   const locationData = useGetLocationsForQuotaService('object-storage');
@@ -68,7 +71,11 @@ export const Quotas = () => {
                   label: value?.label,
                   value: value?.value,
                 });
-                navigate({ to: '/account/quotas' });
+                navigate({
+                  to: flags?.iamRbacPrimaryNavChanges
+                    ? '/quotas'
+                    : '/account/quotas',
+                });
               }}
               options={
                 sortedS3Endpoints?.map((location) => ({

packages/manager/src/features/Account/Quotas/QuotasTable.tsx

@@ -12,6 +12,7 @@ import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
+import { useFlags } from 'src/hooks/useFlags';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 
 import { QuotasIncreaseForm } from './QuotasIncreaseForm';
@@ -31,9 +32,12 @@ interface QuotasTableProps {
 
 export const QuotasTable = (props: QuotasTableProps) => {
   const { selectedLocation, selectedService } = props;
+  const flags = useFlags();
   const navigate = useNavigate();
   const pagination = usePaginationV2({
-    currentRoute: '/account/quotas',
+    currentRoute: flags?.iamRbacPrimaryNavChanges
+      ? '/quotas'
+      : '/account/quotas',
     initialPage: 1,
     preferenceKey: 'quotas-table',
   });

packages/manager/src/features/Quotas/QuotasLanding.tsx

@@ -0,0 +1,44 @@
+import { Navigate, useLocation } from '@tanstack/react-router';
+import * as React from 'react';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { LandingHeader } from 'src/components/LandingHeader';
+import { MaintenanceBannerV2 } from 'src/components/MaintenanceBanner/MaintenanceBannerV2';
+import { PlatformMaintenanceBanner } from 'src/components/PlatformMaintenanceBanner/PlatformMaintenanceBanner';
+import { useFlags } from 'src/hooks/useFlags';
+
+import { Quotas } from '../Account/Quotas/Quotas';
+
+import type { LandingHeaderProps } from 'src/components/LandingHeader';
+
+export const QuotasLanding = () => {
+  const flags = useFlags();
+  const location = useLocation();
+
+  const isIAMRbacPrimaryNavChangesEnabled = flags?.iamRbacPrimaryNavChanges;
+
+  if (
+    !isIAMRbacPrimaryNavChangesEnabled &&
+    location.pathname !== '/account/quotas'
+  ) {
+    return <Navigate replace to="/account/quotas" />;
+  }
+
+  const landingHeaderProps: LandingHeaderProps = {
+    breadcrumbProps: {
+      pathname: '/quotas',
+    },
+
+    title: 'Quotas',
+  };
+
+  return (
+    <>
+      <PlatformMaintenanceBanner pathname={location.pathname} />
+      <MaintenanceBannerV2 pathname={location.pathname} />
+      <DocumentTitleSegment segment="Quotas" />
+      <LandingHeader {...landingHeaderProps} spacingBottom={4} />
+      <Quotas />
+    </>
+  );
+};

packages/manager/src/features/Quotas/quotasLandingLazyRoute.ts

@@ -0,0 +1,7 @@
+import { createLazyRoute } from '@tanstack/react-router';
+
+import { QuotasLanding } from './QuotasLanding';
+
+export const quotasLandingLazyRoute = createLazyRoute('/quotas')({
+  component: QuotasLanding,
+});

packages/manager/src/features/TopMenu/UserMenu/UserMenuPopover.tsx

@@ -120,7 +120,7 @@ export const UserMenuPopover = (props: UserMenuPopoverProps) => {
       {
         display: 'Quotas',
         hide: !flags.limitsEvolution?.enabled,
-        to: '/account/quotas',
+        to: flags?.iamRbacPrimaryNavChanges ? '/quotas' : '/account/quotas',
       },
       {
         display: 'Login History',

packages/manager/src/routes/account/index.ts

@@ -67,6 +67,14 @@ const accountUsersRoute = createRoute({
 const accountQuotasRoute = createRoute({
   getParentRoute: () => accountTabsRoute,
   path: '/quotas',
+  beforeLoad: ({ context }) => {
+    if (context?.flags?.iamRbacPrimaryNavChanges) {
+      throw redirect({
+        to: `/quotas`,
+        replace: true,
+      });
+    }
+  },
 }).lazy(() =>
   import('src/features/Account/Quotas/quotasLazyRoute').then(
     (m) => m.quotasLazyRoute

packages/manager/src/routes/index.tsx

@@ -31,6 +31,7 @@ import { nodeBalancersRouteTree } from './nodeBalancers';
 import { objectStorageRouteTree } from './objectStorage';
 import { placementGroupsRouteTree } from './placementGroups';
 import { profileRouteTree } from './profile';
+import { quotasRouteTree } from './quotas';
 import { rootRoute } from './root';
 import { searchRouteTree } from './search';
 import { stackScriptsRouteTree } from './stackscripts';
@@ -74,6 +75,7 @@ export const routeTree = rootRoute.addChildren([
   objectStorageRouteTree,
   placementGroupsRouteTree,
   profileRouteTree,
+  quotasRouteTree,
   searchRouteTree,
   stackScriptsRouteTree,
   supportRouteTree,