upcoming: [M3-10417], [M3-10418], [M3-10419] and [M3-10420] - Redirects account tabs to flat routes /login-history, /settings, /maintenance and /service-transfers (linode#12702)

* Route accout/login-history -> /login-history

* Route accout/maintenance -> /maintenance

* Added changeset: Redirects account tabs to flat routes /login-history, /settings, /maintenance and /service-transfers

* Route accout/settings -> /settings

* Route accout/service-transfers -> /service-transfers

* Fix casing: serviceTransfers -> ServiceTransfers

* Update packages/manager/.changeset/pr-12702-upcoming-features-1755191140699.md

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

---------

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

Author: cpathipa

packages/manager/.changeset/pr-12702-upcoming-features-1755191140699.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Redirect Account tabs to flat routes `/login-history`, `/settings`, `/maintenance`, and `/service-transfers` ([#12702](https://github.com/linode/manager/pull/12702))

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

@@ -296,19 +296,19 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
               },
               {
                 display: 'Login History',
-                to: '/account/login-history', // TODO: replace with '/login-history' when flat route is added
+                to: '/login-history',
               },
               {
                 display: 'Service Transfers',
-                to: '/account/service-transfers', // TODO: replace with '/service-transfers' when flat route is added
+                to: '/service-transfers',
               },
               {
                 display: 'Maintenance',
-                to: '/account/maintenance', // TODO: replace with '/maintenance' when flat route is added
+                to: '/maintenance',
               },
               {
                 display: 'Settings',
-                to: '/account/settings', // TODO: replace with '/settings' when flat route is added
+                to: '/settings',
               },
             ],
             name: 'Administration',

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

@@ -15,6 +15,7 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
 import { TableSortCell } from 'src/components/TableSortCell';
+import { useFlags } from 'src/hooks/useFlags';
 import { useOrderV2 } from 'src/hooks/useOrderV2';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 
@@ -43,11 +44,14 @@ const useStyles = makeStyles()((theme: Theme) => ({
 
 const AccountLogins = () => {
   const { classes } = useStyles();
+  const flags = useFlags();
   const { data: permissions } = usePermissions('account', [
     'list_account_logins',
   ]);
   const pagination = usePaginationV2({
-    currentRoute: '/account/login-history',
+    currentRoute: flags?.iamRbacPrimaryNavChanges
+      ? '/login-history'
+      : '/account/login-history',
     preferenceKey: 'account-logins-pagination',
   });
 
@@ -57,7 +61,9 @@ const AccountLogins = () => {
         order: 'desc',
         orderBy: 'datetime',
       },
-      from: '/account/login-history',
+      from: flags?.iamRbacPrimaryNavChanges
+        ? '/login-history'
+        : '/account/login-history',
     },
     preferenceKey: `${preferenceKey}-order`,
   });

packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx

@@ -73,7 +73,9 @@ export const MaintenanceTable = ({ type }: Props) => {
   const flags = useFlags();
 
   const pagination = usePaginationV2({
-    currentRoute: `/account/maintenance`,
+    currentRoute: flags?.iamRbacPrimaryNavChanges
+      ? `/maintenance`
+      : `/account/maintenance`,
     preferenceKey: `${preferenceKey}-${type}`,
     queryParamsPrefix: type,
   });
@@ -84,7 +86,9 @@ export const MaintenanceTable = ({ type }: Props) => {
         order: 'desc',
         orderBy: 'status',
       },
-      from: `/account/maintenance`,
+      from: flags?.iamRbacPrimaryNavChanges
+        ? `/maintenance`
+        : `/account/maintenance`,
     },
     preferenceKey: `${preferenceKey}-order-${type}`,
     prefix: type,

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

@@ -9,6 +9,7 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
+import { useFlags } from 'src/hooks/useFlags';
 import { sendEntityTransferCreateEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
@@ -29,6 +30,7 @@ import type { QueryClient } from '@tanstack/react-query';
 
 export const EntityTransfersCreate = () => {
   const navigate = useNavigate();
+  const flags = useFlags();
   const { error, isPending, mutateAsync: createTransfer } = useCreateTransfer();
   const queryClient = useQueryClient();
 
@@ -77,7 +79,9 @@ export const EntityTransfersCreate = () => {
           queryKey: [entityTransfersQueryKey],
         });
         navigate({
-          to: '/account/service-transfers',
+          to: flags?.iamRbacPrimaryNavChanges
+            ? '/service-transfers'
+            : '/account/service-transfers',
           state: (prev) => ({ ...prev, transfer }),
         });
       },

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

@@ -11,6 +11,7 @@ import * as React from 'react';
 import { SelectableTableRow } from 'src/components/SelectableTableRow/SelectableTableRow';
 import { TableCell } from 'src/components/TableCell';
 import { TableContentWrapper } from 'src/components/TableContentWrapper/TableContentWrapper';
+import { useFlags } from 'src/hooks/useFlags';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 import { extendType } from 'src/utilities/extendType';
 
@@ -36,10 +37,14 @@ export const LinodeTransferTable = React.memo((props: Props) => {
     selectedLinodes,
     disabled,
   } = props;
+  const flags = useFlags();
+
   const [searchText, setSearchText] = React.useState('');
 
   const pagination = usePaginationV2({
-    currentRoute: '/account/service-transfers/create',
+    currentRoute: flags?.iamRbacPrimaryNavChanges
+      ? '/service-transfers/create'
+      : '/account/service-transfers/create',
     initialPage: 1,
     preferenceKey: 'linode-transfer-table',
   });

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

@@ -5,6 +5,7 @@ import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { usePermissions } from 'src/features/IAM/hooks/usePermissions';
+import { useFlags } from 'src/hooks/useFlags';
 import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 
 import { TransfersTable } from '../TransfersTable';
@@ -21,12 +22,17 @@ export const EntityTransfersLanding = () => {
 
   const location = useLocation();
   const navigate = useNavigate();
+  const flags = useFlags();
+
+  const url = flags?.iamRbacPrimaryNavChanges
+    ? '/service-transfers'
+    : '/account/service-transfers';
 
   const handleCloseSuccessDialog = () => {
     setSuccessDialogOpen(false);
     setTransfer(undefined);
     navigate({
-      to: '/account/service-transfers',
+      to: url,
       state: (prev) => ({ ...prev, transfer: undefined }),
     });
   };
@@ -48,19 +54,19 @@ export const EntityTransfersLanding = () => {
 
   const paginationPendingTransfers = usePaginationV2({
     initialPage,
-    currentRoute: '/account/service-transfers',
+    currentRoute: url,
     preferenceKey: pendingTransfersTablePreferenceKey,
     queryParamsPrefix: pendingTransfersTablePreferenceKey,
   });
   const paginationReceivedTransfers = usePaginationV2({
     initialPage,
-    currentRoute: '/account/service-transfers',
+    currentRoute: url,
     preferenceKey: receivedTransfersTablePreferenceKey,
     queryParamsPrefix: receivedTransfersTablePreferenceKey,
   });
   const paginationSentTransfers = usePaginationV2({
     initialPage,
-    currentRoute: '/account/service-transfers',
+    currentRoute: url,
     preferenceKey: sentTransfersTablePreferenceKey,
     queryParamsPrefix: sentTransfersTablePreferenceKey,
   });

packages/manager/src/features/EntityTransfers/EntityTransfersLanding/TransferControls.tsx

@@ -1,6 +1,8 @@
 import { useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
+import { useFlags } from 'src/hooks/useFlags';
+
 import { ConfirmTransferDialog } from './ConfirmTransferDialog';
 import {
   StyledLabelWrapperGrid,
@@ -22,6 +24,7 @@ interface Props {
 export const TransferControls = React.memo((props: Props) => {
   const { permissions } = props;
 
+  const flags = useFlags();
   const [token, setToken] = React.useState('');
   const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false);
 
@@ -38,7 +41,11 @@ export const TransferControls = React.memo((props: Props) => {
   };
 
   const handleCreateTransfer = () =>
-    navigate({ to: '/account/service-transfers/create' });
+    navigate({
+      to: flags?.iamRbacPrimaryNavChanges
+        ? '/service-transfers/create'
+        : '/account/service-transfers/create',
+    });
 
   return (
     <>

packages/manager/src/features/LoginHistory/LoginHistoryLanding.tsx

@@ -0,0 +1,38 @@
+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 AccountLogins from '../Account/AccountLogins';
+
+import type { LandingHeaderProps } from 'src/components/LandingHeader';
+
+export const LoginHistoryLanding = () => {
+  const flags = useFlags();
+  const location = useLocation();
+
+  if (
+    !flags?.iamRbacPrimaryNavChanges &&
+    location.pathname !== '/account/login-history'
+  ) {
+    return <Navigate replace to="/account/login-history" />;
+  }
+
+  const landingHeaderProps: LandingHeaderProps = {
+    title: 'Login History',
+  };
+
+  return (
+    <>
+      <PlatformMaintenanceBanner pathname={location.pathname} />
+      <MaintenanceBannerV2 pathname={location.pathname} />
+      <DocumentTitleSegment segment="Login History" />
+      <LandingHeader {...landingHeaderProps} spacingBottom={4} />
+      <AccountLogins />
+    </>
+  );
+};

packages/manager/src/features/LoginHistory/loginHistoryLandingLazyRoute.ts

@@ -0,0 +1,7 @@
+import { createLazyRoute } from '@tanstack/react-router';
+
+import { LoginHistoryLanding } from './LoginHistoryLanding';
+
+export const loginHistoryLandingLazyRoute = createLazyRoute('/login-history')({
+  component: LoginHistoryLanding,
+});