From 8bd0774f259a28a3f669232df15d6a387b4017ce Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Tue, 24 Sep 2024 00:10:11 -0400
Subject: [PATCH 01/45] Initial commit: proof of concept

---
 packages/manager/package.json                 |   1 +
 packages/manager/src/App.tsx                  |   8 +-
 packages/manager/src/MainContent.styles.ts    |  85 ++++++
 packages/manager/src/MainContentV2.tsx        | 249 ++++++++++++++++++
 packages/manager/src/Root.tsx                 | 130 +++++++++
 .../manager/src/features/Linodes/index.tsx    |   2 +-
 packages/manager/src/routes/account.tsx       |  84 ++++++
 packages/manager/src/routes/index.tsx         |  82 ++++++
 packages/manager/src/routes/linodes.tsx       |  56 ++++
 .../manager/src/routes/placementGroups.tsx    | 100 +++++++
 packages/manager/src/routes/root.ts           |   7 +
 packages/manager/src/routes/volumes.tsx       |  46 ++++
 yarn.lock                                     |  43 ++-
 13 files changed, 888 insertions(+), 5 deletions(-)
 create mode 100644 packages/manager/src/MainContent.styles.ts
 create mode 100644 packages/manager/src/MainContentV2.tsx
 create mode 100644 packages/manager/src/Root.tsx
 create mode 100644 packages/manager/src/routes/account.tsx
 create mode 100644 packages/manager/src/routes/index.tsx
 create mode 100644 packages/manager/src/routes/linodes.tsx
 create mode 100644 packages/manager/src/routes/placementGroups.tsx
 create mode 100644 packages/manager/src/routes/root.ts
 create mode 100644 packages/manager/src/routes/volumes.tsx

diff --git a/packages/manager/package.json b/packages/manager/package.json
index c303d7b4359..5e119bc7c45 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -30,6 +30,7 @@
     "@sentry/react": "^7.57.0",
     "@tanstack/react-query": "5.51.24",
     "@tanstack/react-query-devtools": "5.51.24",
+    "@tanstack/react-router": "^1.58.3",
     "@xterm/xterm": "^5.5.0",
     "algoliasearch": "^4.14.3",
     "axios": "~1.7.4",
diff --git a/packages/manager/src/App.tsx b/packages/manager/src/App.tsx
index 04c31a7aff0..37f04cb7694 100644
--- a/packages/manager/src/App.tsx
+++ b/packages/manager/src/App.tsx
@@ -9,12 +9,13 @@ import {
 import withFeatureFlagProvider from 'src/containers/withFeatureFlagProvider.container';
 import TheApplicationIsOnFire from 'src/features/TheApplicationIsOnFire';
 
-import { GoTo } from './GoTo';
-import { MainContent } from './MainContent';
 import { SplashScreen } from './components/SplashScreen';
+import { GoTo } from './GoTo';
 import { useAdobeAnalytics } from './hooks/useAdobeAnalytics';
 import { useInitialRequests } from './hooks/useInitialRequests';
 import { useNewRelic } from './hooks/useNewRelic';
+//import { MainContent } from './MainContent';
+import { MainContentV2 } from './MainContentV2';
 import { useEventsPoller } from './queries/events/events';
 import { useSetupFeatureFlags } from './useSetupFeatureFlags';
 
@@ -46,7 +47,8 @@ const BaseApp = withDocumentTitleProvider(
         </div>
         <GoTo />
         <DocumentTitleSegment segment="Akamai Cloud Manager" />
-        <MainContent />
+        {/* <MainContent /> */}
+        <MainContentV2 />
         <GlobalListeners />
       </ErrorBoundary>
     );
diff --git a/packages/manager/src/MainContent.styles.ts b/packages/manager/src/MainContent.styles.ts
new file mode 100644
index 00000000000..821ad754a70
--- /dev/null
+++ b/packages/manager/src/MainContent.styles.ts
@@ -0,0 +1,85 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/SideMenu';
+
+import type { Theme } from '@mui/material/styles';
+
+export const useStyles = makeStyles()((theme: Theme) => ({
+  activationWrapper: {
+    padding: theme.spacing(4),
+    [theme.breakpoints.up('xl')]: {
+      margin: '0 auto',
+      width: '50%',
+    },
+  },
+  appFrame: {
+    backgroundColor: theme.bg.app,
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '100vh',
+    position: 'relative',
+    zIndex: 1,
+  },
+  bgStyling: {
+    backgroundColor: theme.bg.main,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    minHeight: '100vh',
+  },
+  cmrWrapper: {
+    maxWidth: `${theme.breakpoints.values.lg}px !important`,
+    padding: `${theme.spacing(3)} 0`,
+    paddingTop: 12,
+    [theme.breakpoints.between('md', 'xl')]: {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+    },
+    [theme.breakpoints.down('md')]: {
+      paddingLeft: 0,
+      paddingRight: 0,
+      paddingTop: theme.spacing(2),
+    },
+    transition: theme.transitions.create('opacity'),
+  },
+  content: {
+    flex: 1,
+    [theme.breakpoints.up('md')]: {
+      marginLeft: SIDEBAR_WIDTH,
+    },
+    transition: 'margin-left .1s linear',
+  },
+  fullWidthContent: {
+    marginLeft: 0,
+    [theme.breakpoints.up('md')]: {
+      marginLeft: 52,
+    },
+  },
+  grid: {
+    marginLeft: 0,
+    marginRight: 0,
+    [theme.breakpoints.up('lg')]: {
+      height: '100%',
+    },
+    width: '100%',
+  },
+  logo: {
+    '& > g': {
+      fill: theme.color.black,
+    },
+  },
+  switchWrapper: {
+    '& > .MuiGrid-container': {
+      maxWidth: theme.breakpoints.values.lg,
+      width: '100%',
+    },
+    '&.mlMain': {
+      [theme.breakpoints.up('lg')]: {
+        maxWidth: '78.8%',
+      },
+    },
+    flex: 1,
+    maxWidth: '100%',
+    position: 'relative',
+  },
+}));
diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
new file mode 100644
index 00000000000..3c8f542e4cf
--- /dev/null
+++ b/packages/manager/src/MainContentV2.tsx
@@ -0,0 +1,249 @@
+import { RouterProvider, createRoute } from '@tanstack/react-router';
+import * as React from 'react';
+
+import { NotFound } from 'src/components/NotFound';
+import { useFlags } from 'src/hooks/useFlags';
+
+import { useIsACLPEnabled } from './features/CloudPulse/Utils/utils';
+import { useIsDatabasesEnabled } from './features/Databases/utilities';
+import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
+import { useAccountSettings } from './queries/account/settings';
+import { router } from './routes';
+import { rootRoute } from './routes/root';
+
+const Domains = React.lazy(() =>
+  import('src/features/Domains').then((module) => ({
+    default: module.DomainsRoutes,
+  }))
+);
+const Images = React.lazy(() => import('src/features/Images'));
+const Kubernetes = React.lazy(() =>
+  import('src/features/Kubernetes').then((module) => ({
+    default: module.Kubernetes,
+  }))
+);
+const ObjectStorage = React.lazy(() => import('src/features/ObjectStorage'));
+const Profile = React.lazy(() =>
+  import('src/features/Profile/Profile').then((module) => ({
+    default: module.Profile,
+  }))
+);
+const NodeBalancers = React.lazy(
+  () => import('src/features/NodeBalancers/NodeBalancers')
+);
+const StackScripts = React.lazy(
+  () => import('src/features/StackScripts/StackScripts')
+);
+const SupportTickets = React.lazy(
+  () => import('src/features/Support/SupportTickets')
+);
+const SupportTicketDetail = React.lazy(() =>
+  import('src/features/Support/SupportTicketDetail/SupportTicketDetail').then(
+    (module) => ({
+      default: module.SupportTicketDetail,
+    })
+  )
+);
+const Longview = React.lazy(() => import('src/features/Longview'));
+const Managed = React.lazy(() => import('src/features/Managed/ManagedLanding'));
+const Help = React.lazy(() =>
+  import('./features/Help/index').then((module) => ({
+    default: module.HelpAndSupport,
+  }))
+);
+const SearchLanding = React.lazy(
+  () => import('src/features/Search/SearchLanding')
+);
+const EventsLanding = React.lazy(() =>
+  import('src/features/Events/EventsLanding').then((module) => ({
+    default: module.EventsLanding,
+  }))
+);
+const AccountActivationLanding = React.lazy(
+  () => import('src/components/AccountActivation/AccountActivationLanding')
+);
+const Firewalls = React.lazy(() => import('src/features/Firewalls'));
+const Databases = React.lazy(() => import('src/features/Databases'));
+const BetaRoutes = React.lazy(() => import('src/features/Betas'));
+const VPC = React.lazy(() => import('src/features/VPCs'));
+
+const CloudPulse = React.lazy(() =>
+  import('src/features/CloudPulse/CloudPulseLanding').then((module) => ({
+    default: module.CloudPulseLanding,
+  }))
+);
+
+const nodeBalancersRoute = createRoute({
+  component: NodeBalancers,
+  getParentRoute: () => rootRoute,
+  path: 'nodebalancers',
+});
+
+const domainsRoute = createRoute({
+  component: Domains,
+  getParentRoute: () => rootRoute,
+  path: 'domains',
+});
+
+const managedRoute = createRoute({
+  component: Managed,
+  getParentRoute: () => rootRoute,
+  path: 'managed',
+});
+
+const longviewRoute = createRoute({
+  component: Longview,
+  getParentRoute: () => rootRoute,
+  path: 'longview',
+});
+
+const imagesRoute = createRoute({
+  component: Images,
+  getParentRoute: () => rootRoute,
+  path: 'images',
+});
+
+const stackScriptsRoute = createRoute({
+  component: StackScripts,
+  getParentRoute: () => rootRoute,
+  path: 'stackscripts',
+});
+
+const objectStorageRoute = createRoute({
+  component: ObjectStorage,
+  getParentRoute: () => rootRoute,
+  path: 'object-storage',
+});
+
+const kubernetesRoute = createRoute({
+  component: Kubernetes,
+  getParentRoute: () => rootRoute,
+  path: 'kubernetes',
+});
+
+const profileRoute = createRoute({
+  component: Profile,
+  getParentRoute: () => rootRoute,
+  path: 'profile',
+});
+
+const supportRoute = createRoute({
+  component: Help,
+  getParentRoute: () => rootRoute,
+  path: 'support',
+});
+
+const searchRoute = createRoute({
+  component: SearchLanding,
+  getParentRoute: () => rootRoute,
+  path: 'search',
+});
+
+const eventsRoute = createRoute({
+  component: EventsLanding,
+  getParentRoute: () => rootRoute,
+  path: 'events',
+});
+
+const firewallsRoute = createRoute({
+  component: Firewalls,
+  getParentRoute: () => rootRoute,
+  path: 'firewalls',
+});
+
+const databasesRoute = createRoute({
+  component: Databases,
+  getParentRoute: () => rootRoute,
+  path: 'databases',
+});
+
+const betaRoute = createRoute({
+  component: BetaRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'betas',
+});
+
+const vpcRoute = createRoute({
+  component: VPC,
+  getParentRoute: () => rootRoute,
+  path: 'vpcs',
+});
+
+const cloudPulseRoute = createRoute({
+  component: CloudPulse,
+  getParentRoute: () => rootRoute,
+  path: 'monitor/cloudpulse',
+});
+
+const accountActivationRoute = createRoute({
+  component: AccountActivationLanding,
+  getParentRoute: () => rootRoute,
+  path: 'account-activation',
+});
+
+const supportTicketDetailRoute = createRoute({
+  component: SupportTicketDetail,
+  getParentRoute: () => rootRoute,
+  path: 'support/tickets/:id',
+});
+
+const supportTicketsRoute = createRoute({
+  component: SupportTickets,
+  getParentRoute: () => rootRoute,
+  path: 'support/tickets/create',
+});
+
+const notFoundRoute = createRoute({
+  component: NotFound,
+  getParentRoute: () => rootRoute,
+  path: '*',
+});
+
+// Create the route tree
+// TODO: TanStackRouter - continue exporting this
+// @ts-expect-error - TODO: Fix this type error
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const routeTree = rootRoute.addChildren([
+  nodeBalancersRoute,
+  domainsRoute,
+  managedRoute,
+  longviewRoute,
+  imagesRoute,
+  stackScriptsRoute,
+  objectStorageRoute,
+  kubernetesRoute,
+  profileRoute,
+  supportRoute,
+  searchRoute,
+  eventsRoute,
+  firewallsRoute,
+  databasesRoute,
+  betaRoute,
+  vpcRoute,
+  cloudPulseRoute,
+  accountActivationRoute,
+  supportTicketsRoute,
+  supportTicketDetailRoute,
+  notFoundRoute,
+]);
+
+export const MainContentV2 = () => {
+  const { data: accountSettings } = useAccountSettings();
+  const { isDatabasesEnabled } = useIsDatabasesEnabled();
+  const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
+  const { isACLPEnabled } = useIsACLPEnabled();
+  const flags = useFlags();
+
+  // Update the router's context
+  router.update({
+    context: {
+      accountSettings,
+      isACLPEnabled,
+      isDatabasesEnabled,
+      isPlacementGroupsEnabled,
+      selfServeBetas: flags.selfServeBetas,
+    },
+  });
+
+  return <RouterProvider router={router} />;
+};
diff --git a/packages/manager/src/Root.tsx b/packages/manager/src/Root.tsx
new file mode 100644
index 00000000000..c974ade07ed
--- /dev/null
+++ b/packages/manager/src/Root.tsx
@@ -0,0 +1,130 @@
+import Grid from '@mui/material/Unstable_Grid2';
+import { Outlet } from '@tanstack/react-router';
+import React from 'react';
+
+import Logo from 'src/assets/logo/akamai-logo.svg';
+import { Box } from 'src/components/Box';
+import { MainContentBanner } from 'src/components/MainContentBanner';
+import { MaintenanceScreen } from 'src/components/MaintenanceScreen';
+import { SideMenu } from 'src/components/PrimaryNav/SideMenu';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { useDialogContext } from 'src/context/useDialogContext';
+import { Footer } from 'src/features/Footer';
+import { GlobalNotifications } from 'src/features/GlobalNotifications/GlobalNotifications';
+import {
+  notificationCenterContext,
+  useNotificationContext,
+} from 'src/features/NotificationCenter/NotificationCenterContext';
+import { TopMenu } from 'src/features/TopMenu/TopMenu';
+import {
+  useMutatePreferences,
+  usePreferences,
+} from 'src/queries/profile/preferences';
+
+import { ENABLE_MAINTENANCE_MODE } from './constants';
+import { complianceUpdateContext } from './context/complianceUpdateContext';
+import { sessionExpirationContext } from './context/sessionExpirationContext';
+import { switchAccountSessionContext } from './context/switchAccountSessionContext';
+import { useGlobalErrors } from './hooks/useGlobalErrors';
+import { useStyles } from './MainContent.styles';
+import { useProfile } from './queries/profile/profile';
+
+export const Root = () => {
+  const { classes, cx } = useStyles();
+  const { data: preferences } = usePreferences();
+  const { mutateAsync: updatePreferences } = useMutatePreferences();
+
+  const globalErrors = useGlobalErrors();
+
+  const NotificationProvider = notificationCenterContext.Provider;
+  const contextValue = useNotificationContext();
+
+  const ComplianceUpdateProvider = complianceUpdateContext.Provider;
+  const complianceUpdateContextValue = useDialogContext();
+
+  const SwitchAccountSessionProvider = switchAccountSessionContext.Provider;
+  const switchAccountSessionContextValue = useDialogContext({
+    isOpen: false,
+  });
+
+  const SessionExpirationProvider = sessionExpirationContext.Provider;
+  const sessionExpirationContextValue = useDialogContext({
+    isOpen: false,
+  });
+
+  const [menuIsOpen, toggleMenu] = React.useState<boolean>(false);
+
+  const { data: profile } = useProfile();
+  const username = profile?.username || '';
+
+  const desktopMenuIsOpen = preferences?.desktop_sidebar_open ?? false;
+
+  const desktopMenuToggle = () => {
+    updatePreferences({
+      desktop_sidebar_open: !preferences?.desktop_sidebar_open,
+    });
+  };
+
+  if (globalErrors.account_unactivated) {
+    return (
+      <div className={classes.bgStyling}>
+        <div className={classes.activationWrapper}>
+          <Box style={{ display: 'flex', justifyContent: 'center' }}>
+            <Logo className={classes.logo} width={215} />
+          </Box>
+          <Outlet />
+        </div>
+      </div>
+    );
+  }
+
+  if (globalErrors.api_maintenance_mode || ENABLE_MAINTENANCE_MODE) {
+    return <MaintenanceScreen />;
+  }
+
+  return (
+    <div className={classes.appFrame}>
+      <SessionExpirationProvider value={sessionExpirationContextValue}>
+        <SwitchAccountSessionProvider value={switchAccountSessionContextValue}>
+          <ComplianceUpdateProvider value={complianceUpdateContextValue}>
+            <NotificationProvider value={contextValue}>
+              <SideMenu
+                closeMenu={() => toggleMenu(false)}
+                collapse={desktopMenuIsOpen || false}
+                open={menuIsOpen}
+              />
+              <div
+                className={cx(classes.content, {
+                  [classes.fullWidthContent]: desktopMenuIsOpen,
+                })}
+              >
+                <MainContentBanner />
+                <TopMenu
+                  desktopMenuToggle={desktopMenuToggle}
+                  isSideMenuOpen={!desktopMenuIsOpen}
+                  openSideMenu={() => toggleMenu(true)}
+                  username={username}
+                />
+                <main
+                  className={classes.cmrWrapper}
+                  id="main-content"
+                  role="main"
+                >
+                  <Grid className={classes.grid} container spacing={0}>
+                    <Grid className={cx(classes.switchWrapper, 'p0')}>
+                      <GlobalNotifications />
+                      <React.Suspense fallback={<SuspenseLoader />}>
+                        <Outlet />
+                      </React.Suspense>
+                    </Grid>
+                  </Grid>
+                </main>
+              </div>
+            </NotificationProvider>
+            <Footer desktopMenuIsOpen={desktopMenuIsOpen} />
+          </ComplianceUpdateProvider>
+        </SwitchAccountSessionProvider>
+      </SessionExpirationProvider>
+    </div>
+  );
+};
diff --git a/packages/manager/src/features/Linodes/index.tsx b/packages/manager/src/features/Linodes/index.tsx
index fba717646c2..a3c6ec2df70 100644
--- a/packages/manager/src/features/Linodes/index.tsx
+++ b/packages/manager/src/features/Linodes/index.tsx
@@ -41,7 +41,7 @@ export const LinodesRoutes = () => {
 // mapStateToProps, but since I wanted to use a query (for accountMaintenance)
 // I needed a Function Component. It seemed safer to do it this way instead of
 // refactoring LinodesLanding.
-const LinodesLandingWrapper = React.memo(() => {
+export const LinodesLandingWrapper = React.memo(() => {
   const { data: accountMaintenanceData } = useAllAccountMaintenanceQuery(
     {},
     { status: { '+or': ['pending, started'] } }
diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
new file mode 100644
index 00000000000..276f2e7d793
--- /dev/null
+++ b/packages/manager/src/routes/account.tsx
@@ -0,0 +1,84 @@
+import {
+  Outlet,
+  createRoute,
+  lazyRouteComponent,
+} from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+
+export const AccountRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Account" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+export const accountRoute = createRoute({
+  component: AccountRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'account',
+});
+
+export const accountIndexRoute = createRoute({
+  component: lazyRouteComponent(
+    () => import('src/features/Account/AccountLanding')
+  ),
+  getParentRoute: () => accountRoute,
+  path: '/',
+});
+
+export const accountUsersUsernameRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import('src/features/Users/UserDetail').then((module) => ({
+      default: module.UserDetail,
+    }))
+  ),
+  getParentRoute: () => accountRoute,
+  path: 'users/:username',
+});
+
+export const accountBillingRoute = createRoute({
+  component: lazyRouteComponent(
+    () => import('src/features/Account/AccountLanding')
+  ),
+  getParentRoute: () => accountRoute,
+  path: 'billing',
+});
+
+export const accountBillingEditRoute = createRoute({
+  component: lazyRouteComponent(
+    () => import('src/features/Account/AccountLanding')
+  ),
+  getParentRoute: () => accountRoute,
+  path: 'billing/edit',
+});
+
+export const accountInvoicesInvoiceIdRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import('src/features/Billing/InvoiceDetail/InvoiceDetail').then(
+      (module) => ({
+        default: module.InvoiceDetail,
+      })
+    )
+  ),
+  getParentRoute: () => accountRoute,
+  path: 'billing/invoices/:invoiceId',
+});
+
+export const accountEntityTransfersCreateRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import(
+      'src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate'
+    ).then((module) => ({
+      default: module.EntityTransfersCreate,
+    }))
+  ),
+  getParentRoute: () => accountRoute,
+  path: 'service-transfers/create',
+});
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
new file mode 100644
index 00000000000..8e782d44d52
--- /dev/null
+++ b/packages/manager/src/routes/index.tsx
@@ -0,0 +1,82 @@
+import { createRoute, createRouter, redirect } from '@tanstack/react-router';
+import React from 'react';
+
+import { NotFound } from 'src/components/NotFound';
+
+import {
+  accountBillingEditRoute,
+  accountBillingRoute,
+  accountEntityTransfersCreateRoute,
+  accountIndexRoute,
+  accountInvoicesInvoiceIdRoute,
+  accountRoute,
+  accountUsersUsernameRoute,
+} from './account';
+import {
+  linodesCreateRoute,
+  linodesDetailRoute,
+  linodesIndexRoute,
+  linodesRoute,
+} from './linodes';
+import {
+  placementGroupsCreateRoute,
+  placementGroupsDeleteRoute,
+  placementGroupsDetailRoute,
+  placementGroupsEditRoute,
+  placementGroupsIndexRoute,
+  placementGroupsRoute,
+  placementGroupsUnassignRoute,
+} from './placementGroups';
+import { rootRoute } from './root';
+import { volumesCreateRoute, volumesIndexRoute, volumesRoute } from './volumes';
+
+const indexRoute = createRoute({
+  beforeLoad: ({ context }) => {
+    // TODO: TanStackRouter - fix this `any` type
+    const { accountSettings } = context as any;
+    const defaultRoot = accountSettings?.managed ? '/managed' : '/linodes';
+
+    throw redirect({ to: defaultRoot });
+  },
+  getParentRoute: () => rootRoute,
+  path: '/',
+});
+
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  accountRoute.addChildren([
+    accountIndexRoute,
+    accountUsersUsernameRoute,
+    accountBillingRoute.addChildren([
+      accountBillingEditRoute,
+      accountInvoicesInvoiceIdRoute,
+    ]),
+    accountEntityTransfersCreateRoute,
+  ]),
+  linodesRoute.addChildren([
+    linodesIndexRoute,
+    linodesCreateRoute,
+    linodesDetailRoute,
+  ]),
+  placementGroupsRoute.addChildren([
+    placementGroupsIndexRoute,
+    placementGroupsCreateRoute,
+    placementGroupsEditRoute,
+    placementGroupsDeleteRoute,
+    placementGroupsDetailRoute,
+    placementGroupsUnassignRoute,
+  ]),
+  volumesRoute.addChildren([volumesIndexRoute, volumesCreateRoute]),
+]);
+
+export const router = createRouter({
+  context: {
+    accountSettings: undefined,
+    isACLPEnabled: false,
+    isDatabasesEnabled: false,
+    isPlacementGroupsEnabled: false,
+    selfServeBetas: false,
+  },
+  defaultNotFoundComponent: () => <NotFound />,
+  routeTree,
+});
diff --git a/packages/manager/src/routes/linodes.tsx b/packages/manager/src/routes/linodes.tsx
new file mode 100644
index 00000000000..a273cb1d287
--- /dev/null
+++ b/packages/manager/src/routes/linodes.tsx
@@ -0,0 +1,56 @@
+import {
+  Outlet,
+  createRoute,
+  lazyRouteComponent,
+} from '@tanstack/react-router';
+import React from 'react';
+
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+
+export const LinodesRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+export const linodesRoute = createRoute({
+  component: LinodesRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'linodes',
+});
+
+export const linodesIndexRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import('src/features/Linodes').then((module) => ({
+      default: module.LinodesLandingWrapper,
+    }))
+  ),
+  getParentRoute: () => linodesRoute,
+  path: '/',
+});
+
+export const linodesCreateRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import('src/features/Linodes/LinodeCreatev2').then((module) => ({
+      default: module.LinodeCreatev2,
+    }))
+  ),
+  getParentRoute: () => linodesRoute,
+  path: 'create',
+});
+
+export const linodesDetailRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
+      (module) => ({
+        default: module.LinodeDetail,
+      })
+    )
+  ),
+  getParentRoute: () => linodesRoute,
+  path: '$linodeId',
+});
diff --git a/packages/manager/src/routes/placementGroups.tsx b/packages/manager/src/routes/placementGroups.tsx
new file mode 100644
index 00000000000..27b1a443248
--- /dev/null
+++ b/packages/manager/src/routes/placementGroups.tsx
@@ -0,0 +1,100 @@
+import {
+  Outlet,
+  createRoute,
+  lazyRouteComponent,
+} from '@tanstack/react-router';
+import React from 'react';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+
+export const AccountRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <DocumentTitleSegment segment="Placement Groups" />
+      <ProductInformationBanner bannerLocation="Placement Groups" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+export const placementGroupsRoute = createRoute({
+  component: AccountRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'placement-groups',
+});
+
+export const placementGroupsIndexRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import(
+      'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+    ).then((module) => ({
+      default: module.PlacementGroupsLanding,
+    }))
+  ),
+  getParentRoute: () => placementGroupsRoute,
+  path: '/',
+});
+
+export const placementGroupsCreateRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import(
+      'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+    ).then((module) => ({
+      default: module.PlacementGroupsLanding,
+    }))
+  ),
+  getParentRoute: () => placementGroupsRoute,
+  path: 'create',
+});
+
+export const placementGroupsEditRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import(
+      'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+    ).then((module) => ({
+      default: module.PlacementGroupsLanding,
+    }))
+  ),
+  getParentRoute: () => placementGroupsRoute,
+  path: 'edit/$id',
+});
+
+export const placementGroupsDeleteRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import(
+      'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+    ).then((module) => ({
+      default: module.PlacementGroupsLanding,
+    }))
+  ),
+  getParentRoute: () => placementGroupsRoute,
+  path: 'delete/$id',
+});
+
+export const placementGroupsUnassignRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import(
+      'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
+    ).then((module) => ({
+      default: module.PlacementGroupsDetail,
+    }))
+  ),
+  getParentRoute: () => placementGroupsRoute,
+  path: '$id/unassign/$linodeId?',
+});
+
+export const placementGroupsDetailRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import(
+      'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
+    ).then((module) => ({
+      default: module.PlacementGroupsDetail,
+    }))
+  ),
+  getParentRoute: () => placementGroupsRoute,
+  path: '$id',
+});
diff --git a/packages/manager/src/routes/root.ts b/packages/manager/src/routes/root.ts
new file mode 100644
index 00000000000..5b946b2e929
--- /dev/null
+++ b/packages/manager/src/routes/root.ts
@@ -0,0 +1,7 @@
+import { createRootRoute } from '@tanstack/react-router';
+
+import { Root } from '../Root';
+
+export const rootRoute = createRootRoute({
+  component: Root,
+});
diff --git a/packages/manager/src/routes/volumes.tsx b/packages/manager/src/routes/volumes.tsx
new file mode 100644
index 00000000000..7365522c275
--- /dev/null
+++ b/packages/manager/src/routes/volumes.tsx
@@ -0,0 +1,46 @@
+import {
+  Outlet,
+  createRoute,
+  lazyRouteComponent,
+} from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+
+export const VolumesRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Volumes" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+export const volumesRoute = createRoute({
+  component: VolumesRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'volumes',
+});
+
+export const volumesIndexRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import('src/features/Volumes/VolumesLanding').then((module) => ({
+      default: module.VolumesLanding,
+    }))
+  ),
+  getParentRoute: () => volumesRoute,
+  path: '/',
+});
+
+export const volumesCreateRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import('src/features/Volumes/VolumeCreate').then((module) => ({
+      default: module.VolumeCreate,
+    }))
+  ),
+  getParentRoute: () => volumesRoute,
+  path: 'create',
+});
diff --git a/yarn.lock b/yarn.lock
index 25ba08eb0c2..178af8e5d45 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1917,6 +1917,19 @@
   dependencies:
     "@swc/counter" "^0.1.3"
 
+<<<<<<< HEAD
+=======
+"@swc/types@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.5.tgz#043b731d4f56a79b4897a3de1af35e75d56bc63a"
+  integrity sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==
+
+"@tanstack/history@1.57.6":
+  version "1.57.6"
+  resolved "https://registry.yarnpkg.com/@tanstack/history/-/history-1.57.6.tgz#665d6bb2451ffb07db3596fe74e2f7be03c941b6"
+  integrity sha512-ppAJbnUaHdHmccVmplcd1ivX4GMPHxhStSquuuz0TSAEPEpz0iOVBur4iKfvIuMKm24c40nhvaEwZbKGVfbrGg==
+
+>>>>>>> 6af28ac180 (Initial commit: proof of concept)
 "@tanstack/query-core@5.51.24":
   version "5.51.24"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.51.24.tgz#da901637c8652ba5703b92bd07496e7c9ae27836"
@@ -1941,6 +1954,29 @@
   dependencies:
     "@tanstack/query-core" "5.51.24"
 
+"@tanstack/react-router@^1.58.3":
+  version "1.58.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-router/-/react-router-1.58.3.tgz#dc237703a7e3caa3d0e7c780f24f3f43a6710aca"
+  integrity sha512-cHpuzrNvRJ/FFDX+dWEw+w+NHp1eYn8j6WJlFs4nIyo6IJBJeL5DQgS5wdto+pOkqMEGAjzqTbJRU+zTcsVaSQ==
+  dependencies:
+    "@tanstack/history" "1.57.6"
+    "@tanstack/react-store" "^0.5.5"
+    tiny-invariant "^1.3.3"
+    tiny-warning "^1.0.3"
+
+"@tanstack/react-store@^0.5.5":
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-store/-/react-store-0.5.5.tgz#152e7b95de326886f7650f3a56d578369c061bd5"
+  integrity sha512-1orYXGatBqXCYKuroFwV8Ll/6aDa5E3pU6RR4h7RvRk7TmxF1+zLCsWALZaeijXkySNMGmvawSbUXRypivg2XA==
+  dependencies:
+    "@tanstack/store" "0.5.5"
+    use-sync-external-store "^1.2.2"
+
+"@tanstack/store@0.5.5":
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/store/-/store-0.5.5.tgz#84d78568c4a71c885cb15754bf51eca42a776efe"
+  integrity sha512-EOSrgdDAJExbvRZEQ/Xhh9iZchXpMN+ga1Bnk8Nmygzs8TfiE6hbzThF+Pr2G19uHL6+DTDTHhJ8VQiOd7l4tA==
+
 "@testing-library/cypress@^10.0.2":
   version "10.0.2"
   resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-10.0.2.tgz#5d360f2aa43708c6c92e24765f892b09f3a58912"
@@ -9539,7 +9575,7 @@ tiny-invariant@^1.0.2, tiny-invariant@^1.0.6, tiny-invariant@^1.3.1, tiny-invari
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
   integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.2:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -9990,6 +10026,11 @@ use-memo-one@^1.1.1:
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
   integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
 
+use-sync-external-store@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
+  integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"

From 8b61d5b75d4714a1317821f074ca7833ba6e4042 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Tue, 24 Sep 2024 12:13:01 -0400
Subject: [PATCH 02/45] Route Updates and types

---
 packages/manager/src/routes/account.tsx         |  7 +++++--
 packages/manager/src/routes/index.tsx           |  7 +++++++
 packages/manager/src/routes/linodes.tsx         |  3 +++
 packages/manager/src/routes/placementGroups.tsx | 15 ++++++++++++++-
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
index 276f2e7d793..6b7132741e7 100644
--- a/packages/manager/src/routes/account.tsx
+++ b/packages/manager/src/routes/account.tsx
@@ -40,7 +40,7 @@ export const accountUsersUsernameRoute = createRoute({
     }))
   ),
   getParentRoute: () => accountRoute,
-  path: 'users/:username',
+  path: 'users/$username',
 });
 
 export const accountBillingRoute = createRoute({
@@ -68,7 +68,10 @@ export const accountInvoicesInvoiceIdRoute = createRoute({
     )
   ),
   getParentRoute: () => accountRoute,
-  path: 'billing/invoices/:invoiceId',
+  parseParams: (params) => ({
+    invoiceId: Number(params.invoiceId),
+  }),
+  path: 'billing/invoices/$invoiceId',
 });
 
 export const accountEntityTransfersCreateRoute = createRoute({
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index 8e782d44d52..ef0062867e7 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -80,3 +80,10 @@ export const router = createRouter({
   defaultNotFoundComponent: () => <NotFound />,
   routeTree,
 });
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    // This infers the type of our router and registers it across the entire project
+    router: typeof router;
+  }
+}
diff --git a/packages/manager/src/routes/linodes.tsx b/packages/manager/src/routes/linodes.tsx
index a273cb1d287..9faa87b8917 100644
--- a/packages/manager/src/routes/linodes.tsx
+++ b/packages/manager/src/routes/linodes.tsx
@@ -52,5 +52,8 @@ export const linodesDetailRoute = createRoute({
     )
   ),
   getParentRoute: () => linodesRoute,
+  parseParams: (params) => ({
+    linodeId: Number(params.linodeId),
+  }),
   path: '$linodeId',
 });
diff --git a/packages/manager/src/routes/placementGroups.tsx b/packages/manager/src/routes/placementGroups.tsx
index 27b1a443248..d9820298d5e 100644
--- a/packages/manager/src/routes/placementGroups.tsx
+++ b/packages/manager/src/routes/placementGroups.tsx
@@ -60,6 +60,9 @@ export const placementGroupsEditRoute = createRoute({
     }))
   ),
   getParentRoute: () => placementGroupsRoute,
+  parseParams: (params) => ({
+    id: Number(params.id),
+  }),
   path: 'edit/$id',
 });
 
@@ -72,6 +75,9 @@ export const placementGroupsDeleteRoute = createRoute({
     }))
   ),
   getParentRoute: () => placementGroupsRoute,
+  parseParams: (params) => ({
+    id: Number(params.id),
+  }),
   path: 'delete/$id',
 });
 
@@ -84,7 +90,11 @@ export const placementGroupsUnassignRoute = createRoute({
     }))
   ),
   getParentRoute: () => placementGroupsRoute,
-  path: '$id/unassign/$linodeId?',
+  parseParams: (params) => ({
+    id: Number(params.id),
+    linodeId: Number(params.linodeId),
+  }),
+  path: '$id/unassign/$linodeId',
 });
 
 export const placementGroupsDetailRoute = createRoute({
@@ -96,5 +106,8 @@ export const placementGroupsDetailRoute = createRoute({
     }))
   ),
   getParentRoute: () => placementGroupsRoute,
+  parseParams: (params) => ({
+    id: Number(params.id),
+  }),
   path: '$id',
 });

From 373537c6efd4700f4f1c5c0037f56936ebb8549a Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Tue, 24 Sep 2024 18:00:43 -0400
Subject: [PATCH 03/45] NBs & Domains

---
 packages/manager/src/MainContentV2.tsx        |  22 ----
 packages/manager/src/routes/account.tsx       |  23 ++--
 packages/manager/src/routes/domains.tsx       |  75 +++++++++++++
 packages/manager/src/routes/index.tsx         |  54 ++-------
 packages/manager/src/routes/linodes.tsx       |  12 +-
 packages/manager/src/routes/nodeBalancers.tsx | 105 ++++++++++++++++++
 .../manager/src/routes/placementGroups.tsx    |  21 +++-
 7 files changed, 230 insertions(+), 82 deletions(-)
 create mode 100644 packages/manager/src/routes/domains.tsx
 create mode 100644 packages/manager/src/routes/nodeBalancers.tsx

diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
index 3c8f542e4cf..185640b878a 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/MainContentV2.tsx
@@ -11,11 +11,6 @@ import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 import { rootRoute } from './routes/root';
 
-const Domains = React.lazy(() =>
-  import('src/features/Domains').then((module) => ({
-    default: module.DomainsRoutes,
-  }))
-);
 const Images = React.lazy(() => import('src/features/Images'));
 const Kubernetes = React.lazy(() =>
   import('src/features/Kubernetes').then((module) => ({
@@ -28,9 +23,6 @@ const Profile = React.lazy(() =>
     default: module.Profile,
   }))
 );
-const NodeBalancers = React.lazy(
-  () => import('src/features/NodeBalancers/NodeBalancers')
-);
 const StackScripts = React.lazy(
   () => import('src/features/StackScripts/StackScripts')
 );
@@ -73,18 +65,6 @@ const CloudPulse = React.lazy(() =>
   }))
 );
 
-const nodeBalancersRoute = createRoute({
-  component: NodeBalancers,
-  getParentRoute: () => rootRoute,
-  path: 'nodebalancers',
-});
-
-const domainsRoute = createRoute({
-  component: Domains,
-  getParentRoute: () => rootRoute,
-  path: 'domains',
-});
-
 const managedRoute = createRoute({
   component: Managed,
   getParentRoute: () => rootRoute,
@@ -204,8 +184,6 @@ const notFoundRoute = createRoute({
 // @ts-expect-error - TODO: Fix this type error
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const routeTree = rootRoute.addChildren([
-  nodeBalancersRoute,
-  domainsRoute,
   managedRoute,
   longviewRoute,
   imagesRoute,
diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
index 6b7132741e7..a31e23d6e82 100644
--- a/packages/manager/src/routes/account.tsx
+++ b/packages/manager/src/routes/account.tsx
@@ -19,13 +19,13 @@ export const AccountRoutes = () => {
   );
 };
 
-export const accountRoute = createRoute({
+const accountRoute = createRoute({
   component: AccountRoutes,
   getParentRoute: () => rootRoute,
   path: 'account',
 });
 
-export const accountIndexRoute = createRoute({
+const accountIndexRoute = createRoute({
   component: lazyRouteComponent(
     () => import('src/features/Account/AccountLanding')
   ),
@@ -33,7 +33,7 @@ export const accountIndexRoute = createRoute({
   path: '/',
 });
 
-export const accountUsersUsernameRoute = createRoute({
+const accountUsersUsernameRoute = createRoute({
   component: lazyRouteComponent(() =>
     import('src/features/Users/UserDetail').then((module) => ({
       default: module.UserDetail,
@@ -43,7 +43,7 @@ export const accountUsersUsernameRoute = createRoute({
   path: 'users/$username',
 });
 
-export const accountBillingRoute = createRoute({
+const accountBillingRoute = createRoute({
   component: lazyRouteComponent(
     () => import('src/features/Account/AccountLanding')
   ),
@@ -51,7 +51,7 @@ export const accountBillingRoute = createRoute({
   path: 'billing',
 });
 
-export const accountBillingEditRoute = createRoute({
+const accountBillingEditRoute = createRoute({
   component: lazyRouteComponent(
     () => import('src/features/Account/AccountLanding')
   ),
@@ -59,7 +59,7 @@ export const accountBillingEditRoute = createRoute({
   path: 'billing/edit',
 });
 
-export const accountInvoicesInvoiceIdRoute = createRoute({
+const accountInvoicesInvoiceIdRoute = createRoute({
   component: lazyRouteComponent(() =>
     import('src/features/Billing/InvoiceDetail/InvoiceDetail').then(
       (module) => ({
@@ -74,7 +74,7 @@ export const accountInvoicesInvoiceIdRoute = createRoute({
   path: 'billing/invoices/$invoiceId',
 });
 
-export const accountEntityTransfersCreateRoute = createRoute({
+const accountEntityTransfersCreateRoute = createRoute({
   component: lazyRouteComponent(() =>
     import(
       'src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate'
@@ -85,3 +85,12 @@ export const accountEntityTransfersCreateRoute = createRoute({
   getParentRoute: () => accountRoute,
   path: 'service-transfers/create',
 });
+
+export const accountRouteTree = accountRoute.addChildren([
+  accountIndexRoute,
+  accountUsersUsernameRoute,
+  accountBillingRoute,
+  accountBillingEditRoute,
+  accountInvoicesInvoiceIdRoute,
+  accountEntityTransfersCreateRoute,
+]);
diff --git a/packages/manager/src/routes/domains.tsx b/packages/manager/src/routes/domains.tsx
new file mode 100644
index 00000000000..979a12dfe97
--- /dev/null
+++ b/packages/manager/src/routes/domains.tsx
@@ -0,0 +1,75 @@
+import {
+  Outlet,
+  createRoute,
+  lazyRouteComponent,
+} from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+
+export const DomainsRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Domains" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+const domainsRoute = createRoute({
+  component: DomainsRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'domains',
+});
+
+const domainsIndexRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import('src/features/Domains/DomainsLanding').then((module) => ({
+      default: module.DomainsLanding,
+    }))
+  ),
+  getParentRoute: () => domainsRoute,
+  path: '/',
+});
+
+const domainCreateRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import('src/features/Domains/CreateDomain/CreateDomain').then((module) => ({
+      default: module.CreateDomain,
+    }))
+  ),
+  getParentRoute: () => domainsRoute,
+  path: 'create',
+});
+
+const domainDetailRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import('src/features/Domains/DomainDetail').then((module) => ({
+      default: module.DomainDetailRouting,
+    }))
+  ),
+  getParentRoute: () => domainsRoute,
+  parseParams: (params) => ({
+    domainId: Number(params.domainId),
+  }),
+  path: '$domainId',
+});
+
+const domainDetailRecordsRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import('src/features/Domains/DomainDetail').then((module) => ({
+      default: module.DomainDetailRouting,
+    }))
+  ),
+  getParentRoute: () => domainDetailRoute,
+  path: 'records',
+});
+
+export const domainsRouteTree = domainsRoute.addChildren([
+  domainsIndexRoute,
+  domainCreateRoute,
+  domainDetailRoute.addChildren([domainDetailRecordsRoute]),
+]);
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index ef0062867e7..99c513a4b08 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -4,29 +4,12 @@ import React from 'react';
 import { NotFound } from 'src/components/NotFound';
 
 import {
-  accountBillingEditRoute,
-  accountBillingRoute,
-  accountEntityTransfersCreateRoute,
-  accountIndexRoute,
-  accountInvoicesInvoiceIdRoute,
-  accountRoute,
-  accountUsersUsernameRoute,
+  accountRouteTree,
 } from './account';
-import {
-  linodesCreateRoute,
-  linodesDetailRoute,
-  linodesIndexRoute,
-  linodesRoute,
-} from './linodes';
-import {
-  placementGroupsCreateRoute,
-  placementGroupsDeleteRoute,
-  placementGroupsDetailRoute,
-  placementGroupsEditRoute,
-  placementGroupsIndexRoute,
-  placementGroupsRoute,
-  placementGroupsUnassignRoute,
-} from './placementGroups';
+import { domainsRouteTree } from './domains';
+import { linodesRouteTree } from './linodes';
+import { nodeBalancersRouteTree } from './nodeBalancers';
+import { placementGroupsRouteTree } from './placementGroups';
 import { rootRoute } from './root';
 import { volumesCreateRoute, volumesIndexRoute, volumesRoute } from './volumes';
 
@@ -44,28 +27,11 @@ const indexRoute = createRoute({
 
 const routeTree = rootRoute.addChildren([
   indexRoute,
-  accountRoute.addChildren([
-    accountIndexRoute,
-    accountUsersUsernameRoute,
-    accountBillingRoute.addChildren([
-      accountBillingEditRoute,
-      accountInvoicesInvoiceIdRoute,
-    ]),
-    accountEntityTransfersCreateRoute,
-  ]),
-  linodesRoute.addChildren([
-    linodesIndexRoute,
-    linodesCreateRoute,
-    linodesDetailRoute,
-  ]),
-  placementGroupsRoute.addChildren([
-    placementGroupsIndexRoute,
-    placementGroupsCreateRoute,
-    placementGroupsEditRoute,
-    placementGroupsDeleteRoute,
-    placementGroupsDetailRoute,
-    placementGroupsUnassignRoute,
-  ]),
+  accountRouteTree,
+  domainsRouteTree,
+  linodesRouteTree,
+  nodeBalancersRouteTree,
+  placementGroupsRouteTree,
   volumesRoute.addChildren([volumesIndexRoute, volumesCreateRoute]),
 ]);
 
diff --git a/packages/manager/src/routes/linodes.tsx b/packages/manager/src/routes/linodes.tsx
index 9faa87b8917..bf8e174c6c6 100644
--- a/packages/manager/src/routes/linodes.tsx
+++ b/packages/manager/src/routes/linodes.tsx
@@ -23,7 +23,7 @@ export const linodesRoute = createRoute({
   path: 'linodes',
 });
 
-export const linodesIndexRoute = createRoute({
+const linodesIndexRoute = createRoute({
   component: lazyRouteComponent(() =>
     import('src/features/Linodes').then((module) => ({
       default: module.LinodesLandingWrapper,
@@ -33,7 +33,7 @@ export const linodesIndexRoute = createRoute({
   path: '/',
 });
 
-export const linodesCreateRoute = createRoute({
+const linodesCreateRoute = createRoute({
   component: lazyRouteComponent(() =>
     import('src/features/Linodes/LinodeCreatev2').then((module) => ({
       default: module.LinodeCreatev2,
@@ -43,7 +43,7 @@ export const linodesCreateRoute = createRoute({
   path: 'create',
 });
 
-export const linodesDetailRoute = createRoute({
+const linodesDetailRoute = createRoute({
   component: lazyRouteComponent(() =>
     import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
       (module) => ({
@@ -57,3 +57,9 @@ export const linodesDetailRoute = createRoute({
   }),
   path: '$linodeId',
 });
+
+export const linodesRouteTree = linodesRoute.addChildren([
+  linodesIndexRoute,
+  linodesCreateRoute,
+  linodesDetailRoute,
+]);
diff --git a/packages/manager/src/routes/nodeBalancers.tsx b/packages/manager/src/routes/nodeBalancers.tsx
new file mode 100644
index 00000000000..955462640e6
--- /dev/null
+++ b/packages/manager/src/routes/nodeBalancers.tsx
@@ -0,0 +1,105 @@
+import {
+  Outlet,
+  createRoute,
+  lazyRouteComponent,
+} from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+
+export const NodeBalancersRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="NodeBalancers" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+const nodeBalancersRoute = createRoute({
+  component: NodeBalancersRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'nodebalancers',
+});
+
+const nodeBalancersIndexRoute = createRoute({
+  component: lazyRouteComponent(
+    () =>
+      import(
+        'src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding'
+      )
+  ),
+  getParentRoute: () => nodeBalancersRoute,
+  path: '/',
+});
+
+const nodeBalancersCreateRoute = createRoute({
+  component: lazyRouteComponent(
+    () => import('src/features/NodeBalancers/NodeBalancerCreate')
+  ),
+  getParentRoute: () => nodeBalancersRoute,
+  path: 'create',
+});
+
+const nodeBalancerDetailRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import(
+      'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail'
+    ).then((module) => ({
+      default: module.NodeBalancerDetail,
+    }))
+  ),
+  getParentRoute: () => nodeBalancersRoute,
+  parseParams: (params) => ({
+    nodeBalancerId: Number(params.nodeBalancerId),
+  }),
+  path: '$nodeBalancerId',
+});
+
+const nodeBalancerDetailSummaryRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import(
+      'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary'
+    ).then((module) => ({
+      default: module.NodeBalancerSummary,
+    }))
+  ),
+  getParentRoute: () => nodeBalancerDetailRoute,
+  path: 'summary',
+});
+
+const nodeBalancerDetailConfigurationsRoute = createRoute({
+  component: lazyRouteComponent(
+    () =>
+      import(
+        'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations'
+      )
+  ),
+  getParentRoute: () => nodeBalancerDetailRoute,
+  path: 'configurations',
+});
+
+const nodeBalancerDetailSettingsRoute = createRoute({
+  component: lazyRouteComponent(() =>
+    import(
+      'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings'
+    ).then((module) => ({
+      default: module.NodeBalancerSettings,
+    }))
+  ),
+  getParentRoute: () => nodeBalancerDetailRoute,
+  path: 'settings',
+});
+
+export const nodeBalancersRouteTree = nodeBalancersRoute.addChildren([
+  nodeBalancersIndexRoute,
+  nodeBalancersCreateRoute,
+  nodeBalancerDetailRoute.addChildren([
+    nodeBalancerDetailSummaryRoute,
+    nodeBalancerDetailConfigurationsRoute,
+    nodeBalancerDetailSettingsRoute,
+  ]),
+]);
diff --git a/packages/manager/src/routes/placementGroups.tsx b/packages/manager/src/routes/placementGroups.tsx
index d9820298d5e..50cb7743836 100644
--- a/packages/manager/src/routes/placementGroups.tsx
+++ b/packages/manager/src/routes/placementGroups.tsx
@@ -27,7 +27,7 @@ export const placementGroupsRoute = createRoute({
   path: 'placement-groups',
 });
 
-export const placementGroupsIndexRoute = createRoute({
+const placementGroupsIndexRoute = createRoute({
   component: lazyRouteComponent(() =>
     import(
       'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
@@ -39,7 +39,7 @@ export const placementGroupsIndexRoute = createRoute({
   path: '/',
 });
 
-export const placementGroupsCreateRoute = createRoute({
+const placementGroupsCreateRoute = createRoute({
   component: lazyRouteComponent(() =>
     import(
       'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
@@ -51,7 +51,7 @@ export const placementGroupsCreateRoute = createRoute({
   path: 'create',
 });
 
-export const placementGroupsEditRoute = createRoute({
+const placementGroupsEditRoute = createRoute({
   component: lazyRouteComponent(() =>
     import(
       'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
@@ -66,7 +66,7 @@ export const placementGroupsEditRoute = createRoute({
   path: 'edit/$id',
 });
 
-export const placementGroupsDeleteRoute = createRoute({
+const placementGroupsDeleteRoute = createRoute({
   component: lazyRouteComponent(() =>
     import(
       'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
@@ -81,7 +81,7 @@ export const placementGroupsDeleteRoute = createRoute({
   path: 'delete/$id',
 });
 
-export const placementGroupsUnassignRoute = createRoute({
+const placementGroupsUnassignRoute = createRoute({
   component: lazyRouteComponent(() =>
     import(
       'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
@@ -97,7 +97,7 @@ export const placementGroupsUnassignRoute = createRoute({
   path: '$id/unassign/$linodeId',
 });
 
-export const placementGroupsDetailRoute = createRoute({
+const placementGroupsDetailRoute = createRoute({
   component: lazyRouteComponent(() =>
     import(
       'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
@@ -111,3 +111,12 @@ export const placementGroupsDetailRoute = createRoute({
   }),
   path: '$id',
 });
+
+export const placementGroupsRouteTree = placementGroupsRoute.addChildren([
+  placementGroupsIndexRoute,
+  placementGroupsCreateRoute,
+  placementGroupsEditRoute,
+  placementGroupsDeleteRoute,
+  placementGroupsDetailRoute,
+  placementGroupsUnassignRoute,
+]);

From e79a3ad381810280e43c0240262ce75106970178 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 25 Sep 2024 10:00:38 -0400
Subject: [PATCH 04/45] testing + utils

---
 packages/manager/src/MainContentV2.tsx        |   8 -
 packages/manager/src/routes/account.tsx       |  41 +++---
 packages/manager/src/routes/domains.tsx       |  35 ++---
 packages/manager/src/routes/images.tsx        |  41 ++++++
 packages/manager/src/routes/linodes.tsx       |  30 ++--
 packages/manager/src/routes/nodeBalancers.tsx |  51 +++----
 .../manager/src/routes/placementGroups.tsx    |  79 +++++-----
 packages/manager/src/routes/utils.test.tsx    | 139 ++++++++++++++++++
 packages/manager/src/routes/utils.ts          |  53 +++++++
 packages/manager/src/routes/volumes.tsx       |  11 +-
 10 files changed, 341 insertions(+), 147 deletions(-)
 create mode 100644 packages/manager/src/routes/images.tsx
 create mode 100644 packages/manager/src/routes/utils.test.tsx
 create mode 100644 packages/manager/src/routes/utils.ts

diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
index 185640b878a..bcfa46399b9 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/MainContentV2.tsx
@@ -11,7 +11,6 @@ import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 import { rootRoute } from './routes/root';
 
-const Images = React.lazy(() => import('src/features/Images'));
 const Kubernetes = React.lazy(() =>
   import('src/features/Kubernetes').then((module) => ({
     default: module.Kubernetes,
@@ -77,12 +76,6 @@ const longviewRoute = createRoute({
   path: 'longview',
 });
 
-const imagesRoute = createRoute({
-  component: Images,
-  getParentRoute: () => rootRoute,
-  path: 'images',
-});
-
 const stackScriptsRoute = createRoute({
   component: StackScripts,
   getParentRoute: () => rootRoute,
@@ -186,7 +179,6 @@ const notFoundRoute = createRoute({
 const routeTree = rootRoute.addChildren([
   managedRoute,
   longviewRoute,
-  imagesRoute,
   stackScriptsRoute,
   objectStorageRoute,
   kubernetesRoute,
diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
index a31e23d6e82..507c2201b0d 100644
--- a/packages/manager/src/routes/account.tsx
+++ b/packages/manager/src/routes/account.tsx
@@ -1,14 +1,11 @@
-import {
-  Outlet,
-  createRoute,
-  lazyRouteComponent,
-} from '@tanstack/react-router';
+import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
 
 export const AccountRoutes = () => {
   return (
@@ -26,7 +23,7 @@ const accountRoute = createRoute({
 });
 
 const accountIndexRoute = createRoute({
-  component: lazyRouteComponent(
+  component: strictLazyRouteComponent(
     () => import('src/features/Account/AccountLanding')
   ),
   getParentRoute: () => accountRoute,
@@ -34,17 +31,16 @@ const accountIndexRoute = createRoute({
 });
 
 const accountUsersUsernameRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Users/UserDetail').then((module) => ({
-      default: module.UserDetail,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Users/UserDetail'),
+    'UserDetail'
   ),
   getParentRoute: () => accountRoute,
   path: 'users/$username',
 });
 
 const accountBillingRoute = createRoute({
-  component: lazyRouteComponent(
+  component: strictLazyRouteComponent(
     () => import('src/features/Account/AccountLanding')
   ),
   getParentRoute: () => accountRoute,
@@ -52,7 +48,7 @@ const accountBillingRoute = createRoute({
 });
 
 const accountBillingEditRoute = createRoute({
-  component: lazyRouteComponent(
+  component: strictLazyRouteComponent(
     () => import('src/features/Account/AccountLanding')
   ),
   getParentRoute: () => accountRoute,
@@ -60,12 +56,9 @@ const accountBillingEditRoute = createRoute({
 });
 
 const accountInvoicesInvoiceIdRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Billing/InvoiceDetail/InvoiceDetail').then(
-      (module) => ({
-        default: module.InvoiceDetail,
-      })
-    )
+  component: strictLazyRouteComponent(
+    () => import('src/features/Billing/InvoiceDetail/InvoiceDetail'),
+    'InvoiceDetail'
   ),
   getParentRoute: () => accountRoute,
   parseParams: (params) => ({
@@ -75,12 +68,12 @@ const accountInvoicesInvoiceIdRoute = createRoute({
 });
 
 const accountEntityTransfersCreateRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate'
-    ).then((module) => ({
-      default: module.EntityTransfersCreate,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate'
+      ),
+    'EntityTransfersCreate'
   ),
   getParentRoute: () => accountRoute,
   path: 'service-transfers/create',
diff --git a/packages/manager/src/routes/domains.tsx b/packages/manager/src/routes/domains.tsx
index 979a12dfe97..f67a729c899 100644
--- a/packages/manager/src/routes/domains.tsx
+++ b/packages/manager/src/routes/domains.tsx
@@ -1,14 +1,11 @@
-import {
-  Outlet,
-  createRoute,
-  lazyRouteComponent,
-} from '@tanstack/react-router';
+import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
 
 export const DomainsRoutes = () => {
   return (
@@ -26,30 +23,27 @@ const domainsRoute = createRoute({
 });
 
 const domainsIndexRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Domains/DomainsLanding').then((module) => ({
-      default: module.DomainsLanding,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Domains/DomainsLanding'),
+    'DomainsLanding'
   ),
   getParentRoute: () => domainsRoute,
   path: '/',
 });
 
 const domainCreateRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Domains/CreateDomain/CreateDomain').then((module) => ({
-      default: module.CreateDomain,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Domains/CreateDomain/CreateDomain'),
+    'CreateDomain'
   ),
   getParentRoute: () => domainsRoute,
   path: 'create',
 });
 
 const domainDetailRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Domains/DomainDetail').then((module) => ({
-      default: module.DomainDetailRouting,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Domains/DomainDetail'),
+    'DomainDetailRouting'
   ),
   getParentRoute: () => domainsRoute,
   parseParams: (params) => ({
@@ -59,10 +53,9 @@ const domainDetailRoute = createRoute({
 });
 
 const domainDetailRecordsRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Domains/DomainDetail').then((module) => ({
-      default: module.DomainDetailRouting,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Domains/DomainDetail'),
+    'DomainDetailRouting'
   ),
   getParentRoute: () => domainDetailRoute,
   path: 'records',
diff --git a/packages/manager/src/routes/images.tsx b/packages/manager/src/routes/images.tsx
new file mode 100644
index 00000000000..9dea962e15e
--- /dev/null
+++ b/packages/manager/src/routes/images.tsx
@@ -0,0 +1,41 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const ImagesRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Images" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+export const imagesRoute = createRoute({
+  component: ImagesRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'images',
+});
+
+export const imagesIndexRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Images/ImagesLanding/ImagesLanding'),
+    'ImagesLanding'
+  ),
+  getParentRoute: () => imagesRoute,
+  path: '/',
+});
+
+export const imagesCreateRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Images/ImagesCreate/ImageCreate'),
+    'ImageCreate'
+  ),
+  getParentRoute: () => imagesRoute,
+  path: 'create',
+});
diff --git a/packages/manager/src/routes/linodes.tsx b/packages/manager/src/routes/linodes.tsx
index bf8e174c6c6..81d69969a5a 100644
--- a/packages/manager/src/routes/linodes.tsx
+++ b/packages/manager/src/routes/linodes.tsx
@@ -1,13 +1,10 @@
-import {
-  Outlet,
-  createRoute,
-  lazyRouteComponent,
-} from '@tanstack/react-router';
+import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
 
 export const LinodesRoutes = () => {
   return (
@@ -24,32 +21,27 @@ export const linodesRoute = createRoute({
 });
 
 const linodesIndexRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Linodes').then((module) => ({
-      default: module.LinodesLandingWrapper,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Linodes'),
+    'LinodesLandingWrapper'
   ),
   getParentRoute: () => linodesRoute,
   path: '/',
 });
 
 const linodesCreateRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Linodes/LinodeCreatev2').then((module) => ({
-      default: module.LinodeCreatev2,
-    }))
+  component: strictLazyRouteComponent(
+    () => import('src/features/Linodes/LinodeCreatev2'),
+    'LinodeCreatev2'
   ),
   getParentRoute: () => linodesRoute,
   path: 'create',
 });
 
 const linodesDetailRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
-      (module) => ({
-        default: module.LinodeDetail,
-      })
-    )
+  component: strictLazyRouteComponent(
+    () => import('src/features/Linodes/LinodesDetail/LinodesDetail'),
+    'LinodeDetail'
   ),
   getParentRoute: () => linodesRoute,
   parseParams: (params) => ({
diff --git a/packages/manager/src/routes/nodeBalancers.tsx b/packages/manager/src/routes/nodeBalancers.tsx
index 955462640e6..6ace1b86173 100644
--- a/packages/manager/src/routes/nodeBalancers.tsx
+++ b/packages/manager/src/routes/nodeBalancers.tsx
@@ -1,14 +1,11 @@
-import {
-  Outlet,
-  createRoute,
-  lazyRouteComponent,
-} from '@tanstack/react-router';
+import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
 
 export const NodeBalancersRoutes = () => {
   return (
@@ -26,7 +23,7 @@ const nodeBalancersRoute = createRoute({
 });
 
 const nodeBalancersIndexRoute = createRoute({
-  component: lazyRouteComponent(
+  component: strictLazyRouteComponent(
     () =>
       import(
         'src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding'
@@ -37,20 +34,20 @@ const nodeBalancersIndexRoute = createRoute({
 });
 
 const nodeBalancersCreateRoute = createRoute({
-  component: lazyRouteComponent(
-    () => import('src/features/NodeBalancers/NodeBalancerCreate')
+  component: strictLazyRouteComponent(
+    () => import('src/features/NodeBalancers/NodeBalancerCreate'),
   ),
   getParentRoute: () => nodeBalancersRoute,
   path: 'create',
 });
 
 const nodeBalancerDetailRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail'
-    ).then((module) => ({
-      default: module.NodeBalancerDetail,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail'
+      ),
+    'NodeBalancerDetail'
   ),
   getParentRoute: () => nodeBalancersRoute,
   parseParams: (params) => ({
@@ -60,19 +57,19 @@ const nodeBalancerDetailRoute = createRoute({
 });
 
 const nodeBalancerDetailSummaryRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary'
-    ).then((module) => ({
-      default: module.NodeBalancerSummary,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary'
+      ),
+    'NodeBalancerSummary'
   ),
   getParentRoute: () => nodeBalancerDetailRoute,
   path: 'summary',
 });
 
 const nodeBalancerDetailConfigurationsRoute = createRoute({
-  component: lazyRouteComponent(
+  component: strictLazyRouteComponent(
     () =>
       import(
         'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations'
@@ -83,12 +80,12 @@ const nodeBalancerDetailConfigurationsRoute = createRoute({
 });
 
 const nodeBalancerDetailSettingsRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings'
-    ).then((module) => ({
-      default: module.NodeBalancerSettings,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings'
+      ),
+    'NodeBalancerSettings'
   ),
   getParentRoute: () => nodeBalancerDetailRoute,
   path: 'settings',
diff --git a/packages/manager/src/routes/placementGroups.tsx b/packages/manager/src/routes/placementGroups.tsx
index 50cb7743836..2ec06b59fe7 100644
--- a/packages/manager/src/routes/placementGroups.tsx
+++ b/packages/manager/src/routes/placementGroups.tsx
@@ -1,8 +1,4 @@
-import {
-  Outlet,
-  createRoute,
-  lazyRouteComponent,
-} from '@tanstack/react-router';
+import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -10,6 +6,7 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
 
 export const AccountRoutes = () => {
   return (
@@ -28,36 +25,36 @@ export const placementGroupsRoute = createRoute({
 });
 
 const placementGroupsIndexRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-    ).then((module) => ({
-      default: module.PlacementGroupsLanding,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+      ),
+    'PlacementGroupsLanding'
   ),
   getParentRoute: () => placementGroupsRoute,
   path: '/',
 });
 
 const placementGroupsCreateRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-    ).then((module) => ({
-      default: module.PlacementGroupsLanding,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+      ),
+    'PlacementGroupsLanding'
   ),
   getParentRoute: () => placementGroupsRoute,
   path: 'create',
 });
 
 const placementGroupsEditRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-    ).then((module) => ({
-      default: module.PlacementGroupsLanding,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+      ),
+    'PlacementGroupsLanding'
   ),
   getParentRoute: () => placementGroupsRoute,
   parseParams: (params) => ({
@@ -67,12 +64,12 @@ const placementGroupsEditRoute = createRoute({
 });
 
 const placementGroupsDeleteRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-    ).then((module) => ({
-      default: module.PlacementGroupsLanding,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+      ),
+    'PlacementGroupsLanding'
   ),
   getParentRoute: () => placementGroupsRoute,
   parseParams: (params) => ({
@@ -82,12 +79,12 @@ const placementGroupsDeleteRoute = createRoute({
 });
 
 const placementGroupsUnassignRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
-    ).then((module) => ({
-      default: module.PlacementGroupsDetail,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
+      ),
+    'PlacementGroupsDetail'
   ),
   getParentRoute: () => placementGroupsRoute,
   parseParams: (params) => ({
@@ -98,12 +95,12 @@ const placementGroupsUnassignRoute = createRoute({
 });
 
 const placementGroupsDetailRoute = createRoute({
-  component: lazyRouteComponent(() =>
-    import(
-      'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
-    ).then((module) => ({
-      default: module.PlacementGroupsDetail,
-    }))
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
+      ),
+    'PlacementGroupsDetail'
   ),
   getParentRoute: () => placementGroupsRoute,
   parseParams: (params) => ({
diff --git a/packages/manager/src/routes/utils.test.tsx b/packages/manager/src/routes/utils.test.tsx
new file mode 100644
index 00000000000..27f16d1a16c
--- /dev/null
+++ b/packages/manager/src/routes/utils.test.tsx
@@ -0,0 +1,139 @@
+import { lazyRouteComponent } from '@tanstack/react-router';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { strictLazyRouteComponent } from './utils';
+
+vi.mock('@tanstack/react-router', () => ({
+  lazyRouteComponent: vi.fn((loader) => loader),
+}));
+
+describe('strictLazyRouteComponent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should handle default exports correctly', async () => {
+    const DefaultComponent = () => <div>Default Component</div>;
+    const mockImporter = vi.fn(() =>
+      Promise.resolve({ default: DefaultComponent })
+    );
+
+    const result = strictLazyRouteComponent(mockImporter);
+    expect(lazyRouteComponent).toHaveBeenCalledWith(expect.any(Function));
+
+    const loadedComponent = await (result as any)();
+    expect(loadedComponent).toEqual({ default: DefaultComponent });
+  });
+
+  it('should handle named exports correctly', async () => {
+    const NamedComponent = () => <div>Named Component</div>;
+    const mockImporter = vi.fn(() => Promise.resolve({ NamedComponent }));
+
+    const result = strictLazyRouteComponent(mockImporter, 'NamedComponent');
+    expect(lazyRouteComponent).toHaveBeenCalledWith(expect.any(Function));
+
+    const loadedComponent = await (result as any)();
+    expect(loadedComponent).toEqual({ default: NamedComponent });
+  });
+
+  it('should throw an error for non-existent named exports', async () => {
+    const mockImporter = vi.fn(() =>
+      Promise.resolve({ SomeOtherComponent: () => null })
+    );
+
+    const result = strictLazyRouteComponent(
+      mockImporter,
+      // @ts-expect-error - forcing the wrong type
+      'NonExistentComponent'
+    );
+    await expect((result as any)()).rejects.toThrow(
+      'Export "NonExistentComponent" not found in module'
+    );
+  });
+
+  it('should throw an error for modules without default export when no name is provided', async () => {
+    const mockImporter = vi.fn(() =>
+      Promise.resolve({ SomeComponent: () => null })
+    );
+
+    // @ts-expect-error - forcing the wrong type
+    const result = strictLazyRouteComponent(mockImporter);
+    await expect((result as any)()).rejects.toThrow(
+      'No default export found in module'
+    );
+  });
+
+  it('should handle React.forwardRef components', async () => {
+    const ForwardRefComponent = React.forwardRef(() => (
+      <div>ForwardRef Component</div>
+    ));
+    const mockImporter = vi.fn(() =>
+      Promise.resolve({ default: ForwardRefComponent })
+    );
+
+    const result = strictLazyRouteComponent(mockImporter);
+    const loadedComponent = await (result as any)();
+    expect(loadedComponent).toEqual({ default: ForwardRefComponent });
+  });
+
+  it('should handle React.memo components', async () => {
+    const MemoComponent = React.memo(() => <div>Memo Component</div>);
+    const mockImporter = vi.fn(() => Promise.resolve({ MemoComponent }));
+
+    const result = strictLazyRouteComponent(mockImporter, 'MemoComponent');
+    const loadedComponent = await (result as any)();
+    expect(loadedComponent).toEqual({ default: MemoComponent });
+  });
+
+  it('should throw an error for non-component exports', async () => {
+    const mockImporter = vi.fn(() =>
+      Promise.resolve({ notAComponent: 'string' })
+    );
+
+    const result = strictLazyRouteComponent(mockImporter, 'notAComponent');
+    await expect((result as any)()).rejects.toThrow(
+      'Export "notAComponent" is not a valid React component'
+    );
+  });
+
+  it('should handle async imports correctly', async () => {
+    const AsyncComponent = () => <div>Async Component</div>;
+    const mockImporter = vi.fn(() => Promise.resolve({ AsyncComponent }));
+
+    const result = strictLazyRouteComponent(mockImporter, 'AsyncComponent');
+    expect(lazyRouteComponent).toHaveBeenCalledWith(expect.any(Function));
+
+    const loadedComponent = await (result as any)();
+    expect(loadedComponent).toEqual({ default: AsyncComponent });
+    expect(mockImporter).toHaveBeenCalledTimes(1);
+  });
+
+  it('should work with TypeScript generics', async () => {
+    interface Props {
+      name: string;
+    }
+    const GenericComponent: React.FC<Props> = ({ name }) => (
+      <div>Hello, {name}</div>
+    );
+    const mockImporter = vi.fn(() => Promise.resolve({ GenericComponent }));
+
+    const result = strictLazyRouteComponent(mockImporter, 'GenericComponent');
+    const loadedComponent = await (result as any)();
+    expect(loadedComponent).toEqual({ default: GenericComponent });
+  });
+
+  it('should throw a type error when no export name is provided for named exports', () => {
+    const mockImporter = () => Promise.resolve({ NamedComponent: () => null });
+
+    // @ts-expect-error - forcing the wrong type
+    strictLazyRouteComponent(mockImporter);
+  });
+
+  it('should not throw a type error when no export name is provided for default exports', () => {
+    const mockImporter = () => Promise.resolve({ default: () => null });
+
+    // This should not throw a TypeScript error
+    strictLazyRouteComponent(mockImporter);
+  });
+});
diff --git a/packages/manager/src/routes/utils.ts b/packages/manager/src/routes/utils.ts
new file mode 100644
index 00000000000..8441670b8e3
--- /dev/null
+++ b/packages/manager/src/routes/utils.ts
@@ -0,0 +1,53 @@
+import { lazyRouteComponent } from '@tanstack/react-router';
+
+import type { ComponentType } from 'react';
+
+type AnyModule = { [key: string]: any };
+
+/**
+ * This function is a wrapper around lazyRouteComponent that ensures the
+ * component is a valid React component.
+ *
+ * lazyRouteComponent does not provide the type safety we need to ensure handle both default and named exports.
+ * By using a function overload we do just that.
+ */
+export function strictLazyRouteComponent<
+  T extends { default: ComponentType<any> }
+>(importer: () => Promise<T>): ReturnType<typeof lazyRouteComponent>;
+export function strictLazyRouteComponent<
+  T extends AnyModule,
+  K extends keyof T
+>(
+  importer: () => Promise<T>,
+  exportName: K
+): ReturnType<typeof lazyRouteComponent>;
+export function strictLazyRouteComponent<T extends AnyModule>(
+  importer: () => Promise<T>,
+  exportName?: string
+): ReturnType<typeof lazyRouteComponent> {
+  return lazyRouteComponent(() =>
+    importer().then((module) => {
+      let component: ComponentType<any>;
+
+      if (exportName) {
+        if (exportName in module) {
+          component = module[exportName] as ComponentType<any>;
+        } else {
+          throw new Error(`Export "${exportName}" not found in module`);
+        }
+      } else if ('default' in module) {
+        component = module.default;
+      } else {
+        throw new Error('No default export found in module');
+      }
+
+      if (typeof component !== 'function' && typeof component !== 'object') {
+        throw new Error(
+          `Export "${exportName || 'default'}" is not a valid React component`
+        );
+      }
+
+      return { default: component };
+    })
+  );
+}
diff --git a/packages/manager/src/routes/volumes.tsx b/packages/manager/src/routes/volumes.tsx
index 7365522c275..8c1a8922162 100644
--- a/packages/manager/src/routes/volumes.tsx
+++ b/packages/manager/src/routes/volumes.tsx
@@ -1,14 +1,11 @@
-import {
-  Outlet,
-  createRoute,
-  lazyRouteComponent,
-} from '@tanstack/react-router';
+import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
 
 export const VolumesRoutes = () => {
   return (
@@ -26,7 +23,7 @@ export const volumesRoute = createRoute({
 });
 
 export const volumesIndexRoute = createRoute({
-  component: lazyRouteComponent(() =>
+  component: strictLazyRouteComponent(() =>
     import('src/features/Volumes/VolumesLanding').then((module) => ({
       default: module.VolumesLanding,
     }))
@@ -36,7 +33,7 @@ export const volumesIndexRoute = createRoute({
 });
 
 export const volumesCreateRoute = createRoute({
-  component: lazyRouteComponent(() =>
+  component: strictLazyRouteComponent(() =>
     import('src/features/Volumes/VolumeCreate').then((module) => ({
       default: module.VolumeCreate,
     }))

From 65b366ce4cc5b2a1cd5af9e52ea21603447482bf Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 25 Sep 2024 10:22:51 -0400
Subject: [PATCH 05/45] better util types

---
 packages/manager/src/routes/utils.test.tsx |  1 +
 packages/manager/src/routes/utils.ts       | 10 ++++------
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/manager/src/routes/utils.test.tsx b/packages/manager/src/routes/utils.test.tsx
index 27f16d1a16c..fb15b18108d 100644
--- a/packages/manager/src/routes/utils.test.tsx
+++ b/packages/manager/src/routes/utils.test.tsx
@@ -91,6 +91,7 @@ describe('strictLazyRouteComponent', () => {
       Promise.resolve({ notAComponent: 'string' })
     );
 
+    // @ts-expect-error - forcing the wrong type
     const result = strictLazyRouteComponent(mockImporter, 'notAComponent');
     await expect((result as any)()).rejects.toThrow(
       'Export "notAComponent" is not a valid React component'
diff --git a/packages/manager/src/routes/utils.ts b/packages/manager/src/routes/utils.ts
index 8441670b8e3..fdd831b0b15 100644
--- a/packages/manager/src/routes/utils.ts
+++ b/packages/manager/src/routes/utils.ts
@@ -1,8 +1,6 @@
 import { lazyRouteComponent } from '@tanstack/react-router';
 
-import type { ComponentType } from 'react';
-
-type AnyModule = { [key: string]: any };
+type AnyModule = { [key: string]: React.ComponentType<unknown> };
 
 /**
  * This function is a wrapper around lazyRouteComponent that ensures the
@@ -12,7 +10,7 @@ type AnyModule = { [key: string]: any };
  * By using a function overload we do just that.
  */
 export function strictLazyRouteComponent<
-  T extends { default: ComponentType<any> }
+  T extends { default: React.ComponentType<unknown> }
 >(importer: () => Promise<T>): ReturnType<typeof lazyRouteComponent>;
 export function strictLazyRouteComponent<
   T extends AnyModule,
@@ -27,11 +25,11 @@ export function strictLazyRouteComponent<T extends AnyModule>(
 ): ReturnType<typeof lazyRouteComponent> {
   return lazyRouteComponent(() =>
     importer().then((module) => {
-      let component: ComponentType<any>;
+      let component: React.ComponentType<unknown>;
 
       if (exportName) {
         if (exportName in module) {
-          component = module[exportName] as ComponentType<any>;
+          component = module[exportName] as React.ComponentType<unknown>;
         } else {
           throw new Error(`Export "${exportName}" not found in module`);
         }

From 6bb0d5ebda0d37049656d310111946038ff8c5bc Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 25 Sep 2024 13:53:29 -0400
Subject: [PATCH 06/45] testing existing routes (wip)

---
 packages/manager/src/routes/index.tsx       |  6 +-
 packages/manager/src/routes/routes.test.tsx | 85 +++++++++++++++++++++
 2 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 packages/manager/src/routes/routes.test.tsx

diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index 99c513a4b08..400710e0959 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -3,9 +3,7 @@ import React from 'react';
 
 import { NotFound } from 'src/components/NotFound';
 
-import {
-  accountRouteTree,
-} from './account';
+import { accountRouteTree } from './account';
 import { domainsRouteTree } from './domains';
 import { linodesRouteTree } from './linodes';
 import { nodeBalancersRouteTree } from './nodeBalancers';
@@ -25,7 +23,7 @@ const indexRoute = createRoute({
   path: '/',
 });
 
-const routeTree = rootRoute.addChildren([
+export const routeTree = rootRoute.addChildren([
   indexRoute,
   accountRouteTree,
   domainsRouteTree,
diff --git a/packages/manager/src/routes/routes.test.tsx b/packages/manager/src/routes/routes.test.tsx
new file mode 100644
index 00000000000..4e218a3e406
--- /dev/null
+++ b/packages/manager/src/routes/routes.test.tsx
@@ -0,0 +1,85 @@
+import {
+  RouterProvider,
+  createMemoryHistory,
+  createRouter,
+} from '@tanstack/react-router';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { routeTree } from './index';
+
+// Mock any context or dependencies your routes might need
+const mockContext = {
+  accountSettings: {},
+  app: {
+    features: {},
+    flags: {},
+    notifications: [],
+  },
+  isACLPEnabled: false,
+  isDatabasesEnabled: false,
+  isPlacementGroupsEnabled: false,
+  selfServeBetas: false,
+};
+
+// Helper function to create a test router
+const createTestRouter = (initialPath: string) => {
+  return createRouter({
+    context: mockContext,
+    history: createMemoryHistory({ initialEntries: [initialPath] }),
+    routeTree,
+  });
+};
+
+// Function to generate a mock value for a dynamic segment
+const mockDynamicSegment = (segment: string): string => {
+  if (segment.includes('id')) {
+    return '1';
+  } else if (segment === 'username') {
+    return 'testuser';
+  } else {
+    return 'mock-value';
+  }
+};
+
+// Recursive function to get all route paths, including dynamic routes
+const getAllRoutePaths = (route: any, parentPath = ''): string[] => {
+  const currentPath = parentPath + (route.path || '');
+
+  // console.log(currentPath)
+
+  let paths =
+    currentPath && currentPath !== '/' && currentPath !== '//'
+      ? [currentPath]
+      : [];
+
+  if (route.children) {
+    route.children.forEach((childRoute: any) => {
+      paths = [...paths, ...getAllRoutePaths(childRoute, currentPath)];
+    });
+  }
+
+  // Replace dynamic segments with mock values
+  return paths.map((path) =>
+    path.replace(/:\w+/g, (match) => mockDynamicSegment(match.slice(1)))
+  );
+};
+
+const allPaths = getAllRoutePaths(routeTree);
+
+describe('Route Tests', () => {
+  test.each(allPaths)('renders %s route correctly', async (path) => {
+    const router = createTestRouter(path);
+
+    const { findByRole, getByRole } = renderWithTheme(
+      <RouterProvider router={router} />
+    );
+
+    // Wait for any async operations to complete
+    await findByRole('main', {}, { timeout: 2000 });
+
+    // Check if the page has rendered without throwing an error
+    expect(getByRole('main')).toBeInTheDocument();
+  });
+});

From 2930229c032d49452a2269ca04440fdb9d1c9627 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 26 Sep 2024 12:40:24 -0400
Subject: [PATCH 07/45] more testing before more routes

---
 packages/manager/src/App.tsx                  |  2 +-
 packages/manager/src/Root.tsx                 |  2 +-
 .../Billing/InvoiceDetail/InvoiceDetail.tsx   | 32 ++++++------
 packages/manager/src/routes/allPaths.ts       |  4 ++
 packages/manager/src/routes/index.tsx         |  4 +-
 packages/manager/src/routes/routes.test.tsx   | 49 +++++--------------
 packages/manager/src/routes/utils.ts          | 42 ++++++++++++++++
 packages/manager/src/routes/volumes.tsx       | 11 +++--
 8 files changed, 85 insertions(+), 61 deletions(-)
 create mode 100644 packages/manager/src/routes/allPaths.ts

diff --git a/packages/manager/src/App.tsx b/packages/manager/src/App.tsx
index 37f04cb7694..d3b15ab59ef 100644
--- a/packages/manager/src/App.tsx
+++ b/packages/manager/src/App.tsx
@@ -14,7 +14,7 @@ import { GoTo } from './GoTo';
 import { useAdobeAnalytics } from './hooks/useAdobeAnalytics';
 import { useInitialRequests } from './hooks/useInitialRequests';
 import { useNewRelic } from './hooks/useNewRelic';
-//import { MainContent } from './MainContent';
+// import { MainContent } from './MainContent';
 import { MainContentV2 } from './MainContentV2';
 import { useEventsPoller } from './queries/events/events';
 import { useSetupFeatureFlags } from './useSetupFeatureFlags';
diff --git a/packages/manager/src/Root.tsx b/packages/manager/src/Root.tsx
index c974ade07ed..1fb8a7890c0 100644
--- a/packages/manager/src/Root.tsx
+++ b/packages/manager/src/Root.tsx
@@ -83,7 +83,7 @@ export const Root = () => {
   }
 
   return (
-    <div className={classes.appFrame}>
+    <div className={classes.appFrame} data-testid="root">
       <SessionExpirationProvider value={sessionExpirationContextValue}>
         <SwitchAccountSessionProvider value={switchAccountSessionContextValue}>
           <ComplianceUpdateProvider value={complianceUpdateContextValue}>
diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
index da3e1a6202f..d39850372e5 100644
--- a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
+++ b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
@@ -1,14 +1,7 @@
-import {
-  Account,
-  Invoice,
-  InvoiceItem,
-  getInvoice,
-  getInvoiceItems,
-} from '@linode/api-v4/lib/account';
-import { APIError } from '@linode/api-v4/lib/types';
+import { getInvoice, getInvoiceItems } from '@linode/api-v4/lib/account';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import Grid from '@mui/material/Unstable_Grid2';
 import { useTheme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -17,6 +10,7 @@ import { Button } from 'src/components/Button/Button';
 import { Currency } from 'src/components/Currency';
 import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV';
 import { IconButton } from 'src/components/IconButton';
+import { LandingHeader } from 'src/components/LandingHeader';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
@@ -28,10 +22,13 @@ import { useRegionsQuery } from 'src/queries/regions/regions';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { getAll } from 'src/utilities/getAll';
 
-import { invoiceCreatedAfterDCPricingLaunch } from '../PdfGenerator/utils';
 import { getShouldUseAkamaiBilling } from '../billingUtils';
+import { invoiceCreatedAfterDCPricingLaunch } from '../PdfGenerator/utils';
 import { InvoiceTable } from './InvoiceTable';
 
+import type { Account, Invoice, InvoiceItem } from '@linode/api-v4/lib/account';
+import type { APIError } from '@linode/api-v4/lib/types';
+
 export const InvoiceDetail = () => {
   const { invoiceId } = useParams<{ invoiceId: string }>();
   const theme = useTheme();
@@ -157,13 +154,14 @@ export const InvoiceDetail = () => {
                 </IconButton>
               </Link>
               {invoice && (
-                <Typography
-                  data-qa-invoice-id
-                  sx={{ paddingLeft: theme.spacing(1) }}
-                  variant="h2"
-                >
-                  Invoice #{invoice.id}
-                </Typography>
+                <LandingHeader
+                  breadcrumbProps={{
+                    crumbOverrides: [{ label: 'Billing Info', position: 1 }],
+                    firstAndLastOnly: true,
+                    labelTitle: `Invoice ${invoice.id}`,
+                    pathname: location.pathname,
+                  }}
+                />
               )}
             </Grid>
             <Grid
diff --git a/packages/manager/src/routes/allPaths.ts b/packages/manager/src/routes/allPaths.ts
new file mode 100644
index 00000000000..8e31bfbd1c2
--- /dev/null
+++ b/packages/manager/src/routes/allPaths.ts
@@ -0,0 +1,4 @@
+import { routeTree } from './';
+import { getAllRoutePaths } from './utils';
+
+export const allPaths = getAllRoutePaths(routeTree);
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index 400710e0959..a7d2f1baa6f 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -9,7 +9,7 @@ import { linodesRouteTree } from './linodes';
 import { nodeBalancersRouteTree } from './nodeBalancers';
 import { placementGroupsRouteTree } from './placementGroups';
 import { rootRoute } from './root';
-import { volumesCreateRoute, volumesIndexRoute, volumesRoute } from './volumes';
+import { volumesRouteTree } from './volumes';
 
 const indexRoute = createRoute({
   beforeLoad: ({ context }) => {
@@ -30,7 +30,7 @@ export const routeTree = rootRoute.addChildren([
   linodesRouteTree,
   nodeBalancersRouteTree,
   placementGroupsRouteTree,
-  volumesRoute.addChildren([volumesIndexRoute, volumesCreateRoute]),
+  volumesRouteTree,
 ]);
 
 export const router = createRouter({
diff --git a/packages/manager/src/routes/routes.test.tsx b/packages/manager/src/routes/routes.test.tsx
index 4e218a3e406..4f8c0d215a2 100644
--- a/packages/manager/src/routes/routes.test.tsx
+++ b/packages/manager/src/routes/routes.test.tsx
@@ -3,10 +3,12 @@ import {
   createMemoryHistory,
   createRouter,
 } from '@tanstack/react-router';
+import { waitFor } from '@testing-library/react';
 import React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
+import { allPaths } from './allPaths';
 import { routeTree } from './index';
 
 // Mock any context or dependencies your routes might need
@@ -32,43 +34,7 @@ const createTestRouter = (initialPath: string) => {
   });
 };
 
-// Function to generate a mock value for a dynamic segment
-const mockDynamicSegment = (segment: string): string => {
-  if (segment.includes('id')) {
-    return '1';
-  } else if (segment === 'username') {
-    return 'testuser';
-  } else {
-    return 'mock-value';
-  }
-};
-
-// Recursive function to get all route paths, including dynamic routes
-const getAllRoutePaths = (route: any, parentPath = ''): string[] => {
-  const currentPath = parentPath + (route.path || '');
-
-  // console.log(currentPath)
-
-  let paths =
-    currentPath && currentPath !== '/' && currentPath !== '//'
-      ? [currentPath]
-      : [];
-
-  if (route.children) {
-    route.children.forEach((childRoute: any) => {
-      paths = [...paths, ...getAllRoutePaths(childRoute, currentPath)];
-    });
-  }
-
-  // Replace dynamic segments with mock values
-  return paths.map((path) =>
-    path.replace(/:\w+/g, (match) => mockDynamicSegment(match.slice(1)))
-  );
-};
-
-const allPaths = getAllRoutePaths(routeTree);
-
-describe('Route Tests', () => {
+describe.skip('Route Tests', () => {
   test.each(allPaths)('renders %s route correctly', async (path) => {
     const router = createTestRouter(path);
 
@@ -76,9 +42,18 @@ describe('Route Tests', () => {
       <RouterProvider router={router} />
     );
 
+    await waitFor(
+      () => {
+        const h1 = getByRole('heading', { level: 1 });
+        expect(h1).toBeInTheDocument();
+      },
+      { timeout: 10_000 }
+    );
     // Wait for any async operations to complete
     await findByRole('main', {}, { timeout: 2000 });
 
+    // console.log(container.innerHTML);
+
     // Check if the page has rendered without throwing an error
     expect(getByRole('main')).toBeInTheDocument();
   });
diff --git a/packages/manager/src/routes/utils.ts b/packages/manager/src/routes/utils.ts
index fdd831b0b15..3a4c66fe11b 100644
--- a/packages/manager/src/routes/utils.ts
+++ b/packages/manager/src/routes/utils.ts
@@ -49,3 +49,45 @@ export function strictLazyRouteComponent<T extends AnyModule>(
     })
   );
 }
+
+/**
+ * This function is meant to be used for testing purposes only.
+ * It allows us to generate a list of all unique @tanstack/router paths defined in the routing factory.
+ *
+ * We import this util in cypress to loop through all routes and test them.
+ * It probably should not be used for anything else.
+ */
+export const getAllRoutePaths = (route: any, parentPath = ''): string[] => {
+  let currentPath = parentPath
+    ? `${parentPath}/${route.path || ''}`
+    : route.path || '';
+
+  // Remove leading and trailing slashes
+  currentPath = currentPath.replace(/^\/+|\/+$/g, '');
+
+  const paths: Set<string> = new Set();
+
+  // Check if the current path is valid
+  if (currentPath && currentPath !== '//') {
+    paths.add('/' + currentPath);
+  }
+
+  if (route.children) {
+    route.children.forEach((childRoute: any) => {
+      getAllRoutePaths(childRoute, currentPath).forEach((path) =>
+        paths.add(path)
+      );
+    });
+  }
+
+  // Replace dynamic segments with mock values
+  return Array.from(paths).map((path) =>
+    path.replace(/\/\$(\w+)/g, (_, segment) => {
+      if (segment.toLowerCase().includes('id')) {
+        return '/1';
+      } else {
+        return `/mock-${segment}`;
+      }
+    })
+  );
+};
diff --git a/packages/manager/src/routes/volumes.tsx b/packages/manager/src/routes/volumes.tsx
index 8c1a8922162..f7239c29bb7 100644
--- a/packages/manager/src/routes/volumes.tsx
+++ b/packages/manager/src/routes/volumes.tsx
@@ -16,13 +16,13 @@ export const VolumesRoutes = () => {
   );
 };
 
-export const volumesRoute = createRoute({
+const volumesRoute = createRoute({
   component: VolumesRoutes,
   getParentRoute: () => rootRoute,
   path: 'volumes',
 });
 
-export const volumesIndexRoute = createRoute({
+const volumesIndexRoute = createRoute({
   component: strictLazyRouteComponent(() =>
     import('src/features/Volumes/VolumesLanding').then((module) => ({
       default: module.VolumesLanding,
@@ -32,7 +32,7 @@ export const volumesIndexRoute = createRoute({
   path: '/',
 });
 
-export const volumesCreateRoute = createRoute({
+const volumesCreateRoute = createRoute({
   component: strictLazyRouteComponent(() =>
     import('src/features/Volumes/VolumeCreate').then((module) => ({
       default: module.VolumeCreate,
@@ -41,3 +41,8 @@ export const volumesCreateRoute = createRoute({
   getParentRoute: () => volumesRoute,
   path: 'create',
 });
+
+export const volumesRouteTree = volumesRoute.addChildren([
+  volumesIndexRoute,
+  volumesCreateRoute,
+]);

From a8820e7402e757cb746fbafdd26d95dda5f3f440 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 26 Sep 2024 15:30:33 -0400
Subject: [PATCH 08/45] save progress

---
 packages/manager/src/MainContentV2.tsx        |  66 -----------
 packages/manager/src/routes/account.tsx       |  22 +++-
 packages/manager/src/routes/index.tsx         |  10 ++
 packages/manager/src/routes/kubernetes.tsx    |  60 ++++++++++
 .../manager/src/routes/object-storage.tsx     |  65 +++++++++++
 packages/manager/src/routes/profile.tsx       | 109 ++++++++++++++++++
 packages/manager/src/routes/routes.test.tsx   |   3 -
 packages/manager/src/routes/stackscripts.tsx  |  81 +++++++++++++
 packages/manager/src/routes/support.tsx       |  64 ++++++++++
 9 files changed, 410 insertions(+), 70 deletions(-)
 create mode 100644 packages/manager/src/routes/kubernetes.tsx
 create mode 100644 packages/manager/src/routes/object-storage.tsx
 create mode 100644 packages/manager/src/routes/profile.tsx
 create mode 100644 packages/manager/src/routes/stackscripts.tsx
 create mode 100644 packages/manager/src/routes/support.tsx

diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
index bcfa46399b9..19d177f57dc 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/MainContentV2.tsx
@@ -11,30 +11,6 @@ import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 import { rootRoute } from './routes/root';
 
-const Kubernetes = React.lazy(() =>
-  import('src/features/Kubernetes').then((module) => ({
-    default: module.Kubernetes,
-  }))
-);
-const ObjectStorage = React.lazy(() => import('src/features/ObjectStorage'));
-const Profile = React.lazy(() =>
-  import('src/features/Profile/Profile').then((module) => ({
-    default: module.Profile,
-  }))
-);
-const StackScripts = React.lazy(
-  () => import('src/features/StackScripts/StackScripts')
-);
-const SupportTickets = React.lazy(
-  () => import('src/features/Support/SupportTickets')
-);
-const SupportTicketDetail = React.lazy(() =>
-  import('src/features/Support/SupportTicketDetail/SupportTicketDetail').then(
-    (module) => ({
-      default: module.SupportTicketDetail,
-    })
-  )
-);
 const Longview = React.lazy(() => import('src/features/Longview'));
 const Managed = React.lazy(() => import('src/features/Managed/ManagedLanding'));
 const Help = React.lazy(() =>
@@ -76,30 +52,6 @@ const longviewRoute = createRoute({
   path: 'longview',
 });
 
-const stackScriptsRoute = createRoute({
-  component: StackScripts,
-  getParentRoute: () => rootRoute,
-  path: 'stackscripts',
-});
-
-const objectStorageRoute = createRoute({
-  component: ObjectStorage,
-  getParentRoute: () => rootRoute,
-  path: 'object-storage',
-});
-
-const kubernetesRoute = createRoute({
-  component: Kubernetes,
-  getParentRoute: () => rootRoute,
-  path: 'kubernetes',
-});
-
-const profileRoute = createRoute({
-  component: Profile,
-  getParentRoute: () => rootRoute,
-  path: 'profile',
-});
-
 const supportRoute = createRoute({
   component: Help,
   getParentRoute: () => rootRoute,
@@ -154,18 +106,6 @@ const accountActivationRoute = createRoute({
   path: 'account-activation',
 });
 
-const supportTicketDetailRoute = createRoute({
-  component: SupportTicketDetail,
-  getParentRoute: () => rootRoute,
-  path: 'support/tickets/:id',
-});
-
-const supportTicketsRoute = createRoute({
-  component: SupportTickets,
-  getParentRoute: () => rootRoute,
-  path: 'support/tickets/create',
-});
-
 const notFoundRoute = createRoute({
   component: NotFound,
   getParentRoute: () => rootRoute,
@@ -179,10 +119,6 @@ const notFoundRoute = createRoute({
 const routeTree = rootRoute.addChildren([
   managedRoute,
   longviewRoute,
-  stackScriptsRoute,
-  objectStorageRoute,
-  kubernetesRoute,
-  profileRoute,
   supportRoute,
   searchRoute,
   eventsRoute,
@@ -192,8 +128,6 @@ const routeTree = rootRoute.addChildren([
   vpcRoute,
   cloudPulseRoute,
   accountActivationRoute,
-  supportTicketsRoute,
-  supportTicketDetailRoute,
   notFoundRoute,
 ]);
 
diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
index 507c2201b0d..25301b1d30e 100644
--- a/packages/manager/src/routes/account.tsx
+++ b/packages/manager/src/routes/account.tsx
@@ -39,6 +39,23 @@ const accountUsersUsernameRoute = createRoute({
   path: 'users/$username',
 });
 
+const accountUsersUsernameProfileRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Users/UserProfile/UserProfile'),
+    'UserProfile'
+  ),
+  getParentRoute: () => accountUsersUsernameRoute,
+  path: 'users/$username/profile',
+});
+
+const accountUsersUsernamePermissionsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Users/UserPermissions')
+  ),
+  getParentRoute: () => accountUsersUsernameRoute,
+  path: 'users/$username/permissions',
+});
+
 const accountBillingRoute = createRoute({
   component: strictLazyRouteComponent(
     () => import('src/features/Account/AccountLanding')
@@ -81,7 +98,10 @@ const accountEntityTransfersCreateRoute = createRoute({
 
 export const accountRouteTree = accountRoute.addChildren([
   accountIndexRoute,
-  accountUsersUsernameRoute,
+  accountUsersUsernameRoute.addChildren([
+    accountUsersUsernameProfileRoute,
+    accountUsersUsernamePermissionsRoute,
+  ]),
   accountBillingRoute,
   accountBillingEditRoute,
   accountInvoicesInvoiceIdRoute,
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index a7d2f1baa6f..3a60ec6c30f 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -5,10 +5,15 @@ import { NotFound } from 'src/components/NotFound';
 
 import { accountRouteTree } from './account';
 import { domainsRouteTree } from './domains';
+import { kubernetesRouteTree } from './kubernetes';
 import { linodesRouteTree } from './linodes';
 import { nodeBalancersRouteTree } from './nodeBalancers';
+import { objectStorageRouteTree } from './object-storage';
 import { placementGroupsRouteTree } from './placementGroups';
+import { profileRouteTree } from './profile';
 import { rootRoute } from './root';
+import { stackScriptsRouteTree } from './stackscripts';
+import { supportRouteTree } from './support';
 import { volumesRouteTree } from './volumes';
 
 const indexRoute = createRoute({
@@ -27,9 +32,14 @@ export const routeTree = rootRoute.addChildren([
   indexRoute,
   accountRouteTree,
   domainsRouteTree,
+  kubernetesRouteTree,
   linodesRouteTree,
   nodeBalancersRouteTree,
+  objectStorageRouteTree,
   placementGroupsRouteTree,
+  profileRouteTree,
+  stackScriptsRouteTree,
+  supportRouteTree,
   volumesRouteTree,
 ]);
 
diff --git a/packages/manager/src/routes/kubernetes.tsx b/packages/manager/src/routes/kubernetes.tsx
new file mode 100644
index 00000000000..7de95550cc9
--- /dev/null
+++ b/packages/manager/src/routes/kubernetes.tsx
@@ -0,0 +1,60 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const KubernetesRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Kubernetes" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+export const kubernetesRoute = createRoute({
+  component: KubernetesRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'kubernetes/clusters',
+});
+
+const kubernetesIndexRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Kubernetes/KubernetesLanding/KubernetesLanding'),
+    'KubernetesLanding'
+  ),
+  getParentRoute: () => kubernetesRoute,
+  path: '/',
+});
+
+const kubernetesCreateRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Kubernetes/CreateCluster/CreateCluster'),
+    'CreateCluster'
+  ),
+  getParentRoute: () => rootRoute,
+  // this route does not have the "clusters" prefix
+  path: 'kubernetes/create',
+});
+
+const kubernetesClusterRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail'
+      ),
+    'KubernetesClusterDetail'
+  ),
+  getParentRoute: () => kubernetesRoute,
+  path: '$clusterID',
+});
+
+export const kubernetesRouteTree = kubernetesRoute.addChildren([
+  kubernetesIndexRoute,
+  kubernetesCreateRoute,
+  kubernetesClusterRoute,
+]);
diff --git a/packages/manager/src/routes/object-storage.tsx b/packages/manager/src/routes/object-storage.tsx
new file mode 100644
index 00000000000..3be5a22635b
--- /dev/null
+++ b/packages/manager/src/routes/object-storage.tsx
@@ -0,0 +1,65 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const ObjectStorageRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Object Storage" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+export const objectStorageRoute = createRoute({
+  component: ObjectStorageRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'object-storage',
+});
+
+const objectStorageIndexRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/ObjectStorage/ObjectStorageLanding'),
+    'ObjectStorageLanding'
+  ),
+  getParentRoute: () => objectStorageRoute,
+  path: '/',
+});
+
+const objectStorageBucketsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/ObjectStorage/BucketLanding/BucketLanding'),
+    'BucketLanding'
+  ),
+  getParentRoute: () => objectStorageIndexRoute,
+  path: 'buckets',
+});
+
+const objectStorageAccessKeysRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () =>
+      import('src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding'),
+    'AccessKeyLanding'
+  ),
+  getParentRoute: () => objectStorageIndexRoute,
+  path: 'access-keys',
+});
+
+const objectStorageBucketDetailRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/ObjectStorage/BucketDetail')
+  ),
+  getParentRoute: () => objectStorageBucketsRoute,
+  path: '$clusterId/$bucketName',
+});
+
+export const objectStorageRouteTree = objectStorageRoute.addChildren([
+  objectStorageIndexRoute,
+  objectStorageBucketsRoute.addChildren([objectStorageBucketDetailRoute]),
+  objectStorageAccessKeysRoute,
+]);
diff --git a/packages/manager/src/routes/profile.tsx b/packages/manager/src/routes/profile.tsx
new file mode 100644
index 00000000000..ee1ccc0d420
--- /dev/null
+++ b/packages/manager/src/routes/profile.tsx
@@ -0,0 +1,109 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const ProfileRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+const ProfileRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Profile/DisplaySettings/DisplaySettings'),
+    'DisplaySettings'
+  ),
+  getParentRoute: () => rootRoute,
+  path: 'profile',
+});
+
+const ProfileDisplaySettingsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Profile/DisplaySettings/DisplaySettings'),
+    'DisplaySettings'
+  ),
+  getParentRoute: () => ProfileRoute,
+  path: 'display',
+});
+
+const ProfileAuthenticationSettingsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/Profile/AuthenticationSettings/AuthenticationSettings'
+      ),
+    'AuthenticationSettings'
+  ),
+  getParentRoute: () => ProfileRoute,
+  path: 'auth',
+});
+
+const ProfileSSHKeysRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Profile/SSHKeys/SSHKeys'),
+    'SSHKeys'
+  ),
+  getParentRoute: () => ProfileRoute,
+  path: 'keys',
+});
+
+const ProfileLishSettingsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Profile/LishSettings/LishSettings'),
+    'LishSettings'
+  ),
+  getParentRoute: () => ProfileRoute,
+  path: 'lish',
+});
+
+const ProfileAPITokensRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Profile/APITokens/APITokens'),
+    'APITokens'
+  ),
+  getParentRoute: () => ProfileRoute,
+  path: 'tokens',
+});
+
+const ProfileOAuthClientsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Profile/OAuthClients/OAuthClients')
+  ),
+  getParentRoute: () => ProfileRoute,
+  path: 'clients',
+});
+
+const ProfileReferralsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Profile/Referrals/Referrals'),
+    'Referrals'
+  ),
+  getParentRoute: () => ProfileRoute,
+  path: 'referrals',
+});
+
+const ProfileSettingsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Profile/Settings/Settings'),
+    'ProfileSettings'
+  ),
+  getParentRoute: () => ProfileRoute,
+  path: 'settings',
+});
+
+export const profileRouteTree = ProfileRoute.addChildren([
+  ProfileAuthenticationSettingsRoute,
+  ProfileDisplaySettingsRoute,
+  ProfileSSHKeysRoute,
+  ProfileLishSettingsRoute,
+  ProfileAPITokensRoute,
+  ProfileOAuthClientsRoute,
+  ProfileReferralsRoute,
+  ProfileSettingsRoute,
+]);
diff --git a/packages/manager/src/routes/routes.test.tsx b/packages/manager/src/routes/routes.test.tsx
index 4f8c0d215a2..d5544f68a49 100644
--- a/packages/manager/src/routes/routes.test.tsx
+++ b/packages/manager/src/routes/routes.test.tsx
@@ -51,9 +51,6 @@ describe.skip('Route Tests', () => {
     );
     // Wait for any async operations to complete
     await findByRole('main', {}, { timeout: 2000 });
-
-    // console.log(container.innerHTML);
-
     // Check if the page has rendered without throwing an error
     expect(getByRole('main')).toBeInTheDocument();
   });
diff --git a/packages/manager/src/routes/stackscripts.tsx b/packages/manager/src/routes/stackscripts.tsx
new file mode 100644
index 00000000000..f353c323b7c
--- /dev/null
+++ b/packages/manager/src/routes/stackscripts.tsx
@@ -0,0 +1,81 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const StackScriptsRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="StackScripts" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+const StackScriptsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/StackScripts/StackScriptsLanding'),
+    'StackScriptsLanding'
+  ),
+  getParentRoute: () => rootRoute,
+  path: 'stackscripts',
+});
+
+const StackScriptsAccountRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/StackScripts/StackScriptsLanding'),
+    'StackScriptsLanding'
+  ),
+  getParentRoute: () => StackScriptsRoute,
+  path: 'account',
+});
+
+const StackScriptsCommunityRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/StackScripts/StackScriptsLanding'),
+    'StackScriptsLanding'
+  ),
+  getParentRoute: () => StackScriptsRoute,
+  path: 'community',
+});
+
+const StackScriptsCreateRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () =>
+      import('src/features/StackScripts/StackScriptCreate/StackScriptCreate'),
+    'StackScriptCreate'
+  ),
+  getParentRoute: () => StackScriptsRoute,
+  path: 'create',
+});
+
+const StackScriptsDetailRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/StackScripts/StackScriptsDetail'),
+    'StackScriptsDetail'
+  ),
+  getParentRoute: () => StackScriptsRoute,
+  path: '$stackScriptID',
+});
+
+const StackScriptsEditRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () =>
+      import('src/features/StackScripts/StackScriptCreate/StackScriptCreate'),
+    'StackScriptCreate'
+  ),
+  getParentRoute: () => StackScriptsRoute,
+  path: '$stackScriptID/edit',
+});
+
+export const stackScriptsRouteTree = StackScriptsRoute.addChildren([
+  StackScriptsAccountRoute,
+  StackScriptsCommunityRoute,
+  StackScriptsCreateRoute,
+  StackScriptsDetailRoute,
+  StackScriptsEditRoute,
+]);
diff --git a/packages/manager/src/routes/support.tsx b/packages/manager/src/routes/support.tsx
new file mode 100644
index 00000000000..b11dcedcfa2
--- /dev/null
+++ b/packages/manager/src/routes/support.tsx
@@ -0,0 +1,64 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { StatusBanners } from 'src/features/Help/StatusBanners';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const SupportTicketsRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <StatusBanners />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+const SupportRoute = createRoute({
+  component: SupportTicketsRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'support',
+});
+
+const SupportLandingRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Help/HelpLanding'),
+    'HelpLanding'
+  ),
+  getParentRoute: () => SupportRoute,
+  path: '/',
+});
+
+const SupportTicketsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Support/SupportTickets/SupportTicketsLanding')
+  ),
+  getParentRoute: () => SupportRoute,
+  path: 'tickets',
+});
+
+const SupportTicketDetailRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () =>
+      import('src/features/Support/SupportTicketDetail/SupportTicketDetail'),
+    'SupportTicketDetail'
+  ),
+  getParentRoute: () => SupportTicketsRoute,
+  path: '$ticketId',
+});
+
+const SupportSearchLandingRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Help/SupportSearchLanding/SupportSearchLanding')
+  ),
+  getParentRoute: () => SupportRoute,
+  path: 'search',
+});
+
+export const supportRouteTree = SupportRoute.addChildren([
+  SupportLandingRoute,
+  SupportTicketsRoute.addChildren([SupportTicketDetailRoute]),
+  SupportSearchLandingRoute,
+]);

From 99655ee5610e608f94e0969acef92a6955f62d86 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 26 Sep 2024 16:43:57 -0400
Subject: [PATCH 09/45] save progress

---
 packages/manager/src/MainContentV2.tsx       | 21 +-----
 packages/manager/src/routes/index.tsx        | 12 ++--
 packages/manager/src/routes/kubernetes.tsx   |  3 +
 packages/manager/src/routes/longview.tsx     | 49 ++++++++++++++
 packages/manager/src/routes/managed.tsx      | 71 ++++++++++++++++++++
 packages/manager/src/routes/root.ts          |  6 +-
 packages/manager/src/routes/stackscripts.tsx | 17 ++++-
 packages/manager/src/routes/support.tsx      |  4 ++
 packages/manager/src/routes/types.ts         | 11 +++
 9 files changed, 165 insertions(+), 29 deletions(-)
 create mode 100644 packages/manager/src/routes/longview.tsx
 create mode 100644 packages/manager/src/routes/managed.tsx
 create mode 100644 packages/manager/src/routes/types.ts

diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
index 19d177f57dc..8374161c5d1 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/MainContentV2.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { NotFound } from 'src/components/NotFound';
 import { useFlags } from 'src/hooks/useFlags';
+import { useGlobalErrors } from 'src/hooks/useGlobalErrors';
 
 import { useIsACLPEnabled } from './features/CloudPulse/Utils/utils';
 import { useIsDatabasesEnabled } from './features/Databases/utilities';
@@ -11,16 +12,12 @@ import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 import { rootRoute } from './routes/root';
 
-const Longview = React.lazy(() => import('src/features/Longview'));
 const Managed = React.lazy(() => import('src/features/Managed/ManagedLanding'));
 const Help = React.lazy(() =>
   import('./features/Help/index').then((module) => ({
     default: module.HelpAndSupport,
   }))
 );
-const SearchLanding = React.lazy(
-  () => import('src/features/Search/SearchLanding')
-);
 const EventsLanding = React.lazy(() =>
   import('src/features/Events/EventsLanding').then((module) => ({
     default: module.EventsLanding,
@@ -46,24 +43,12 @@ const managedRoute = createRoute({
   path: 'managed',
 });
 
-const longviewRoute = createRoute({
-  component: Longview,
-  getParentRoute: () => rootRoute,
-  path: 'longview',
-});
-
 const supportRoute = createRoute({
   component: Help,
   getParentRoute: () => rootRoute,
   path: 'support',
 });
 
-const searchRoute = createRoute({
-  component: SearchLanding,
-  getParentRoute: () => rootRoute,
-  path: 'search',
-});
-
 const eventsRoute = createRoute({
   component: EventsLanding,
   getParentRoute: () => rootRoute,
@@ -118,9 +103,7 @@ const notFoundRoute = createRoute({
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const routeTree = rootRoute.addChildren([
   managedRoute,
-  longviewRoute,
   supportRoute,
-  searchRoute,
   eventsRoute,
   firewallsRoute,
   databasesRoute,
@@ -136,12 +119,14 @@ export const MainContentV2 = () => {
   const { isDatabasesEnabled } = useIsDatabasesEnabled();
   const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
   const { isACLPEnabled } = useIsACLPEnabled();
+  const globalErrors = useGlobalErrors();
   const flags = useFlags();
 
   // Update the router's context
   router.update({
     context: {
       accountSettings,
+      globalErrors,
       isACLPEnabled,
       isDatabasesEnabled,
       isPlacementGroupsEnabled,
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index 3a60ec6c30f..cae9e3c36ce 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -7,6 +7,8 @@ import { accountRouteTree } from './account';
 import { domainsRouteTree } from './domains';
 import { kubernetesRouteTree } from './kubernetes';
 import { linodesRouteTree } from './linodes';
+import { longviewRouteTree } from './longview';
+import { managedRouteTree } from './managed';
 import { nodeBalancersRouteTree } from './nodeBalancers';
 import { objectStorageRouteTree } from './object-storage';
 import { placementGroupsRouteTree } from './placementGroups';
@@ -34,6 +36,8 @@ export const routeTree = rootRoute.addChildren([
   domainsRouteTree,
   kubernetesRouteTree,
   linodesRouteTree,
+  longviewRouteTree,
+  managedRouteTree,
   nodeBalancersRouteTree,
   objectStorageRouteTree,
   placementGroupsRouteTree,
@@ -44,13 +48,7 @@ export const routeTree = rootRoute.addChildren([
 ]);
 
 export const router = createRouter({
-  context: {
-    accountSettings: undefined,
-    isACLPEnabled: false,
-    isDatabasesEnabled: false,
-    isPlacementGroupsEnabled: false,
-    selfServeBetas: false,
-  },
+  context: {},
   defaultNotFoundComponent: () => <NotFound />,
   routeTree,
 });
diff --git a/packages/manager/src/routes/kubernetes.tsx b/packages/manager/src/routes/kubernetes.tsx
index 7de95550cc9..244c90557f8 100644
--- a/packages/manager/src/routes/kubernetes.tsx
+++ b/packages/manager/src/routes/kubernetes.tsx
@@ -50,6 +50,9 @@ const kubernetesClusterRoute = createRoute({
     'KubernetesClusterDetail'
   ),
   getParentRoute: () => kubernetesRoute,
+  parseParams: (params) => ({
+    clusterID: Number(params.clusterID),
+  }),
   path: '$clusterID',
 });
 
diff --git a/packages/manager/src/routes/longview.tsx b/packages/manager/src/routes/longview.tsx
new file mode 100644
index 00000000000..5772257c616
--- /dev/null
+++ b/packages/manager/src/routes/longview.tsx
@@ -0,0 +1,49 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const LongviewRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Longview" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+export const longviewRoute = createRoute({
+  component: LongviewRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'longview',
+});
+
+export const longviewLandingRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Longview/LongviewLanding/LongviewLanding'),
+    'LongviewLanding'
+  ),
+  getParentRoute: () => longviewRoute,
+  path: '/',
+});
+
+export const longviewDetailRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Longview/LongviewDetail/LongviewDetail'),
+    'LongviewDetail'
+  ),
+  getParentRoute: () => longviewRoute,
+  parseParams: (params) => ({
+    id: Number(params.id),
+  }),
+  path: 'clients/$id',
+});
+
+export const longviewRouteTree = longviewRoute.addChildren([
+  longviewLandingRoute,
+  longviewDetailRoute,
+]);
diff --git a/packages/manager/src/routes/managed.tsx b/packages/manager/src/routes/managed.tsx
new file mode 100644
index 00000000000..fc4a71bd710
--- /dev/null
+++ b/packages/manager/src/routes/managed.tsx
@@ -0,0 +1,71 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const ManagedRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Managed" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+export const managedRoute = createRoute({
+  component: ManagedRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'managed',
+});
+
+export const managedSummaryRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Managed/ManagedDashboardCard')
+  ),
+  getParentRoute: () => managedRoute,
+  path: '/summary',
+});
+
+export const managedMonitorsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Managed/Monitors')
+  ),
+  getParentRoute: () => managedRoute,
+  path: '/monitors',
+});
+
+export const managedSSHAccessRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Managed/SSHAccess')
+  ),
+  getParentRoute: () => managedRoute,
+  path: '/ssh-access',
+});
+
+export const managedCredentialsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Managed/Credentials/CredentialList')
+  ),
+  getParentRoute: () => managedRoute,
+  path: '/credentials',
+});
+
+export const managedContactsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Managed/Contacts/Contacts')
+  ),
+  getParentRoute: () => managedRoute,
+  path: '/contacts',
+});
+
+export const managedRouteTree = managedRoute.addChildren([
+  managedSummaryRoute,
+  managedMonitorsRoute,
+  managedSSHAccessRoute,
+  managedCredentialsRoute,
+  managedContactsRoute,
+]);
diff --git a/packages/manager/src/routes/root.ts b/packages/manager/src/routes/root.ts
index 5b946b2e929..69e78aef2f6 100644
--- a/packages/manager/src/routes/root.ts
+++ b/packages/manager/src/routes/root.ts
@@ -1,7 +1,9 @@
-import { createRootRoute } from '@tanstack/react-router';
+import { createRootRouteWithContext } from '@tanstack/react-router';
 
 import { Root } from '../Root';
 
-export const rootRoute = createRootRoute({
+import type { RouterContext } from './types';
+
+export const rootRoute = createRootRouteWithContext<RouterContext>()({
   component: Root,
 });
diff --git a/packages/manager/src/routes/stackscripts.tsx b/packages/manager/src/routes/stackscripts.tsx
index f353c323b7c..2f9791ba41c 100644
--- a/packages/manager/src/routes/stackscripts.tsx
+++ b/packages/manager/src/routes/stackscripts.tsx
@@ -17,12 +17,18 @@ export const StackScriptsRoutes = () => {
 };
 
 const StackScriptsRoute = createRoute({
+  component: StackScriptsRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'stackscripts',
+});
+
+const StackScriptsLandingRoute = createRoute({
   component: strictLazyRouteComponent(
     () => import('src/features/StackScripts/StackScriptsLanding'),
     'StackScriptsLanding'
   ),
-  getParentRoute: () => rootRoute,
-  path: 'stackscripts',
+  getParentRoute: () => StackScriptsRoute,
+  path: '/',
 });
 
 const StackScriptsAccountRoute = createRoute({
@@ -59,6 +65,9 @@ const StackScriptsDetailRoute = createRoute({
     'StackScriptsDetail'
   ),
   getParentRoute: () => StackScriptsRoute,
+  parseParams: (params) => ({
+    stackScriptID: Number(params.stackScriptID),
+  }),
   path: '$stackScriptID',
 });
 
@@ -69,10 +78,14 @@ const StackScriptsEditRoute = createRoute({
     'StackScriptCreate'
   ),
   getParentRoute: () => StackScriptsRoute,
+  parseParams: (params) => ({
+    stackScriptID: Number(params.stackScriptID),
+  }),
   path: '$stackScriptID/edit',
 });
 
 export const stackScriptsRouteTree = StackScriptsRoute.addChildren([
+  StackScriptsLandingRoute,
   StackScriptsAccountRoute,
   StackScriptsCommunityRoute,
   StackScriptsCreateRoute,
diff --git a/packages/manager/src/routes/support.tsx b/packages/manager/src/routes/support.tsx
index b11dcedcfa2..e0454d621ca 100644
--- a/packages/manager/src/routes/support.tsx
+++ b/packages/manager/src/routes/support.tsx
@@ -17,6 +17,7 @@ export const SupportTicketsRoutes = () => {
 };
 
 const SupportRoute = createRoute({
+  // TODO: TanStackRouter - got to handle the MainContent.tsx `globalErrors.account_unactivated` logic.
   component: SupportTicketsRoutes,
   getParentRoute: () => rootRoute,
   path: 'support',
@@ -46,6 +47,9 @@ const SupportTicketDetailRoute = createRoute({
     'SupportTicketDetail'
   ),
   getParentRoute: () => SupportTicketsRoute,
+  parseParams: (params) => ({
+    ticketId: Number(params.ticketId),
+  }),
   path: '$ticketId',
 });
 
diff --git a/packages/manager/src/routes/types.ts b/packages/manager/src/routes/types.ts
new file mode 100644
index 00000000000..b4998f1f250
--- /dev/null
+++ b/packages/manager/src/routes/types.ts
@@ -0,0 +1,11 @@
+// TODO: TanStackRouter - type this better
+export type RouterContext = {
+  accountSettings?: any;
+  globalErrors?: {
+    account_unactivated?: boolean;
+  };
+  isACLPEnabled?: boolean;
+  isDatabasesEnabled?: boolean;
+  isPlacementGroupsEnabled?: boolean;
+  selfServeBetas?: boolean;
+};

From 696df7c053757bef151981ac5fa7efdefa562a29 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 26 Sep 2024 16:44:48 -0400
Subject: [PATCH 10/45] save progress

---
 packages/manager/src/MainContentV2.tsx | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
index 8374161c5d1..120556f9d95 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/MainContentV2.tsx
@@ -12,12 +12,6 @@ import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 import { rootRoute } from './routes/root';
 
-const Managed = React.lazy(() => import('src/features/Managed/ManagedLanding'));
-const Help = React.lazy(() =>
-  import('./features/Help/index').then((module) => ({
-    default: module.HelpAndSupport,
-  }))
-);
 const EventsLanding = React.lazy(() =>
   import('src/features/Events/EventsLanding').then((module) => ({
     default: module.EventsLanding,
@@ -37,18 +31,6 @@ const CloudPulse = React.lazy(() =>
   }))
 );
 
-const managedRoute = createRoute({
-  component: Managed,
-  getParentRoute: () => rootRoute,
-  path: 'managed',
-});
-
-const supportRoute = createRoute({
-  component: Help,
-  getParentRoute: () => rootRoute,
-  path: 'support',
-});
-
 const eventsRoute = createRoute({
   component: EventsLanding,
   getParentRoute: () => rootRoute,
@@ -102,8 +84,6 @@ const notFoundRoute = createRoute({
 // @ts-expect-error - TODO: Fix this type error
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const routeTree = rootRoute.addChildren([
-  managedRoute,
-  supportRoute,
   eventsRoute,
   firewallsRoute,
   databasesRoute,

From 257177a1232d6069f4c70b58bb81c7a8ffc05bd9 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 26 Sep 2024 17:10:05 -0400
Subject: [PATCH 11/45] type improvements

---
 packages/manager/src/routes/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index cae9e3c36ce..87ad13c4671 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -20,8 +20,7 @@ import { volumesRouteTree } from './volumes';
 
 const indexRoute = createRoute({
   beforeLoad: ({ context }) => {
-    // TODO: TanStackRouter - fix this `any` type
-    const { accountSettings } = context as any;
+    const { accountSettings } = context;
     const defaultRoot = accountSettings?.managed ? '/managed' : '/linodes';
 
     throw redirect({ to: defaultRoot });

From dbf91d9e6e3d0fcf99b1f00cb917abbccbd7509f Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Thu, 26 Sep 2024 18:19:41 -0400
Subject: [PATCH 12/45] make basic account routing work

---
 .../src/features/Account/AccountLanding.tsx   | 72 ++++++++++++-------
 packages/manager/src/routes/account.tsx       | 46 +++++-------
 2 files changed, 66 insertions(+), 52 deletions(-)

diff --git a/packages/manager/src/features/Account/AccountLanding.tsx b/packages/manager/src/features/Account/AccountLanding.tsx
index e99de4484f9..68ab9d52b4a 100644
--- a/packages/manager/src/features/Account/AccountLanding.tsx
+++ b/packages/manager/src/features/Account/AccountLanding.tsx
@@ -22,6 +22,8 @@ import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnaly
 import AccountLogins from './AccountLogins';
 import { SwitchAccountButton } from './SwitchAccountButton';
 import { SwitchAccountDrawer } from './SwitchAccountDrawer';
+import { createLazyRoute, createRoute, Outlet } from '@tanstack/react-router';
+import { accountRoute } from 'src/routes/account';
 
 const Billing = React.lazy(() =>
   import('src/features/Billing/BillingDetail').then((module) => ({
@@ -184,29 +186,11 @@ const AccountLanding = () => {
 
       <Tabs index={getDefaultTabIndex()} onChange={handleTabChange}>
         <TabLinkList tabs={tabs} />
-
-        <React.Suspense fallback={<SuspenseLoader />}>
-          <TabPanels>
-            <SafeTabPanel index={idx}>
-              <Billing />
-            </SafeTabPanel>
-            <SafeTabPanel index={++idx}>
-              <Users />
-            </SafeTabPanel>
-            <SafeTabPanel index={++idx}>
-              <AccountLogins />
-            </SafeTabPanel>
-            <SafeTabPanel index={++idx}>
-              <EntityTransfersLanding />
-            </SafeTabPanel>
-            <SafeTabPanel index={++idx}>
-              <MaintenanceLanding />
-            </SafeTabPanel>
-            <SafeTabPanel index={++idx}>
-              <GlobalSettings />
-            </SafeTabPanel>
-          </TabPanels>
-        </React.Suspense>
+        <TabPanels>
+          <React.Suspense fallback={<SuspenseLoader />}>
+            <Outlet />
+          </React.Suspense>
+        </TabPanels>
       </Tabs>
       <SwitchAccountDrawer
         onClose={() => setIsDrawerOpen(false)}
@@ -217,4 +201,44 @@ const AccountLanding = () => {
   );
 };
 
-export default AccountLanding;
+export const accountIndexRoute = createRoute({
+  component: AccountLanding,
+  getParentRoute: () => accountRoute,
+  path: '/',
+});
+
+export const accountBillingRoute = createRoute({
+  component: Billing,
+  getParentRoute: () => accountIndexRoute,
+  path: 'billing'
+});
+
+export const accountUsersRoute = createRoute({
+  component: Users,
+  getParentRoute: () => accountIndexRoute,
+  path: 'users',
+});
+
+export const accountLoginHistoryRoute = createRoute({
+  component: AccountLogins,
+  getParentRoute: () => accountIndexRoute,
+  path: 'login-history',
+});
+
+export const accountServiceTransfersRoute = createRoute({
+  component: EntityTransfersLanding,
+  getParentRoute: () => accountIndexRoute,
+  path: 'service-transfers',
+});
+
+export const accountMaintenanceRoute = createRoute({
+  component: MaintenanceLanding,
+  getParentRoute: () => accountIndexRoute,
+  path: 'maintenance',
+});
+
+export const accountSettingsRoute = createRoute({
+  component: GlobalSettings,
+  getParentRoute: () => accountIndexRoute,
+  path: 'settings',
+});
diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
index 25301b1d30e..9cc90842a23 100644
--- a/packages/manager/src/routes/account.tsx
+++ b/packages/manager/src/routes/account.tsx
@@ -3,6 +3,15 @@ import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import {
+  accountBillingRoute,
+  accountIndexRoute,
+  accountLoginHistoryRoute,
+  accountMaintenanceRoute,
+  accountServiceTransfersRoute,
+  accountSettingsRoute,
+  accountUsersRoute,
+} from 'src/features/Account/AccountLanding';
 
 import { rootRoute } from './root';
 import { strictLazyRouteComponent } from './utils';
@@ -16,20 +25,12 @@ export const AccountRoutes = () => {
   );
 };
 
-const accountRoute = createRoute({
+export const accountRoute = createRoute({
   component: AccountRoutes,
   getParentRoute: () => rootRoute,
   path: 'account',
 });
 
-const accountIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Account/AccountLanding')
-  ),
-  getParentRoute: () => accountRoute,
-  path: '/',
-});
-
 const accountUsersUsernameRoute = createRoute({
   component: strictLazyRouteComponent(
     () => import('src/features/Users/UserDetail'),
@@ -56,22 +57,6 @@ const accountUsersUsernamePermissionsRoute = createRoute({
   path: 'users/$username/permissions',
 });
 
-const accountBillingRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Account/AccountLanding')
-  ),
-  getParentRoute: () => accountRoute,
-  path: 'billing',
-});
-
-const accountBillingEditRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Account/AccountLanding')
-  ),
-  getParentRoute: () => accountRoute,
-  path: 'billing/edit',
-});
-
 const accountInvoicesInvoiceIdRoute = createRoute({
   component: strictLazyRouteComponent(
     () => import('src/features/Billing/InvoiceDetail/InvoiceDetail'),
@@ -97,13 +82,18 @@ const accountEntityTransfersCreateRoute = createRoute({
 });
 
 export const accountRouteTree = accountRoute.addChildren([
-  accountIndexRoute,
   accountUsersUsernameRoute.addChildren([
     accountUsersUsernameProfileRoute,
     accountUsersUsernamePermissionsRoute,
   ]),
-  accountBillingRoute,
-  accountBillingEditRoute,
+  accountIndexRoute.addChildren([
+    accountBillingRoute,
+    accountUsersRoute,
+    accountLoginHistoryRoute,
+    accountServiceTransfersRoute,
+    accountMaintenanceRoute,
+    accountSettingsRoute,
+  ]),
   accountInvoicesInvoiceIdRoute,
   accountEntityTransfersCreateRoute,
 ]);

From 6219592bf4bfba8b07b508fec41cee03abd16a09 Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Thu, 26 Sep 2024 19:13:05 -0400
Subject: [PATCH 13/45] Revert "make basic account routing work"

This reverts commit 28511f58482257f8246105a92d9a155fefab933f.
---
 .../src/features/Account/AccountLanding.tsx   | 72 +++++++------------
 packages/manager/src/routes/account.tsx       | 46 +++++++-----
 2 files changed, 52 insertions(+), 66 deletions(-)

diff --git a/packages/manager/src/features/Account/AccountLanding.tsx b/packages/manager/src/features/Account/AccountLanding.tsx
index 68ab9d52b4a..e99de4484f9 100644
--- a/packages/manager/src/features/Account/AccountLanding.tsx
+++ b/packages/manager/src/features/Account/AccountLanding.tsx
@@ -22,8 +22,6 @@ import { sendSwitchAccountEvent } from 'src/utilities/analytics/customEventAnaly
 import AccountLogins from './AccountLogins';
 import { SwitchAccountButton } from './SwitchAccountButton';
 import { SwitchAccountDrawer } from './SwitchAccountDrawer';
-import { createLazyRoute, createRoute, Outlet } from '@tanstack/react-router';
-import { accountRoute } from 'src/routes/account';
 
 const Billing = React.lazy(() =>
   import('src/features/Billing/BillingDetail').then((module) => ({
@@ -186,11 +184,29 @@ const AccountLanding = () => {
 
       <Tabs index={getDefaultTabIndex()} onChange={handleTabChange}>
         <TabLinkList tabs={tabs} />
-        <TabPanels>
-          <React.Suspense fallback={<SuspenseLoader />}>
-            <Outlet />
-          </React.Suspense>
-        </TabPanels>
+
+        <React.Suspense fallback={<SuspenseLoader />}>
+          <TabPanels>
+            <SafeTabPanel index={idx}>
+              <Billing />
+            </SafeTabPanel>
+            <SafeTabPanel index={++idx}>
+              <Users />
+            </SafeTabPanel>
+            <SafeTabPanel index={++idx}>
+              <AccountLogins />
+            </SafeTabPanel>
+            <SafeTabPanel index={++idx}>
+              <EntityTransfersLanding />
+            </SafeTabPanel>
+            <SafeTabPanel index={++idx}>
+              <MaintenanceLanding />
+            </SafeTabPanel>
+            <SafeTabPanel index={++idx}>
+              <GlobalSettings />
+            </SafeTabPanel>
+          </TabPanels>
+        </React.Suspense>
       </Tabs>
       <SwitchAccountDrawer
         onClose={() => setIsDrawerOpen(false)}
@@ -201,44 +217,4 @@ const AccountLanding = () => {
   );
 };
 
-export const accountIndexRoute = createRoute({
-  component: AccountLanding,
-  getParentRoute: () => accountRoute,
-  path: '/',
-});
-
-export const accountBillingRoute = createRoute({
-  component: Billing,
-  getParentRoute: () => accountIndexRoute,
-  path: 'billing'
-});
-
-export const accountUsersRoute = createRoute({
-  component: Users,
-  getParentRoute: () => accountIndexRoute,
-  path: 'users',
-});
-
-export const accountLoginHistoryRoute = createRoute({
-  component: AccountLogins,
-  getParentRoute: () => accountIndexRoute,
-  path: 'login-history',
-});
-
-export const accountServiceTransfersRoute = createRoute({
-  component: EntityTransfersLanding,
-  getParentRoute: () => accountIndexRoute,
-  path: 'service-transfers',
-});
-
-export const accountMaintenanceRoute = createRoute({
-  component: MaintenanceLanding,
-  getParentRoute: () => accountIndexRoute,
-  path: 'maintenance',
-});
-
-export const accountSettingsRoute = createRoute({
-  component: GlobalSettings,
-  getParentRoute: () => accountIndexRoute,
-  path: 'settings',
-});
+export default AccountLanding;
diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
index 9cc90842a23..25301b1d30e 100644
--- a/packages/manager/src/routes/account.tsx
+++ b/packages/manager/src/routes/account.tsx
@@ -3,15 +3,6 @@ import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
-import {
-  accountBillingRoute,
-  accountIndexRoute,
-  accountLoginHistoryRoute,
-  accountMaintenanceRoute,
-  accountServiceTransfersRoute,
-  accountSettingsRoute,
-  accountUsersRoute,
-} from 'src/features/Account/AccountLanding';
 
 import { rootRoute } from './root';
 import { strictLazyRouteComponent } from './utils';
@@ -25,12 +16,20 @@ export const AccountRoutes = () => {
   );
 };
 
-export const accountRoute = createRoute({
+const accountRoute = createRoute({
   component: AccountRoutes,
   getParentRoute: () => rootRoute,
   path: 'account',
 });
 
+const accountIndexRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Account/AccountLanding')
+  ),
+  getParentRoute: () => accountRoute,
+  path: '/',
+});
+
 const accountUsersUsernameRoute = createRoute({
   component: strictLazyRouteComponent(
     () => import('src/features/Users/UserDetail'),
@@ -57,6 +56,22 @@ const accountUsersUsernamePermissionsRoute = createRoute({
   path: 'users/$username/permissions',
 });
 
+const accountBillingRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Account/AccountLanding')
+  ),
+  getParentRoute: () => accountRoute,
+  path: 'billing',
+});
+
+const accountBillingEditRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Account/AccountLanding')
+  ),
+  getParentRoute: () => accountRoute,
+  path: 'billing/edit',
+});
+
 const accountInvoicesInvoiceIdRoute = createRoute({
   component: strictLazyRouteComponent(
     () => import('src/features/Billing/InvoiceDetail/InvoiceDetail'),
@@ -82,18 +97,13 @@ const accountEntityTransfersCreateRoute = createRoute({
 });
 
 export const accountRouteTree = accountRoute.addChildren([
+  accountIndexRoute,
   accountUsersUsernameRoute.addChildren([
     accountUsersUsernameProfileRoute,
     accountUsersUsernamePermissionsRoute,
   ]),
-  accountIndexRoute.addChildren([
-    accountBillingRoute,
-    accountUsersRoute,
-    accountLoginHistoryRoute,
-    accountServiceTransfersRoute,
-    accountMaintenanceRoute,
-    accountSettingsRoute,
-  ]),
+  accountBillingRoute,
+  accountBillingEditRoute,
   accountInvoicesInvoiceIdRoute,
   accountEntityTransfersCreateRoute,
 ]);

From f4826faea2c8fddf895f8d6834f8d6ec9c6dd11e Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 27 Sep 2024 09:33:47 -0400
Subject: [PATCH 14/45] event routes

---
 packages/manager/src/MainContentV2.tsx | 12 ----------
 packages/manager/src/routes/events.tsx | 32 ++++++++++++++++++++++++++
 packages/manager/src/routes/index.tsx  |  2 ++
 3 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 packages/manager/src/routes/events.tsx

diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
index 120556f9d95..33b344fe5b2 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/MainContentV2.tsx
@@ -12,11 +12,6 @@ import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 import { rootRoute } from './routes/root';
 
-const EventsLanding = React.lazy(() =>
-  import('src/features/Events/EventsLanding').then((module) => ({
-    default: module.EventsLanding,
-  }))
-);
 const AccountActivationLanding = React.lazy(
   () => import('src/components/AccountActivation/AccountActivationLanding')
 );
@@ -31,12 +26,6 @@ const CloudPulse = React.lazy(() =>
   }))
 );
 
-const eventsRoute = createRoute({
-  component: EventsLanding,
-  getParentRoute: () => rootRoute,
-  path: 'events',
-});
-
 const firewallsRoute = createRoute({
   component: Firewalls,
   getParentRoute: () => rootRoute,
@@ -84,7 +73,6 @@ const notFoundRoute = createRoute({
 // @ts-expect-error - TODO: Fix this type error
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const routeTree = rootRoute.addChildren([
-  eventsRoute,
   firewallsRoute,
   databasesRoute,
   betaRoute,
diff --git a/packages/manager/src/routes/events.tsx b/packages/manager/src/routes/events.tsx
new file mode 100644
index 00000000000..ab998572846
--- /dev/null
+++ b/packages/manager/src/routes/events.tsx
@@ -0,0 +1,32 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const EventsRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+export const eventsRoute = createRoute({
+  component: EventsRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'events',
+});
+
+const eventsIndexRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Events/EventsLanding'),
+    'EventsLanding'
+  ),
+  getParentRoute: () => eventsRoute,
+  path: '/',
+});
+
+export const eventsRouteTree = eventsRoute.addChildren([eventsIndexRoute]);
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index 87ad13c4671..b824a792b06 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -5,6 +5,7 @@ import { NotFound } from 'src/components/NotFound';
 
 import { accountRouteTree } from './account';
 import { domainsRouteTree } from './domains';
+import { eventsRouteTree } from './events';
 import { kubernetesRouteTree } from './kubernetes';
 import { linodesRouteTree } from './linodes';
 import { longviewRouteTree } from './longview';
@@ -33,6 +34,7 @@ export const routeTree = rootRoute.addChildren([
   indexRoute,
   accountRouteTree,
   domainsRouteTree,
+  eventsRouteTree,
   kubernetesRouteTree,
   linodesRouteTree,
   longviewRouteTree,

From e44e781cb770385d35e04598cd63761435177bef Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 27 Sep 2024 09:59:25 -0400
Subject: [PATCH 15/45] firewalls

---
 packages/manager/src/MainContentV2.tsx    | 18 -----
 packages/manager/src/routes/account.tsx   |  9 +++
 packages/manager/src/routes/firewalls.tsx | 97 +++++++++++++++++++++++
 packages/manager/src/routes/index.tsx     |  2 +
 4 files changed, 108 insertions(+), 18 deletions(-)
 create mode 100644 packages/manager/src/routes/firewalls.tsx

diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
index 33b344fe5b2..d18fe4cc7d0 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/MainContentV2.tsx
@@ -12,10 +12,6 @@ import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 import { rootRoute } from './routes/root';
 
-const AccountActivationLanding = React.lazy(
-  () => import('src/components/AccountActivation/AccountActivationLanding')
-);
-const Firewalls = React.lazy(() => import('src/features/Firewalls'));
 const Databases = React.lazy(() => import('src/features/Databases'));
 const BetaRoutes = React.lazy(() => import('src/features/Betas'));
 const VPC = React.lazy(() => import('src/features/VPCs'));
@@ -26,12 +22,6 @@ const CloudPulse = React.lazy(() =>
   }))
 );
 
-const firewallsRoute = createRoute({
-  component: Firewalls,
-  getParentRoute: () => rootRoute,
-  path: 'firewalls',
-});
-
 const databasesRoute = createRoute({
   component: Databases,
   getParentRoute: () => rootRoute,
@@ -56,12 +46,6 @@ const cloudPulseRoute = createRoute({
   path: 'monitor/cloudpulse',
 });
 
-const accountActivationRoute = createRoute({
-  component: AccountActivationLanding,
-  getParentRoute: () => rootRoute,
-  path: 'account-activation',
-});
-
 const notFoundRoute = createRoute({
   component: NotFound,
   getParentRoute: () => rootRoute,
@@ -73,12 +57,10 @@ const notFoundRoute = createRoute({
 // @ts-expect-error - TODO: Fix this type error
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const routeTree = rootRoute.addChildren([
-  firewallsRoute,
   databasesRoute,
   betaRoute,
   vpcRoute,
   cloudPulseRoute,
-  accountActivationRoute,
   notFoundRoute,
 ]);
 
diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
index 25301b1d30e..a3a06d96ea1 100644
--- a/packages/manager/src/routes/account.tsx
+++ b/packages/manager/src/routes/account.tsx
@@ -96,12 +96,21 @@ const accountEntityTransfersCreateRoute = createRoute({
   path: 'service-transfers/create',
 });
 
+const accountActivationLandingRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/components/AccountActivation/AccountActivationLanding')
+  ),
+  getParentRoute: () => rootRoute,
+  path: 'account-activation',
+});
+
 export const accountRouteTree = accountRoute.addChildren([
   accountIndexRoute,
   accountUsersUsernameRoute.addChildren([
     accountUsersUsernameProfileRoute,
     accountUsersUsernamePermissionsRoute,
   ]),
+  accountActivationLandingRoute,
   accountBillingRoute,
   accountBillingEditRoute,
   accountInvoicesInvoiceIdRoute,
diff --git a/packages/manager/src/routes/firewalls.tsx b/packages/manager/src/routes/firewalls.tsx
new file mode 100644
index 00000000000..5b36c0f289a
--- /dev/null
+++ b/packages/manager/src/routes/firewalls.tsx
@@ -0,0 +1,97 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const FirewallsRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Firewalls" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+const firewallsRoute = createRoute({
+  component: FirewallsRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'firewalls',
+});
+
+const firewallsIndexRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Firewalls/FirewallLanding/FirewallLanding')
+  ),
+  getParentRoute: () => firewallsRoute,
+  path: '/',
+});
+
+const firewallDetailRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Firewalls/FirewallDetail'),
+    'FirewallDetail'
+  ),
+  getParentRoute: () => firewallsRoute,
+  parseParams: (params) => ({
+    id: Number(params.id),
+  }),
+  path: '$id',
+});
+
+const firewallCreateRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Firewalls/FirewallLanding/FirewallLanding')
+  ),
+  getParentRoute: () => firewallsRoute,
+  path: 'create',
+});
+
+const firewallDetailRulesRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/Firewalls/FirewallDetail/Rules/FirewallRulesLanding'
+      ),
+    'FirewallRulesLanding'
+  ),
+  getParentRoute: () => firewallDetailRoute,
+  path: 'rules',
+});
+
+const firewallDetailLinodesRoute = createRoute({
+  component: strictLazyRouteComponent(() =>
+    import(
+      'src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding'
+    ).then((module) => ({
+      default: module.FirewallDeviceLanding,
+    }))
+  ),
+  getParentRoute: () => firewallDetailRoute,
+  path: 'linodes',
+});
+
+const firewallDetailNodebalancersRoute = createRoute({
+  component: strictLazyRouteComponent(() =>
+    import(
+      'src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding'
+    ).then((module) => ({
+      default: module.FirewallDeviceLanding,
+    }))
+  ),
+  getParentRoute: () => firewallDetailRoute,
+  path: 'nodebalancers',
+});
+
+export const firewallsRouteTree = firewallsRoute.addChildren([
+  firewallsIndexRoute,
+  firewallDetailRoute.addChildren([
+    firewallDetailLinodesRoute,
+    firewallDetailRulesRoute,
+    firewallDetailNodebalancersRoute,
+  ]),
+  firewallCreateRoute,
+]);
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index b824a792b06..50386b6f4fd 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -6,6 +6,7 @@ import { NotFound } from 'src/components/NotFound';
 import { accountRouteTree } from './account';
 import { domainsRouteTree } from './domains';
 import { eventsRouteTree } from './events';
+import { firewallsRouteTree } from './firewalls';
 import { kubernetesRouteTree } from './kubernetes';
 import { linodesRouteTree } from './linodes';
 import { longviewRouteTree } from './longview';
@@ -35,6 +36,7 @@ export const routeTree = rootRoute.addChildren([
   accountRouteTree,
   domainsRouteTree,
   eventsRouteTree,
+  firewallsRouteTree,
   kubernetesRouteTree,
   linodesRouteTree,
   longviewRouteTree,

From 3228ae1bef81378c57d252df17473d78264c5db5 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 27 Sep 2024 10:32:09 -0400
Subject: [PATCH 16/45] databases

---
 packages/manager/src/routes/databases.tsx | 100 ++++++++++++++++++++++
 packages/manager/src/routes/index.tsx     |   2 +
 2 files changed, 102 insertions(+)
 create mode 100644 packages/manager/src/routes/databases.tsx

diff --git a/packages/manager/src/routes/databases.tsx b/packages/manager/src/routes/databases.tsx
new file mode 100644
index 00000000000..1c9ae0ee0c7
--- /dev/null
+++ b/packages/manager/src/routes/databases.tsx
@@ -0,0 +1,100 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const DatabasesRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <DocumentTitleSegment segment="Databases" />
+      <ProductInformationBanner bannerLocation="Databases" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+const databasesRoute = createRoute({
+  component: DatabasesRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'databases',
+});
+
+const databasesIndexRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Databases/DatabaseLanding')
+  ),
+  getParentRoute: () => databasesRoute,
+  path: '/',
+});
+
+const databasesCreateRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Databases/DatabaseCreate')
+  ),
+  getParentRoute: () => databasesRoute,
+  path: 'create',
+});
+
+const databasesDetailRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Databases/DatabaseDetail')
+  ),
+  getParentRoute: () => databasesRoute,
+  parseParams: (params) => ({
+    databaseId: Number(params.databaseId),
+    engine: params.engine,
+  }),
+  path: '$engine/$databaseId',
+});
+
+const databasesDetailSummaryRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Databases/DatabaseDetail/DatabaseSummary')
+  ),
+  getParentRoute: () => databasesDetailRoute,
+  path: 'summary',
+});
+
+const databasesDetailBackupsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Databases/DatabaseDetail/DatabaseBackups')
+  ),
+  getParentRoute: () => databasesDetailRoute,
+  path: 'backups',
+});
+
+const databasesDetailResizeRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () =>
+      import(
+        'src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize'
+      ),
+    'DatabaseResize'
+  ),
+  getParentRoute: () => databasesDetailRoute,
+  path: 'resize',
+});
+
+const databasesDetailSettingsRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Databases/DatabaseDetail/DatabaseSettings')
+  ),
+  getParentRoute: () => databasesDetailRoute,
+  path: 'settings',
+});
+
+export const databasesRouteTree = databasesRoute.addChildren([
+  databasesIndexRoute,
+  databasesCreateRoute,
+  databasesDetailRoute.addChildren([
+    databasesDetailSummaryRoute,
+    databasesDetailBackupsRoute,
+    databasesDetailResizeRoute,
+    databasesDetailSettingsRoute,
+  ]),
+]);
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index 50386b6f4fd..f4eff1beac6 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { NotFound } from 'src/components/NotFound';
 
 import { accountRouteTree } from './account';
+import { databasesRouteTree } from './databases';
 import { domainsRouteTree } from './domains';
 import { eventsRouteTree } from './events';
 import { firewallsRouteTree } from './firewalls';
@@ -34,6 +35,7 @@ const indexRoute = createRoute({
 export const routeTree = rootRoute.addChildren([
   indexRoute,
   accountRouteTree,
+  databasesRouteTree,
   domainsRouteTree,
   eventsRouteTree,
   firewallsRouteTree,

From cc7fae1f3f5325408f0e64c24e90d78c5158c69d Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 27 Sep 2024 10:32:47 -0400
Subject: [PATCH 17/45] update maincontent v2

---
 packages/manager/src/MainContentV2.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
index d18fe4cc7d0..d141465d447 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/MainContentV2.tsx
@@ -12,7 +12,6 @@ import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 import { rootRoute } from './routes/root';
 
-const Databases = React.lazy(() => import('src/features/Databases'));
 const BetaRoutes = React.lazy(() => import('src/features/Betas'));
 const VPC = React.lazy(() => import('src/features/VPCs'));
 
@@ -22,12 +21,6 @@ const CloudPulse = React.lazy(() =>
   }))
 );
 
-const databasesRoute = createRoute({
-  component: Databases,
-  getParentRoute: () => rootRoute,
-  path: 'databases',
-});
-
 const betaRoute = createRoute({
   component: BetaRoutes,
   getParentRoute: () => rootRoute,
@@ -57,7 +50,6 @@ const notFoundRoute = createRoute({
 // @ts-expect-error - TODO: Fix this type error
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const routeTree = rootRoute.addChildren([
-  databasesRoute,
   betaRoute,
   vpcRoute,
   cloudPulseRoute,

From 7846dc0a327aa3b748c495dbfc431d66e0c999cf Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 27 Sep 2024 10:39:03 -0400
Subject: [PATCH 18/45] betas

---
 packages/manager/src/MainContentV2.tsx |  8 -----
 packages/manager/src/routes/betas.tsx  | 44 ++++++++++++++++++++++++++
 packages/manager/src/routes/index.tsx  |  2 ++
 3 files changed, 46 insertions(+), 8 deletions(-)
 create mode 100644 packages/manager/src/routes/betas.tsx

diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
index d141465d447..d276e7374a4 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/MainContentV2.tsx
@@ -12,7 +12,6 @@ import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 import { rootRoute } from './routes/root';
 
-const BetaRoutes = React.lazy(() => import('src/features/Betas'));
 const VPC = React.lazy(() => import('src/features/VPCs'));
 
 const CloudPulse = React.lazy(() =>
@@ -21,12 +20,6 @@ const CloudPulse = React.lazy(() =>
   }))
 );
 
-const betaRoute = createRoute({
-  component: BetaRoutes,
-  getParentRoute: () => rootRoute,
-  path: 'betas',
-});
-
 const vpcRoute = createRoute({
   component: VPC,
   getParentRoute: () => rootRoute,
@@ -50,7 +43,6 @@ const notFoundRoute = createRoute({
 // @ts-expect-error - TODO: Fix this type error
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const routeTree = rootRoute.addChildren([
-  betaRoute,
   vpcRoute,
   cloudPulseRoute,
   notFoundRoute,
diff --git a/packages/manager/src/routes/betas.tsx b/packages/manager/src/routes/betas.tsx
new file mode 100644
index 00000000000..961cc083084
--- /dev/null
+++ b/packages/manager/src/routes/betas.tsx
@@ -0,0 +1,44 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const BetaRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <ProductInformationBanner bannerLocation="Volumes" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+const betaRoute = createRoute({
+  component: BetaRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'betas',
+});
+
+const betaLandingRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Betas/BetasLanding')
+  ),
+  getParentRoute: () => betaRoute,
+  path: '/',
+});
+
+const betaSignupRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/Betas/BetaSignup')
+  ),
+  getParentRoute: () => betaRoute,
+  path: 'signup',
+});
+
+export const betaRouteTree = betaRoute.addChildren([
+  betaLandingRoute,
+  betaSignupRoute,
+]);
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index f4eff1beac6..aa7dbf9a636 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { NotFound } from 'src/components/NotFound';
 
 import { accountRouteTree } from './account';
+import { betaRouteTree } from './betas';
 import { databasesRouteTree } from './databases';
 import { domainsRouteTree } from './domains';
 import { eventsRouteTree } from './events';
@@ -35,6 +36,7 @@ const indexRoute = createRoute({
 export const routeTree = rootRoute.addChildren([
   indexRoute,
   accountRouteTree,
+  betaRouteTree,
   databasesRouteTree,
   domainsRouteTree,
   eventsRouteTree,

From 861fe764c5e9b4e354c0fdbd77d61fdde3bed75a Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 27 Sep 2024 10:50:16 -0400
Subject: [PATCH 19/45] VPCs

---
 packages/manager/src/MainContentV2.tsx | 14 +------
 packages/manager/src/routes/betas.tsx  |  2 -
 packages/manager/src/routes/index.tsx  |  2 +
 packages/manager/src/routes/vpcs.tsx   | 55 ++++++++++++++++++++++++++
 4 files changed, 58 insertions(+), 15 deletions(-)
 create mode 100644 packages/manager/src/routes/vpcs.tsx

diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
index d276e7374a4..ec2b2f121ff 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/MainContentV2.tsx
@@ -12,20 +12,12 @@ import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 import { rootRoute } from './routes/root';
 
-const VPC = React.lazy(() => import('src/features/VPCs'));
-
 const CloudPulse = React.lazy(() =>
   import('src/features/CloudPulse/CloudPulseLanding').then((module) => ({
     default: module.CloudPulseLanding,
   }))
 );
 
-const vpcRoute = createRoute({
-  component: VPC,
-  getParentRoute: () => rootRoute,
-  path: 'vpcs',
-});
-
 const cloudPulseRoute = createRoute({
   component: CloudPulse,
   getParentRoute: () => rootRoute,
@@ -42,11 +34,7 @@ const notFoundRoute = createRoute({
 // TODO: TanStackRouter - continue exporting this
 // @ts-expect-error - TODO: Fix this type error
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const routeTree = rootRoute.addChildren([
-  vpcRoute,
-  cloudPulseRoute,
-  notFoundRoute,
-]);
+const routeTree = rootRoute.addChildren([cloudPulseRoute, notFoundRoute]);
 
 export const MainContentV2 = () => {
   const { data: accountSettings } = useAccountSettings();
diff --git a/packages/manager/src/routes/betas.tsx b/packages/manager/src/routes/betas.tsx
index 961cc083084..35b6fe193dc 100644
--- a/packages/manager/src/routes/betas.tsx
+++ b/packages/manager/src/routes/betas.tsx
@@ -1,7 +1,6 @@
 import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
-import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
@@ -10,7 +9,6 @@ import { strictLazyRouteComponent } from './utils';
 export const BetaRoutes = () => {
   return (
     <React.Suspense fallback={<SuspenseLoader />}>
-      <ProductInformationBanner bannerLocation="Volumes" />
       <Outlet />
     </React.Suspense>
   );
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index aa7dbf9a636..f3e573b949d 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -21,6 +21,7 @@ import { rootRoute } from './root';
 import { stackScriptsRouteTree } from './stackscripts';
 import { supportRouteTree } from './support';
 import { volumesRouteTree } from './volumes';
+import { vpcsRouteTree } from './vpcs';
 
 const indexRoute = createRoute({
   beforeLoad: ({ context }) => {
@@ -52,6 +53,7 @@ export const routeTree = rootRoute.addChildren([
   stackScriptsRouteTree,
   supportRouteTree,
   volumesRouteTree,
+  vpcsRouteTree,
 ]);
 
 export const router = createRouter({
diff --git a/packages/manager/src/routes/vpcs.tsx b/packages/manager/src/routes/vpcs.tsx
new file mode 100644
index 00000000000..004a233884c
--- /dev/null
+++ b/packages/manager/src/routes/vpcs.tsx
@@ -0,0 +1,55 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const VPCRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <DocumentTitleSegment segment="VPC" />
+      <ProductInformationBanner bannerLocation="VPC" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+const vpcsRoute = createRoute({
+  component: VPCRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'vpcs',
+});
+
+const vpcsLandingRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/VPCs/VPCLanding/VPCLanding')
+  ),
+  getParentRoute: () => vpcsRoute,
+  path: '/',
+});
+
+const vpcsCreateRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/VPCs/VPCCreate/VPCCreate')
+  ),
+  getParentRoute: () => vpcsRoute,
+  path: 'create',
+});
+
+const vpcsDetailRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/VPCs/VPCDetail/VPCDetail')
+  ),
+  getParentRoute: () => vpcsRoute,
+  path: '$vpcId',
+});
+
+export const vpcsRouteTree = vpcsRoute.addChildren([
+  vpcsLandingRoute,
+  vpcsCreateRoute,
+  vpcsDetailRoute,
+]);

From 0fb58fd531f346467baa6361d1df30f82067eda6 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 27 Sep 2024 11:00:28 -0400
Subject: [PATCH 20/45] Cloud pulse and cleanup

---
 packages/manager/src/MainContentV2.tsx     | 28 +----------------
 packages/manager/src/routes/cloudPulse.tsx | 36 ++++++++++++++++++++++
 packages/manager/src/routes/index.tsx      |  2 ++
 3 files changed, 39 insertions(+), 27 deletions(-)
 create mode 100644 packages/manager/src/routes/cloudPulse.tsx

diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/MainContentV2.tsx
index ec2b2f121ff..946c0ae1504 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/MainContentV2.tsx
@@ -1,7 +1,6 @@
-import { RouterProvider, createRoute } from '@tanstack/react-router';
+import { RouterProvider } from '@tanstack/react-router';
 import * as React from 'react';
 
-import { NotFound } from 'src/components/NotFound';
 import { useFlags } from 'src/hooks/useFlags';
 import { useGlobalErrors } from 'src/hooks/useGlobalErrors';
 
@@ -10,31 +9,6 @@ import { useIsDatabasesEnabled } from './features/Databases/utilities';
 import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
 import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
-import { rootRoute } from './routes/root';
-
-const CloudPulse = React.lazy(() =>
-  import('src/features/CloudPulse/CloudPulseLanding').then((module) => ({
-    default: module.CloudPulseLanding,
-  }))
-);
-
-const cloudPulseRoute = createRoute({
-  component: CloudPulse,
-  getParentRoute: () => rootRoute,
-  path: 'monitor/cloudpulse',
-});
-
-const notFoundRoute = createRoute({
-  component: NotFound,
-  getParentRoute: () => rootRoute,
-  path: '*',
-});
-
-// Create the route tree
-// TODO: TanStackRouter - continue exporting this
-// @ts-expect-error - TODO: Fix this type error
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const routeTree = rootRoute.addChildren([cloudPulseRoute, notFoundRoute]);
 
 export const MainContentV2 = () => {
   const { data: accountSettings } = useAccountSettings();
diff --git a/packages/manager/src/routes/cloudPulse.tsx b/packages/manager/src/routes/cloudPulse.tsx
new file mode 100644
index 00000000000..654617c4b4a
--- /dev/null
+++ b/packages/manager/src/routes/cloudPulse.tsx
@@ -0,0 +1,36 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+
+import { rootRoute } from './root';
+import { strictLazyRouteComponent } from './utils';
+
+export const CloudPulseRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <DocumentTitleSegment segment="Cloud Pulse" />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+const cloudPulseRoute = createRoute({
+  component: CloudPulseRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'monitor/cloudpulse',
+});
+
+const cloudPulseLandingRoute = createRoute({
+  component: strictLazyRouteComponent(
+    () => import('src/features/CloudPulse/CloudPulseLanding'),
+    'CloudPulseLanding'
+  ),
+  getParentRoute: () => cloudPulseRoute,
+  path: '/',
+});
+
+export const cloudPulseRouteTree = cloudPulseRoute.addChildren([
+  cloudPulseLandingRoute,
+]);
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index f3e573b949d..329ef2cdfcd 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -5,6 +5,7 @@ import { NotFound } from 'src/components/NotFound';
 
 import { accountRouteTree } from './account';
 import { betaRouteTree } from './betas';
+import { cloudPulseRouteTree } from './cloudPulse';
 import { databasesRouteTree } from './databases';
 import { domainsRouteTree } from './domains';
 import { eventsRouteTree } from './events';
@@ -38,6 +39,7 @@ export const routeTree = rootRoute.addChildren([
   indexRoute,
   accountRouteTree,
   betaRouteTree,
+  cloudPulseRouteTree,
   databasesRouteTree,
   domainsRouteTree,
   eventsRouteTree,

From 21671316ef6a7041833b0ae46558327248d28245 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 27 Sep 2024 11:14:08 -0400
Subject: [PATCH 21/45] Rename MainContentV2 to Router

---
 packages/manager/src/App.tsx                           | 6 +++---
 packages/manager/src/{MainContentV2.tsx => Router.tsx} | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/manager/src/{MainContentV2.tsx => Router.tsx} (96%)

diff --git a/packages/manager/src/App.tsx b/packages/manager/src/App.tsx
index d3b15ab59ef..78645b3aa5a 100644
--- a/packages/manager/src/App.tsx
+++ b/packages/manager/src/App.tsx
@@ -14,9 +14,9 @@ import { GoTo } from './GoTo';
 import { useAdobeAnalytics } from './hooks/useAdobeAnalytics';
 import { useInitialRequests } from './hooks/useInitialRequests';
 import { useNewRelic } from './hooks/useNewRelic';
-// import { MainContent } from './MainContent';
-import { MainContentV2 } from './MainContentV2';
 import { useEventsPoller } from './queries/events/events';
+// import { MainContent } from './MainContent';
+import { Router } from './Router';
 import { useSetupFeatureFlags } from './useSetupFeatureFlags';
 
 // Ensure component's display name is 'App'
@@ -48,7 +48,7 @@ const BaseApp = withDocumentTitleProvider(
         <GoTo />
         <DocumentTitleSegment segment="Akamai Cloud Manager" />
         {/* <MainContent /> */}
-        <MainContentV2 />
+        <Router />
         <GlobalListeners />
       </ErrorBoundary>
     );
diff --git a/packages/manager/src/MainContentV2.tsx b/packages/manager/src/Router.tsx
similarity index 96%
rename from packages/manager/src/MainContentV2.tsx
rename to packages/manager/src/Router.tsx
index 946c0ae1504..a10be660d77 100644
--- a/packages/manager/src/MainContentV2.tsx
+++ b/packages/manager/src/Router.tsx
@@ -10,7 +10,7 @@ import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
 import { useAccountSettings } from './queries/account/settings';
 import { router } from './routes';
 
-export const MainContentV2 = () => {
+export const Router = () => {
   const { data: accountSettings } = useAccountSettings();
   const { isDatabasesEnabled } = useIsDatabasesEnabled();
   const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();

From cd8f3785967535142e4f2fc437a07599d9ea5dff Mon Sep 17 00:00:00 2001
From: Banks Nussman <banks@nussman.us>
Date: Fri, 27 Sep 2024 12:23:57 -0400
Subject: [PATCH 22/45] update vpc routes to use reccomended lazy routing

---
 .../src/features/VPCs/VPCCreate/VPCCreate.tsx |  5 ++++
 .../src/features/VPCs/VPCDetail/VPCDetail.tsx |  5 ++++
 .../features/VPCs/VPCLanding/VPCLanding.tsx   |  5 ++++
 packages/manager/src/routes/vpcs.tsx          | 24 +++++++++----------
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx
index 2698ebb1635..742badedd7d 100644
--- a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx
+++ b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx
@@ -14,6 +14,7 @@ import { useCreateVPC } from 'src/hooks/useCreateVPC';
 import { CannotCreateVPCNotice } from './FormComponents/CannotCreateVPCNotice';
 import { StyledHeaderTypography } from './FormComponents/VPCCreateForm.styles';
 import { VPCTopSectionContent } from './FormComponents/VPCTopSectionContent';
+import { createLazyRoute } from '@tanstack/react-router';
 
 const VPCCreate = () => {
   const {
@@ -85,6 +86,10 @@ const VPCCreate = () => {
   );
 };
 
+export const vpcCreateRoute = createLazyRoute('/vpcs/create')({
+  component: VPCCreate,
+});
+
 const StyledActionsPanel = styled(ActionsPanel, {
   label: 'StyledActionsPanel',
 })(({ theme }) => ({
diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
index 46ee3584406..e5f61b084eb 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
@@ -28,6 +28,7 @@ import {
   StyledSummaryTextTypography,
 } from './VPCDetail.styles';
 import { VPCSubnetsTable } from './VPCSubnetsTable';
+import { createLazyRoute } from '@tanstack/react-router';
 
 const VPCDetail = () => {
   const { vpcId } = useParams<{ vpcId: string }>();
@@ -214,4 +215,8 @@ const VPCDetail = () => {
   );
 };
 
+export const vpcDetailRoute = createLazyRoute('/vpcs/$vpcId')({
+  component: VPCDetail,
+});
+
 export default VPCDetail;
diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
index 423e4ac7f67..faf39fbf3b3 100644
--- a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
+++ b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
@@ -23,6 +23,7 @@ import { VPCDeleteDialog } from './VPCDeleteDialog';
 import { VPCEditDrawer } from './VPCEditDrawer';
 import { VPCEmptyState } from './VPCEmptyState';
 import { VPCRow } from './VPCRow';
+import { createLazyRoute } from '@tanstack/react-router';
 
 const preferenceKey = 'vpcs';
 const VPC_CREATE_ROUTE = 'vpcs/create';
@@ -169,4 +170,8 @@ const VPCLanding = () => {
   );
 };
 
+export const vpcLandingRoute = createLazyRoute('/')({
+  component: VPCLanding,
+});
+
 export default VPCLanding;
diff --git a/packages/manager/src/routes/vpcs.tsx b/packages/manager/src/routes/vpcs.tsx
index 004a233884c..fc432e0d8da 100644
--- a/packages/manager/src/routes/vpcs.tsx
+++ b/packages/manager/src/routes/vpcs.tsx
@@ -6,7 +6,6 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const VPCRoutes = () => {
   return (
@@ -25,28 +24,27 @@ const vpcsRoute = createRoute({
 });
 
 const vpcsLandingRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/VPCs/VPCLanding/VPCLanding')
-  ),
   getParentRoute: () => vpcsRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/VPCs/VPCLanding/VPCLanding').then(
+    (m) => m.vpcLandingRoute
+  )
+);
 
 const vpcsCreateRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/VPCs/VPCCreate/VPCCreate')
-  ),
   getParentRoute: () => vpcsRoute,
   path: 'create',
-});
+}).lazy(() =>
+  import('src/features/VPCs/VPCCreate/VPCCreate').then((m) => m.vpcCreateRoute)
+);
 
 const vpcsDetailRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/VPCs/VPCDetail/VPCDetail')
-  ),
   getParentRoute: () => vpcsRoute,
   path: '$vpcId',
-});
+}).lazy(() =>
+  import('src/features/VPCs/VPCDetail/VPCDetail').then((m) => m.vpcDetailRoute)
+);
 
 export const vpcsRouteTree = vpcsRoute.addChildren([
   vpcsLandingRoute,

From 4120de5dae3c166700a602c4ad695a8141b553cc Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 27 Sep 2024 16:15:29 -0400
Subject: [PATCH 23/45] support and volumes lazy imports

---
 .../manager/src/features/Help/HelpLanding.tsx |  5 +++
 .../SupportSearchLanding.tsx                  | 14 +++++--
 .../SupportTicketDetail.tsx                   | 10 ++++-
 .../SupportTickets/SupportTicketsLanding.tsx  |  5 +++
 .../features/VPCs/VPCLanding/VPCLanding.tsx   |  5 ++-
 .../src/features/Volumes/VolumeCreate.tsx     |  5 +++
 .../src/features/Volumes/VolumesLanding.tsx   |  5 +++
 packages/manager/src/routes/support.tsx       | 38 +++++++++----------
 packages/manager/src/routes/volumes.tsx       | 21 ++++------
 9 files changed, 69 insertions(+), 39 deletions(-)

diff --git a/packages/manager/src/features/Help/HelpLanding.tsx b/packages/manager/src/features/Help/HelpLanding.tsx
index 20428f2130a..1149af9c985 100644
--- a/packages/manager/src/features/Help/HelpLanding.tsx
+++ b/packages/manager/src/features/Help/HelpLanding.tsx
@@ -1,4 +1,5 @@
 import { styled } from '@mui/material/styles';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -25,3 +26,7 @@ const StyledRootContainer = styled('div', {
     padding: `${theme.spacing(2)} ${theme.spacing(14)}`,
   },
 }));
+
+export const helpLandingRoute = createLazyRoute('/')({
+  component: HelpLanding,
+});
diff --git a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx
index 9d3e1179cb0..d920d13fd75 100644
--- a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx
+++ b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx
@@ -1,6 +1,6 @@
 import Search from '@mui/icons-material/Search';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
@@ -13,10 +13,14 @@ import { TextField } from 'src/components/TextField';
 import { COMMUNITY_SEARCH_URL, DOCS_SEARCH_URL } from 'src/constants';
 import { getQueryParamFromQueryString } from 'src/utilities/queryParams';
 
-import withSearch, { AlgoliaState as AlgoliaProps } from '../SearchHOC';
-import { DocumentationResults, SearchResult } from './DocumentationResults';
+import withSearch from '../SearchHOC';
+import { DocumentationResults } from './DocumentationResults';
 import HelpResources from './HelpResources';
 
+import type { AlgoliaState as AlgoliaProps } from '../SearchHOC';
+import type { SearchResult } from './DocumentationResults';
+import type { Theme } from '@mui/material/styles';
+
 const useStyles = makeStyles()((theme: Theme) => ({
   searchBar: {
     maxWidth: '100%',
@@ -122,3 +126,7 @@ const SupportSearchLanding = (props: AlgoliaProps) => {
 export default withSearch({ highlight: false, hitsPerPage: 5 })(
   SupportSearchLanding
 );
+
+export const supportSearchLandingRoute = createLazyRoute('/support/search')({
+  component: SupportSearchLanding,
+});
diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
index 2a7ffe83198..64b2ef6ddb4 100644
--- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
+++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
@@ -1,6 +1,6 @@
-import { SupportReply } from '@linode/api-v4/lib/support';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
@@ -24,6 +24,8 @@ import { AttachmentError } from './AttachmentError';
 import { ReplyContainer } from './TabbedReply/ReplyContainer';
 import { TicketStatus } from './TicketStatus';
 
+import type { SupportReply } from '@linode/api-v4/lib/support';
+
 export interface AttachmentError {
   error: string;
   file: string;
@@ -152,3 +154,9 @@ const StyledStack = styled(Stack, {
   marginLeft: theme.spacing(),
   marginRight: theme.spacing(),
 }));
+
+export const supportTicketDetailRoute = createLazyRoute(
+  '/support/tickets/$ticketId'
+)({
+  component: SupportTicketDetail,
+});
diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketsLanding.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketsLanding.tsx
index 6e4ff9fb3f3..ef25a50d79a 100644
--- a/packages/manager/src/features/Support/SupportTickets/SupportTicketsLanding.tsx
+++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketsLanding.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
@@ -97,3 +98,7 @@ const SupportTicketsLanding = () => {
 };
 
 export default SupportTicketsLanding;
+
+export const supportTicketsLandingRoute = createLazyRoute('/support/tickets')({
+  component: SupportTicketsLanding,
+});
diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
index faf39fbf3b3..eb671220d7a 100644
--- a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
+++ b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
@@ -1,4 +1,4 @@
-import { VPC } from '@linode/api-v4/lib/vpcs/types';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -23,7 +23,8 @@ import { VPCDeleteDialog } from './VPCDeleteDialog';
 import { VPCEditDrawer } from './VPCEditDrawer';
 import { VPCEmptyState } from './VPCEmptyState';
 import { VPCRow } from './VPCRow';
-import { createLazyRoute } from '@tanstack/react-router';
+
+import type { VPC } from '@linode/api-v4/lib/vpcs/types';
 
 const preferenceKey = 'vpcs';
 const VPC_CREATE_ROUTE = 'vpcs/create';
diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx
index c9136f19f5c..5e349c7eec3 100644
--- a/packages/manager/src/features/Volumes/VolumeCreate.tsx
+++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx
@@ -1,5 +1,6 @@
 import { CreateVolumeSchema } from '@linode/validation/lib/volumes.schema';
 import { useTheme } from '@mui/material/styles';
+import { createLazyRoute } from '@tanstack/react-router';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -545,3 +546,7 @@ const initialValues: FormState = {
   region: '',
   size: 20,
 };
+
+export const volumeCreateRoute = createLazyRoute('/volumes/create')({
+  component: VolumeCreate,
+});
diff --git a/packages/manager/src/features/Volumes/VolumesLanding.tsx b/packages/manager/src/features/Volumes/VolumesLanding.tsx
index 78a4e2cf176..09e9832d4f9 100644
--- a/packages/manager/src/features/Volumes/VolumesLanding.tsx
+++ b/packages/manager/src/features/Volumes/VolumesLanding.tsx
@@ -1,4 +1,5 @@
 import CloseIcon from '@mui/icons-material/Close';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { debounce } from 'throttle-debounce';
@@ -328,3 +329,7 @@ export const VolumesLanding = () => {
 };
 
 export default VolumesLanding;
+
+export const volumesLandingRoute = createLazyRoute('/')({
+  component: VolumesLanding,
+});
diff --git a/packages/manager/src/routes/support.tsx b/packages/manager/src/routes/support.tsx
index e0454d621ca..da51a276f01 100644
--- a/packages/manager/src/routes/support.tsx
+++ b/packages/manager/src/routes/support.tsx
@@ -5,7 +5,6 @@ import { SuspenseLoader } from 'src/components/SuspenseLoader';
 import { StatusBanners } from 'src/features/Help/StatusBanners';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const SupportTicketsRoutes = () => {
   return (
@@ -24,42 +23,41 @@ const SupportRoute = createRoute({
 });
 
 const SupportLandingRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Help/HelpLanding'),
-    'HelpLanding'
-  ),
   getParentRoute: () => SupportRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Help/HelpLanding').then((m) => m.helpLandingRoute)
+);
 
 const SupportTicketsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Support/SupportTickets/SupportTicketsLanding')
-  ),
   getParentRoute: () => SupportRoute,
   path: 'tickets',
-});
+}).lazy(() =>
+  import('src/features/Support/SupportTickets/SupportTicketsLanding').then(
+    (m) => m.supportTicketsLandingRoute
+  )
+);
 
 const SupportTicketDetailRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import('src/features/Support/SupportTicketDetail/SupportTicketDetail'),
-    'SupportTicketDetail'
-  ),
   getParentRoute: () => SupportTicketsRoute,
   parseParams: (params) => ({
     ticketId: Number(params.ticketId),
   }),
   path: '$ticketId',
-});
+}).lazy(() =>
+  import('src/features/Support/SupportTicketDetail/SupportTicketDetail').then(
+    (m) => m.supportTicketDetailRoute
+  )
+);
 
 const SupportSearchLandingRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Help/SupportSearchLanding/SupportSearchLanding')
-  ),
   getParentRoute: () => SupportRoute,
   path: 'search',
-});
+}).lazy(() =>
+  import('src/features/Help/SupportSearchLanding/SupportSearchLanding').then(
+    (m) => m.supportSearchLandingRoute
+  )
+);
 
 export const supportRouteTree = SupportRoute.addChildren([
   SupportLandingRoute,
diff --git a/packages/manager/src/routes/volumes.tsx b/packages/manager/src/routes/volumes.tsx
index f7239c29bb7..4078f00bd1e 100644
--- a/packages/manager/src/routes/volumes.tsx
+++ b/packages/manager/src/routes/volumes.tsx
@@ -5,7 +5,6 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const VolumesRoutes = () => {
   return (
@@ -23,24 +22,20 @@ const volumesRoute = createRoute({
 });
 
 const volumesIndexRoute = createRoute({
-  component: strictLazyRouteComponent(() =>
-    import('src/features/Volumes/VolumesLanding').then((module) => ({
-      default: module.VolumesLanding,
-    }))
-  ),
   getParentRoute: () => volumesRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Volumes/VolumesLanding').then(
+    (m) => m.volumesLandingRoute
+  )
+);
 
 const volumesCreateRoute = createRoute({
-  component: strictLazyRouteComponent(() =>
-    import('src/features/Volumes/VolumeCreate').then((module) => ({
-      default: module.VolumeCreate,
-    }))
-  ),
   getParentRoute: () => volumesRoute,
   path: 'create',
-});
+}).lazy(() =>
+  import('src/features/Volumes/VolumeCreate').then((m) => m.volumeCreateRoute)
+);
 
 export const volumesRouteTree = volumesRoute.addChildren([
   volumesIndexRoute,

From 5093af7231fdfafac2cd95403357210c817bd014 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Sat, 28 Sep 2024 13:22:24 -0400
Subject: [PATCH 24/45] post rebase yarn

---
 yarn.lock | 39 ++++++++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 178af8e5d45..683fbbbdd36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1917,19 +1917,11 @@
   dependencies:
     "@swc/counter" "^0.1.3"
 
-<<<<<<< HEAD
-=======
-"@swc/types@^0.1.5":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.5.tgz#043b731d4f56a79b4897a3de1af35e75d56bc63a"
-  integrity sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==
-
 "@tanstack/history@1.57.6":
   version "1.57.6"
   resolved "https://registry.yarnpkg.com/@tanstack/history/-/history-1.57.6.tgz#665d6bb2451ffb07db3596fe74e2f7be03c941b6"
   integrity sha512-ppAJbnUaHdHmccVmplcd1ivX4GMPHxhStSquuuz0TSAEPEpz0iOVBur4iKfvIuMKm24c40nhvaEwZbKGVfbrGg==
 
->>>>>>> 6af28ac180 (Initial commit: proof of concept)
 "@tanstack/query-core@5.51.24":
   version "5.51.24"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.51.24.tgz#da901637c8652ba5703b92bd07496e7c9ae27836"
@@ -9275,7 +9267,7 @@ string-argv@~0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9293,6 +9285,15 @@ string-width@^3.0.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -9373,7 +9374,7 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9387,6 +9388,13 @@ strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -10337,7 +10345,7 @@ word-wrap@^1.2.5, word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10355,6 +10363,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 5fcb6783d61f8c1e367b0fca314810986896beb1 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Sat, 28 Sep 2024 14:41:55 -0400
Subject: [PATCH 25/45] lazy imports/exports stackscripts, volumes, profile

---
 .../manager/src/features/Help/HelpLanding.tsx |  2 +-
 .../SupportSearchLanding.tsx                  |  8 +-
 .../features/Profile/APITokens/APITokens.tsx  |  5 +
 .../AuthenticationSettings.tsx                |  9 +-
 .../DisplaySettings/DisplaySettings.tsx       |  5 +
 .../Profile/LishSettings/LishSettings.tsx     |  6 ++
 .../Profile/OAuthClients/OAuthClients.tsx     |  5 +
 .../features/Profile/Referrals/Referrals.tsx  |  5 +
 .../src/features/Profile/SSHKeys/SSHKeys.tsx  |  5 +
 .../features/Profile/Settings/Settings.tsx    |  8 +-
 .../StackScripts/StackScriptsLanding.tsx      |  8 +-
 .../SupportTicketDetail.tsx                   |  2 +-
 .../SupportTickets/SupportTicketsLanding.tsx  |  4 +-
 .../src/features/VPCs/VPCCreate/VPCCreate.tsx |  2 +-
 .../src/features/VPCs/VPCDetail/VPCDetail.tsx | 10 +-
 .../features/VPCs/VPCLanding/VPCLanding.tsx   |  2 +-
 .../src/features/Volumes/VolumeCreate.tsx     |  2 +-
 .../src/features/Volumes/VolumesLanding.tsx   |  2 +-
 packages/manager/src/routes/profile.tsx       | 91 +++++++++----------
 packages/manager/src/routes/stackscripts.tsx  | 53 +++++------
 packages/manager/src/routes/support.tsx       |  8 +-
 packages/manager/src/routes/volumes.tsx       |  6 +-
 packages/manager/src/routes/vpcs.tsx          | 10 +-
 23 files changed, 153 insertions(+), 105 deletions(-)

diff --git a/packages/manager/src/features/Help/HelpLanding.tsx b/packages/manager/src/features/Help/HelpLanding.tsx
index 1149af9c985..ccceedfd71c 100644
--- a/packages/manager/src/features/Help/HelpLanding.tsx
+++ b/packages/manager/src/features/Help/HelpLanding.tsx
@@ -27,6 +27,6 @@ const StyledRootContainer = styled('div', {
   },
 }));
 
-export const helpLandingRoute = createLazyRoute('/')({
+export const helpLandingLazyRoute = createLazyRoute('/')({
   component: HelpLanding,
 });
diff --git a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx
index d920d13fd75..0e549541967 100644
--- a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx
+++ b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx
@@ -127,6 +127,8 @@ export default withSearch({ highlight: false, hitsPerPage: 5 })(
   SupportSearchLanding
 );
 
-export const supportSearchLandingRoute = createLazyRoute('/support/search')({
-  component: SupportSearchLanding,
-});
+export const supportSearchLandingLazyRoute = createLazyRoute('/support/search')(
+  {
+    component: SupportSearchLanding,
+  }
+);
diff --git a/packages/manager/src/features/Profile/APITokens/APITokens.tsx b/packages/manager/src/features/Profile/APITokens/APITokens.tsx
index 4baf13039a8..5acd5364415 100644
--- a/packages/manager/src/features/Profile/APITokens/APITokens.tsx
+++ b/packages/manager/src/features/Profile/APITokens/APITokens.tsx
@@ -1,4 +1,5 @@
 import { Stack } from '@mui/material';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -20,3 +21,7 @@ export const APITokens = () => {
     </Stack>
   );
 };
+
+export const APITokensLazyRoute = createLazyRoute('/profile/tokens')({
+  component: APITokens,
+});
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx
index 149d99a8fff..335259ccf1f 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx
@@ -1,4 +1,5 @@
 import { styled } from '@mui/material/styles';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 
@@ -13,8 +14,8 @@ import { useProfile } from 'src/queries/profile/profile';
 
 import { PhoneVerification } from './PhoneVerification/PhoneVerification';
 import { ResetPassword } from './ResetPassword';
-import { SMSMessaging } from './SMSMessaging';
 import { SecurityQuestions } from './SecurityQuestions/SecurityQuestions';
+import { SMSMessaging } from './SMSMessaging';
 import { TPAProviders } from './TPAProviders';
 import TrustedDevices from './TrustedDevices';
 import { TwoFactor } from './TwoFactor/TwoFactor';
@@ -148,3 +149,9 @@ export const StyledMainCopy = styled(Typography, {
   marginTop: theme.spacing(),
   maxWidth: 960,
 }));
+
+export const AuthenticationSettingsLazyRoute = createLazyRoute('/profile/auth')(
+  {
+    component: AuthenticationSettings,
+  }
+);
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index f4305fd948c..73817a9b6bf 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -1,5 +1,6 @@
 import { updateUser } from '@linode/api-v4/lib/account';
 import { styled, useTheme } from '@mui/material/styles';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
@@ -157,3 +158,7 @@ const StyledProfileCopy = styled(Typography, {
   marginTop: 4,
   maxWidth: 360,
 }));
+
+export const DisplaySettingsLazyRoute = createLazyRoute('/profile/display')({
+  component: DisplaySettings,
+});
diff --git a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
index 6cfcc2c5e13..57097b287a5 100644
--- a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
+++ b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
@@ -12,6 +12,8 @@ import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
+import { createLazyRoute } from '@tanstack/react-router';
+
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
@@ -221,3 +223,7 @@ export const LishSettings = () => {
     </>
   );
 };
+
+export const LishSettingsLazyRoute = createLazyRoute('/profile/lish')({
+  component: LishSettings,
+});
diff --git a/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx b/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx
index db289cf3a6e..b30f1e6168e 100644
--- a/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx
+++ b/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
@@ -207,4 +208,8 @@ const OAuthClients = () => {
   );
 };
 
+export const OAuthClientsLazyRoute = createLazyRoute('/profile/clients')({
+  component: OAuthClients,
+});
+
 export default OAuthClients;
diff --git a/packages/manager/src/features/Profile/Referrals/Referrals.tsx b/packages/manager/src/features/Profile/Referrals/Referrals.tsx
index 8bc0de474e5..79dc5fa98c3 100644
--- a/packages/manager/src/features/Profile/Referrals/Referrals.tsx
+++ b/packages/manager/src/features/Profile/Referrals/Referrals.tsx
@@ -1,4 +1,5 @@
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import Step1 from 'src/assets/referrals/step-1.svg';
@@ -162,3 +163,7 @@ export const Referrals = () => {
     </Paper>
   );
 };
+
+export const ReferralsLazyRoute = createLazyRoute('/profile/referrals')({
+  component: Referrals,
+});
diff --git a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx
index 622bb9dab1b..90380fc5184 100644
--- a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx
+++ b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx
@@ -1,5 +1,6 @@
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { Button } from 'src/components/Button/Button';
@@ -164,3 +165,7 @@ const StyledAddNewWrapperGridItem = styled(Grid)(({ theme }) => ({
     marginRight: theme.spacing(),
   },
 }));
+
+export const SSHKeysLazyRoute = createLazyRoute('/profile/keys')({
+  component: SSHKeys,
+});
diff --git a/packages/manager/src/features/Profile/Settings/Settings.tsx b/packages/manager/src/features/Profile/Settings/Settings.tsx
index 52eb8de3d9f..110734ff1f0 100644
--- a/packages/manager/src/features/Profile/Settings/Settings.tsx
+++ b/packages/manager/src/features/Profile/Settings/Settings.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
@@ -16,11 +17,12 @@ import {
 } from 'src/queries/profile/preferences';
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
 import { getQueryParamFromQueryString } from 'src/utilities/queryParams';
-import { ThemeChoice } from 'src/utilities/theme';
 import { isOSMac } from 'src/utilities/userAgent';
 
 import { PreferenceEditor } from './PreferenceEditor';
 
+import type { ThemeChoice } from 'src/utilities/theme';
+
 export const ProfileSettings = () => {
   const location = useLocation();
   const history = useHistory();
@@ -130,3 +132,7 @@ const ThemeKeyboardShortcut = (
     <Code>D</Code>
   </>
 );
+
+export const SettingsLazyRoute = createLazyRoute('/profile/settings')({
+  component: ProfileSettings,
+});
diff --git a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx
index 2dbedefa6c8..1101d6b33c1 100644
--- a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx
+++ b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx
@@ -1,5 +1,5 @@
-import { Image } from '@linode/api-v4';
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -12,6 +12,8 @@ import { useAllImagesQuery } from 'src/queries/images';
 
 import StackScriptPanel from './StackScriptPanel/StackScriptPanel';
 
+import type { Image } from '@linode/api-v4';
+
 export const StackScriptsLanding = () => {
   const history = useHistory<{
     successMessage?: string;
@@ -63,3 +65,7 @@ export const StackScriptsLanding = () => {
 };
 
 export default StackScriptsLanding;
+
+export const stackScriptsLandingLazyRoute = createLazyRoute('/stackscripts')({
+  component: StackScriptsLanding,
+});
diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
index 64b2ef6ddb4..be966b504cc 100644
--- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
+++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx
@@ -155,7 +155,7 @@ const StyledStack = styled(Stack, {
   marginRight: theme.spacing(),
 }));
 
-export const supportTicketDetailRoute = createLazyRoute(
+export const supportTicketDetailLazyRoute = createLazyRoute(
   '/support/tickets/$ticketId'
 )({
   component: SupportTicketDetail,
diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketsLanding.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketsLanding.tsx
index ef25a50d79a..129bc37a3eb 100644
--- a/packages/manager/src/features/Support/SupportTickets/SupportTicketsLanding.tsx
+++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketsLanding.tsx
@@ -99,6 +99,8 @@ const SupportTicketsLanding = () => {
 
 export default SupportTicketsLanding;
 
-export const supportTicketsLandingRoute = createLazyRoute('/support/tickets')({
+export const supportTicketsLandingLazyRoute = createLazyRoute(
+  '/support/tickets'
+)({
   component: SupportTicketsLanding,
 });
diff --git a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx
index 742badedd7d..bfcba44b36c 100644
--- a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx
+++ b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx
@@ -86,7 +86,7 @@ const VPCCreate = () => {
   );
 };
 
-export const vpcCreateRoute = createLazyRoute('/vpcs/create')({
+export const vpcCreateLazyRoute = createLazyRoute('/vpcs/create')({
   component: VPCCreate,
 });
 
diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
index e5f61b084eb..fb11f472a26 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx
@@ -1,5 +1,6 @@
 import { Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -16,19 +17,18 @@ import { useRegionsQuery } from 'src/queries/regions/regions';
 import { useVPCQuery } from 'src/queries/vpcs/vpcs';
 import { truncate } from 'src/utilities/truncate';
 
-import { VPCDeleteDialog } from '../VPCLanding/VPCDeleteDialog';
-import { VPCEditDrawer } from '../VPCLanding/VPCEditDrawer';
 import { REBOOT_LINODE_WARNING_VPCDETAILS } from '../constants';
 import { getUniqueLinodesFromSubnets } from '../utils';
+import { VPCDeleteDialog } from '../VPCLanding/VPCDeleteDialog';
+import { VPCEditDrawer } from '../VPCLanding/VPCEditDrawer';
 import {
   StyledActionButton,
-  StyledDescriptionBox,
   StyledBox,
+  StyledDescriptionBox,
   StyledSummaryBox,
   StyledSummaryTextTypography,
 } from './VPCDetail.styles';
 import { VPCSubnetsTable } from './VPCSubnetsTable';
-import { createLazyRoute } from '@tanstack/react-router';
 
 const VPCDetail = () => {
   const { vpcId } = useParams<{ vpcId: string }>();
@@ -215,7 +215,7 @@ const VPCDetail = () => {
   );
 };
 
-export const vpcDetailRoute = createLazyRoute('/vpcs/$vpcId')({
+export const vpcDetailLazyRoute = createLazyRoute('/vpcs/$vpcId')({
   component: VPCDetail,
 });
 
diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
index eb671220d7a..a107aaa4cf2 100644
--- a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
+++ b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx
@@ -171,7 +171,7 @@ const VPCLanding = () => {
   );
 };
 
-export const vpcLandingRoute = createLazyRoute('/')({
+export const vpcLandingLazyRoute = createLazyRoute('/')({
   component: VPCLanding,
 });
 
diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx
index 5e349c7eec3..ae3b9bae2ce 100644
--- a/packages/manager/src/features/Volumes/VolumeCreate.tsx
+++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx
@@ -547,6 +547,6 @@ const initialValues: FormState = {
   size: 20,
 };
 
-export const volumeCreateRoute = createLazyRoute('/volumes/create')({
+export const volumeCreateLazyRoute = createLazyRoute('/volumes/create')({
   component: VolumeCreate,
 });
diff --git a/packages/manager/src/features/Volumes/VolumesLanding.tsx b/packages/manager/src/features/Volumes/VolumesLanding.tsx
index 09e9832d4f9..803ef918146 100644
--- a/packages/manager/src/features/Volumes/VolumesLanding.tsx
+++ b/packages/manager/src/features/Volumes/VolumesLanding.tsx
@@ -330,6 +330,6 @@ export const VolumesLanding = () => {
 
 export default VolumesLanding;
 
-export const volumesLandingRoute = createLazyRoute('/')({
+export const volumesLandingLazyRoute = createLazyRoute('/')({
   component: VolumesLanding,
 });
diff --git a/packages/manager/src/routes/profile.tsx b/packages/manager/src/routes/profile.tsx
index ee1ccc0d420..a82f6e53a0f 100644
--- a/packages/manager/src/routes/profile.tsx
+++ b/packages/manager/src/routes/profile.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const ProfileRoutes = () => {
   return (
@@ -15,87 +14,83 @@ export const ProfileRoutes = () => {
 };
 
 const ProfileRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Profile/DisplaySettings/DisplaySettings'),
-    'DisplaySettings'
-  ),
   getParentRoute: () => rootRoute,
   path: 'profile',
-});
+}).lazy(() =>
+  import('src/features/Profile/DisplaySettings/DisplaySettings').then(
+    (m) => m.DisplaySettingsLazyRoute
+  )
+);
 
 const ProfileDisplaySettingsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Profile/DisplaySettings/DisplaySettings'),
-    'DisplaySettings'
-  ),
   getParentRoute: () => ProfileRoute,
   path: 'display',
-});
+}).lazy(() =>
+  import('src/features/Profile/DisplaySettings/DisplaySettings').then(
+    (m) => m.DisplaySettingsLazyRoute
+  )
+);
 
 const ProfileAuthenticationSettingsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/Profile/AuthenticationSettings/AuthenticationSettings'
-      ),
-    'AuthenticationSettings'
-  ),
   getParentRoute: () => ProfileRoute,
   path: 'auth',
-});
+}).lazy(() =>
+  import(
+    'src/features/Profile/AuthenticationSettings/AuthenticationSettings'
+  ).then((m) => m.AuthenticationSettingsLazyRoute)
+);
 
 const ProfileSSHKeysRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Profile/SSHKeys/SSHKeys'),
-    'SSHKeys'
-  ),
   getParentRoute: () => ProfileRoute,
   path: 'keys',
-});
+}).lazy(() =>
+  import('src/features/Profile/SSHKeys/SSHKeys').then((m) => m.SSHKeysLazyRoute)
+);
 
 const ProfileLishSettingsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Profile/LishSettings/LishSettings'),
-    'LishSettings'
-  ),
   getParentRoute: () => ProfileRoute,
   path: 'lish',
-});
+}).lazy(() =>
+  import('src/features/Profile/LishSettings/LishSettings').then(
+    (m) => m.LishSettingsLazyRoute
+  )
+);
 
 const ProfileAPITokensRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Profile/APITokens/APITokens'),
-    'APITokens'
-  ),
   getParentRoute: () => ProfileRoute,
   path: 'tokens',
-});
+}).lazy(() =>
+  import('src/features/Profile/APITokens/APITokens').then(
+    (m) => m.APITokensLazyRoute
+  )
+);
 
 const ProfileOAuthClientsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Profile/OAuthClients/OAuthClients')
-  ),
   getParentRoute: () => ProfileRoute,
   path: 'clients',
-});
+}).lazy(() =>
+  import('src/features/Profile/OAuthClients/OAuthClients').then(
+    (m) => m.OAuthClientsLazyRoute
+  )
+);
 
 const ProfileReferralsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Profile/Referrals/Referrals'),
-    'Referrals'
-  ),
   getParentRoute: () => ProfileRoute,
   path: 'referrals',
-});
+}).lazy(() =>
+  import('src/features/Profile/Referrals/Referrals').then(
+    (m) => m.ReferralsLazyRoute
+  )
+);
 
 const ProfileSettingsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Profile/Settings/Settings'),
-    'ProfileSettings'
-  ),
   getParentRoute: () => ProfileRoute,
   path: 'settings',
-});
+}).lazy(() =>
+  import('src/features/Profile/Settings/Settings').then(
+    (m) => m.SettingsLazyRoute
+  )
+);
 
 export const profileRouteTree = ProfileRoute.addChildren([
   ProfileAuthenticationSettingsRoute,
diff --git a/packages/manager/src/routes/stackscripts.tsx b/packages/manager/src/routes/stackscripts.tsx
index 2f9791ba41c..22757ef5df8 100644
--- a/packages/manager/src/routes/stackscripts.tsx
+++ b/packages/manager/src/routes/stackscripts.tsx
@@ -3,9 +3,10 @@ import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import StackScriptCreate from 'src/features/StackScripts/StackScriptCreate/StackScriptCreate';
+import StackScriptDetail from 'src/features/StackScripts/StackScriptsDetail';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const StackScriptsRoutes = () => {
   return (
@@ -23,47 +24,42 @@ const StackScriptsRoute = createRoute({
 });
 
 const StackScriptsLandingRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/StackScripts/StackScriptsLanding'),
-    'StackScriptsLanding'
-  ),
   getParentRoute: () => StackScriptsRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/StackScripts/StackScriptsLanding').then(
+    (m) => m.stackScriptsLandingLazyRoute
+  )
+);
 
 const StackScriptsAccountRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/StackScripts/StackScriptsLanding'),
-    'StackScriptsLanding'
-  ),
   getParentRoute: () => StackScriptsRoute,
   path: 'account',
-});
+}).lazy(() =>
+  import('src/features/StackScripts/StackScriptsLanding').then(
+    (m) => m.stackScriptsLandingLazyRoute
+  )
+);
 
 const StackScriptsCommunityRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/StackScripts/StackScriptsLanding'),
-    'StackScriptsLanding'
-  ),
   getParentRoute: () => StackScriptsRoute,
   path: 'community',
-});
+}).lazy(() =>
+  import('src/features/StackScripts/StackScriptsLanding').then(
+    (m) => m.stackScriptsLandingLazyRoute
+  )
+);
 
 const StackScriptsCreateRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import('src/features/StackScripts/StackScriptCreate/StackScriptCreate'),
-    'StackScriptCreate'
-  ),
+  // TODO: TanStack Router - broken, perhaps due to being a class component.
+  component: () => <StackScriptCreate mode="create" />,
   getParentRoute: () => StackScriptsRoute,
   path: 'create',
 });
 
 const StackScriptsDetailRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/StackScripts/StackScriptsDetail'),
-    'StackScriptsDetail'
-  ),
+  // TODO: TanStack Router - broken, perhaps due to being a class component.
+  component: () => <StackScriptDetail />,
   getParentRoute: () => StackScriptsRoute,
   parseParams: (params) => ({
     stackScriptID: Number(params.stackScriptID),
@@ -72,11 +68,8 @@ const StackScriptsDetailRoute = createRoute({
 });
 
 const StackScriptsEditRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import('src/features/StackScripts/StackScriptCreate/StackScriptCreate'),
-    'StackScriptCreate'
-  ),
+  // TODO: TanStack Router - broken, perhaps due to being a class component.
+  component: () => <StackScriptCreate mode="edit" />,
   getParentRoute: () => StackScriptsRoute,
   parseParams: (params) => ({
     stackScriptID: Number(params.stackScriptID),
diff --git a/packages/manager/src/routes/support.tsx b/packages/manager/src/routes/support.tsx
index da51a276f01..716cb12014b 100644
--- a/packages/manager/src/routes/support.tsx
+++ b/packages/manager/src/routes/support.tsx
@@ -26,7 +26,7 @@ const SupportLandingRoute = createRoute({
   getParentRoute: () => SupportRoute,
   path: '/',
 }).lazy(() =>
-  import('src/features/Help/HelpLanding').then((m) => m.helpLandingRoute)
+  import('src/features/Help/HelpLanding').then((m) => m.helpLandingLazyRoute)
 );
 
 const SupportTicketsRoute = createRoute({
@@ -34,7 +34,7 @@ const SupportTicketsRoute = createRoute({
   path: 'tickets',
 }).lazy(() =>
   import('src/features/Support/SupportTickets/SupportTicketsLanding').then(
-    (m) => m.supportTicketsLandingRoute
+    (m) => m.supportTicketsLandingLazyRoute
   )
 );
 
@@ -46,7 +46,7 @@ const SupportTicketDetailRoute = createRoute({
   path: '$ticketId',
 }).lazy(() =>
   import('src/features/Support/SupportTicketDetail/SupportTicketDetail').then(
-    (m) => m.supportTicketDetailRoute
+    (m) => m.supportTicketDetailLazyRoute
   )
 );
 
@@ -55,7 +55,7 @@ const SupportSearchLandingRoute = createRoute({
   path: 'search',
 }).lazy(() =>
   import('src/features/Help/SupportSearchLanding/SupportSearchLanding').then(
-    (m) => m.supportSearchLandingRoute
+    (m) => m.supportSearchLandingLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/volumes.tsx b/packages/manager/src/routes/volumes.tsx
index 4078f00bd1e..ee9b9971898 100644
--- a/packages/manager/src/routes/volumes.tsx
+++ b/packages/manager/src/routes/volumes.tsx
@@ -26,7 +26,7 @@ const volumesIndexRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/Volumes/VolumesLanding').then(
-    (m) => m.volumesLandingRoute
+    (m) => m.volumesLandingLazyRoute
   )
 );
 
@@ -34,7 +34,9 @@ const volumesCreateRoute = createRoute({
   getParentRoute: () => volumesRoute,
   path: 'create',
 }).lazy(() =>
-  import('src/features/Volumes/VolumeCreate').then((m) => m.volumeCreateRoute)
+  import('src/features/Volumes/VolumeCreate').then(
+    (m) => m.volumeCreateLazyRoute
+  )
 );
 
 export const volumesRouteTree = volumesRoute.addChildren([
diff --git a/packages/manager/src/routes/vpcs.tsx b/packages/manager/src/routes/vpcs.tsx
index fc432e0d8da..d63f4c86ed9 100644
--- a/packages/manager/src/routes/vpcs.tsx
+++ b/packages/manager/src/routes/vpcs.tsx
@@ -28,7 +28,7 @@ const vpcsLandingRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/VPCs/VPCLanding/VPCLanding').then(
-    (m) => m.vpcLandingRoute
+    (m) => m.vpcLandingLazyRoute
   )
 );
 
@@ -36,14 +36,18 @@ const vpcsCreateRoute = createRoute({
   getParentRoute: () => vpcsRoute,
   path: 'create',
 }).lazy(() =>
-  import('src/features/VPCs/VPCCreate/VPCCreate').then((m) => m.vpcCreateRoute)
+  import('src/features/VPCs/VPCCreate/VPCCreate').then(
+    (m) => m.vpcCreateLazyRoute
+  )
 );
 
 const vpcsDetailRoute = createRoute({
   getParentRoute: () => vpcsRoute,
   path: '$vpcId',
 }).lazy(() =>
-  import('src/features/VPCs/VPCDetail/VPCDetail').then((m) => m.vpcDetailRoute)
+  import('src/features/VPCs/VPCDetail/VPCDetail').then(
+    (m) => m.vpcDetailLazyRoute
+  )
 );
 
 export const vpcsRouteTree = vpcsRoute.addChildren([

From c0adce6cdd89ef920f23c1ca43a018d6af0b89ba Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Mon, 30 Sep 2024 08:34:52 -0400
Subject: [PATCH 26/45] lazy imports/exports placement groups

---
 .../PlacementGroupsDetail.tsx                 | 15 +++-
 .../PlacementGroupsLanding.tsx                |  7 ++
 .../manager/src/routes/placementGroups.tsx    | 81 +++++++------------
 3 files changed, 52 insertions(+), 51 deletions(-)

diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx
index a08be23e7b8..1b24f8aca25 100644
--- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx
+++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx
@@ -1,4 +1,5 @@
 import { PLACEMENT_GROUP_TYPES } from '@linode/api-v4';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -75,7 +76,7 @@ export const PlacementGroupsDetail = () => {
     placementGroup?.members.some((pgLinode) => pgLinode.linode_id === linode.id)
   );
 
-  const { placement_group_type, label } = placementGroup;
+  const { label, placement_group_type } = placementGroup;
 
   const resetEditableLabel = () => {
     return `${label} (${PLACEMENT_GROUP_TYPES[placement_group_type]})`;
@@ -134,3 +135,15 @@ export const PlacementGroupsDetail = () => {
     </>
   );
 };
+
+export const PlacementGroupsDetailLazyRoute = createLazyRoute(
+  '/placement-groups/$id'
+)({
+  component: PlacementGroupsDetail,
+});
+
+export const PlacementGroupsUnassignLazyRoute = createLazyRoute(
+  '/placement-groups/$id/linodes/unassign/$linodeId'
+)({
+  component: PlacementGroupsDetail,
+});
diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx
index 096c7885d10..619073321c7 100644
--- a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx
+++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx
@@ -1,4 +1,5 @@
 import { useMediaQuery, useTheme } from '@mui/material';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 import { useHistory } from 'react-router-dom';
@@ -280,3 +281,9 @@ export const PlacementGroupsLanding = React.memo(() => {
     </>
   );
 });
+
+export const PlacementGroupsLandingLazyRoute = createLazyRoute(
+  '/placement-groups'
+)({
+  component: PlacementGroupsLanding,
+});
diff --git a/packages/manager/src/routes/placementGroups.tsx b/packages/manager/src/routes/placementGroups.tsx
index 2ec06b59fe7..9b172ad64e4 100644
--- a/packages/manager/src/routes/placementGroups.tsx
+++ b/packages/manager/src/routes/placementGroups.tsx
@@ -6,7 +6,6 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const AccountRoutes = () => {
   return (
@@ -25,89 +24,71 @@ export const placementGroupsRoute = createRoute({
 });
 
 const placementGroupsIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-      ),
-    'PlacementGroupsLanding'
-  ),
   getParentRoute: () => placementGroupsRoute,
   path: '/',
-});
+}).lazy(() =>
+  import(
+    'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+  ).then((m) => m.PlacementGroupsLandingLazyRoute)
+);
 
 const placementGroupsCreateRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-      ),
-    'PlacementGroupsLanding'
-  ),
   getParentRoute: () => placementGroupsRoute,
   path: 'create',
-});
+}).lazy(() =>
+  import(
+    'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+  ).then((m) => m.PlacementGroupsLandingLazyRoute)
+);
 
 const placementGroupsEditRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-      ),
-    'PlacementGroupsLanding'
-  ),
   getParentRoute: () => placementGroupsRoute,
   parseParams: (params) => ({
     id: Number(params.id),
   }),
   path: 'edit/$id',
-});
+}).lazy(() =>
+  import(
+    'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+  ).then((m) => m.PlacementGroupsLandingLazyRoute)
+);
 
 const placementGroupsDeleteRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-      ),
-    'PlacementGroupsLanding'
-  ),
   getParentRoute: () => placementGroupsRoute,
   parseParams: (params) => ({
     id: Number(params.id),
   }),
   path: 'delete/$id',
-});
+}).lazy(() =>
+  import(
+    'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
+  ).then((m) => m.PlacementGroupsLandingLazyRoute)
+);
 
 const placementGroupsUnassignRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
-      ),
-    'PlacementGroupsDetail'
-  ),
   getParentRoute: () => placementGroupsRoute,
   parseParams: (params) => ({
     id: Number(params.id),
     linodeId: Number(params.linodeId),
   }),
-  path: '$id/unassign/$linodeId',
-});
+  path: '$id/linodes/unassign/$linodeId',
+}).lazy(() =>
+  import(
+    'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
+  ).then((m) => m.PlacementGroupsUnassignLazyRoute)
+);
 
 const placementGroupsDetailRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
-      ),
-    'PlacementGroupsDetail'
-  ),
   getParentRoute: () => placementGroupsRoute,
   parseParams: (params) => ({
     id: Number(params.id),
   }),
   path: '$id',
-});
+}).lazy(() =>
+  import(
+    'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
+  ).then((m) => m.PlacementGroupsDetailLazyRoute)
+);
 
 export const placementGroupsRouteTree = placementGroupsRoute.addChildren([
   placementGroupsIndexRoute,

From 8604c522bd45f13758696664a04bc0d3cd0e5084 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Mon, 30 Sep 2024 11:50:12 -0400
Subject: [PATCH 27/45] lazy imports/exports obj + nb

---
 .../NodeBalancers/NodeBalancerCreate.tsx      |  9 ++-
 .../NodeBalancerDetail/NodeBalancerDetail.tsx |  9 +++
 .../NodeBalancerSettings.tsx                  |  7 ++
 .../NodeBalancerSummary.tsx                   |  7 ++
 .../NodeBalancersLanding.tsx                  |  5 ++
 .../ObjectStorage/BucketDetail/index.tsx      |  7 ++
 .../ObjectStorage/ObjectStorageLanding.tsx    |  7 ++
 packages/manager/src/routes/nodeBalancers.tsx | 70 +++++++++----------
 .../manager/src/routes/object-storage.tsx     | 44 ++++++------
 9 files changed, 104 insertions(+), 61 deletions(-)

diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx
index 5ca50d8cac4..806368a5ba3 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx
@@ -1,5 +1,6 @@
 import { useTheme } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { createLazyRoute } from '@tanstack/react-router';
 import {
   append,
   clone,
@@ -54,8 +55,8 @@ import { sendCreateNodeBalancerEvent } from 'src/utilities/analytics/customEvent
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { getGDPRDetails } from 'src/utilities/formatRegion';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
-import { PRICE_ERROR_TOOLTIP_TEXT } from 'src/utilities/pricing/constants';
 import { DOCS_LINK_LABEL_DC_PRICING } from 'src/utilities/pricing/constants';
+import { PRICE_ERROR_TOOLTIP_TEXT } from 'src/utilities/pricing/constants';
 import {
   getDCSpecificPriceByType,
   renderMonthlyPriceToCorrectDecimalPlace,
@@ -796,4 +797,10 @@ export const fieldErrorsToNodePathErrors = (errors: APIError[]) => {
   }, []);
 };
 
+export const NodeBalancerCreateLazyRoute = createLazyRoute(
+  '/nodebalancers/create'
+)({
+  component: NodeBalancerCreate,
+});
+
 export default NodeBalancerCreate;
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
index 3f33c3eb70a..8990ae60f55 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import {
   matchPath,
@@ -155,3 +156,11 @@ export const NodeBalancerDetail = () => {
     </React.Fragment>
   );
 };
+
+export const NodeBalancerDetailLazyRoute = createLazyRoute(
+  '/nodebalancers/$nodeBalancerId'
+)({
+  component: NodeBalancerDetail,
+});
+
+export default NodeBalancerDetail;
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx
index 2c3b66cc24f..ee1a1cd7b89 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx
@@ -1,4 +1,5 @@
 import { useTheme } from '@mui/material';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -156,3 +157,9 @@ export const NodeBalancerSettings = () => {
     </div>
   );
 };
+
+export const NodeBalancerSettingsLazyRoute = createLazyRoute(
+  '/nodebalancers/$nodeBalancerId/settings'
+)({
+  component: NodeBalancerSettings,
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
index 24a13313f92..09694e38a4d 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
@@ -1,5 +1,6 @@
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -44,3 +45,9 @@ const StyledSidebarGridItem = styled(Grid, {
     order: 2,
   },
 }));
+
+export const NodeBalancerSummaryLazyRoute = createLazyRoute(
+  '/nodebalancers/$nodeBalancerId'
+)({
+  component: NodeBalancerSummary,
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx
index 920e541b6b6..1bbd39a4d65 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -164,4 +165,8 @@ export const NodeBalancersLanding = () => {
   );
 };
 
+export const NodeBalancersLandingLazyRoute = createLazyRoute('/nodebalancers')({
+  component: NodeBalancersLanding,
+});
+
 export default NodeBalancersLanding;
diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx
index a3224c79c9b..b29756937ef 100644
--- a/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx
+++ b/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { matchPath } from 'react-router-dom';
 
@@ -150,4 +151,10 @@ export const BucketDetailLanding = React.memo((props: Props) => {
   );
 });
 
+export const BucketDetailLandingLazyRoute = createLazyRoute(
+  '/object-storage/buckets/$clusterId/$bucketName'
+)({
+  component: BucketDetailLanding,
+});
+
 export default BucketDetailLanding;
diff --git a/packages/manager/src/features/ObjectStorage/ObjectStorageLanding.tsx b/packages/manager/src/features/ObjectStorage/ObjectStorageLanding.tsx
index efec33260d7..041fcc49fc1 100644
--- a/packages/manager/src/features/ObjectStorage/ObjectStorageLanding.tsx
+++ b/packages/manager/src/features/ObjectStorage/ObjectStorageLanding.tsx
@@ -1,4 +1,5 @@
 import { styled } from '@mui/material/styles';
+import { createLazyRoute } from '@tanstack/react-router';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 import { useHistory, useParams } from 'react-router-dom';
@@ -216,3 +217,9 @@ const StyledPromotionalOfferCard = styled(PromotionalOfferCard, {
 })(({ theme }) => ({
   marginBottom: theme.spacing(0.5),
 }));
+
+export const ObjectStorageLandingLazyRoute = createLazyRoute('/object-storage')(
+  {
+    component: ObjectStorageLanding,
+  }
+);
diff --git a/packages/manager/src/routes/nodeBalancers.tsx b/packages/manager/src/routes/nodeBalancers.tsx
index 6ace1b86173..accd437e8c6 100644
--- a/packages/manager/src/routes/nodeBalancers.tsx
+++ b/packages/manager/src/routes/nodeBalancers.tsx
@@ -1,11 +1,14 @@
-import { Outlet, createRoute } from '@tanstack/react-router';
+import {
+  Outlet,
+  createRoute,
+  lazyRouteComponent,
+} from '@tanstack/react-router';
 import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const NodeBalancersRoutes = () => {
   return (
@@ -23,53 +26,47 @@ const nodeBalancersRoute = createRoute({
 });
 
 const nodeBalancersIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding'
-      )
-  ),
   getParentRoute: () => nodeBalancersRoute,
   path: '/',
-});
+}).lazy(() =>
+  import(
+    'src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding'
+  ).then((m) => m.NodeBalancersLandingLazyRoute)
+);
 
 const nodeBalancersCreateRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/NodeBalancers/NodeBalancerCreate'),
-  ),
   getParentRoute: () => nodeBalancersRoute,
   path: 'create',
-});
+}).lazy(() =>
+  import('src/features/NodeBalancers/NodeBalancerCreate').then(
+    (m) => m.NodeBalancerCreateLazyRoute
+  )
+);
 
 const nodeBalancerDetailRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail'
-      ),
-    'NodeBalancerDetail'
-  ),
   getParentRoute: () => nodeBalancersRoute,
   parseParams: (params) => ({
     nodeBalancerId: Number(params.nodeBalancerId),
   }),
   path: '$nodeBalancerId',
-});
+}).lazy(() =>
+  import(
+    'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail'
+  ).then((m) => m.NodeBalancerDetailLazyRoute)
+);
 
 const nodeBalancerDetailSummaryRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary'
-      ),
-    'NodeBalancerSummary'
-  ),
   getParentRoute: () => nodeBalancerDetailRoute,
   path: 'summary',
-});
+}).lazy(() =>
+  import(
+    'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary'
+  ).then((m) => m.NodeBalancerSummaryLazyRoute)
+);
 
+// TODO TanStack Router - figure proper way of lazy loading class components
 const nodeBalancerDetailConfigurationsRoute = createRoute({
-  component: strictLazyRouteComponent(
+  component: lazyRouteComponent(
     () =>
       import(
         'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations'
@@ -80,16 +77,13 @@ const nodeBalancerDetailConfigurationsRoute = createRoute({
 });
 
 const nodeBalancerDetailSettingsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings'
-      ),
-    'NodeBalancerSettings'
-  ),
   getParentRoute: () => nodeBalancerDetailRoute,
   path: 'settings',
-});
+}).lazy(() =>
+  import(
+    'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings'
+  ).then((m) => m.NodeBalancerSettingsLazyRoute)
+);
 
 export const nodeBalancersRouteTree = nodeBalancersRoute.addChildren([
   nodeBalancersIndexRoute,
diff --git a/packages/manager/src/routes/object-storage.tsx b/packages/manager/src/routes/object-storage.tsx
index 3be5a22635b..5ed4fac81c5 100644
--- a/packages/manager/src/routes/object-storage.tsx
+++ b/packages/manager/src/routes/object-storage.tsx
@@ -5,7 +5,6 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const ObjectStorageRoutes = () => {
   return (
@@ -23,43 +22,44 @@ export const objectStorageRoute = createRoute({
 });
 
 const objectStorageIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/ObjectStorage/ObjectStorageLanding'),
-    'ObjectStorageLanding'
-  ),
   getParentRoute: () => objectStorageRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/ObjectStorage/ObjectStorageLanding').then(
+    (m) => m.ObjectStorageLandingLazyRoute
+  )
+);
 
 const objectStorageBucketsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/ObjectStorage/BucketLanding/BucketLanding'),
-    'BucketLanding'
-  ),
   getParentRoute: () => objectStorageIndexRoute,
   path: 'buckets',
-});
+}).lazy(() =>
+  import('src/features/ObjectStorage/ObjectStorageLanding').then(
+    (m) => m.ObjectStorageLandingLazyRoute
+  )
+);
 
 const objectStorageAccessKeysRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import('src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding'),
-    'AccessKeyLanding'
-  ),
   getParentRoute: () => objectStorageIndexRoute,
   path: 'access-keys',
-});
+}).lazy(() =>
+  import('src/features/ObjectStorage/ObjectStorageLanding').then(
+    (m) => m.ObjectStorageLandingLazyRoute
+  )
+);
 
 const objectStorageBucketDetailRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/ObjectStorage/BucketDetail')
-  ),
   getParentRoute: () => objectStorageBucketsRoute,
   path: '$clusterId/$bucketName',
-});
+}).lazy(() =>
+  import('src/features/ObjectStorage/BucketDetail').then(
+    (m) => m.BucketDetailLandingLazyRoute
+  )
+);
 
 export const objectStorageRouteTree = objectStorageRoute.addChildren([
   objectStorageIndexRoute,
-  objectStorageBucketsRoute.addChildren([objectStorageBucketDetailRoute]),
+  objectStorageBucketsRoute,
+  objectStorageBucketDetailRoute,
   objectStorageAccessKeysRoute,
 ]);

From f7e2089b8da0e2950768c3adb557862b3dc516ae Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Mon, 30 Sep 2024 12:46:41 -0400
Subject: [PATCH 28/45] lazy imports/exports managed

---
 .../features/Managed/Contacts/Contacts.tsx    |  5 ++
 .../Managed/Credentials/CredentialList.tsx    |  7 ++
 .../ManagedDashboardCard.tsx                  |  5 ++
 .../Managed/Monitors/MonitorTable.tsx         |  5 ++
 .../features/Managed/SSHAccess/SSHAccess.tsx  |  7 ++
 packages/manager/src/routes/managed.tsx       | 66 +++++++++++--------
 6 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/packages/manager/src/features/Managed/Contacts/Contacts.tsx b/packages/manager/src/features/Managed/Contacts/Contacts.tsx
index 1c7d5b88018..31bdbf461e7 100644
--- a/packages/manager/src/features/Managed/Contacts/Contacts.tsx
+++ b/packages/manager/src/features/Managed/Contacts/Contacts.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -233,6 +234,10 @@ const Contacts = () => {
   );
 };
 
+export const ManagedContactsLazyRoute = createLazyRoute('/managed/contacts')({
+  component: Contacts,
+});
+
 export default Contacts;
 
 /**
diff --git a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
index 54770113d01..f92edd198a5 100644
--- a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
+++ b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -296,4 +297,10 @@ export const CredentialList = () => {
   );
 };
 
+export const ManagedCredentialsLazyRoute = createLazyRoute(
+  '/managed/credentials'
+)({
+  component: CredentialList,
+});
+
 export default CredentialList;
diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx
index e824eace561..01f0b5f4813 100644
--- a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx
+++ b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx
@@ -1,4 +1,5 @@
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { CircleProgress } from 'src/components/CircleProgress';
@@ -79,4 +80,8 @@ export const ManagedDashboardCard = () => {
   );
 };
 
+export const ManagedDashboardCardLazyRoute = createLazyRoute('/managed')({
+  component: ManagedDashboardCard,
+});
+
 export default ManagedDashboardCard;
diff --git a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
index 95df7aad844..c269749f01d 100644
--- a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
+++ b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
@@ -1,4 +1,5 @@
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -293,4 +294,8 @@ export const MonitorTable = () => {
   );
 };
 
+export const ManagedMonitorTableLazyRoute = createLazyRoute('/managed')({
+  component: MonitorTable,
+});
+
 export default MonitorTable;
diff --git a/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx b/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx
index 82d29d49de6..9d9faab670b 100644
--- a/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx
+++ b/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -15,4 +16,10 @@ const SSHAcess = () => {
   );
 };
 
+export const ManagedSSHAccessLazyRoute = createLazyRoute('/managed/ssh-access')(
+  {
+    component: SSHAcess,
+  }
+);
+
 export default SSHAcess;
diff --git a/packages/manager/src/routes/managed.tsx b/packages/manager/src/routes/managed.tsx
index fc4a71bd710..1571fca824c 100644
--- a/packages/manager/src/routes/managed.tsx
+++ b/packages/manager/src/routes/managed.tsx
@@ -5,7 +5,6 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const ManagedRoutes = () => {
   return (
@@ -22,47 +21,62 @@ export const managedRoute = createRoute({
   path: 'managed',
 });
 
+export const managedIndexRoute = createRoute({
+  getParentRoute: () => managedRoute,
+  path: '/',
+}).lazy(() =>
+  import('src/features/Managed/ManagedDashboardCard/ManagedDashboardCard').then(
+    (m) => m.ManagedDashboardCardLazyRoute
+  )
+);
+
 export const managedSummaryRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Managed/ManagedDashboardCard')
-  ),
   getParentRoute: () => managedRoute,
-  path: '/summary',
-});
+  path: 'summary',
+}).lazy(() =>
+  import('src/features/Managed/ManagedDashboardCard/ManagedDashboardCard').then(
+    (m) => m.ManagedDashboardCardLazyRoute
+  )
+);
 
 export const managedMonitorsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Managed/Monitors')
-  ),
   getParentRoute: () => managedRoute,
-  path: '/monitors',
-});
+  path: 'monitors',
+}).lazy(() =>
+  import('src/features/Managed/Monitors/MonitorTable').then(
+    (m) => m.ManagedMonitorTableLazyRoute
+  )
+);
 
 export const managedSSHAccessRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Managed/SSHAccess')
-  ),
   getParentRoute: () => managedRoute,
-  path: '/ssh-access',
-});
+  path: 'ssh-access',
+}).lazy(() =>
+  import('src/features/Managed/SSHAccess/SSHAccess').then(
+    (m) => m.ManagedSSHAccessLazyRoute
+  )
+);
 
 export const managedCredentialsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Managed/Credentials/CredentialList')
-  ),
   getParentRoute: () => managedRoute,
-  path: '/credentials',
-});
+  path: 'credentials',
+}).lazy(() =>
+  import('src/features/Managed/Credentials/CredentialList').then(
+    (m) => m.ManagedCredentialsLazyRoute
+  )
+);
 
 export const managedContactsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Managed/Contacts/Contacts')
-  ),
   getParentRoute: () => managedRoute,
-  path: '/contacts',
-});
+  path: 'contacts',
+}).lazy(() =>
+  import('src/features/Managed/Contacts/Contacts').then(
+    (m) => m.ManagedContactsLazyRoute
+  )
+);
 
 export const managedRouteTree = managedRoute.addChildren([
+  managedIndexRoute,
   managedSummaryRoute,
   managedMonitorsRoute,
   managedSSHAccessRoute,

From 41b77a90702236c554710161c9fed3157e8393f7 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Mon, 30 Sep 2024 14:29:58 -0400
Subject: [PATCH 29/45] lazy imports/exports longview and linodes

---
 .../features/Linodes/LinodeCreate/index.tsx   |  5 ++++
 .../Linodes/LinodesDetail/LinodesDetail.tsx   |  5 ++++
 .../manager/src/features/Linodes/index.tsx    |  5 ++++
 .../LongviewLanding/LongviewLanding.tsx       | 22 +++++++++-----
 packages/manager/src/routes/linodes.tsx       | 29 +++++++++----------
 packages/manager/src/routes/longview.tsx      | 17 +++++------
 6 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/index.tsx b/packages/manager/src/features/Linodes/LinodeCreate/index.tsx
index 1a67c923a0c..aecd32facdf 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/index.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/index.tsx
@@ -1,5 +1,6 @@
 import { isEmpty } from '@linode/api-v4';
 import { useQueryClient } from '@tanstack/react-query';
+import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import React, { useEffect, useRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
@@ -228,3 +229,7 @@ export const LinodeCreate = () => {
     </FormProvider>
   );
 };
+
+export const LinodeCreatev2LazyRoute = createLazyRoute('/linodes/create')({
+  component: LinodeCreatev2,
+});
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx
index 882db999794..08b8ffc633c 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import {
   Redirect,
@@ -88,3 +89,7 @@ export const LinodeDetail = () => {
     </React.Suspense>
   );
 };
+
+export const LinodeDetailLazyRoute = createLazyRoute('/linodes/$linodeId')({
+  component: LinodeDetail,
+});
diff --git a/packages/manager/src/features/Linodes/index.tsx b/packages/manager/src/features/Linodes/index.tsx
index a3c6ec2df70..af6bd6c3470 100644
--- a/packages/manager/src/features/Linodes/index.tsx
+++ b/packages/manager/src/features/Linodes/index.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 
@@ -72,3 +73,7 @@ export const LinodesLandingWrapper = React.memo(() => {
     />
   );
 });
+
+export const LinodesLandingLazyRoute = createLazyRoute('/linodes')({
+  component: LinodesLandingWrapper,
+});
diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx
index 02027395269..d7cebf32170 100644
--- a/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx
+++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx
@@ -2,15 +2,12 @@ import {
   getActiveLongviewPlan,
   getLongviewSubscriptions,
 } from '@linode/api-v4/lib/longview';
-import {
-  ActiveLongviewPlan,
-  LongviewSubscription,
-} from '@linode/api-v4/lib/longview/types';
 import { styled } from '@mui/material/styles';
+import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
-import { RouteComponentProps, matchPath } from 'react-router-dom';
+import { matchPath } from 'react-router-dom';
 
 import { LandingHeader } from 'src/components/LandingHeader';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
@@ -18,15 +15,20 @@ import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
-import withLongviewClients, {
-  Props as LongviewProps,
-} from 'src/containers/longview.container';
+import withLongviewClients from 'src/containers/longview.container';
 import { useAPIRequest } from 'src/hooks/useAPIRequest';
 import { useAccountSettings } from 'src/queries/account/settings';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { SubscriptionDialog } from './SubscriptionDialog';
 
+import type {
+  ActiveLongviewPlan,
+  LongviewSubscription,
+} from '@linode/api-v4/lib/longview/types';
+import type { RouteComponentProps } from 'react-router-dom';
+import type { Props as LongviewProps } from 'src/containers/longview.container';
+
 const LongviewClients = React.lazy(() => import('./LongviewClients'));
 const LongviewPlans = React.lazy(() => import('./LongviewPlans'));
 
@@ -183,4 +185,8 @@ const StyledTabs = styled(Tabs, {
   marginTop: 0,
 }));
 
+export const LongviewLandingLazyRoute = createLazyRoute('/longview')({
+  component: LongviewLanding,
+});
+
 export default withLongviewClients()(LongviewLanding);
diff --git a/packages/manager/src/routes/linodes.tsx b/packages/manager/src/routes/linodes.tsx
index 81d69969a5a..7be29e1c246 100644
--- a/packages/manager/src/routes/linodes.tsx
+++ b/packages/manager/src/routes/linodes.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const LinodesRoutes = () => {
   return (
@@ -21,34 +20,32 @@ export const linodesRoute = createRoute({
 });
 
 const linodesIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Linodes'),
-    'LinodesLandingWrapper'
-  ),
   getParentRoute: () => linodesRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Linodes/index').then((m) => m.LinodesLandingLazyRoute)
+);
 
 const linodesCreateRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Linodes/LinodeCreatev2'),
-    'LinodeCreatev2'
-  ),
   getParentRoute: () => linodesRoute,
   path: 'create',
-});
+}).lazy(() =>
+  import('src/features/Linodes/LinodeCreatev2').then(
+    (m) => m.LinodeCreatev2LazyRoute
+  )
+);
 
 const linodesDetailRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Linodes/LinodesDetail/LinodesDetail'),
-    'LinodeDetail'
-  ),
   getParentRoute: () => linodesRoute,
   parseParams: (params) => ({
     linodeId: Number(params.linodeId),
   }),
   path: '$linodeId',
-});
+}).lazy(() =>
+  import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
+    (m) => m.LinodeDetailLazyRoute
+  )
+);
 
 export const linodesRouteTree = linodesRoute.addChildren([
   linodesIndexRoute,
diff --git a/packages/manager/src/routes/longview.tsx b/packages/manager/src/routes/longview.tsx
index 5772257c616..b487ba025a3 100644
--- a/packages/manager/src/routes/longview.tsx
+++ b/packages/manager/src/routes/longview.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { LongviewDetail } from 'src/features/Longview/LongviewDetail/LongviewDetail';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const LongviewRoutes = () => {
   return (
@@ -23,19 +23,16 @@ export const longviewRoute = createRoute({
 });
 
 export const longviewLandingRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Longview/LongviewLanding/LongviewLanding'),
-    'LongviewLanding'
-  ),
   getParentRoute: () => longviewRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Longview/LongviewLanding/LongviewLanding').then(
+    (m) => m.LongviewLandingLazyRoute
+  )
+);
 
 export const longviewDetailRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Longview/LongviewDetail/LongviewDetail'),
-    'LongviewDetail'
-  ),
+  component: LongviewDetail,
   getParentRoute: () => longviewRoute,
   parseParams: (params) => ({
     id: Number(params.id),

From eff58c7b3945a6aa91a0d7fef4091c73cf0ba79e Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Mon, 30 Sep 2024 15:26:09 -0400
Subject: [PATCH 30/45] lazy imports/exports images and k8

---
 .../Images/ImagesCreate/ImageCreate.tsx       |  9 ++-
 .../Images/ImagesLanding/ImagesLanding.tsx    |  5 ++
 .../CreateCluster/CreateCluster.tsx           |  7 +-
 .../KubernetesClusterDetail.tsx               |  7 ++
 .../KubernetesLanding/KubernetesLanding.tsx   |  7 ++
 packages/manager/src/routes/images.tsx        | 26 ++++---
 packages/manager/src/routes/index.tsx         |  2 +
 packages/manager/src/routes/kubernetes.tsx    | 77 ++++++++++++-------
 8 files changed, 100 insertions(+), 40 deletions(-)

diff --git a/packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx b/packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx
index d1bf1d2b064..19c16e550c3 100644
--- a/packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx
+++ b/packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx
@@ -1,10 +1,13 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useRouteMatch } from 'react-router-dom';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { NavTab, NavTabs } from 'src/components/NavTabs/NavTabs';
+import { NavTabs } from 'src/components/NavTabs/NavTabs';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
+import type { NavTab } from 'src/components/NavTabs/NavTabs';
+
 const ImageUpload = React.lazy(() =>
   import('./ImageUpload').then((module) => ({ default: module.ImageUpload }))
 );
@@ -41,4 +44,8 @@ export const ImageCreate = () => {
   );
 };
 
+export const ImageCreateLazyRoute = createLazyRoute('/images/create')({
+  component: ImageCreate,
+});
+
 export default ImageCreate;
diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx
index e1d35866a77..772ed7143eb 100644
--- a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx
+++ b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx
@@ -1,5 +1,6 @@
 import CloseIcon from '@mui/icons-material/Close';
 import { useQueryClient } from '@tanstack/react-query';
+import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -640,4 +641,8 @@ export const ImagesLanding = () => {
   );
 };
 
+export const ImagesLandingLazyRoute = createLazyRoute('/images')({
+  component: ImagesLanding,
+});
+
 export default ImagesLanding;
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
index d5122dc8736..ffc1d9b61f8 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -1,5 +1,6 @@
 import { Divider } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import { pick, remove, update } from 'ramda';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
@@ -37,8 +38,8 @@ import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 import { extendType } from 'src/utilities/extendType';
 import { filterCurrentTypes } from 'src/utilities/filterCurrentLinodeTypes';
 import { plansNoticesUtils } from 'src/utilities/planNotices';
-import { DOCS_LINK_LABEL_DC_PRICING } from 'src/utilities/pricing/constants';
 import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
+import { DOCS_LINK_LABEL_DC_PRICING } from 'src/utilities/pricing/constants';
 import { getDCSpecificPriceByType } from 'src/utilities/pricing/dynamicPricing';
 import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2';
 
@@ -341,3 +342,7 @@ export const CreateCluster = () => {
     </Grid>
   );
 };
+
+export const CreateClusterLazyRoute = createLazyRoute('/kubernetes/create')({
+  component: CreateCluster,
+});
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx
index 75bbbf9fada..948ec778e68 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx
@@ -1,4 +1,5 @@
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 
@@ -124,3 +125,9 @@ export const KubernetesClusterDetail = () => {
     </>
   );
 };
+
+export const KubernetesClusterDetailLazyRoute = createLazyRoute(
+  '/kubernetes/clusters/$clusterID'
+)({
+  component: KubernetesClusterDetail,
+});
diff --git a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx
index 099197c20c8..f0c17ee2175 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -280,4 +281,10 @@ export const KubernetesLanding = () => {
   );
 };
 
+export const KubernetesLandingLazyRoute = createLazyRoute(
+  '/kubernetes/clusters'
+)({
+  component: KubernetesLanding,
+});
+
 export default KubernetesLanding;
diff --git a/packages/manager/src/routes/images.tsx b/packages/manager/src/routes/images.tsx
index 9dea962e15e..54424f94662 100644
--- a/packages/manager/src/routes/images.tsx
+++ b/packages/manager/src/routes/images.tsx
@@ -5,7 +5,6 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const ImagesRoutes = () => {
   return (
@@ -23,19 +22,24 @@ export const imagesRoute = createRoute({
 });
 
 export const imagesIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Images/ImagesLanding/ImagesLanding'),
-    'ImagesLanding'
-  ),
   getParentRoute: () => imagesRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Images/ImagesLanding/ImagesLanding').then(
+    (m) => m.ImagesLandingLazyRoute
+  )
+);
 
 export const imagesCreateRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Images/ImagesCreate/ImageCreate'),
-    'ImageCreate'
-  ),
   getParentRoute: () => imagesRoute,
   path: 'create',
-});
+}).lazy(() =>
+  import('src/features/Images/ImagesCreate/ImageCreate').then(
+    (m) => m.ImageCreateLazyRoute
+  )
+);
+
+export const imagesRouteTree = imagesRoute.addChildren([
+  imagesIndexRoute,
+  imagesCreateRoute,
+]);
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index 329ef2cdfcd..c4c1f39b09c 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -10,6 +10,7 @@ import { databasesRouteTree } from './databases';
 import { domainsRouteTree } from './domains';
 import { eventsRouteTree } from './events';
 import { firewallsRouteTree } from './firewalls';
+import { imagesRouteTree } from './images';
 import { kubernetesRouteTree } from './kubernetes';
 import { linodesRouteTree } from './linodes';
 import { longviewRouteTree } from './longview';
@@ -44,6 +45,7 @@ export const routeTree = rootRoute.addChildren([
   domainsRouteTree,
   eventsRouteTree,
   firewallsRouteTree,
+  imagesRouteTree,
   kubernetesRouteTree,
   linodesRouteTree,
   longviewRouteTree,
diff --git a/packages/manager/src/routes/kubernetes.tsx b/packages/manager/src/routes/kubernetes.tsx
index 244c90557f8..ec47937c030 100644
--- a/packages/manager/src/routes/kubernetes.tsx
+++ b/packages/manager/src/routes/kubernetes.tsx
@@ -1,11 +1,10 @@
-import { Outlet, createRoute } from '@tanstack/react-router';
+import { Outlet, createRoute, redirect } from '@tanstack/react-router';
 import React from 'react';
 
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const KubernetesRoutes = () => {
   return (
@@ -17,47 +16,71 @@ export const KubernetesRoutes = () => {
 };
 
 export const kubernetesRoute = createRoute({
+  beforeLoad: async ({ location }) => {
+    if (location.pathname === '/kubernetes') {
+      throw redirect({
+        to: '/kubernetes/clusters',
+      });
+    }
+  },
   component: KubernetesRoutes,
   getParentRoute: () => rootRoute,
-  path: 'kubernetes/clusters',
+  path: 'kubernetes',
 });
 
 const kubernetesIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Kubernetes/KubernetesLanding/KubernetesLanding'),
-    'KubernetesLanding'
-  ),
   getParentRoute: () => kubernetesRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Kubernetes/KubernetesLanding/KubernetesLanding').then(
+    (m) => m.KubernetesLandingLazyRoute
+  )
+);
+
+const kubernetesClustersRoute = createRoute({
+  getParentRoute: () => kubernetesRoute,
+  path: 'clusters',
+}).lazy(() =>
+  import('src/features/Kubernetes/KubernetesLanding/KubernetesLanding').then(
+    (m) => m.KubernetesLandingLazyRoute
+  )
+);
 
 const kubernetesCreateRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Kubernetes/CreateCluster/CreateCluster'),
-    'CreateCluster'
-  ),
-  getParentRoute: () => rootRoute,
-  // this route does not have the "clusters" prefix
-  path: 'kubernetes/create',
-});
+  getParentRoute: () => kubernetesRoute,
+  path: 'create',
+}).lazy(() =>
+  import('src/features/Kubernetes/CreateCluster/CreateCluster').then(
+    (m) => m.CreateClusterLazyRoute
+  )
+);
 
-const kubernetesClusterRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail'
-      ),
-    'KubernetesClusterDetail'
-  ),
+const kubernetesClusterDetailRoute = createRoute({
   getParentRoute: () => kubernetesRoute,
   parseParams: (params) => ({
     clusterID: Number(params.clusterID),
   }),
-  path: '$clusterID',
-});
+  path: 'clusters/$clusterID',
+}).lazy(() =>
+  import(
+    'src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail'
+  ).then((m) => m.KubernetesClusterDetailLazyRoute)
+);
+
+const kubernetesClusterDetailSummaryRoute = createRoute({
+  getParentRoute: () => kubernetesClusterDetailRoute,
+  path: 'summary',
+}).lazy(() =>
+  import(
+    'src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail'
+  ).then((m) => m.KubernetesClusterDetailLazyRoute)
+);
 
 export const kubernetesRouteTree = kubernetesRoute.addChildren([
   kubernetesIndexRoute,
+  kubernetesClustersRoute,
   kubernetesCreateRoute,
-  kubernetesClusterRoute,
+  kubernetesClusterDetailRoute.addChildren([
+    kubernetesClusterDetailSummaryRoute,
+  ]),
 ]);

From f90191ef001c32cb6443d057540e3d92c5270d1b Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Mon, 30 Sep 2024 15:41:36 -0400
Subject: [PATCH 31/45] lazy imports/exports events & firewalls

---
 .../src/features/Events/EventsLanding.tsx     |  5 ++
 .../Firewalls/FirewallDetail/index.tsx        |  7 +-
 .../FirewallLanding/FirewallLanding.tsx       |  5 ++
 packages/manager/src/routes/events.tsx        | 11 ++-
 packages/manager/src/routes/firewalls.tsx     | 88 +++++++++----------
 5 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/packages/manager/src/features/Events/EventsLanding.tsx b/packages/manager/src/features/Events/EventsLanding.tsx
index 1838fd761b4..39126723b7d 100644
--- a/packages/manager/src/features/Events/EventsLanding.tsx
+++ b/packages/manager/src/features/Events/EventsLanding.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { Waypoint } from 'react-waypoint';
 
@@ -123,3 +124,7 @@ export const EventsLanding = (props: Props) => {
     </>
   );
 };
+
+export const EventsLandingLazyRoute = createLazyRoute('/events')({
+  component: EventsLanding,
+});
diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx
index fa8ec70f59a..ea73a2b9dcc 100644
--- a/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx
+++ b/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 
@@ -15,8 +16,8 @@ import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { useFlags } from 'src/hooks/useFlags';
 import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled';
-import { useAllFirewallDevicesQuery } from 'src/queries/firewalls';
 import { useFirewallQuery, useMutateFirewall } from 'src/queries/firewalls';
+import { useAllFirewallDevicesQuery } from 'src/queries/firewalls';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
 import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
 
@@ -189,3 +190,7 @@ export const FirewallDetail = () => {
     </React.Fragment>
   );
 };
+
+export const FirewallDetailLazyRoute = createLazyRoute('/firewalls/$id')({
+  component: FirewallDetail,
+});
diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx
index 519c28abb19..abd47b61784 100644
--- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx
+++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
@@ -211,4 +212,8 @@ const FirewallLanding = () => {
   );
 };
 
+export const FirewallLandingLazyRoute = createLazyRoute('/firewalls')({
+  component: FirewallLanding,
+});
+
 export default React.memo(FirewallLanding);
diff --git a/packages/manager/src/routes/events.tsx b/packages/manager/src/routes/events.tsx
index ab998572846..387504e5d03 100644
--- a/packages/manager/src/routes/events.tsx
+++ b/packages/manager/src/routes/events.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const EventsRoutes = () => {
   return (
@@ -21,12 +20,12 @@ export const eventsRoute = createRoute({
 });
 
 const eventsIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Events/EventsLanding'),
-    'EventsLanding'
-  ),
   getParentRoute: () => eventsRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Events/EventsLanding').then(
+    (m) => m.EventsLandingLazyRoute
+  )
+);
 
 export const eventsRouteTree = eventsRoute.addChildren([eventsIndexRoute]);
diff --git a/packages/manager/src/routes/firewalls.tsx b/packages/manager/src/routes/firewalls.tsx
index 5b36c0f289a..f7f5ecbb1fb 100644
--- a/packages/manager/src/routes/firewalls.tsx
+++ b/packages/manager/src/routes/firewalls.tsx
@@ -5,7 +5,6 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const FirewallsRoutes = () => {
   return (
@@ -23,68 +22,61 @@ const firewallsRoute = createRoute({
 });
 
 const firewallsIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Firewalls/FirewallLanding/FirewallLanding')
-  ),
   getParentRoute: () => firewallsRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Firewalls/FirewallLanding/FirewallLanding').then(
+    (m) => m.FirewallLandingLazyRoute
+  )
+);
+
+const firewallCreateRoute = createRoute({
+  getParentRoute: () => firewallsRoute,
+  path: 'create',
+}).lazy(() =>
+  import('src/features/Firewalls/FirewallLanding/FirewallLanding').then(
+    (m) => m.FirewallLandingLazyRoute
+  )
+);
 
 const firewallDetailRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Firewalls/FirewallDetail'),
-    'FirewallDetail'
-  ),
   getParentRoute: () => firewallsRoute,
   parseParams: (params) => ({
     id: Number(params.id),
   }),
   path: '$id',
-});
-
-const firewallCreateRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Firewalls/FirewallLanding/FirewallLanding')
-  ),
-  getParentRoute: () => firewallsRoute,
-  path: 'create',
-});
+}).lazy(() =>
+  import('src/features/Firewalls/FirewallDetail/index').then(
+    (m) => m.FirewallDetailLazyRoute
+  )
+);
 
 const firewallDetailRulesRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/Firewalls/FirewallDetail/Rules/FirewallRulesLanding'
-      ),
-    'FirewallRulesLanding'
-  ),
-  getParentRoute: () => firewallDetailRoute,
-  path: 'rules',
-});
+  getParentRoute: () => firewallsRoute,
+  path: '$id/rules',
+}).lazy(() =>
+  import('src/features/Firewalls/FirewallDetail/index').then(
+    (m) => m.FirewallDetailLazyRoute
+  )
+);
 
 const firewallDetailLinodesRoute = createRoute({
-  component: strictLazyRouteComponent(() =>
-    import(
-      'src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding'
-    ).then((module) => ({
-      default: module.FirewallDeviceLanding,
-    }))
-  ),
-  getParentRoute: () => firewallDetailRoute,
-  path: 'linodes',
-});
+  getParentRoute: () => firewallsRoute,
+  path: '$id/linodes',
+}).lazy(() =>
+  import('src/features/Firewalls/FirewallDetail/index').then(
+    (m) => m.FirewallDetailLazyRoute
+  )
+);
 
 const firewallDetailNodebalancersRoute = createRoute({
-  component: strictLazyRouteComponent(() =>
-    import(
-      'src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding'
-    ).then((module) => ({
-      default: module.FirewallDeviceLanding,
-    }))
-  ),
-  getParentRoute: () => firewallDetailRoute,
-  path: 'nodebalancers',
-});
+  getParentRoute: () => firewallsRoute,
+  path: '$id/nodebalancers',
+}).lazy(() =>
+  import('src/features/Firewalls/FirewallDetail/index').then(
+    (m) => m.FirewallDetailLazyRoute
+  )
+);
 
 export const firewallsRouteTree = firewallsRoute.addChildren([
   firewallsIndexRoute,

From 72cb80853a16fb32ffdde44179d3e2c4b1829a7d Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Mon, 30 Sep 2024 16:35:31 -0400
Subject: [PATCH 32/45] lazy imports/exports remaining

---
 .../AccountActivationLanding.tsx              |   7 +
 .../src/features/Account/AccountLanding.tsx   |  12 +-
 .../manager/src/features/Betas/BetaSignup.tsx |   5 +
 .../src/features/Betas/BetasLanding.tsx       |  10 +-
 .../Billing/InvoiceDetail/InvoiceDetail.tsx   |   7 +
 .../features/CloudPulse/CloudPulseLanding.tsx |   7 +
 .../DatabaseCreate/DatabaseCreate.tsx         |   5 +
 .../Databases/DatabaseDetail/index.tsx        |   7 +
 .../DatabaseLanding/DatabaseLanding.tsx       |   5 +
 .../Domains/CreateDomain/CreateDomain.tsx     |  29 ++--
 .../features/Domains/DomainDetail/index.tsx   |   5 +
 .../src/features/Domains/DomainsLanding.tsx   |   5 +
 .../EntityTransfersCreate.tsx                 |   7 +
 .../manager/src/features/Users/UserDetail.tsx |   5 +
 packages/manager/src/routes/account.tsx       | 143 ++++++++++++------
 packages/manager/src/routes/allPaths.ts       |   4 -
 packages/manager/src/routes/betas.tsx         |  15 +-
 packages/manager/src/routes/cloudPulse.tsx    |  11 +-
 packages/manager/src/routes/databases.tsx     |  68 +++++----
 packages/manager/src/routes/domains.tsx       |  41 +++--
 packages/manager/src/routes/routes.test.tsx   |   2 +-
 packages/manager/src/routes/utils.test.tsx    | 140 -----------------
 packages/manager/src/routes/utils.ts          |  93 ------------
 packages/manager/src/routes/utils/allPaths.ts |  45 ++++++
 24 files changed, 303 insertions(+), 375 deletions(-)
 delete mode 100644 packages/manager/src/routes/allPaths.ts
 delete mode 100644 packages/manager/src/routes/utils.test.tsx
 delete mode 100644 packages/manager/src/routes/utils.ts
 create mode 100644 packages/manager/src/routes/utils/allPaths.ts

diff --git a/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx b/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx
index ea68ced58e2..48005a66ee7 100644
--- a/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx
+++ b/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx
@@ -1,4 +1,5 @@
 import Warning from '@mui/icons-material/CheckCircle';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -69,4 +70,10 @@ const AccountActivationLanding = () => {
   );
 };
 
+export const accountActivationLandingLazyRoute = createLazyRoute(
+  '/account-activation'
+)({
+  component: AccountActivationLanding,
+});
+
 export default React.memo(AccountActivationLanding);
diff --git a/packages/manager/src/features/Account/AccountLanding.tsx b/packages/manager/src/features/Account/AccountLanding.tsx
index e99de4484f9..8857068450f 100644
--- a/packages/manager/src/features/Account/AccountLanding.tsx
+++ b/packages/manager/src/features/Account/AccountLanding.tsx
@@ -1,11 +1,9 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { matchPath, useHistory, useLocation } from 'react-router-dom';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import {
-  LandingHeader,
-  LandingHeaderProps,
-} from 'src/components/LandingHeader';
+import { LandingHeader } from 'src/components/LandingHeader';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';
@@ -23,6 +21,8 @@ import AccountLogins from './AccountLogins';
 import { SwitchAccountButton } from './SwitchAccountButton';
 import { SwitchAccountDrawer } from './SwitchAccountDrawer';
 
+import type { LandingHeaderProps } from 'src/components/LandingHeader';
+
 const Billing = React.lazy(() =>
   import('src/features/Billing/BillingDetail').then((module) => ({
     default: module.BillingDetail,
@@ -217,4 +217,8 @@ const AccountLanding = () => {
   );
 };
 
+export const accountLandingLazyRoute = createLazyRoute('/account')({
+  component: AccountLanding,
+});
+
 export default AccountLanding;
diff --git a/packages/manager/src/features/Betas/BetaSignup.tsx b/packages/manager/src/features/Betas/BetaSignup.tsx
index 448d6dad3fa..d89b04eba69 100644
--- a/packages/manager/src/features/Betas/BetaSignup.tsx
+++ b/packages/manager/src/features/Betas/BetaSignup.tsx
@@ -1,4 +1,5 @@
 import { Stack } from '@mui/system';
+import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -183,4 +184,8 @@ EAP and the MSA, this EAP shall be deemed controlling only with respect to its e
   );
 };
 
+export const betaSignupLazyRoute = createLazyRoute('/betas/signup')({
+  component: BetaSignup,
+});
+
 export default BetaSignup;
diff --git a/packages/manager/src/features/Betas/BetasLanding.tsx b/packages/manager/src/features/Betas/BetasLanding.tsx
index 9cc93fc6a1c..f0dc3130b1f 100644
--- a/packages/manager/src/features/Betas/BetasLanding.tsx
+++ b/packages/manager/src/features/Betas/BetasLanding.tsx
@@ -1,13 +1,15 @@
-import { Stack } from 'src/components/Stack';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { LandingHeader } from 'src/components/LandingHeader/LandingHeader';
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
+import { Stack } from 'src/components/Stack';
 import { BetaDetailsList } from 'src/features/Betas/BetaDetailsList';
 import { useAccountBetasQuery } from 'src/queries/account/betas';
 import { useBetasQuery } from 'src/queries/betas';
 import { categorizeBetasByStatus } from 'src/utilities/betaUtils';
-import { AccountBeta, Beta } from '@linode/api-v4';
+
+import type { AccountBeta, Beta } from '@linode/api-v4';
 
 const BetasLanding = () => {
   const {
@@ -69,4 +71,8 @@ const BetasLanding = () => {
   );
 };
 
+export const betasLandingLazyRoute = createLazyRoute('/betas')({
+  component: BetasLanding,
+});
+
 export default BetasLanding;
diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
index d39850372e5..fffe04f5456 100644
--- a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
+++ b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
@@ -2,6 +2,7 @@ import { getInvoice, getInvoiceItems } from '@linode/api-v4/lib/account';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import { useTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -269,3 +270,9 @@ export const InvoiceDetail = () => {
     </Paper>
   );
 };
+
+export const invoiceDetailLazyRoute = createLazyRoute(
+  '/account/billing/invoices/$invoiceId'
+)({
+  component: InvoiceDetail,
+});
diff --git a/packages/manager/src/features/CloudPulse/CloudPulseLanding.tsx b/packages/manager/src/features/CloudPulse/CloudPulseLanding.tsx
index 5f03e47e53c..2473ae994f4 100644
--- a/packages/manager/src/features/CloudPulse/CloudPulseLanding.tsx
+++ b/packages/manager/src/features/CloudPulse/CloudPulseLanding.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
@@ -21,3 +22,9 @@ export const CloudPulseLanding = () => {
     </>
   );
 };
+
+export const CloudPulseLandingLazyRoute = createLazyRoute(
+  '/monitor/cloudpulse'
+)({
+  component: CloudPulseLanding,
+});
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
index 2e26cfe658a..127da630124 100644
--- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
@@ -1,5 +1,6 @@
 import { createDatabaseSchema } from '@linode/validation/lib/databases.schema';
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import { useFormik } from 'formik';
 import { groupBy } from 'ramda';
 import * as React from 'react';
@@ -724,4 +725,8 @@ const determineCompressionType = (engine: string) => {
   return undefined;
 };
 
+export const DatabaseCreateLazyRoute = createLazyRoute('/databases/create')({
+  component: DatabaseCreate,
+});
+
 export default DatabaseCreate;
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
index 0f858f039cd..6e5d0089a46 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { matchPath, useHistory, useParams } from 'react-router-dom';
 
@@ -208,4 +209,10 @@ export const DatabaseDetail = () => {
   );
 };
 
+export const DatabaseDetailLazyRoute = createLazyRoute(
+  '/databases/$engine/$databaseId'
+)({
+  component: DatabaseDetail,
+});
+
 export default DatabaseDetail;
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
index 7fd11b0dcb4..aaea379b91c 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
@@ -1,4 +1,5 @@
 import { Box } from '@mui/material';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -207,4 +208,8 @@ const DatabaseLanding = () => {
   );
 };
 
+export const DatabaseLandingLazyRoute = createLazyRoute('/databases')({
+  component: DatabaseLanding,
+});
+
 export default React.memo(DatabaseLanding);
diff --git a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx
index f18d76cc26b..f350faa7930 100644
--- a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx
+++ b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx
@@ -1,14 +1,7 @@
-import { Linode } from '@linode/api-v4';
-import {
-  CreateDomainPayload,
-  Domain,
-  DomainType,
-} from '@linode/api-v4/lib/domains';
-import { NodeBalancer } from '@linode/api-v4/lib/nodebalancers';
-import { APIError } from '@linode/api-v4/lib/types';
 import { createDomainSchema } from '@linode/validation/lib/domains.schema';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
+import { createLazyRoute } from '@tanstack/react-router';
 import { useFormik } from 'formik';
 import { path } from 'ramda';
 import * as React from 'react';
@@ -38,15 +31,21 @@ import {
   handleGeneralErrors,
 } from 'src/utilities/formikErrorUtils';
 import { handleFormikBlur } from 'src/utilities/formikTrimUtil';
-import {
-  ExtendedIP,
-  extendedIPToString,
-  stringToExtendedIP,
-} from 'src/utilities/ipUtils';
+import { extendedIPToString, stringToExtendedIP } from 'src/utilities/ipUtils';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 
 import { generateDefaultDomainRecords } from '../domainUtils';
 
+import type { Linode } from '@linode/api-v4';
+import type {
+  CreateDomainPayload,
+  Domain,
+  DomainType,
+} from '@linode/api-v4/lib/domains';
+import type { NodeBalancer } from '@linode/api-v4/lib/nodebalancers';
+import type { APIError } from '@linode/api-v4/lib/types';
+import type { ExtendedIP } from 'src/utilities/ipUtils';
+
 interface DefaultRecordsSetting {
   label: string;
   value: 'linode' | 'nodebalancer' | 'none';
@@ -448,6 +447,10 @@ export const CreateDomain = () => {
   );
 };
 
+export const CreateDomainLazyRoute = createLazyRoute('/domains/create')({
+  component: CreateDomain,
+});
+
 const StyledGrid = styled(Grid, { label: 'StyledGrid' })({
   width: '100%',
 });
diff --git a/packages/manager/src/features/Domains/DomainDetail/index.tsx b/packages/manager/src/features/Domains/DomainDetail/index.tsx
index 1f2226acc23..354be60f3ac 100644
--- a/packages/manager/src/features/Domains/DomainDetail/index.tsx
+++ b/packages/manager/src/features/Domains/DomainDetail/index.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -42,3 +43,7 @@ export const DomainDetailRouting = () => {
   // page with an open drawer.
   return <DomainsLanding domainForEditing={domain} />;
 };
+
+export const DomainDetailLazyRoute = createLazyRoute('/domains/$domainId')({
+  component: DomainDetailRouting,
+});
diff --git a/packages/manager/src/features/Domains/DomainsLanding.tsx b/packages/manager/src/features/Domains/DomainsLanding.tsx
index f21b0b84e32..8b9e6b3fae3 100644
--- a/packages/manager/src/features/Domains/DomainsLanding.tsx
+++ b/packages/manager/src/features/Domains/DomainsLanding.tsx
@@ -1,4 +1,5 @@
 import { styled } from '@mui/material/styles';
+import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -333,3 +334,7 @@ const StyledButon = styled(Button, { label: 'StyledButton' })(({ theme }) => ({
   marginLeft: `-${theme.spacing()}`,
   whiteSpace: 'nowrap',
 }));
+
+export const DomainsLandingLazyRoute = createLazyRoute('/domains')({
+  component: DomainsLanding,
+});
diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate.tsx
index b021e5fa729..8801a7e6f63 100644
--- a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate.tsx
+++ b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate.tsx
@@ -1,5 +1,6 @@
 import Grid from '@mui/material/Unstable_Grid2';
 import { useQueryClient } from '@tanstack/react-query';
+import { createLazyRoute } from '@tanstack/react-router';
 import { curry } from 'ramda';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
@@ -123,3 +124,9 @@ export const EntityTransfersCreate = () => {
     </>
   );
 };
+
+export const entityTransfersCreateLazyRoute = createLazyRoute(
+  '/account/service-transfers/create'
+)({
+  component: EntityTransfersCreate,
+});
diff --git a/packages/manager/src/features/Users/UserDetail.tsx b/packages/manager/src/features/Users/UserDetail.tsx
index 024db9c463a..6bba93cb2df 100644
--- a/packages/manager/src/features/Users/UserDetail.tsx
+++ b/packages/manager/src/features/Users/UserDetail.tsx
@@ -1,4 +1,5 @@
 import { useQueryClient } from '@tanstack/react-query';
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 
@@ -88,3 +89,7 @@ export const UserDetail = () => {
     </>
   );
 };
+
+export const userDetailLazyRoute = createLazyRoute('/account/users/$username')({
+  component: UserDetail,
+});
diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
index a3a06d96ea1..69d5b81c58c 100644
--- a/packages/manager/src/routes/account.tsx
+++ b/packages/manager/src/routes/account.tsx
@@ -5,7 +5,6 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const AccountRoutes = () => {
   return (
@@ -23,89 +22,135 @@ const accountRoute = createRoute({
 });
 
 const accountIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Account/AccountLanding')
-  ),
   getParentRoute: () => accountRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Account/AccountLanding').then(
+    (m) => m.accountLandingLazyRoute
+  )
+);
+
+const accountBillingRoute = createRoute({
+  getParentRoute: () => accountRoute,
+  path: 'billing',
+}).lazy(() =>
+  import('src/features/Account/AccountLanding').then(
+    (m) => m.accountLandingLazyRoute
+  )
+);
+
+const accountUsersRoute = createRoute({
+  getParentRoute: () => accountRoute,
+  path: '/users',
+}).lazy(() =>
+  import('src/features/Account/AccountLanding').then(
+    (m) => m.accountLandingLazyRoute
+  )
+);
+
+const accountLoginHistoryRoute = createRoute({
+  getParentRoute: () => accountRoute,
+  path: '/login-history',
+}).lazy(() =>
+  import('src/features/Account/AccountLanding').then(
+    (m) => m.accountLandingLazyRoute
+  )
+);
+
+const accountServiceTransfersRoute = createRoute({
+  getParentRoute: () => accountRoute,
+  path: '/service-transfers',
+}).lazy(() =>
+  import('src/features/Account/AccountLanding').then(
+    (m) => m.accountLandingLazyRoute
+  )
+);
+
+const accountMaintenanceRoute = createRoute({
+  getParentRoute: () => accountRoute,
+  path: '/maintenance',
+}).lazy(() =>
+  import('src/features/Account/AccountLanding').then(
+    (m) => m.accountLandingLazyRoute
+  )
+);
+
+const accountSettingsRoute = createRoute({
+  getParentRoute: () => accountRoute,
+  path: '/settings',
+}).lazy(() =>
+  import('src/features/Account/AccountLanding').then(
+    (m) => m.accountLandingLazyRoute
+  )
+);
 
 const accountUsersUsernameRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Users/UserDetail'),
-    'UserDetail'
-  ),
   getParentRoute: () => accountRoute,
   path: 'users/$username',
-});
+}).lazy(() =>
+  import('src/features/Users/UserDetail').then((m) => m.userDetailLazyRoute)
+);
 
 const accountUsersUsernameProfileRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Users/UserProfile/UserProfile'),
-    'UserProfile'
-  ),
-  getParentRoute: () => accountUsersUsernameRoute,
+  getParentRoute: () => accountRoute,
   path: 'users/$username/profile',
-});
+}).lazy(() =>
+  import('src/features/Users/UserDetail').then((m) => m.userDetailLazyRoute)
+);
 
 const accountUsersUsernamePermissionsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Users/UserPermissions')
-  ),
   getParentRoute: () => accountUsersUsernameRoute,
   path: 'users/$username/permissions',
-});
-
-const accountBillingRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Account/AccountLanding')
-  ),
-  getParentRoute: () => accountRoute,
-  path: 'billing',
-});
+}).lazy(() =>
+  import('src/features/Users/UserDetail').then((m) => m.userDetailLazyRoute)
+);
 
 const accountBillingEditRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Account/AccountLanding')
-  ),
   getParentRoute: () => accountRoute,
   path: 'billing/edit',
-});
+}).lazy(() =>
+  import('src/features/Account/AccountLanding').then(
+    (m) => m.accountLandingLazyRoute
+  )
+);
 
 const accountInvoicesInvoiceIdRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Billing/InvoiceDetail/InvoiceDetail'),
-    'InvoiceDetail'
-  ),
   getParentRoute: () => accountRoute,
   parseParams: (params) => ({
     invoiceId: Number(params.invoiceId),
   }),
   path: 'billing/invoices/$invoiceId',
-});
+}).lazy(() =>
+  import('src/features/Billing/InvoiceDetail/InvoiceDetail').then(
+    (m) => m.invoiceDetailLazyRoute
+  )
+);
 
 const accountEntityTransfersCreateRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate'
-      ),
-    'EntityTransfersCreate'
-  ),
   getParentRoute: () => accountRoute,
   path: 'service-transfers/create',
-});
+}).lazy(() =>
+  import(
+    'src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate'
+  ).then((m) => m.entityTransfersCreateLazyRoute)
+);
 
 const accountActivationLandingRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/components/AccountActivation/AccountActivationLanding')
-  ),
   getParentRoute: () => rootRoute,
   path: 'account-activation',
-});
+}).lazy(() =>
+  import('src/components/AccountActivation/AccountActivationLanding').then(
+    (m) => m.accountActivationLandingLazyRoute
+  )
+);
 
 export const accountRouteTree = accountRoute.addChildren([
   accountIndexRoute,
+  accountUsersRoute,
+  accountLoginHistoryRoute,
+  accountServiceTransfersRoute,
+  accountMaintenanceRoute,
+  accountSettingsRoute,
   accountUsersUsernameRoute.addChildren([
     accountUsersUsernameProfileRoute,
     accountUsersUsernamePermissionsRoute,
diff --git a/packages/manager/src/routes/allPaths.ts b/packages/manager/src/routes/allPaths.ts
deleted file mode 100644
index 8e31bfbd1c2..00000000000
--- a/packages/manager/src/routes/allPaths.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { routeTree } from './';
-import { getAllRoutePaths } from './utils';
-
-export const allPaths = getAllRoutePaths(routeTree);
diff --git a/packages/manager/src/routes/betas.tsx b/packages/manager/src/routes/betas.tsx
index 35b6fe193dc..6bed92d3221 100644
--- a/packages/manager/src/routes/betas.tsx
+++ b/packages/manager/src/routes/betas.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const BetaRoutes = () => {
   return (
@@ -21,20 +20,18 @@ const betaRoute = createRoute({
 });
 
 const betaLandingRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Betas/BetasLanding')
-  ),
   getParentRoute: () => betaRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Betas/BetasLanding').then((m) => m.betasLandingLazyRoute)
+);
 
 const betaSignupRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Betas/BetaSignup')
-  ),
   getParentRoute: () => betaRoute,
   path: 'signup',
-});
+}).lazy(() =>
+  import('src/features/Betas/BetaSignup').then((m) => m.betaSignupLazyRoute)
+);
 
 export const betaRouteTree = betaRoute.addChildren([
   betaLandingRoute,
diff --git a/packages/manager/src/routes/cloudPulse.tsx b/packages/manager/src/routes/cloudPulse.tsx
index 654617c4b4a..b2d483b0337 100644
--- a/packages/manager/src/routes/cloudPulse.tsx
+++ b/packages/manager/src/routes/cloudPulse.tsx
@@ -5,7 +5,6 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const CloudPulseRoutes = () => {
   return (
@@ -23,13 +22,13 @@ const cloudPulseRoute = createRoute({
 });
 
 const cloudPulseLandingRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/CloudPulse/CloudPulseLanding'),
-    'CloudPulseLanding'
-  ),
   getParentRoute: () => cloudPulseRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/CloudPulse/CloudPulseLanding').then(
+    (m) => m.CloudPulseLandingLazyRoute
+  )
+);
 
 export const cloudPulseRouteTree = cloudPulseRoute.addChildren([
   cloudPulseLandingRoute,
diff --git a/packages/manager/src/routes/databases.tsx b/packages/manager/src/routes/databases.tsx
index 1c9ae0ee0c7..f67c717852c 100644
--- a/packages/manager/src/routes/databases.tsx
+++ b/packages/manager/src/routes/databases.tsx
@@ -6,7 +6,6 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const DatabasesRoutes = () => {
   return (
@@ -25,68 +24,71 @@ const databasesRoute = createRoute({
 });
 
 const databasesIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Databases/DatabaseLanding')
-  ),
   getParentRoute: () => databasesRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Databases/DatabaseLanding/DatabaseLanding').then(
+    (m) => m.DatabaseLandingLazyRoute
+  )
+);
 
 const databasesCreateRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Databases/DatabaseCreate')
-  ),
   getParentRoute: () => databasesRoute,
   path: 'create',
-});
+}).lazy(() =>
+  import('src/features/Databases/DatabaseCreate/DatabaseCreate').then(
+    (m) => m.DatabaseCreateLazyRoute
+  )
+);
 
 const databasesDetailRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Databases/DatabaseDetail')
-  ),
   getParentRoute: () => databasesRoute,
   parseParams: (params) => ({
     databaseId: Number(params.databaseId),
     engine: params.engine,
   }),
   path: '$engine/$databaseId',
-});
+}).lazy(() =>
+  import('src/features/Databases/DatabaseDetail').then(
+    (m) => m.DatabaseDetailLazyRoute
+  )
+);
 
 const databasesDetailSummaryRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Databases/DatabaseDetail/DatabaseSummary')
-  ),
   getParentRoute: () => databasesDetailRoute,
   path: 'summary',
-});
+}).lazy(() =>
+  import('src/features/Databases/DatabaseDetail').then(
+    (m) => m.DatabaseDetailLazyRoute
+  )
+);
 
 const databasesDetailBackupsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Databases/DatabaseDetail/DatabaseBackups')
-  ),
   getParentRoute: () => databasesDetailRoute,
   path: 'backups',
-});
+}).lazy(() =>
+  import('src/features/Databases/DatabaseDetail').then(
+    (m) => m.DatabaseDetailLazyRoute
+  )
+);
 
 const databasesDetailResizeRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () =>
-      import(
-        'src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize'
-      ),
-    'DatabaseResize'
-  ),
   getParentRoute: () => databasesDetailRoute,
   path: 'resize',
-});
+}).lazy(() =>
+  import('src/features/Databases/DatabaseDetail').then(
+    (m) => m.DatabaseDetailLazyRoute
+  )
+);
 
 const databasesDetailSettingsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Databases/DatabaseDetail/DatabaseSettings')
-  ),
   getParentRoute: () => databasesDetailRoute,
   path: 'settings',
-});
+}).lazy(() =>
+  import('src/features/Databases/DatabaseDetail').then(
+    (m) => m.DatabaseDetailLazyRoute
+  )
+);
 
 export const databasesRouteTree = databasesRoute.addChildren([
   databasesIndexRoute,
diff --git a/packages/manager/src/routes/domains.tsx b/packages/manager/src/routes/domains.tsx
index f67a729c899..afaefa2f91f 100644
--- a/packages/manager/src/routes/domains.tsx
+++ b/packages/manager/src/routes/domains.tsx
@@ -5,7 +5,6 @@ import { ProductInformationBanner } from 'src/components/ProductInformationBanne
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 
 import { rootRoute } from './root';
-import { strictLazyRouteComponent } from './utils';
 
 export const DomainsRoutes = () => {
   return (
@@ -23,43 +22,43 @@ const domainsRoute = createRoute({
 });
 
 const domainsIndexRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Domains/DomainsLanding'),
-    'DomainsLanding'
-  ),
   getParentRoute: () => domainsRoute,
   path: '/',
-});
+}).lazy(() =>
+  import('src/features/Domains/DomainsLanding').then(
+    (m) => m.DomainsLandingLazyRoute
+  )
+);
 
 const domainCreateRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Domains/CreateDomain/CreateDomain'),
-    'CreateDomain'
-  ),
   getParentRoute: () => domainsRoute,
   path: 'create',
-});
+}).lazy(() =>
+  import('src/features/Domains/CreateDomain/CreateDomain').then(
+    (m) => m.CreateDomainLazyRoute
+  )
+);
 
 const domainDetailRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Domains/DomainDetail'),
-    'DomainDetailRouting'
-  ),
   getParentRoute: () => domainsRoute,
   parseParams: (params) => ({
     domainId: Number(params.domainId),
   }),
   path: '$domainId',
-});
+}).lazy(() =>
+  import('src/features/Domains/DomainDetail').then(
+    (m) => m.DomainDetailLazyRoute
+  )
+);
 
 const domainDetailRecordsRoute = createRoute({
-  component: strictLazyRouteComponent(
-    () => import('src/features/Domains/DomainDetail'),
-    'DomainDetailRouting'
-  ),
   getParentRoute: () => domainDetailRoute,
   path: 'records',
-});
+}).lazy(() =>
+  import('src/features/Domains/DomainDetail').then(
+    (m) => m.DomainDetailLazyRoute
+  )
+);
 
 export const domainsRouteTree = domainsRoute.addChildren([
   domainsIndexRoute,
diff --git a/packages/manager/src/routes/routes.test.tsx b/packages/manager/src/routes/routes.test.tsx
index d5544f68a49..bd32bf2dcb2 100644
--- a/packages/manager/src/routes/routes.test.tsx
+++ b/packages/manager/src/routes/routes.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { allPaths } from './allPaths';
+import { allPaths } from './utils/allPaths';
 import { routeTree } from './index';
 
 // Mock any context or dependencies your routes might need
diff --git a/packages/manager/src/routes/utils.test.tsx b/packages/manager/src/routes/utils.test.tsx
deleted file mode 100644
index fb15b18108d..00000000000
--- a/packages/manager/src/routes/utils.test.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { lazyRouteComponent } from '@tanstack/react-router';
-import React from 'react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { strictLazyRouteComponent } from './utils';
-
-vi.mock('@tanstack/react-router', () => ({
-  lazyRouteComponent: vi.fn((loader) => loader),
-}));
-
-describe('strictLazyRouteComponent', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('should handle default exports correctly', async () => {
-    const DefaultComponent = () => <div>Default Component</div>;
-    const mockImporter = vi.fn(() =>
-      Promise.resolve({ default: DefaultComponent })
-    );
-
-    const result = strictLazyRouteComponent(mockImporter);
-    expect(lazyRouteComponent).toHaveBeenCalledWith(expect.any(Function));
-
-    const loadedComponent = await (result as any)();
-    expect(loadedComponent).toEqual({ default: DefaultComponent });
-  });
-
-  it('should handle named exports correctly', async () => {
-    const NamedComponent = () => <div>Named Component</div>;
-    const mockImporter = vi.fn(() => Promise.resolve({ NamedComponent }));
-
-    const result = strictLazyRouteComponent(mockImporter, 'NamedComponent');
-    expect(lazyRouteComponent).toHaveBeenCalledWith(expect.any(Function));
-
-    const loadedComponent = await (result as any)();
-    expect(loadedComponent).toEqual({ default: NamedComponent });
-  });
-
-  it('should throw an error for non-existent named exports', async () => {
-    const mockImporter = vi.fn(() =>
-      Promise.resolve({ SomeOtherComponent: () => null })
-    );
-
-    const result = strictLazyRouteComponent(
-      mockImporter,
-      // @ts-expect-error - forcing the wrong type
-      'NonExistentComponent'
-    );
-    await expect((result as any)()).rejects.toThrow(
-      'Export "NonExistentComponent" not found in module'
-    );
-  });
-
-  it('should throw an error for modules without default export when no name is provided', async () => {
-    const mockImporter = vi.fn(() =>
-      Promise.resolve({ SomeComponent: () => null })
-    );
-
-    // @ts-expect-error - forcing the wrong type
-    const result = strictLazyRouteComponent(mockImporter);
-    await expect((result as any)()).rejects.toThrow(
-      'No default export found in module'
-    );
-  });
-
-  it('should handle React.forwardRef components', async () => {
-    const ForwardRefComponent = React.forwardRef(() => (
-      <div>ForwardRef Component</div>
-    ));
-    const mockImporter = vi.fn(() =>
-      Promise.resolve({ default: ForwardRefComponent })
-    );
-
-    const result = strictLazyRouteComponent(mockImporter);
-    const loadedComponent = await (result as any)();
-    expect(loadedComponent).toEqual({ default: ForwardRefComponent });
-  });
-
-  it('should handle React.memo components', async () => {
-    const MemoComponent = React.memo(() => <div>Memo Component</div>);
-    const mockImporter = vi.fn(() => Promise.resolve({ MemoComponent }));
-
-    const result = strictLazyRouteComponent(mockImporter, 'MemoComponent');
-    const loadedComponent = await (result as any)();
-    expect(loadedComponent).toEqual({ default: MemoComponent });
-  });
-
-  it('should throw an error for non-component exports', async () => {
-    const mockImporter = vi.fn(() =>
-      Promise.resolve({ notAComponent: 'string' })
-    );
-
-    // @ts-expect-error - forcing the wrong type
-    const result = strictLazyRouteComponent(mockImporter, 'notAComponent');
-    await expect((result as any)()).rejects.toThrow(
-      'Export "notAComponent" is not a valid React component'
-    );
-  });
-
-  it('should handle async imports correctly', async () => {
-    const AsyncComponent = () => <div>Async Component</div>;
-    const mockImporter = vi.fn(() => Promise.resolve({ AsyncComponent }));
-
-    const result = strictLazyRouteComponent(mockImporter, 'AsyncComponent');
-    expect(lazyRouteComponent).toHaveBeenCalledWith(expect.any(Function));
-
-    const loadedComponent = await (result as any)();
-    expect(loadedComponent).toEqual({ default: AsyncComponent });
-    expect(mockImporter).toHaveBeenCalledTimes(1);
-  });
-
-  it('should work with TypeScript generics', async () => {
-    interface Props {
-      name: string;
-    }
-    const GenericComponent: React.FC<Props> = ({ name }) => (
-      <div>Hello, {name}</div>
-    );
-    const mockImporter = vi.fn(() => Promise.resolve({ GenericComponent }));
-
-    const result = strictLazyRouteComponent(mockImporter, 'GenericComponent');
-    const loadedComponent = await (result as any)();
-    expect(loadedComponent).toEqual({ default: GenericComponent });
-  });
-
-  it('should throw a type error when no export name is provided for named exports', () => {
-    const mockImporter = () => Promise.resolve({ NamedComponent: () => null });
-
-    // @ts-expect-error - forcing the wrong type
-    strictLazyRouteComponent(mockImporter);
-  });
-
-  it('should not throw a type error when no export name is provided for default exports', () => {
-    const mockImporter = () => Promise.resolve({ default: () => null });
-
-    // This should not throw a TypeScript error
-    strictLazyRouteComponent(mockImporter);
-  });
-});
diff --git a/packages/manager/src/routes/utils.ts b/packages/manager/src/routes/utils.ts
deleted file mode 100644
index 3a4c66fe11b..00000000000
--- a/packages/manager/src/routes/utils.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { lazyRouteComponent } from '@tanstack/react-router';
-
-type AnyModule = { [key: string]: React.ComponentType<unknown> };
-
-/**
- * This function is a wrapper around lazyRouteComponent that ensures the
- * component is a valid React component.
- *
- * lazyRouteComponent does not provide the type safety we need to ensure handle both default and named exports.
- * By using a function overload we do just that.
- */
-export function strictLazyRouteComponent<
-  T extends { default: React.ComponentType<unknown> }
->(importer: () => Promise<T>): ReturnType<typeof lazyRouteComponent>;
-export function strictLazyRouteComponent<
-  T extends AnyModule,
-  K extends keyof T
->(
-  importer: () => Promise<T>,
-  exportName: K
-): ReturnType<typeof lazyRouteComponent>;
-export function strictLazyRouteComponent<T extends AnyModule>(
-  importer: () => Promise<T>,
-  exportName?: string
-): ReturnType<typeof lazyRouteComponent> {
-  return lazyRouteComponent(() =>
-    importer().then((module) => {
-      let component: React.ComponentType<unknown>;
-
-      if (exportName) {
-        if (exportName in module) {
-          component = module[exportName] as React.ComponentType<unknown>;
-        } else {
-          throw new Error(`Export "${exportName}" not found in module`);
-        }
-      } else if ('default' in module) {
-        component = module.default;
-      } else {
-        throw new Error('No default export found in module');
-      }
-
-      if (typeof component !== 'function' && typeof component !== 'object') {
-        throw new Error(
-          `Export "${exportName || 'default'}" is not a valid React component`
-        );
-      }
-
-      return { default: component };
-    })
-  );
-}
-
-/**
- * This function is meant to be used for testing purposes only.
- * It allows us to generate a list of all unique @tanstack/router paths defined in the routing factory.
- *
- * We import this util in cypress to loop through all routes and test them.
- * It probably should not be used for anything else.
- */
-export const getAllRoutePaths = (route: any, parentPath = ''): string[] => {
-  let currentPath = parentPath
-    ? `${parentPath}/${route.path || ''}`
-    : route.path || '';
-
-  // Remove leading and trailing slashes
-  currentPath = currentPath.replace(/^\/+|\/+$/g, '');
-
-  const paths: Set<string> = new Set();
-
-  // Check if the current path is valid
-  if (currentPath && currentPath !== '//') {
-    paths.add('/' + currentPath);
-  }
-
-  if (route.children) {
-    route.children.forEach((childRoute: any) => {
-      getAllRoutePaths(childRoute, currentPath).forEach((path) =>
-        paths.add(path)
-      );
-    });
-  }
-
-  // Replace dynamic segments with mock values
-  return Array.from(paths).map((path) =>
-    path.replace(/\/\$(\w+)/g, (_, segment) => {
-      if (segment.toLowerCase().includes('id')) {
-        return '/1';
-      } else {
-        return `/mock-${segment}`;
-      }
-    })
-  );
-};
diff --git a/packages/manager/src/routes/utils/allPaths.ts b/packages/manager/src/routes/utils/allPaths.ts
new file mode 100644
index 00000000000..6a8779ad2e3
--- /dev/null
+++ b/packages/manager/src/routes/utils/allPaths.ts
@@ -0,0 +1,45 @@
+import { routeTree } from '..';
+
+/**
+ * This function is meant to be used for testing purposes only.
+ * It allows us to generate a list of all unique @tanstack/router paths defined in the routing factory.
+ *
+ * We import this util in cypress to loop through all routes and test them.
+ * It probably should not be used for anything else.
+ */
+export const getAllRoutePaths = (route: any, parentPath = ''): string[] => {
+  let currentPath = parentPath
+    ? `${parentPath}/${route.path || ''}`
+    : route.path || '';
+
+  // Remove leading and trailing slashes
+  currentPath = currentPath.replace(/^\/+|\/+$/g, '');
+
+  const paths: Set<string> = new Set();
+
+  // Check if the current path is valid
+  if (currentPath && currentPath !== '//') {
+    paths.add('/' + currentPath);
+  }
+
+  if (route.children) {
+    route.children.forEach((childRoute: any) => {
+      getAllRoutePaths(childRoute, currentPath).forEach((path) =>
+        paths.add(path)
+      );
+    });
+  }
+
+  // Replace dynamic segments with mock values
+  return Array.from(paths).map((path) =>
+    path.replace(/\/\$(\w+)/g, (_, segment) => {
+      if (segment.toLowerCase().includes('id')) {
+        return '/1';
+      } else {
+        return `/mock-${segment}`;
+      }
+    })
+  );
+};
+
+export const allPaths = getAllRoutePaths(routeTree);

From 4e3405ec264504a6e3704d6623abd7be0ab50455 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Mon, 30 Sep 2024 17:26:38 -0400
Subject: [PATCH 33/45] some cleanup

---
 .../src/features/CloudPulse/CloudPulseLanding.tsx  |  2 +-
 .../Databases/DatabaseCreate/DatabaseCreate.tsx    |  2 +-
 .../features/Databases/DatabaseDetail/index.tsx    |  2 +-
 .../Databases/DatabaseLanding/DatabaseLanding.tsx  |  2 +-
 .../features/Domains/CreateDomain/CreateDomain.tsx |  2 +-
 .../src/features/Domains/DomainDetail/index.tsx    |  2 +-
 .../src/features/Domains/DomainsLanding.tsx        |  2 +-
 .../manager/src/features/Events/EventsLanding.tsx  |  2 +-
 .../features/Firewalls/FirewallDetail/index.tsx    |  2 +-
 .../Firewalls/FirewallLanding/FirewallLanding.tsx  |  2 +-
 .../features/Images/ImagesCreate/ImageCreate.tsx   |  2 +-
 .../Images/ImagesLanding/ImagesLanding.tsx         |  2 +-
 .../Kubernetes/CreateCluster/CreateCluster.tsx     |  2 +-
 .../KubernetesClusterDetail.tsx                    |  2 +-
 .../KubernetesLanding/KubernetesLanding.tsx        |  2 +-
 .../src/features/Linodes/LinodeCreate/index.tsx    |  2 +-
 .../Linodes/LinodesDetail/LinodesDetail.tsx        |  2 +-
 packages/manager/src/features/Linodes/index.tsx    |  2 +-
 .../Longview/LongviewLanding/LongviewLanding.tsx   |  2 +-
 .../src/features/Managed/Contacts/Contacts.tsx     |  2 +-
 .../Managed/Credentials/CredentialList.tsx         |  2 +-
 .../ManagedDashboardCard/ManagedDashboardCard.tsx  |  2 +-
 .../src/features/Managed/Monitors/MonitorTable.tsx |  2 +-
 .../src/features/Managed/SSHAccess/SSHAccess.tsx   |  2 +-
 .../features/NodeBalancers/NodeBalancerCreate.tsx  |  2 +-
 .../NodeBalancerDetail/NodeBalancerDetail.tsx      |  2 +-
 .../NodeBalancerDetail/NodeBalancerSettings.tsx    |  2 +-
 .../NodeBalancerSummary/NodeBalancerSummary.tsx    |  2 +-
 .../NodeBalancersLanding/NodeBalancersLanding.tsx  |  2 +-
 .../features/ObjectStorage/BucketDetail/index.tsx  |  2 +-
 .../ObjectStorage/ObjectStorageLanding.tsx         |  2 +-
 .../PlacementGroupsDetail.tsx                      |  4 ++--
 .../PlacementGroupsLanding.tsx                     |  2 +-
 .../AuthenticationSettings.tsx                     | 12 ++++++------
 .../Profile/DisplaySettings/DisplaySettings.tsx    |  2 +-
 .../features/Profile/LishSettings/LishSettings.tsx |  2 +-
 packages/manager/src/routes/cloudPulse.tsx         |  2 +-
 packages/manager/src/routes/databases.tsx          | 14 +++++++-------
 packages/manager/src/routes/domains.tsx            |  8 ++++----
 packages/manager/src/routes/events.tsx             |  2 +-
 packages/manager/src/routes/firewalls.tsx          | 12 ++++++------
 packages/manager/src/routes/images.tsx             |  4 ++--
 packages/manager/src/routes/kubernetes.tsx         | 10 +++++-----
 packages/manager/src/routes/linodes.tsx            |  6 +++---
 packages/manager/src/routes/longview.tsx           |  2 +-
 packages/manager/src/routes/managed.tsx            | 12 ++++++------
 packages/manager/src/routes/nodeBalancers.tsx      | 10 +++++-----
 packages/manager/src/routes/object-storage.tsx     |  8 ++++----
 packages/manager/src/routes/placementGroups.tsx    | 12 ++++++------
 packages/manager/src/routes/profile.tsx            |  8 ++++----
 50 files changed, 97 insertions(+), 97 deletions(-)

diff --git a/packages/manager/src/features/CloudPulse/CloudPulseLanding.tsx b/packages/manager/src/features/CloudPulse/CloudPulseLanding.tsx
index 2473ae994f4..47e13529c3b 100644
--- a/packages/manager/src/features/CloudPulse/CloudPulseLanding.tsx
+++ b/packages/manager/src/features/CloudPulse/CloudPulseLanding.tsx
@@ -23,7 +23,7 @@ export const CloudPulseLanding = () => {
   );
 };
 
-export const CloudPulseLandingLazyRoute = createLazyRoute(
+export const cloudPulseLandingLazyRoute = createLazyRoute(
   '/monitor/cloudpulse'
 )({
   component: CloudPulseLanding,
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
index 127da630124..3fbae61e3b9 100644
--- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
@@ -725,7 +725,7 @@ const determineCompressionType = (engine: string) => {
   return undefined;
 };
 
-export const DatabaseCreateLazyRoute = createLazyRoute('/databases/create')({
+export const databaseCreateLazyRoute = createLazyRoute('/databases/create')({
   component: DatabaseCreate,
 });
 
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
index 6e5d0089a46..7673d0a71d8 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
@@ -209,7 +209,7 @@ export const DatabaseDetail = () => {
   );
 };
 
-export const DatabaseDetailLazyRoute = createLazyRoute(
+export const databaseDetailLazyRoute = createLazyRoute(
   '/databases/$engine/$databaseId'
 )({
   component: DatabaseDetail,
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
index aaea379b91c..1dff602d77d 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
@@ -208,7 +208,7 @@ const DatabaseLanding = () => {
   );
 };
 
-export const DatabaseLandingLazyRoute = createLazyRoute('/databases')({
+export const databaseLandingLazyRoute = createLazyRoute('/databases')({
   component: DatabaseLanding,
 });
 
diff --git a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx
index f350faa7930..1802253fe4f 100644
--- a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx
+++ b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx
@@ -447,7 +447,7 @@ export const CreateDomain = () => {
   );
 };
 
-export const CreateDomainLazyRoute = createLazyRoute('/domains/create')({
+export const createDomainLazyRoute = createLazyRoute('/domains/create')({
   component: CreateDomain,
 });
 
diff --git a/packages/manager/src/features/Domains/DomainDetail/index.tsx b/packages/manager/src/features/Domains/DomainDetail/index.tsx
index 354be60f3ac..9d357c8b26e 100644
--- a/packages/manager/src/features/Domains/DomainDetail/index.tsx
+++ b/packages/manager/src/features/Domains/DomainDetail/index.tsx
@@ -44,6 +44,6 @@ export const DomainDetailRouting = () => {
   return <DomainsLanding domainForEditing={domain} />;
 };
 
-export const DomainDetailLazyRoute = createLazyRoute('/domains/$domainId')({
+export const domainDetailLazyRoute = createLazyRoute('/domains/$domainId')({
   component: DomainDetailRouting,
 });
diff --git a/packages/manager/src/features/Domains/DomainsLanding.tsx b/packages/manager/src/features/Domains/DomainsLanding.tsx
index 8b9e6b3fae3..beb82cdaf22 100644
--- a/packages/manager/src/features/Domains/DomainsLanding.tsx
+++ b/packages/manager/src/features/Domains/DomainsLanding.tsx
@@ -335,6 +335,6 @@ const StyledButon = styled(Button, { label: 'StyledButton' })(({ theme }) => ({
   whiteSpace: 'nowrap',
 }));
 
-export const DomainsLandingLazyRoute = createLazyRoute('/domains')({
+export const domainsLandingLazyRoute = createLazyRoute('/domains')({
   component: DomainsLanding,
 });
diff --git a/packages/manager/src/features/Events/EventsLanding.tsx b/packages/manager/src/features/Events/EventsLanding.tsx
index 39126723b7d..e7e69684476 100644
--- a/packages/manager/src/features/Events/EventsLanding.tsx
+++ b/packages/manager/src/features/Events/EventsLanding.tsx
@@ -125,6 +125,6 @@ export const EventsLanding = (props: Props) => {
   );
 };
 
-export const EventsLandingLazyRoute = createLazyRoute('/events')({
+export const eventsLandingLazyRoute = createLazyRoute('/events')({
   component: EventsLanding,
 });
diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx
index ea73a2b9dcc..b62f4f12eeb 100644
--- a/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx
+++ b/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx
@@ -191,6 +191,6 @@ export const FirewallDetail = () => {
   );
 };
 
-export const FirewallDetailLazyRoute = createLazyRoute('/firewalls/$id')({
+export const firewallDetailLazyRoute = createLazyRoute('/firewalls/$id')({
   component: FirewallDetail,
 });
diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx
index abd47b61784..415f3ed482a 100644
--- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx
+++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx
@@ -212,7 +212,7 @@ const FirewallLanding = () => {
   );
 };
 
-export const FirewallLandingLazyRoute = createLazyRoute('/firewalls')({
+export const firewallLandingLazyRoute = createLazyRoute('/firewalls')({
   component: FirewallLanding,
 });
 
diff --git a/packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx b/packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx
index 19c16e550c3..1c2c79a81aa 100644
--- a/packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx
+++ b/packages/manager/src/features/Images/ImagesCreate/ImageCreate.tsx
@@ -44,7 +44,7 @@ export const ImageCreate = () => {
   );
 };
 
-export const ImageCreateLazyRoute = createLazyRoute('/images/create')({
+export const imageCreateLazyRoute = createLazyRoute('/images/create')({
   component: ImageCreate,
 });
 
diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx
index 772ed7143eb..8311ea04c83 100644
--- a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx
+++ b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx
@@ -641,7 +641,7 @@ export const ImagesLanding = () => {
   );
 };
 
-export const ImagesLandingLazyRoute = createLazyRoute('/images')({
+export const imagesLandingLazyRoute = createLazyRoute('/images')({
   component: ImagesLanding,
 });
 
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
index ffc1d9b61f8..64453a586c2 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -343,6 +343,6 @@ export const CreateCluster = () => {
   );
 };
 
-export const CreateClusterLazyRoute = createLazyRoute('/kubernetes/create')({
+export const createClusterLazyRoute = createLazyRoute('/kubernetes/create')({
   component: CreateCluster,
 });
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx
index 948ec778e68..3b38f5496f0 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx
@@ -126,7 +126,7 @@ export const KubernetesClusterDetail = () => {
   );
 };
 
-export const KubernetesClusterDetailLazyRoute = createLazyRoute(
+export const kubernetesClusterDetailLazyRoute = createLazyRoute(
   '/kubernetes/clusters/$clusterID'
 )({
   component: KubernetesClusterDetail,
diff --git a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx
index f0c17ee2175..1edd9acf950 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx
@@ -281,7 +281,7 @@ export const KubernetesLanding = () => {
   );
 };
 
-export const KubernetesLandingLazyRoute = createLazyRoute(
+export const kubernetesLandingLazyRoute = createLazyRoute(
   '/kubernetes/clusters'
 )({
   component: KubernetesLanding,
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/index.tsx b/packages/manager/src/features/Linodes/LinodeCreate/index.tsx
index aecd32facdf..6a3cc1fccd3 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/index.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/index.tsx
@@ -230,6 +230,6 @@ export const LinodeCreate = () => {
   );
 };
 
-export const LinodeCreatev2LazyRoute = createLazyRoute('/linodes/create')({
+export const linodeCreatev2LazyRoute = createLazyRoute('/linodes/create')({
   component: LinodeCreatev2,
 });
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx
index 08b8ffc633c..e6e285c8bbd 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx
@@ -90,6 +90,6 @@ export const LinodeDetail = () => {
   );
 };
 
-export const LinodeDetailLazyRoute = createLazyRoute('/linodes/$linodeId')({
+export const linodeDetailLazyRoute = createLazyRoute('/linodes/$linodeId')({
   component: LinodeDetail,
 });
diff --git a/packages/manager/src/features/Linodes/index.tsx b/packages/manager/src/features/Linodes/index.tsx
index af6bd6c3470..2d88d5001bb 100644
--- a/packages/manager/src/features/Linodes/index.tsx
+++ b/packages/manager/src/features/Linodes/index.tsx
@@ -74,6 +74,6 @@ export const LinodesLandingWrapper = React.memo(() => {
   );
 });
 
-export const LinodesLandingLazyRoute = createLazyRoute('/linodes')({
+export const linodesLandingLazyRoute = createLazyRoute('/linodes')({
   component: LinodesLandingWrapper,
 });
diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx
index d7cebf32170..b14810020cb 100644
--- a/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx
+++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.tsx
@@ -185,7 +185,7 @@ const StyledTabs = styled(Tabs, {
   marginTop: 0,
 }));
 
-export const LongviewLandingLazyRoute = createLazyRoute('/longview')({
+export const longviewLandingLazyRoute = createLazyRoute('/longview')({
   component: LongviewLanding,
 });
 
diff --git a/packages/manager/src/features/Managed/Contacts/Contacts.tsx b/packages/manager/src/features/Managed/Contacts/Contacts.tsx
index 31bdbf461e7..0420c73e564 100644
--- a/packages/manager/src/features/Managed/Contacts/Contacts.tsx
+++ b/packages/manager/src/features/Managed/Contacts/Contacts.tsx
@@ -234,7 +234,7 @@ const Contacts = () => {
   );
 };
 
-export const ManagedContactsLazyRoute = createLazyRoute('/managed/contacts')({
+export const managedContactsLazyRoute = createLazyRoute('/managed/contacts')({
   component: Contacts,
 });
 
diff --git a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
index f92edd198a5..78549de9739 100644
--- a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
+++ b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
@@ -297,7 +297,7 @@ export const CredentialList = () => {
   );
 };
 
-export const ManagedCredentialsLazyRoute = createLazyRoute(
+export const managedCredentialsLazyRoute = createLazyRoute(
   '/managed/credentials'
 )({
   component: CredentialList,
diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx
index 01f0b5f4813..5f6292d893e 100644
--- a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx
+++ b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx
@@ -80,7 +80,7 @@ export const ManagedDashboardCard = () => {
   );
 };
 
-export const ManagedDashboardCardLazyRoute = createLazyRoute('/managed')({
+export const managedDashboardCardLazyRoute = createLazyRoute('/managed')({
   component: ManagedDashboardCard,
 });
 
diff --git a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
index c269749f01d..b6b0c050771 100644
--- a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
+++ b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
@@ -294,7 +294,7 @@ export const MonitorTable = () => {
   );
 };
 
-export const ManagedMonitorTableLazyRoute = createLazyRoute('/managed')({
+export const managedMonitorTableLazyRoute = createLazyRoute('/managed')({
   component: MonitorTable,
 });
 
diff --git a/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx b/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx
index 9d9faab670b..e7adbf10c34 100644
--- a/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx
+++ b/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx
@@ -16,7 +16,7 @@ const SSHAcess = () => {
   );
 };
 
-export const ManagedSSHAccessLazyRoute = createLazyRoute('/managed/ssh-access')(
+export const managedSSHAccessLazyRoute = createLazyRoute('/managed/ssh-access')(
   {
     component: SSHAcess,
   }
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx
index 806368a5ba3..b92d9e4c188 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx
@@ -797,7 +797,7 @@ export const fieldErrorsToNodePathErrors = (errors: APIError[]) => {
   }, []);
 };
 
-export const NodeBalancerCreateLazyRoute = createLazyRoute(
+export const nodeBalancerCreateLazyRoute = createLazyRoute(
   '/nodebalancers/create'
 )({
   component: NodeBalancerCreate,
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
index 8990ae60f55..14ce668e8ca 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
@@ -157,7 +157,7 @@ export const NodeBalancerDetail = () => {
   );
 };
 
-export const NodeBalancerDetailLazyRoute = createLazyRoute(
+export const nodeBalancerDetailLazyRoute = createLazyRoute(
   '/nodebalancers/$nodeBalancerId'
 )({
   component: NodeBalancerDetail,
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx
index ee1a1cd7b89..4cb00802471 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx
@@ -158,7 +158,7 @@ export const NodeBalancerSettings = () => {
   );
 };
 
-export const NodeBalancerSettingsLazyRoute = createLazyRoute(
+export const nodeBalancerSettingsLazyRoute = createLazyRoute(
   '/nodebalancers/$nodeBalancerId/settings'
 )({
   component: NodeBalancerSettings,
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
index 09694e38a4d..0a4c8787fd0 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
@@ -46,7 +46,7 @@ const StyledSidebarGridItem = styled(Grid, {
   },
 }));
 
-export const NodeBalancerSummaryLazyRoute = createLazyRoute(
+export const nodeBalancerSummaryLazyRoute = createLazyRoute(
   '/nodebalancers/$nodeBalancerId'
 )({
   component: NodeBalancerSummary,
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx
index 1bbd39a4d65..21f130e327f 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx
@@ -165,7 +165,7 @@ export const NodeBalancersLanding = () => {
   );
 };
 
-export const NodeBalancersLandingLazyRoute = createLazyRoute('/nodebalancers')({
+export const nodeBalancersLandingLazyRoute = createLazyRoute('/nodebalancers')({
   component: NodeBalancersLanding,
 });
 
diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx
index b29756937ef..be9f752b461 100644
--- a/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx
+++ b/packages/manager/src/features/ObjectStorage/BucketDetail/index.tsx
@@ -151,7 +151,7 @@ export const BucketDetailLanding = React.memo((props: Props) => {
   );
 });
 
-export const BucketDetailLandingLazyRoute = createLazyRoute(
+export const bucketDetailLandingLazyRoute = createLazyRoute(
   '/object-storage/buckets/$clusterId/$bucketName'
 )({
   component: BucketDetailLanding,
diff --git a/packages/manager/src/features/ObjectStorage/ObjectStorageLanding.tsx b/packages/manager/src/features/ObjectStorage/ObjectStorageLanding.tsx
index 041fcc49fc1..61e44096cd1 100644
--- a/packages/manager/src/features/ObjectStorage/ObjectStorageLanding.tsx
+++ b/packages/manager/src/features/ObjectStorage/ObjectStorageLanding.tsx
@@ -218,7 +218,7 @@ const StyledPromotionalOfferCard = styled(PromotionalOfferCard, {
   marginBottom: theme.spacing(0.5),
 }));
 
-export const ObjectStorageLandingLazyRoute = createLazyRoute('/object-storage')(
+export const objectStorageLandingLazyRoute = createLazyRoute('/object-storage')(
   {
     component: ObjectStorageLanding,
   }
diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx
index 1b24f8aca25..fce4cd920c0 100644
--- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx
+++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx
@@ -136,13 +136,13 @@ export const PlacementGroupsDetail = () => {
   );
 };
 
-export const PlacementGroupsDetailLazyRoute = createLazyRoute(
+export const placementGroupsDetailLazyRoute = createLazyRoute(
   '/placement-groups/$id'
 )({
   component: PlacementGroupsDetail,
 });
 
-export const PlacementGroupsUnassignLazyRoute = createLazyRoute(
+export const placementGroupsUnassignLazyRoute = createLazyRoute(
   '/placement-groups/$id/linodes/unassign/$linodeId'
 )({
   component: PlacementGroupsDetail,
diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx
index 619073321c7..cdf640b57ba 100644
--- a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx
+++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx
@@ -282,7 +282,7 @@ export const PlacementGroupsLanding = React.memo(() => {
   );
 });
 
-export const PlacementGroupsLandingLazyRoute = createLazyRoute(
+export const placementGroupsLandingLazyRoute = createLazyRoute(
   '/placement-groups'
 )({
   component: PlacementGroupsLanding,
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx
index 335259ccf1f..72d8c3bdeef 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx
@@ -128,6 +128,12 @@ export const AuthenticationSettings = () => {
   );
 };
 
+export const authenticationSettingsLazyRoute = createLazyRoute('/profile/auth')(
+  {
+    component: AuthenticationSettings,
+  }
+);
+
 export const StyledRootContainer = styled(Paper, {
   label: 'StyledRootContainer',
 })(({ theme }) => ({
@@ -149,9 +155,3 @@ export const StyledMainCopy = styled(Typography, {
   marginTop: theme.spacing(),
   maxWidth: 960,
 }));
-
-export const AuthenticationSettingsLazyRoute = createLazyRoute('/profile/auth')(
-  {
-    component: AuthenticationSettings,
-  }
-);
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index 73817a9b6bf..5bd869cabef 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -159,6 +159,6 @@ const StyledProfileCopy = styled(Typography, {
   maxWidth: 360,
 }));
 
-export const DisplaySettingsLazyRoute = createLazyRoute('/profile/display')({
+export const displaySettingsLazyRoute = createLazyRoute('/profile/display')({
   component: DisplaySettings,
 });
diff --git a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
index 57097b287a5..952eb980ce0 100644
--- a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
+++ b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
@@ -224,6 +224,6 @@ export const LishSettings = () => {
   );
 };
 
-export const LishSettingsLazyRoute = createLazyRoute('/profile/lish')({
+export const lishSettingsLazyRoute = createLazyRoute('/profile/lish')({
   component: LishSettings,
 });
diff --git a/packages/manager/src/routes/cloudPulse.tsx b/packages/manager/src/routes/cloudPulse.tsx
index b2d483b0337..d044f197413 100644
--- a/packages/manager/src/routes/cloudPulse.tsx
+++ b/packages/manager/src/routes/cloudPulse.tsx
@@ -26,7 +26,7 @@ const cloudPulseLandingRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/CloudPulse/CloudPulseLanding').then(
-    (m) => m.CloudPulseLandingLazyRoute
+    (m) => m.cloudPulseLandingLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/databases.tsx b/packages/manager/src/routes/databases.tsx
index f67c717852c..c6f339ec847 100644
--- a/packages/manager/src/routes/databases.tsx
+++ b/packages/manager/src/routes/databases.tsx
@@ -28,7 +28,7 @@ const databasesIndexRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/Databases/DatabaseLanding/DatabaseLanding').then(
-    (m) => m.DatabaseLandingLazyRoute
+    (m) => m.databaseLandingLazyRoute
   )
 );
 
@@ -37,7 +37,7 @@ const databasesCreateRoute = createRoute({
   path: 'create',
 }).lazy(() =>
   import('src/features/Databases/DatabaseCreate/DatabaseCreate').then(
-    (m) => m.DatabaseCreateLazyRoute
+    (m) => m.databaseCreateLazyRoute
   )
 );
 
@@ -50,7 +50,7 @@ const databasesDetailRoute = createRoute({
   path: '$engine/$databaseId',
 }).lazy(() =>
   import('src/features/Databases/DatabaseDetail').then(
-    (m) => m.DatabaseDetailLazyRoute
+    (m) => m.databaseDetailLazyRoute
   )
 );
 
@@ -59,7 +59,7 @@ const databasesDetailSummaryRoute = createRoute({
   path: 'summary',
 }).lazy(() =>
   import('src/features/Databases/DatabaseDetail').then(
-    (m) => m.DatabaseDetailLazyRoute
+    (m) => m.databaseDetailLazyRoute
   )
 );
 
@@ -68,7 +68,7 @@ const databasesDetailBackupsRoute = createRoute({
   path: 'backups',
 }).lazy(() =>
   import('src/features/Databases/DatabaseDetail').then(
-    (m) => m.DatabaseDetailLazyRoute
+    (m) => m.databaseDetailLazyRoute
   )
 );
 
@@ -77,7 +77,7 @@ const databasesDetailResizeRoute = createRoute({
   path: 'resize',
 }).lazy(() =>
   import('src/features/Databases/DatabaseDetail').then(
-    (m) => m.DatabaseDetailLazyRoute
+    (m) => m.databaseDetailLazyRoute
   )
 );
 
@@ -86,7 +86,7 @@ const databasesDetailSettingsRoute = createRoute({
   path: 'settings',
 }).lazy(() =>
   import('src/features/Databases/DatabaseDetail').then(
-    (m) => m.DatabaseDetailLazyRoute
+    (m) => m.databaseDetailLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/domains.tsx b/packages/manager/src/routes/domains.tsx
index afaefa2f91f..0d1199db663 100644
--- a/packages/manager/src/routes/domains.tsx
+++ b/packages/manager/src/routes/domains.tsx
@@ -26,7 +26,7 @@ const domainsIndexRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/Domains/DomainsLanding').then(
-    (m) => m.DomainsLandingLazyRoute
+    (m) => m.domainsLandingLazyRoute
   )
 );
 
@@ -35,7 +35,7 @@ const domainCreateRoute = createRoute({
   path: 'create',
 }).lazy(() =>
   import('src/features/Domains/CreateDomain/CreateDomain').then(
-    (m) => m.CreateDomainLazyRoute
+    (m) => m.createDomainLazyRoute
   )
 );
 
@@ -47,7 +47,7 @@ const domainDetailRoute = createRoute({
   path: '$domainId',
 }).lazy(() =>
   import('src/features/Domains/DomainDetail').then(
-    (m) => m.DomainDetailLazyRoute
+    (m) => m.domainDetailLazyRoute
   )
 );
 
@@ -56,7 +56,7 @@ const domainDetailRecordsRoute = createRoute({
   path: 'records',
 }).lazy(() =>
   import('src/features/Domains/DomainDetail').then(
-    (m) => m.DomainDetailLazyRoute
+    (m) => m.domainDetailLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/events.tsx b/packages/manager/src/routes/events.tsx
index 387504e5d03..e91a0f72984 100644
--- a/packages/manager/src/routes/events.tsx
+++ b/packages/manager/src/routes/events.tsx
@@ -24,7 +24,7 @@ const eventsIndexRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/Events/EventsLanding').then(
-    (m) => m.EventsLandingLazyRoute
+    (m) => m.eventsLandingLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/firewalls.tsx b/packages/manager/src/routes/firewalls.tsx
index f7f5ecbb1fb..79818c7bd46 100644
--- a/packages/manager/src/routes/firewalls.tsx
+++ b/packages/manager/src/routes/firewalls.tsx
@@ -26,7 +26,7 @@ const firewallsIndexRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/Firewalls/FirewallLanding/FirewallLanding').then(
-    (m) => m.FirewallLandingLazyRoute
+    (m) => m.firewallLandingLazyRoute
   )
 );
 
@@ -35,7 +35,7 @@ const firewallCreateRoute = createRoute({
   path: 'create',
 }).lazy(() =>
   import('src/features/Firewalls/FirewallLanding/FirewallLanding').then(
-    (m) => m.FirewallLandingLazyRoute
+    (m) => m.firewallLandingLazyRoute
   )
 );
 
@@ -47,7 +47,7 @@ const firewallDetailRoute = createRoute({
   path: '$id',
 }).lazy(() =>
   import('src/features/Firewalls/FirewallDetail/index').then(
-    (m) => m.FirewallDetailLazyRoute
+    (m) => m.firewallDetailLazyRoute
   )
 );
 
@@ -56,7 +56,7 @@ const firewallDetailRulesRoute = createRoute({
   path: '$id/rules',
 }).lazy(() =>
   import('src/features/Firewalls/FirewallDetail/index').then(
-    (m) => m.FirewallDetailLazyRoute
+    (m) => m.firewallDetailLazyRoute
   )
 );
 
@@ -65,7 +65,7 @@ const firewallDetailLinodesRoute = createRoute({
   path: '$id/linodes',
 }).lazy(() =>
   import('src/features/Firewalls/FirewallDetail/index').then(
-    (m) => m.FirewallDetailLazyRoute
+    (m) => m.firewallDetailLazyRoute
   )
 );
 
@@ -74,7 +74,7 @@ const firewallDetailNodebalancersRoute = createRoute({
   path: '$id/nodebalancers',
 }).lazy(() =>
   import('src/features/Firewalls/FirewallDetail/index').then(
-    (m) => m.FirewallDetailLazyRoute
+    (m) => m.firewallDetailLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/images.tsx b/packages/manager/src/routes/images.tsx
index 54424f94662..90da7dbf62f 100644
--- a/packages/manager/src/routes/images.tsx
+++ b/packages/manager/src/routes/images.tsx
@@ -26,7 +26,7 @@ export const imagesIndexRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/Images/ImagesLanding/ImagesLanding').then(
-    (m) => m.ImagesLandingLazyRoute
+    (m) => m.imagesLandingLazyRoute
   )
 );
 
@@ -35,7 +35,7 @@ export const imagesCreateRoute = createRoute({
   path: 'create',
 }).lazy(() =>
   import('src/features/Images/ImagesCreate/ImageCreate').then(
-    (m) => m.ImageCreateLazyRoute
+    (m) => m.imageCreateLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/kubernetes.tsx b/packages/manager/src/routes/kubernetes.tsx
index ec47937c030..6d6fc88cb15 100644
--- a/packages/manager/src/routes/kubernetes.tsx
+++ b/packages/manager/src/routes/kubernetes.tsx
@@ -33,7 +33,7 @@ const kubernetesIndexRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/Kubernetes/KubernetesLanding/KubernetesLanding').then(
-    (m) => m.KubernetesLandingLazyRoute
+    (m) => m.kubernetesLandingLazyRoute
   )
 );
 
@@ -42,7 +42,7 @@ const kubernetesClustersRoute = createRoute({
   path: 'clusters',
 }).lazy(() =>
   import('src/features/Kubernetes/KubernetesLanding/KubernetesLanding').then(
-    (m) => m.KubernetesLandingLazyRoute
+    (m) => m.kubernetesLandingLazyRoute
   )
 );
 
@@ -51,7 +51,7 @@ const kubernetesCreateRoute = createRoute({
   path: 'create',
 }).lazy(() =>
   import('src/features/Kubernetes/CreateCluster/CreateCluster').then(
-    (m) => m.CreateClusterLazyRoute
+    (m) => m.createClusterLazyRoute
   )
 );
 
@@ -64,7 +64,7 @@ const kubernetesClusterDetailRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail'
-  ).then((m) => m.KubernetesClusterDetailLazyRoute)
+  ).then((m) => m.kubernetesClusterDetailLazyRoute)
 );
 
 const kubernetesClusterDetailSummaryRoute = createRoute({
@@ -73,7 +73,7 @@ const kubernetesClusterDetailSummaryRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail'
-  ).then((m) => m.KubernetesClusterDetailLazyRoute)
+  ).then((m) => m.kubernetesClusterDetailLazyRoute)
 );
 
 export const kubernetesRouteTree = kubernetesRoute.addChildren([
diff --git a/packages/manager/src/routes/linodes.tsx b/packages/manager/src/routes/linodes.tsx
index 7be29e1c246..6c95bb89e6f 100644
--- a/packages/manager/src/routes/linodes.tsx
+++ b/packages/manager/src/routes/linodes.tsx
@@ -23,7 +23,7 @@ const linodesIndexRoute = createRoute({
   getParentRoute: () => linodesRoute,
   path: '/',
 }).lazy(() =>
-  import('src/features/Linodes/index').then((m) => m.LinodesLandingLazyRoute)
+  import('src/features/Linodes/index').then((m) => m.linodesLandingLazyRoute)
 );
 
 const linodesCreateRoute = createRoute({
@@ -31,7 +31,7 @@ const linodesCreateRoute = createRoute({
   path: 'create',
 }).lazy(() =>
   import('src/features/Linodes/LinodeCreatev2').then(
-    (m) => m.LinodeCreatev2LazyRoute
+    (m) => m.linodeCreatev2LazyRoute
   )
 );
 
@@ -43,7 +43,7 @@ const linodesDetailRoute = createRoute({
   path: '$linodeId',
 }).lazy(() =>
   import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
-    (m) => m.LinodeDetailLazyRoute
+    (m) => m.linodeDetailLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/longview.tsx b/packages/manager/src/routes/longview.tsx
index b487ba025a3..df507fdede3 100644
--- a/packages/manager/src/routes/longview.tsx
+++ b/packages/manager/src/routes/longview.tsx
@@ -27,7 +27,7 @@ export const longviewLandingRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/Longview/LongviewLanding/LongviewLanding').then(
-    (m) => m.LongviewLandingLazyRoute
+    (m) => m.longviewLandingLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/managed.tsx b/packages/manager/src/routes/managed.tsx
index 1571fca824c..c65cd620f65 100644
--- a/packages/manager/src/routes/managed.tsx
+++ b/packages/manager/src/routes/managed.tsx
@@ -26,7 +26,7 @@ export const managedIndexRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/Managed/ManagedDashboardCard/ManagedDashboardCard').then(
-    (m) => m.ManagedDashboardCardLazyRoute
+    (m) => m.managedDashboardCardLazyRoute
   )
 );
 
@@ -35,7 +35,7 @@ export const managedSummaryRoute = createRoute({
   path: 'summary',
 }).lazy(() =>
   import('src/features/Managed/ManagedDashboardCard/ManagedDashboardCard').then(
-    (m) => m.ManagedDashboardCardLazyRoute
+    (m) => m.managedDashboardCardLazyRoute
   )
 );
 
@@ -44,7 +44,7 @@ export const managedMonitorsRoute = createRoute({
   path: 'monitors',
 }).lazy(() =>
   import('src/features/Managed/Monitors/MonitorTable').then(
-    (m) => m.ManagedMonitorTableLazyRoute
+    (m) => m.managedMonitorTableLazyRoute
   )
 );
 
@@ -53,7 +53,7 @@ export const managedSSHAccessRoute = createRoute({
   path: 'ssh-access',
 }).lazy(() =>
   import('src/features/Managed/SSHAccess/SSHAccess').then(
-    (m) => m.ManagedSSHAccessLazyRoute
+    (m) => m.managedSSHAccessLazyRoute
   )
 );
 
@@ -62,7 +62,7 @@ export const managedCredentialsRoute = createRoute({
   path: 'credentials',
 }).lazy(() =>
   import('src/features/Managed/Credentials/CredentialList').then(
-    (m) => m.ManagedCredentialsLazyRoute
+    (m) => m.managedCredentialsLazyRoute
   )
 );
 
@@ -71,7 +71,7 @@ export const managedContactsRoute = createRoute({
   path: 'contacts',
 }).lazy(() =>
   import('src/features/Managed/Contacts/Contacts').then(
-    (m) => m.ManagedContactsLazyRoute
+    (m) => m.managedContactsLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/nodeBalancers.tsx b/packages/manager/src/routes/nodeBalancers.tsx
index accd437e8c6..dce8541bd52 100644
--- a/packages/manager/src/routes/nodeBalancers.tsx
+++ b/packages/manager/src/routes/nodeBalancers.tsx
@@ -31,7 +31,7 @@ const nodeBalancersIndexRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding'
-  ).then((m) => m.NodeBalancersLandingLazyRoute)
+  ).then((m) => m.nodeBalancersLandingLazyRoute)
 );
 
 const nodeBalancersCreateRoute = createRoute({
@@ -39,7 +39,7 @@ const nodeBalancersCreateRoute = createRoute({
   path: 'create',
 }).lazy(() =>
   import('src/features/NodeBalancers/NodeBalancerCreate').then(
-    (m) => m.NodeBalancerCreateLazyRoute
+    (m) => m.nodeBalancerCreateLazyRoute
   )
 );
 
@@ -52,7 +52,7 @@ const nodeBalancerDetailRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail'
-  ).then((m) => m.NodeBalancerDetailLazyRoute)
+  ).then((m) => m.nodeBalancerDetailLazyRoute)
 );
 
 const nodeBalancerDetailSummaryRoute = createRoute({
@@ -61,7 +61,7 @@ const nodeBalancerDetailSummaryRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary'
-  ).then((m) => m.NodeBalancerSummaryLazyRoute)
+  ).then((m) => m.nodeBalancerSummaryLazyRoute)
 );
 
 // TODO TanStack Router - figure proper way of lazy loading class components
@@ -82,7 +82,7 @@ const nodeBalancerDetailSettingsRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings'
-  ).then((m) => m.NodeBalancerSettingsLazyRoute)
+  ).then((m) => m.nodeBalancerSettingsLazyRoute)
 );
 
 export const nodeBalancersRouteTree = nodeBalancersRoute.addChildren([
diff --git a/packages/manager/src/routes/object-storage.tsx b/packages/manager/src/routes/object-storage.tsx
index 5ed4fac81c5..fa2bdb723b0 100644
--- a/packages/manager/src/routes/object-storage.tsx
+++ b/packages/manager/src/routes/object-storage.tsx
@@ -26,7 +26,7 @@ const objectStorageIndexRoute = createRoute({
   path: '/',
 }).lazy(() =>
   import('src/features/ObjectStorage/ObjectStorageLanding').then(
-    (m) => m.ObjectStorageLandingLazyRoute
+    (m) => m.objectStorageLandingLazyRoute
   )
 );
 
@@ -35,7 +35,7 @@ const objectStorageBucketsRoute = createRoute({
   path: 'buckets',
 }).lazy(() =>
   import('src/features/ObjectStorage/ObjectStorageLanding').then(
-    (m) => m.ObjectStorageLandingLazyRoute
+    (m) => m.objectStorageLandingLazyRoute
   )
 );
 
@@ -44,7 +44,7 @@ const objectStorageAccessKeysRoute = createRoute({
   path: 'access-keys',
 }).lazy(() =>
   import('src/features/ObjectStorage/ObjectStorageLanding').then(
-    (m) => m.ObjectStorageLandingLazyRoute
+    (m) => m.objectStorageLandingLazyRoute
   )
 );
 
@@ -53,7 +53,7 @@ const objectStorageBucketDetailRoute = createRoute({
   path: '$clusterId/$bucketName',
 }).lazy(() =>
   import('src/features/ObjectStorage/BucketDetail').then(
-    (m) => m.BucketDetailLandingLazyRoute
+    (m) => m.bucketDetailLandingLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/placementGroups.tsx b/packages/manager/src/routes/placementGroups.tsx
index 9b172ad64e4..ccaffae3b6d 100644
--- a/packages/manager/src/routes/placementGroups.tsx
+++ b/packages/manager/src/routes/placementGroups.tsx
@@ -29,7 +29,7 @@ const placementGroupsIndexRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-  ).then((m) => m.PlacementGroupsLandingLazyRoute)
+  ).then((m) => m.placementGroupsLandingLazyRoute)
 );
 
 const placementGroupsCreateRoute = createRoute({
@@ -38,7 +38,7 @@ const placementGroupsCreateRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-  ).then((m) => m.PlacementGroupsLandingLazyRoute)
+  ).then((m) => m.placementGroupsLandingLazyRoute)
 );
 
 const placementGroupsEditRoute = createRoute({
@@ -50,7 +50,7 @@ const placementGroupsEditRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-  ).then((m) => m.PlacementGroupsLandingLazyRoute)
+  ).then((m) => m.placementGroupsLandingLazyRoute)
 );
 
 const placementGroupsDeleteRoute = createRoute({
@@ -62,7 +62,7 @@ const placementGroupsDeleteRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding'
-  ).then((m) => m.PlacementGroupsLandingLazyRoute)
+  ).then((m) => m.placementGroupsLandingLazyRoute)
 );
 
 const placementGroupsUnassignRoute = createRoute({
@@ -75,7 +75,7 @@ const placementGroupsUnassignRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
-  ).then((m) => m.PlacementGroupsUnassignLazyRoute)
+  ).then((m) => m.placementGroupsUnassignLazyRoute)
 );
 
 const placementGroupsDetailRoute = createRoute({
@@ -87,7 +87,7 @@ const placementGroupsDetailRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
-  ).then((m) => m.PlacementGroupsDetailLazyRoute)
+  ).then((m) => m.placementGroupsDetailLazyRoute)
 );
 
 export const placementGroupsRouteTree = placementGroupsRoute.addChildren([
diff --git a/packages/manager/src/routes/profile.tsx b/packages/manager/src/routes/profile.tsx
index a82f6e53a0f..fc2fdbe7a6c 100644
--- a/packages/manager/src/routes/profile.tsx
+++ b/packages/manager/src/routes/profile.tsx
@@ -18,7 +18,7 @@ const ProfileRoute = createRoute({
   path: 'profile',
 }).lazy(() =>
   import('src/features/Profile/DisplaySettings/DisplaySettings').then(
-    (m) => m.DisplaySettingsLazyRoute
+    (m) => m.displaySettingsLazyRoute
   )
 );
 
@@ -27,7 +27,7 @@ const ProfileDisplaySettingsRoute = createRoute({
   path: 'display',
 }).lazy(() =>
   import('src/features/Profile/DisplaySettings/DisplaySettings').then(
-    (m) => m.DisplaySettingsLazyRoute
+    (m) => m.displaySettingsLazyRoute
   )
 );
 
@@ -37,7 +37,7 @@ const ProfileAuthenticationSettingsRoute = createRoute({
 }).lazy(() =>
   import(
     'src/features/Profile/AuthenticationSettings/AuthenticationSettings'
-  ).then((m) => m.AuthenticationSettingsLazyRoute)
+  ).then((m) => m.authenticationSettingsLazyRoute)
 );
 
 const ProfileSSHKeysRoute = createRoute({
@@ -52,7 +52,7 @@ const ProfileLishSettingsRoute = createRoute({
   path: 'lish',
 }).lazy(() =>
   import('src/features/Profile/LishSettings/LishSettings').then(
-    (m) => m.LishSettingsLazyRoute
+    (m) => m.lishSettingsLazyRoute
   )
 );
 

From 4f32ff52dfe3c0da37eec626f92dd3cc1c7da855 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Mon, 30 Sep 2024 22:43:54 -0400
Subject: [PATCH 34/45] More cleanup

---
 .../features/Managed/Contacts/Contacts.tsx    |  5 ----
 .../Managed/Credentials/CredentialList.tsx    |  7 ------
 .../ManagedDashboardCard.tsx                  |  5 ----
 .../src/features/Managed/ManagedLanding.tsx   |  9 ++++++-
 .../Managed/Monitors/MonitorTable.tsx         |  5 ----
 .../features/Managed/SSHAccess/SSHAccess.tsx  |  7 ------
 .../manager/src/features/Profile/Profile.tsx  |  5 ++++
 .../StackScriptCreate/StackScriptCreate.tsx   |  4 +++-
 packages/manager/src/routes/index.tsx         | 11 +++++----
 packages/manager/src/routes/managed.tsx       | 24 +++++++++----------
 .../manager/src/routes/object-storage.tsx     | 10 ++++++++
 packages/manager/src/routes/profile.tsx       |  4 +---
 packages/manager/src/routes/support.tsx       |  4 ++--
 13 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/packages/manager/src/features/Managed/Contacts/Contacts.tsx b/packages/manager/src/features/Managed/Contacts/Contacts.tsx
index 0420c73e564..1c7d5b88018 100644
--- a/packages/manager/src/features/Managed/Contacts/Contacts.tsx
+++ b/packages/manager/src/features/Managed/Contacts/Contacts.tsx
@@ -1,4 +1,3 @@
-import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -234,10 +233,6 @@ const Contacts = () => {
   );
 };
 
-export const managedContactsLazyRoute = createLazyRoute('/managed/contacts')({
-  component: Contacts,
-});
-
 export default Contacts;
 
 /**
diff --git a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
index 78549de9739..54770113d01 100644
--- a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
+++ b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
@@ -1,4 +1,3 @@
-import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -297,10 +296,4 @@ export const CredentialList = () => {
   );
 };
 
-export const managedCredentialsLazyRoute = createLazyRoute(
-  '/managed/credentials'
-)({
-  component: CredentialList,
-});
-
 export default CredentialList;
diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx
index 5f6292d893e..e824eace561 100644
--- a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx
+++ b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx
@@ -1,5 +1,4 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { CircleProgress } from 'src/components/CircleProgress';
@@ -80,8 +79,4 @@ export const ManagedDashboardCard = () => {
   );
 };
 
-export const managedDashboardCardLazyRoute = createLazyRoute('/managed')({
-  component: ManagedDashboardCard,
-});
-
 export default ManagedDashboardCard;
diff --git a/packages/manager/src/features/Managed/ManagedLanding.tsx b/packages/manager/src/features/Managed/ManagedLanding.tsx
index 9a6dfc37a5e..12ad4ce2721 100644
--- a/packages/manager/src/features/Managed/ManagedLanding.tsx
+++ b/packages/manager/src/features/Managed/ManagedLanding.tsx
@@ -1,13 +1,16 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
-import { NavTab, NavTabs } from 'src/components/NavTabs/NavTabs';
+import { NavTabs } from 'src/components/NavTabs/NavTabs';
 import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
 
 import ManagedDashboardCard from './ManagedDashboardCard';
 import SupportWidget from './SupportWidget';
 
+import type { NavTab } from 'src/components/NavTabs/NavTabs';
+
 const Contacts = React.lazy(() => import('./Contacts/Contacts'));
 const Monitors = React.lazy(() => import('./Monitors'));
 const SSHAccess = React.lazy(() => import('./SSHAccess'));
@@ -58,4 +61,8 @@ export const ManagedLanding = () => {
   );
 };
 
+export const managedLandingLazyRoute = createLazyRoute('/managed')({
+  component: ManagedLanding,
+});
+
 export default ManagedLanding;
diff --git a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
index b6b0c050771..95df7aad844 100644
--- a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
+++ b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
@@ -1,5 +1,4 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
@@ -294,8 +293,4 @@ export const MonitorTable = () => {
   );
 };
 
-export const managedMonitorTableLazyRoute = createLazyRoute('/managed')({
-  component: MonitorTable,
-});
-
 export default MonitorTable;
diff --git a/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx b/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx
index e7adbf10c34..82d29d49de6 100644
--- a/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx
+++ b/packages/manager/src/features/Managed/SSHAccess/SSHAccess.tsx
@@ -1,4 +1,3 @@
-import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -16,10 +15,4 @@ const SSHAcess = () => {
   );
 };
 
-export const managedSSHAccessLazyRoute = createLazyRoute('/managed/ssh-access')(
-  {
-    component: SSHAcess,
-  }
-);
-
 export default SSHAcess;
diff --git a/packages/manager/src/features/Profile/Profile.tsx b/packages/manager/src/features/Profile/Profile.tsx
index 3e618aae6d3..c7b82b93393 100644
--- a/packages/manager/src/features/Profile/Profile.tsx
+++ b/packages/manager/src/features/Profile/Profile.tsx
@@ -1,3 +1,4 @@
+import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useRouteMatch } from 'react-router-dom';
 
@@ -98,3 +99,7 @@ export const Profile = () => {
     </React.Fragment>
   );
 };
+
+export const ProfileLazyRoute = createLazyRoute('/profile')({
+  component: Profile,
+});
diff --git a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx
index 6de13479ca2..b28cc58edbd 100644
--- a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx
+++ b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx
@@ -542,4 +542,6 @@ const enhanced = compose<CombinedProps, Props>(
   withQueryClient
 );
 
-export default enhanced(StackScriptCreate);
+export const EnhancedStackScriptCreate = enhanced(StackScriptCreate);
+
+export default EnhancedStackScriptCreate;
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index c4c1f39b09c..3e4e2b52024 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -27,10 +27,13 @@ import { vpcsRouteTree } from './vpcs';
 
 const indexRoute = createRoute({
   beforeLoad: ({ context }) => {
-    const { accountSettings } = context;
-    const defaultRoot = accountSettings?.managed ? '/managed' : '/linodes';
-
-    throw redirect({ to: defaultRoot });
+    // ****
+    // TODO TanStack Router - enable this in phase 2 (managed tabs are broken for now cause of mismatched history)
+    // ****
+    // const { accountSettings } = context;
+    // const defaultRoot = accountSettings?.managed ? '/managed' : '/linodes';
+    // throw redirect({ to: defaultRoot });
+    throw redirect({ to: '/linodes' });
   },
   getParentRoute: () => rootRoute,
   path: '/',
diff --git a/packages/manager/src/routes/managed.tsx b/packages/manager/src/routes/managed.tsx
index c65cd620f65..fca39e7b5fd 100644
--- a/packages/manager/src/routes/managed.tsx
+++ b/packages/manager/src/routes/managed.tsx
@@ -25,8 +25,8 @@ export const managedIndexRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: '/',
 }).lazy(() =>
-  import('src/features/Managed/ManagedDashboardCard/ManagedDashboardCard').then(
-    (m) => m.managedDashboardCardLazyRoute
+  import('src/features/Managed/ManagedLanding').then(
+    (m) => m.managedLandingLazyRoute
   )
 );
 
@@ -34,8 +34,8 @@ export const managedSummaryRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: 'summary',
 }).lazy(() =>
-  import('src/features/Managed/ManagedDashboardCard/ManagedDashboardCard').then(
-    (m) => m.managedDashboardCardLazyRoute
+  import('src/features/Managed/ManagedLanding').then(
+    (m) => m.managedLandingLazyRoute
   )
 );
 
@@ -43,8 +43,8 @@ export const managedMonitorsRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: 'monitors',
 }).lazy(() =>
-  import('src/features/Managed/Monitors/MonitorTable').then(
-    (m) => m.managedMonitorTableLazyRoute
+  import('src/features/Managed/ManagedLanding').then(
+    (m) => m.managedLandingLazyRoute
   )
 );
 
@@ -52,8 +52,8 @@ export const managedSSHAccessRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: 'ssh-access',
 }).lazy(() =>
-  import('src/features/Managed/SSHAccess/SSHAccess').then(
-    (m) => m.managedSSHAccessLazyRoute
+  import('src/features/Managed/ManagedLanding').then(
+    (m) => m.managedLandingLazyRoute
   )
 );
 
@@ -61,8 +61,8 @@ export const managedCredentialsRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: 'credentials',
 }).lazy(() =>
-  import('src/features/Managed/Credentials/CredentialList').then(
-    (m) => m.managedCredentialsLazyRoute
+  import('src/features/Managed/ManagedLanding').then(
+    (m) => m.managedLandingLazyRoute
   )
 );
 
@@ -70,8 +70,8 @@ export const managedContactsRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: 'contacts',
 }).lazy(() =>
-  import('src/features/Managed/Contacts/Contacts').then(
-    (m) => m.managedContactsLazyRoute
+  import('src/features/Managed/ManagedLanding').then(
+    (m) => m.managedLandingLazyRoute
   )
 );
 
diff --git a/packages/manager/src/routes/object-storage.tsx b/packages/manager/src/routes/object-storage.tsx
index fa2bdb723b0..9dd7b4911e4 100644
--- a/packages/manager/src/routes/object-storage.tsx
+++ b/packages/manager/src/routes/object-storage.tsx
@@ -57,9 +57,19 @@ const objectStorageBucketDetailRoute = createRoute({
   )
 );
 
+const objectStorageBucketCreateRoute = createRoute({
+  getParentRoute: () => objectStorageBucketsRoute,
+  path: 'create',
+}).lazy(() =>
+  import('src/features/ObjectStorage/ObjectStorageLanding').then(
+    (m) => m.objectStorageLandingLazyRoute
+  )
+);
+
 export const objectStorageRouteTree = objectStorageRoute.addChildren([
   objectStorageIndexRoute,
   objectStorageBucketsRoute,
+  objectStorageBucketCreateRoute,
   objectStorageBucketDetailRoute,
   objectStorageAccessKeysRoute,
 ]);
diff --git a/packages/manager/src/routes/profile.tsx b/packages/manager/src/routes/profile.tsx
index fc2fdbe7a6c..415bcaffd64 100644
--- a/packages/manager/src/routes/profile.tsx
+++ b/packages/manager/src/routes/profile.tsx
@@ -17,9 +17,7 @@ const ProfileRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: 'profile',
 }).lazy(() =>
-  import('src/features/Profile/DisplaySettings/DisplaySettings').then(
-    (m) => m.displaySettingsLazyRoute
-  )
+  import('src/features/Profile/Profile').then((m) => m.ProfileLazyRoute)
 );
 
 const ProfileDisplaySettingsRoute = createRoute({
diff --git a/packages/manager/src/routes/support.tsx b/packages/manager/src/routes/support.tsx
index 716cb12014b..49cd9ec6c71 100644
--- a/packages/manager/src/routes/support.tsx
+++ b/packages/manager/src/routes/support.tsx
@@ -39,11 +39,11 @@ const SupportTicketsRoute = createRoute({
 );
 
 const SupportTicketDetailRoute = createRoute({
-  getParentRoute: () => SupportTicketsRoute,
+  getParentRoute: () => SupportRoute,
   parseParams: (params) => ({
     ticketId: Number(params.ticketId),
   }),
-  path: '$ticketId',
+  path: 'tickets/$ticketId',
 }).lazy(() =>
   import('src/features/Support/SupportTicketDetail/SupportTicketDetail').then(
     (m) => m.supportTicketDetailLazyRoute

From bb7191ee00358945dfd139745cdbed55c0999d76 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Tue, 1 Oct 2024 18:07:28 -0400
Subject: [PATCH 35/45] more account routes

---
 packages/manager/src/routes/account.tsx | 26 ++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/manager/src/routes/account.tsx b/packages/manager/src/routes/account.tsx
index 69d5b81c58c..d3a17c5e76d 100644
--- a/packages/manager/src/routes/account.tsx
+++ b/packages/manager/src/routes/account.tsx
@@ -92,19 +92,37 @@ const accountUsersUsernameRoute = createRoute({
 );
 
 const accountUsersUsernameProfileRoute = createRoute({
-  getParentRoute: () => accountRoute,
-  path: 'users/$username/profile',
+  getParentRoute: () => accountUsersUsernameRoute,
+  path: 'profile',
 }).lazy(() =>
   import('src/features/Users/UserDetail').then((m) => m.userDetailLazyRoute)
 );
 
 const accountUsersUsernamePermissionsRoute = createRoute({
   getParentRoute: () => accountUsersUsernameRoute,
-  path: 'users/$username/permissions',
+  path: 'permissions',
 }).lazy(() =>
   import('src/features/Users/UserDetail').then((m) => m.userDetailLazyRoute)
 );
 
+const accountBillingMakePaymentRoute = createRoute({
+  getParentRoute: () => accountRoute,
+  path: 'billing/make-payment',
+}).lazy(() =>
+  import('src/features/Account/AccountLanding').then(
+    (m) => m.accountLandingLazyRoute
+  )
+);
+
+const accountBillingPaymentMethodsRoute = createRoute({
+  getParentRoute: () => accountRoute,
+  path: 'billing/add-payment-method',
+}).lazy(() =>
+  import('src/features/Account/AccountLanding').then(
+    (m) => m.accountLandingLazyRoute
+  )
+);
+
 const accountBillingEditRoute = createRoute({
   getParentRoute: () => accountRoute,
   path: 'billing/edit',
@@ -157,6 +175,8 @@ export const accountRouteTree = accountRoute.addChildren([
   ]),
   accountActivationLandingRoute,
   accountBillingRoute,
+  accountBillingMakePaymentRoute,
+  accountBillingPaymentMethodsRoute,
   accountBillingEditRoute,
   accountInvoicesInvoiceIdRoute,
   accountEntityTransfersCreateRoute,

From c83738ac9ecc4efad92bdcdd5b42184cb3ae9b2e Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 2 Oct 2024 12:19:51 -0400
Subject: [PATCH 36/45] missing domains and linodes routes

---
 .../manager/src/features/Betas/BetaSignup.tsx |  5 --
 .../src/features/Betas/BetasLanding.tsx       |  5 --
 packages/manager/src/routes/betas.tsx         | 12 +--
 packages/manager/src/routes/domains.tsx       |  1 +
 packages/manager/src/routes/linodes.tsx       | 73 ++++++++++++++++++-
 5 files changed, 79 insertions(+), 17 deletions(-)

diff --git a/packages/manager/src/features/Betas/BetaSignup.tsx b/packages/manager/src/features/Betas/BetaSignup.tsx
index d89b04eba69..448d6dad3fa 100644
--- a/packages/manager/src/features/Betas/BetaSignup.tsx
+++ b/packages/manager/src/features/Betas/BetaSignup.tsx
@@ -1,5 +1,4 @@
 import { Stack } from '@mui/system';
-import { createLazyRoute } from '@tanstack/react-router';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -184,8 +183,4 @@ EAP and the MSA, this EAP shall be deemed controlling only with respect to its e
   );
 };
 
-export const betaSignupLazyRoute = createLazyRoute('/betas/signup')({
-  component: BetaSignup,
-});
-
 export default BetaSignup;
diff --git a/packages/manager/src/features/Betas/BetasLanding.tsx b/packages/manager/src/features/Betas/BetasLanding.tsx
index f0dc3130b1f..a140a8cd7d2 100644
--- a/packages/manager/src/features/Betas/BetasLanding.tsx
+++ b/packages/manager/src/features/Betas/BetasLanding.tsx
@@ -1,4 +1,3 @@
-import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { LandingHeader } from 'src/components/LandingHeader/LandingHeader';
@@ -71,8 +70,4 @@ const BetasLanding = () => {
   );
 };
 
-export const betasLandingLazyRoute = createLazyRoute('/betas')({
-  component: BetasLanding,
-});
-
 export default BetasLanding;
diff --git a/packages/manager/src/routes/betas.tsx b/packages/manager/src/routes/betas.tsx
index 6bed92d3221..8626d85bdcc 100644
--- a/packages/manager/src/routes/betas.tsx
+++ b/packages/manager/src/routes/betas.tsx
@@ -2,6 +2,8 @@ import { Outlet, createRoute } from '@tanstack/react-router';
 import React from 'react';
 
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import BetaSignup from 'src/features/Betas/BetaSignup';
+import BetasLanding from 'src/features/Betas/BetasLanding';
 
 import { rootRoute } from './root';
 
@@ -20,18 +22,16 @@ const betaRoute = createRoute({
 });
 
 const betaLandingRoute = createRoute({
+  component: BetasLanding,
   getParentRoute: () => betaRoute,
   path: '/',
-}).lazy(() =>
-  import('src/features/Betas/BetasLanding').then((m) => m.betasLandingLazyRoute)
-);
+});
 
 const betaSignupRoute = createRoute({
+  component: BetaSignup,
   getParentRoute: () => betaRoute,
   path: 'signup',
-}).lazy(() =>
-  import('src/features/Betas/BetaSignup').then((m) => m.betaSignupLazyRoute)
-);
+});
 
 export const betaRouteTree = betaRoute.addChildren([
   betaLandingRoute,
diff --git a/packages/manager/src/routes/domains.tsx b/packages/manager/src/routes/domains.tsx
index 0d1199db663..2387c554d23 100644
--- a/packages/manager/src/routes/domains.tsx
+++ b/packages/manager/src/routes/domains.tsx
@@ -53,6 +53,7 @@ const domainDetailRoute = createRoute({
 
 const domainDetailRecordsRoute = createRoute({
   getParentRoute: () => domainDetailRoute,
+  // unsure this path is needed, but added for legacy purposes
   path: 'records',
 }).lazy(() =>
   import('src/features/Domains/DomainDetail').then(
diff --git a/packages/manager/src/routes/linodes.tsx b/packages/manager/src/routes/linodes.tsx
index 6c95bb89e6f..095eb165e43 100644
--- a/packages/manager/src/routes/linodes.tsx
+++ b/packages/manager/src/routes/linodes.tsx
@@ -47,8 +47,79 @@ const linodesDetailRoute = createRoute({
   )
 );
 
+const linodesDetailAnalyticsRoute = createRoute({
+  getParentRoute: () => linodesDetailRoute,
+  path: 'analytics',
+}).lazy(() =>
+  import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
+    (m) => m.linodeDetailLazyRoute
+  )
+);
+
+const linodesDetailNetworkingRoute = createRoute({
+  getParentRoute: () => linodesDetailRoute,
+  path: 'networking',
+}).lazy(() =>
+  import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
+    (m) => m.linodeDetailLazyRoute
+  )
+);
+
+const linodesDetailStorageRoute = createRoute({
+  getParentRoute: () => linodesDetailRoute,
+  path: 'storage',
+}).lazy(() =>
+  import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
+    (m) => m.linodeDetailLazyRoute
+  )
+);
+
+const linodesDetailConfigurationsRoute = createRoute({
+  getParentRoute: () => linodesDetailRoute,
+  path: 'configurations',
+}).lazy(() =>
+  import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
+    (m) => m.linodeDetailLazyRoute
+  )
+);
+
+const linodesDetailBackupsRoute = createRoute({
+  getParentRoute: () => linodesDetailRoute,
+  path: 'backup',
+}).lazy(() =>
+  import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
+    (m) => m.linodeDetailLazyRoute
+  )
+);
+
+const linodesDetailActivityRoute = createRoute({
+  getParentRoute: () => linodesDetailRoute,
+  path: 'activity',
+}).lazy(() =>
+  import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
+    (m) => m.linodeDetailLazyRoute
+  )
+);
+
+const linodesDetailSettingsRoute = createRoute({
+  getParentRoute: () => linodesDetailRoute,
+  path: 'settings',
+}).lazy(() =>
+  import('src/features/Linodes/LinodesDetail/LinodesDetail').then(
+    (m) => m.linodeDetailLazyRoute
+  )
+);
+
 export const linodesRouteTree = linodesRoute.addChildren([
   linodesIndexRoute,
   linodesCreateRoute,
-  linodesDetailRoute,
+  linodesDetailRoute.addChildren([
+    linodesDetailAnalyticsRoute,
+    linodesDetailNetworkingRoute,
+    linodesDetailStorageRoute,
+    linodesDetailConfigurationsRoute,
+    linodesDetailBackupsRoute,
+    linodesDetailActivityRoute,
+    linodesDetailSettingsRoute,
+  ]),
 ]);

From 4ecfed966db8e633543040ca5c02efb6144f669c Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 2 Oct 2024 12:36:01 -0400
Subject: [PATCH 37/45] missing longview routes

---
 packages/manager/src/routes/longview.tsx | 58 +++++++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/packages/manager/src/routes/longview.tsx b/packages/manager/src/routes/longview.tsx
index df507fdede3..e4b7d73d502 100644
--- a/packages/manager/src/routes/longview.tsx
+++ b/packages/manager/src/routes/longview.tsx
@@ -31,6 +31,24 @@ export const longviewLandingRoute = createRoute({
   )
 );
 
+export const longviewLandingClientsRoute = createRoute({
+  getParentRoute: () => longviewRoute,
+  path: 'clients',
+}).lazy(() =>
+  import('src/features/Longview/LongviewLanding/LongviewLanding').then(
+    (m) => m.longviewLandingLazyRoute
+  )
+);
+
+export const longviewLandingPlanDetailsRoute = createRoute({
+  getParentRoute: () => longviewRoute,
+  path: 'plan-details',
+}).lazy(() =>
+  import('src/features/Longview/LongviewLanding/LongviewLanding').then(
+    (m) => m.longviewLandingLazyRoute
+  )
+);
+
 export const longviewDetailRoute = createRoute({
   component: LongviewDetail,
   getParentRoute: () => longviewRoute,
@@ -40,7 +58,45 @@ export const longviewDetailRoute = createRoute({
   path: 'clients/$id',
 });
 
+export const longviewDetailOverviewRoute = createRoute({
+  component: LongviewDetail,
+  getParentRoute: () => longviewDetailRoute,
+  path: 'overview',
+});
+
+export const longviewDetailProcessesRoute = createRoute({
+  component: LongviewDetail,
+  getParentRoute: () => longviewDetailRoute,
+  path: 'processes',
+});
+
+export const longviewDetailNetworkRoute = createRoute({
+  component: LongviewDetail,
+  getParentRoute: () => longviewDetailRoute,
+  path: 'network',
+});
+
+export const longviewDetailDisksRoute = createRoute({
+  component: LongviewDetail,
+  getParentRoute: () => longviewDetailRoute,
+  path: 'disks',
+});
+
+export const longviewDetailInstallationRoute = createRoute({
+  component: LongviewDetail,
+  getParentRoute: () => longviewDetailRoute,
+  path: 'installation',
+});
+
 export const longviewRouteTree = longviewRoute.addChildren([
   longviewLandingRoute,
-  longviewDetailRoute,
+  longviewLandingClientsRoute,
+  longviewLandingPlanDetailsRoute,
+  longviewDetailRoute.addChildren([
+    longviewDetailOverviewRoute,
+    longviewDetailProcessesRoute,
+    longviewDetailNetworkRoute,
+    longviewDetailDisksRoute,
+    longviewDetailInstallationRoute,
+  ]),
 ]);

From 43b9a8ce65708720481f675dc8b9c696c9cad48e Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 2 Oct 2024 14:05:21 -0400
Subject: [PATCH 38/45] missing routes

---
 packages/manager/src/routes/events.tsx        |  2 +-
 packages/manager/src/routes/images.tsx        |  6 +--
 packages/manager/src/routes/longview.tsx      | 20 ++++----
 packages/manager/src/routes/managed.tsx       | 14 ++---
 .../manager/src/routes/object-storage.tsx     | 51 +++++++++++++++----
 .../manager/src/routes/placementGroups.tsx    | 40 +++++++++++----
 6 files changed, 92 insertions(+), 41 deletions(-)

diff --git a/packages/manager/src/routes/events.tsx b/packages/manager/src/routes/events.tsx
index e91a0f72984..0289e6f29fe 100644
--- a/packages/manager/src/routes/events.tsx
+++ b/packages/manager/src/routes/events.tsx
@@ -13,7 +13,7 @@ export const EventsRoutes = () => {
   );
 };
 
-export const eventsRoute = createRoute({
+const eventsRoute = createRoute({
   component: EventsRoutes,
   getParentRoute: () => rootRoute,
   path: 'events',
diff --git a/packages/manager/src/routes/images.tsx b/packages/manager/src/routes/images.tsx
index 90da7dbf62f..881b574151e 100644
--- a/packages/manager/src/routes/images.tsx
+++ b/packages/manager/src/routes/images.tsx
@@ -15,13 +15,13 @@ export const ImagesRoutes = () => {
   );
 };
 
-export const imagesRoute = createRoute({
+const imagesRoute = createRoute({
   component: ImagesRoutes,
   getParentRoute: () => rootRoute,
   path: 'images',
 });
 
-export const imagesIndexRoute = createRoute({
+const imagesIndexRoute = createRoute({
   getParentRoute: () => imagesRoute,
   path: '/',
 }).lazy(() =>
@@ -30,7 +30,7 @@ export const imagesIndexRoute = createRoute({
   )
 );
 
-export const imagesCreateRoute = createRoute({
+const imagesCreateRoute = createRoute({
   getParentRoute: () => imagesRoute,
   path: 'create',
 }).lazy(() =>
diff --git a/packages/manager/src/routes/longview.tsx b/packages/manager/src/routes/longview.tsx
index e4b7d73d502..123f412b4ae 100644
--- a/packages/manager/src/routes/longview.tsx
+++ b/packages/manager/src/routes/longview.tsx
@@ -16,13 +16,13 @@ export const LongviewRoutes = () => {
   );
 };
 
-export const longviewRoute = createRoute({
+const longviewRoute = createRoute({
   component: LongviewRoutes,
   getParentRoute: () => rootRoute,
   path: 'longview',
 });
 
-export const longviewLandingRoute = createRoute({
+const longviewLandingRoute = createRoute({
   getParentRoute: () => longviewRoute,
   path: '/',
 }).lazy(() =>
@@ -31,7 +31,7 @@ export const longviewLandingRoute = createRoute({
   )
 );
 
-export const longviewLandingClientsRoute = createRoute({
+const longviewLandingClientsRoute = createRoute({
   getParentRoute: () => longviewRoute,
   path: 'clients',
 }).lazy(() =>
@@ -40,7 +40,7 @@ export const longviewLandingClientsRoute = createRoute({
   )
 );
 
-export const longviewLandingPlanDetailsRoute = createRoute({
+const longviewLandingPlanDetailsRoute = createRoute({
   getParentRoute: () => longviewRoute,
   path: 'plan-details',
 }).lazy(() =>
@@ -49,7 +49,7 @@ export const longviewLandingPlanDetailsRoute = createRoute({
   )
 );
 
-export const longviewDetailRoute = createRoute({
+const longviewDetailRoute = createRoute({
   component: LongviewDetail,
   getParentRoute: () => longviewRoute,
   parseParams: (params) => ({
@@ -58,31 +58,31 @@ export const longviewDetailRoute = createRoute({
   path: 'clients/$id',
 });
 
-export const longviewDetailOverviewRoute = createRoute({
+const longviewDetailOverviewRoute = createRoute({
   component: LongviewDetail,
   getParentRoute: () => longviewDetailRoute,
   path: 'overview',
 });
 
-export const longviewDetailProcessesRoute = createRoute({
+const longviewDetailProcessesRoute = createRoute({
   component: LongviewDetail,
   getParentRoute: () => longviewDetailRoute,
   path: 'processes',
 });
 
-export const longviewDetailNetworkRoute = createRoute({
+const longviewDetailNetworkRoute = createRoute({
   component: LongviewDetail,
   getParentRoute: () => longviewDetailRoute,
   path: 'network',
 });
 
-export const longviewDetailDisksRoute = createRoute({
+const longviewDetailDisksRoute = createRoute({
   component: LongviewDetail,
   getParentRoute: () => longviewDetailRoute,
   path: 'disks',
 });
 
-export const longviewDetailInstallationRoute = createRoute({
+const longviewDetailInstallationRoute = createRoute({
   component: LongviewDetail,
   getParentRoute: () => longviewDetailRoute,
   path: 'installation',
diff --git a/packages/manager/src/routes/managed.tsx b/packages/manager/src/routes/managed.tsx
index fca39e7b5fd..9b2243c6fa9 100644
--- a/packages/manager/src/routes/managed.tsx
+++ b/packages/manager/src/routes/managed.tsx
@@ -15,13 +15,13 @@ export const ManagedRoutes = () => {
   );
 };
 
-export const managedRoute = createRoute({
+const managedRoute = createRoute({
   component: ManagedRoutes,
   getParentRoute: () => rootRoute,
   path: 'managed',
 });
 
-export const managedIndexRoute = createRoute({
+const managedIndexRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: '/',
 }).lazy(() =>
@@ -30,7 +30,7 @@ export const managedIndexRoute = createRoute({
   )
 );
 
-export const managedSummaryRoute = createRoute({
+const managedSummaryRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: 'summary',
 }).lazy(() =>
@@ -39,7 +39,7 @@ export const managedSummaryRoute = createRoute({
   )
 );
 
-export const managedMonitorsRoute = createRoute({
+const managedMonitorsRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: 'monitors',
 }).lazy(() =>
@@ -48,7 +48,7 @@ export const managedMonitorsRoute = createRoute({
   )
 );
 
-export const managedSSHAccessRoute = createRoute({
+const managedSSHAccessRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: 'ssh-access',
 }).lazy(() =>
@@ -57,7 +57,7 @@ export const managedSSHAccessRoute = createRoute({
   )
 );
 
-export const managedCredentialsRoute = createRoute({
+const managedCredentialsRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: 'credentials',
 }).lazy(() =>
@@ -66,7 +66,7 @@ export const managedCredentialsRoute = createRoute({
   )
 );
 
-export const managedContactsRoute = createRoute({
+const managedContactsRoute = createRoute({
   getParentRoute: () => managedRoute,
   path: 'contacts',
 }).lazy(() =>
diff --git a/packages/manager/src/routes/object-storage.tsx b/packages/manager/src/routes/object-storage.tsx
index 9dd7b4911e4..9a03f21f9db 100644
--- a/packages/manager/src/routes/object-storage.tsx
+++ b/packages/manager/src/routes/object-storage.tsx
@@ -31,7 +31,7 @@ const objectStorageIndexRoute = createRoute({
 );
 
 const objectStorageBucketsRoute = createRoute({
-  getParentRoute: () => objectStorageIndexRoute,
+  getParentRoute: () => objectStorageRoute,
   path: 'buckets',
 }).lazy(() =>
   import('src/features/ObjectStorage/ObjectStorageLanding').then(
@@ -40,7 +40,7 @@ const objectStorageBucketsRoute = createRoute({
 );
 
 const objectStorageAccessKeysRoute = createRoute({
-  getParentRoute: () => objectStorageIndexRoute,
+  getParentRoute: () => objectStorageRoute,
   path: 'access-keys',
 }).lazy(() =>
   import('src/features/ObjectStorage/ObjectStorageLanding').then(
@@ -48,6 +48,15 @@ const objectStorageAccessKeysRoute = createRoute({
   )
 );
 
+const objectStorageBucketCreateRoute = createRoute({
+  getParentRoute: () => objectStorageBucketsRoute,
+  path: 'create',
+}).lazy(() =>
+  import('src/features/ObjectStorage/ObjectStorageLanding').then(
+    (m) => m.objectStorageLandingLazyRoute
+  )
+);
+
 const objectStorageBucketDetailRoute = createRoute({
   getParentRoute: () => objectStorageBucketsRoute,
   path: '$clusterId/$bucketName',
@@ -57,19 +66,41 @@ const objectStorageBucketDetailRoute = createRoute({
   )
 );
 
-const objectStorageBucketCreateRoute = createRoute({
-  getParentRoute: () => objectStorageBucketsRoute,
-  path: 'create',
+const objectStorageBucketDetailObjectsRoute = createRoute({
+  getParentRoute: () => objectStorageBucketDetailRoute,
+  path: 'objects',
 }).lazy(() =>
-  import('src/features/ObjectStorage/ObjectStorageLanding').then(
-    (m) => m.objectStorageLandingLazyRoute
+  import('src/features/ObjectStorage/BucketDetail').then(
+    (m) => m.bucketDetailLandingLazyRoute
+  )
+);
+
+const objectStorageBucketDetailAccessRoute = createRoute({
+  getParentRoute: () => objectStorageBucketDetailRoute,
+  path: 'access',
+}).lazy(() =>
+  import('src/features/ObjectStorage/BucketDetail').then(
+    (m) => m.bucketDetailLandingLazyRoute
   )
 );
 
+const objectStorageBucketSSLRoute = createRoute({
+  getParentRoute: () => objectStorageBucketDetailRoute,
+  path: 'ssl',
+}).lazy(() =>
+  import('src/features/ObjectStorage/BucketDetail').then(
+    (m) => m.bucketDetailLandingLazyRoute
+  )
+);
 export const objectStorageRouteTree = objectStorageRoute.addChildren([
   objectStorageIndexRoute,
-  objectStorageBucketsRoute,
-  objectStorageBucketCreateRoute,
-  objectStorageBucketDetailRoute,
+  objectStorageBucketsRoute.addChildren([
+    objectStorageBucketDetailRoute.addChildren([
+      objectStorageBucketDetailObjectsRoute,
+      objectStorageBucketDetailAccessRoute,
+      objectStorageBucketSSLRoute,
+    ]),
+    objectStorageBucketCreateRoute,
+  ]),
   objectStorageAccessKeysRoute,
 ]);
diff --git a/packages/manager/src/routes/placementGroups.tsx b/packages/manager/src/routes/placementGroups.tsx
index ccaffae3b6d..48ee3d000fc 100644
--- a/packages/manager/src/routes/placementGroups.tsx
+++ b/packages/manager/src/routes/placementGroups.tsx
@@ -65,29 +65,46 @@ const placementGroupsDeleteRoute = createRoute({
   ).then((m) => m.placementGroupsLandingLazyRoute)
 );
 
-const placementGroupsUnassignRoute = createRoute({
+const placementGroupsDetailRoute = createRoute({
   getParentRoute: () => placementGroupsRoute,
   parseParams: (params) => ({
     id: Number(params.id),
-    linodeId: Number(params.linodeId),
   }),
-  path: '$id/linodes/unassign/$linodeId',
+  path: '$id',
+}).lazy(() =>
+  import(
+    'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
+  ).then((m) => m.placementGroupsDetailLazyRoute)
+);
+
+const placementGroupsDetailLinodesRoute = createRoute({
+  getParentRoute: () => placementGroupsDetailRoute,
+  path: 'linodes',
+}).lazy(() =>
+  import(
+    'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
+  ).then((m) => m.placementGroupsDetailLazyRoute)
+);
+
+const placementGroupsAssignRoute = createRoute({
+  getParentRoute: () => placementGroupsDetailLinodesRoute,
+  path: 'assign',
 }).lazy(() =>
   import(
     'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
   ).then((m) => m.placementGroupsUnassignLazyRoute)
 );
 
-const placementGroupsDetailRoute = createRoute({
-  getParentRoute: () => placementGroupsRoute,
+const placementGroupsUnassignRoute = createRoute({
+  getParentRoute: () => placementGroupsDetailLinodesRoute,
   parseParams: (params) => ({
-    id: Number(params.id),
+    linodeId: Number(params.linodeId),
   }),
-  path: '$id',
+  path: 'unassign/$linodeId',
 }).lazy(() =>
   import(
     'src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail'
-  ).then((m) => m.placementGroupsDetailLazyRoute)
+  ).then((m) => m.placementGroupsUnassignLazyRoute)
 );
 
 export const placementGroupsRouteTree = placementGroupsRoute.addChildren([
@@ -95,6 +112,9 @@ export const placementGroupsRouteTree = placementGroupsRoute.addChildren([
   placementGroupsCreateRoute,
   placementGroupsEditRoute,
   placementGroupsDeleteRoute,
-  placementGroupsDetailRoute,
-  placementGroupsUnassignRoute,
+  placementGroupsDetailRoute.addChildren([
+    placementGroupsDetailLinodesRoute,
+    placementGroupsAssignRoute,
+    placementGroupsUnassignRoute,
+  ]),
 ]);

From 1fbcf22e52a77f18af7a7c25673840c860d181b9 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 2 Oct 2024 15:08:21 -0400
Subject: [PATCH 39/45] wrap up missing routes

---
 packages/manager/src/routes/index.tsx  |  2 ++
 packages/manager/src/routes/search.tsx | 31 ++++++++++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 packages/manager/src/routes/search.tsx

diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index 3e4e2b52024..0f05a2483f2 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -20,6 +20,7 @@ import { objectStorageRouteTree } from './object-storage';
 import { placementGroupsRouteTree } from './placementGroups';
 import { profileRouteTree } from './profile';
 import { rootRoute } from './root';
+import { searchRouteTree } from './search';
 import { stackScriptsRouteTree } from './stackscripts';
 import { supportRouteTree } from './support';
 import { volumesRouteTree } from './volumes';
@@ -57,6 +58,7 @@ export const routeTree = rootRoute.addChildren([
   objectStorageRouteTree,
   placementGroupsRouteTree,
   profileRouteTree,
+  searchRouteTree,
   stackScriptsRouteTree,
   supportRouteTree,
   volumesRouteTree,
diff --git a/packages/manager/src/routes/search.tsx b/packages/manager/src/routes/search.tsx
new file mode 100644
index 00000000000..e2bc28f5e89
--- /dev/null
+++ b/packages/manager/src/routes/search.tsx
@@ -0,0 +1,31 @@
+import { Outlet, createRoute } from '@tanstack/react-router';
+import React from 'react';
+
+import { SuspenseLoader } from 'src/components/SuspenseLoader';
+import { StatusBanners } from 'src/features/Help/StatusBanners';
+import SearchLanding from 'src/features/Search/SearchLanding';
+
+import { rootRoute } from './root';
+
+export const SearchRoutes = () => {
+  return (
+    <React.Suspense fallback={<SuspenseLoader />}>
+      <StatusBanners />
+      <Outlet />
+    </React.Suspense>
+  );
+};
+
+const searchRoute = createRoute({
+  component: SearchRoutes,
+  getParentRoute: () => rootRoute,
+  path: 'search',
+});
+
+const searchLandingRoute = createRoute({
+  component: () => <SearchLanding />,
+  getParentRoute: () => searchRoute,
+  path: '/',
+});
+
+export const searchRouteTree = searchRoute.addChildren([searchLandingRoute]);

From b8081650711b44e925df972bc4fda52fae1783f7 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 3 Oct 2024 10:19:10 -0400
Subject: [PATCH 40/45] light cleanup

---
 packages/manager/src/App.tsx          | 13 +++++++++----
 packages/manager/src/routes/index.tsx | 10 +++-------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/manager/src/App.tsx b/packages/manager/src/App.tsx
index 78645b3aa5a..e36ece5fe33 100644
--- a/packages/manager/src/App.tsx
+++ b/packages/manager/src/App.tsx
@@ -14,9 +14,9 @@ import { GoTo } from './GoTo';
 import { useAdobeAnalytics } from './hooks/useAdobeAnalytics';
 import { useInitialRequests } from './hooks/useInitialRequests';
 import { useNewRelic } from './hooks/useNewRelic';
+import { MainContent } from './MainContent';
 import { useEventsPoller } from './queries/events/events';
-// import { MainContent } from './MainContent';
-import { Router } from './Router';
+// import { Router } from './Router';
 import { useSetupFeatureFlags } from './useSetupFeatureFlags';
 
 // Ensure component's display name is 'App'
@@ -47,8 +47,13 @@ const BaseApp = withDocumentTitleProvider(
         </div>
         <GoTo />
         <DocumentTitleSegment segment="Akamai Cloud Manager" />
-        {/* <MainContent /> */}
-        <Router />
+        <MainContent />
+        {/*
+          * This will be our new entry point
+          * Leaving this commented out so reviewers can test the app with the new routing at any point by replacing
+          * MainContent with <Router />.
+          <Router />
+        */}
         <GlobalListeners />
       </ErrorBoundary>
     );
diff --git a/packages/manager/src/routes/index.tsx b/packages/manager/src/routes/index.tsx
index 0f05a2483f2..5513b9b1dfb 100644
--- a/packages/manager/src/routes/index.tsx
+++ b/packages/manager/src/routes/index.tsx
@@ -28,13 +28,9 @@ import { vpcsRouteTree } from './vpcs';
 
 const indexRoute = createRoute({
   beforeLoad: ({ context }) => {
-    // ****
-    // TODO TanStack Router - enable this in phase 2 (managed tabs are broken for now cause of mismatched history)
-    // ****
-    // const { accountSettings } = context;
-    // const defaultRoot = accountSettings?.managed ? '/managed' : '/linodes';
-    // throw redirect({ to: defaultRoot });
-    throw redirect({ to: '/linodes' });
+    const { accountSettings } = context;
+    const defaultRoot = accountSettings?.managed ? '/managed' : '/linodes';
+    throw redirect({ to: defaultRoot });
   },
   getParentRoute: () => rootRoute,
   path: '/',

From a9cc3220d2895e0e4d3af3685217f89ea10be117 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 3 Oct 2024 10:21:48 -0400
Subject: [PATCH 41/45] rename stylesheet

---
 packages/manager/src/{MainContent.styles.ts => Root.styles.ts} | 0
 packages/manager/src/Root.tsx                                  | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/manager/src/{MainContent.styles.ts => Root.styles.ts} (100%)

diff --git a/packages/manager/src/MainContent.styles.ts b/packages/manager/src/Root.styles.ts
similarity index 100%
rename from packages/manager/src/MainContent.styles.ts
rename to packages/manager/src/Root.styles.ts
diff --git a/packages/manager/src/Root.tsx b/packages/manager/src/Root.tsx
index 1fb8a7890c0..c78b6b9c198 100644
--- a/packages/manager/src/Root.tsx
+++ b/packages/manager/src/Root.tsx
@@ -26,8 +26,8 @@ import { complianceUpdateContext } from './context/complianceUpdateContext';
 import { sessionExpirationContext } from './context/sessionExpirationContext';
 import { switchAccountSessionContext } from './context/switchAccountSessionContext';
 import { useGlobalErrors } from './hooks/useGlobalErrors';
-import { useStyles } from './MainContent.styles';
 import { useProfile } from './queries/profile/profile';
+import { useStyles } from './Root.styles';
 
 export const Root = () => {
   const { classes, cx } = useStyles();

From 6cd3d8271265f731026edb0151bf32fb5da0c314 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 3 Oct 2024 11:54:58 -0400
Subject: [PATCH 42/45] Added changeset: Introduce TanStack Router

---
 packages/manager/.changeset/pr-10997-added-1727970898327.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10997-added-1727970898327.md

diff --git a/packages/manager/.changeset/pr-10997-added-1727970898327.md b/packages/manager/.changeset/pr-10997-added-1727970898327.md
new file mode 100644
index 00000000000..7208dd1d386
--- /dev/null
+++ b/packages/manager/.changeset/pr-10997-added-1727970898327.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Introduce TanStack Router ([#10997](https://github.com/linode/manager/pull/10997))

From 526fedda2ae66b8ad695c105540f974ee3e5e463 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 3 Oct 2024 16:15:41 -0400
Subject: [PATCH 43/45] feedback @bnussman-akamai

---
 .../src/features/Billing/InvoiceDetail/InvoiceDetail.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
index fffe04f5456..953207624f6 100644
--- a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
+++ b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx
@@ -159,7 +159,7 @@ export const InvoiceDetail = () => {
                   breadcrumbProps={{
                     crumbOverrides: [{ label: 'Billing Info', position: 1 }],
                     firstAndLastOnly: true,
-                    labelTitle: `Invoice ${invoice.id}`,
+                    labelTitle: `Invoice #${invoice.id}`,
                     pathname: location.pathname,
                   }}
                 />

From 8f5f1a1b7a3deb33e904853fffcc751592b0e602 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 4 Oct 2024 11:39:17 -0400
Subject: [PATCH 44/45] feedback @jaalah-akamai

---
 packages/manager/src/routes/profile.tsx       | 52 +++++++++----------
 packages/manager/src/routes/routes.test.tsx   | 15 +++---
 packages/manager/src/routes/stackscripts.tsx  | 40 +++++++-------
 packages/manager/src/routes/support.tsx       | 26 +++++-----
 packages/manager/src/routes/types.ts          |  5 +-
 packages/manager/src/routes/utils/allPaths.ts | 13 +++--
 6 files changed, 77 insertions(+), 74 deletions(-)

diff --git a/packages/manager/src/routes/profile.tsx b/packages/manager/src/routes/profile.tsx
index 415bcaffd64..1b1eec52285 100644
--- a/packages/manager/src/routes/profile.tsx
+++ b/packages/manager/src/routes/profile.tsx
@@ -13,15 +13,15 @@ export const ProfileRoutes = () => {
   );
 };
 
-const ProfileRoute = createRoute({
+const profileRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: 'profile',
 }).lazy(() =>
   import('src/features/Profile/Profile').then((m) => m.ProfileLazyRoute)
 );
 
-const ProfileDisplaySettingsRoute = createRoute({
-  getParentRoute: () => ProfileRoute,
+const profileDisplaySettingsRoute = createRoute({
+  getParentRoute: () => profileRoute,
   path: 'display',
 }).lazy(() =>
   import('src/features/Profile/DisplaySettings/DisplaySettings').then(
@@ -29,8 +29,8 @@ const ProfileDisplaySettingsRoute = createRoute({
   )
 );
 
-const ProfileAuthenticationSettingsRoute = createRoute({
-  getParentRoute: () => ProfileRoute,
+const profileAuthenticationSettingsRoute = createRoute({
+  getParentRoute: () => profileRoute,
   path: 'auth',
 }).lazy(() =>
   import(
@@ -38,15 +38,15 @@ const ProfileAuthenticationSettingsRoute = createRoute({
   ).then((m) => m.authenticationSettingsLazyRoute)
 );
 
-const ProfileSSHKeysRoute = createRoute({
-  getParentRoute: () => ProfileRoute,
+const profileSSHKeysRoute = createRoute({
+  getParentRoute: () => profileRoute,
   path: 'keys',
 }).lazy(() =>
   import('src/features/Profile/SSHKeys/SSHKeys').then((m) => m.SSHKeysLazyRoute)
 );
 
-const ProfileLishSettingsRoute = createRoute({
-  getParentRoute: () => ProfileRoute,
+const profileLishSettingsRoute = createRoute({
+  getParentRoute: () => profileRoute,
   path: 'lish',
 }).lazy(() =>
   import('src/features/Profile/LishSettings/LishSettings').then(
@@ -54,8 +54,8 @@ const ProfileLishSettingsRoute = createRoute({
   )
 );
 
-const ProfileAPITokensRoute = createRoute({
-  getParentRoute: () => ProfileRoute,
+const profileAPITokensRoute = createRoute({
+  getParentRoute: () => profileRoute,
   path: 'tokens',
 }).lazy(() =>
   import('src/features/Profile/APITokens/APITokens').then(
@@ -63,8 +63,8 @@ const ProfileAPITokensRoute = createRoute({
   )
 );
 
-const ProfileOAuthClientsRoute = createRoute({
-  getParentRoute: () => ProfileRoute,
+const profileOAuthClientsRoute = createRoute({
+  getParentRoute: () => profileRoute,
   path: 'clients',
 }).lazy(() =>
   import('src/features/Profile/OAuthClients/OAuthClients').then(
@@ -72,8 +72,8 @@ const ProfileOAuthClientsRoute = createRoute({
   )
 );
 
-const ProfileReferralsRoute = createRoute({
-  getParentRoute: () => ProfileRoute,
+const profileReferralsRoute = createRoute({
+  getParentRoute: () => profileRoute,
   path: 'referrals',
 }).lazy(() =>
   import('src/features/Profile/Referrals/Referrals').then(
@@ -81,8 +81,8 @@ const ProfileReferralsRoute = createRoute({
   )
 );
 
-const ProfileSettingsRoute = createRoute({
-  getParentRoute: () => ProfileRoute,
+const profileSettingsRoute = createRoute({
+  getParentRoute: () => profileRoute,
   path: 'settings',
 }).lazy(() =>
   import('src/features/Profile/Settings/Settings').then(
@@ -90,13 +90,13 @@ const ProfileSettingsRoute = createRoute({
   )
 );
 
-export const profileRouteTree = ProfileRoute.addChildren([
-  ProfileAuthenticationSettingsRoute,
-  ProfileDisplaySettingsRoute,
-  ProfileSSHKeysRoute,
-  ProfileLishSettingsRoute,
-  ProfileAPITokensRoute,
-  ProfileOAuthClientsRoute,
-  ProfileReferralsRoute,
-  ProfileSettingsRoute,
+export const profileRouteTree = profileRoute.addChildren([
+  profileAuthenticationSettingsRoute,
+  profileDisplaySettingsRoute,
+  profileSSHKeysRoute,
+  profileLishSettingsRoute,
+  profileAPITokensRoute,
+  profileOAuthClientsRoute,
+  profileReferralsRoute,
+  profileSettingsRoute,
 ]);
diff --git a/packages/manager/src/routes/routes.test.tsx b/packages/manager/src/routes/routes.test.tsx
index bd32bf2dcb2..acb81318d46 100644
--- a/packages/manager/src/routes/routes.test.tsx
+++ b/packages/manager/src/routes/routes.test.tsx
@@ -6,23 +6,20 @@ import {
 import { waitFor } from '@testing-library/react';
 import React from 'react';
 
+import { accountSettingsFactory } from 'src/factories';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { allPaths } from './utils/allPaths';
 import { routeTree } from './index';
+import { allPaths } from './utils/allPaths';
+
+import type { RouterContext } from './types';
 
 // Mock any context or dependencies your routes might need
-const mockContext = {
-  accountSettings: {},
-  app: {
-    features: {},
-    flags: {},
-    notifications: [],
-  },
+const mockContext: RouterContext = {
+  accountSettings: accountSettingsFactory.build(),
   isACLPEnabled: false,
   isDatabasesEnabled: false,
   isPlacementGroupsEnabled: false,
-  selfServeBetas: false,
 };
 
 // Helper function to create a test router
diff --git a/packages/manager/src/routes/stackscripts.tsx b/packages/manager/src/routes/stackscripts.tsx
index 22757ef5df8..9a1def8fdce 100644
--- a/packages/manager/src/routes/stackscripts.tsx
+++ b/packages/manager/src/routes/stackscripts.tsx
@@ -17,14 +17,14 @@ export const StackScriptsRoutes = () => {
   );
 };
 
-const StackScriptsRoute = createRoute({
+const stackScriptsRoute = createRoute({
   component: StackScriptsRoutes,
   getParentRoute: () => rootRoute,
   path: 'stackscripts',
 });
 
-const StackScriptsLandingRoute = createRoute({
-  getParentRoute: () => StackScriptsRoute,
+const stackScriptsLandingRoute = createRoute({
+  getParentRoute: () => stackScriptsRoute,
   path: '/',
 }).lazy(() =>
   import('src/features/StackScripts/StackScriptsLanding').then(
@@ -32,8 +32,8 @@ const StackScriptsLandingRoute = createRoute({
   )
 );
 
-const StackScriptsAccountRoute = createRoute({
-  getParentRoute: () => StackScriptsRoute,
+const stackScriptsAccountRoute = createRoute({
+  getParentRoute: () => stackScriptsRoute,
   path: 'account',
 }).lazy(() =>
   import('src/features/StackScripts/StackScriptsLanding').then(
@@ -41,8 +41,8 @@ const StackScriptsAccountRoute = createRoute({
   )
 );
 
-const StackScriptsCommunityRoute = createRoute({
-  getParentRoute: () => StackScriptsRoute,
+const stackScriptsCommunityRoute = createRoute({
+  getParentRoute: () => stackScriptsRoute,
   path: 'community',
 }).lazy(() =>
   import('src/features/StackScripts/StackScriptsLanding').then(
@@ -50,38 +50,38 @@ const StackScriptsCommunityRoute = createRoute({
   )
 );
 
-const StackScriptsCreateRoute = createRoute({
+const stackScriptsCreateRoute = createRoute({
   // TODO: TanStack Router - broken, perhaps due to being a class component.
   component: () => <StackScriptCreate mode="create" />,
-  getParentRoute: () => StackScriptsRoute,
+  getParentRoute: () => stackScriptsRoute,
   path: 'create',
 });
 
-const StackScriptsDetailRoute = createRoute({
+const stackScriptsDetailRoute = createRoute({
   // TODO: TanStack Router - broken, perhaps due to being a class component.
   component: () => <StackScriptDetail />,
-  getParentRoute: () => StackScriptsRoute,
+  getParentRoute: () => stackScriptsRoute,
   parseParams: (params) => ({
     stackScriptID: Number(params.stackScriptID),
   }),
   path: '$stackScriptID',
 });
 
-const StackScriptsEditRoute = createRoute({
+const stackScriptsEditRoute = createRoute({
   // TODO: TanStack Router - broken, perhaps due to being a class component.
   component: () => <StackScriptCreate mode="edit" />,
-  getParentRoute: () => StackScriptsRoute,
+  getParentRoute: () => stackScriptsRoute,
   parseParams: (params) => ({
     stackScriptID: Number(params.stackScriptID),
   }),
   path: '$stackScriptID/edit',
 });
 
-export const stackScriptsRouteTree = StackScriptsRoute.addChildren([
-  StackScriptsLandingRoute,
-  StackScriptsAccountRoute,
-  StackScriptsCommunityRoute,
-  StackScriptsCreateRoute,
-  StackScriptsDetailRoute,
-  StackScriptsEditRoute,
+export const stackScriptsRouteTree = stackScriptsRoute.addChildren([
+  stackScriptsLandingRoute,
+  stackScriptsAccountRoute,
+  stackScriptsCommunityRoute,
+  stackScriptsCreateRoute,
+  stackScriptsDetailRoute,
+  stackScriptsEditRoute,
 ]);
diff --git a/packages/manager/src/routes/support.tsx b/packages/manager/src/routes/support.tsx
index 49cd9ec6c71..7082ccd6b37 100644
--- a/packages/manager/src/routes/support.tsx
+++ b/packages/manager/src/routes/support.tsx
@@ -15,22 +15,22 @@ export const SupportTicketsRoutes = () => {
   );
 };
 
-const SupportRoute = createRoute({
+const supportRoute = createRoute({
   // TODO: TanStackRouter - got to handle the MainContent.tsx `globalErrors.account_unactivated` logic.
   component: SupportTicketsRoutes,
   getParentRoute: () => rootRoute,
   path: 'support',
 });
 
-const SupportLandingRoute = createRoute({
-  getParentRoute: () => SupportRoute,
+const supportLandingRoute = createRoute({
+  getParentRoute: () => supportRoute,
   path: '/',
 }).lazy(() =>
   import('src/features/Help/HelpLanding').then((m) => m.helpLandingLazyRoute)
 );
 
-const SupportTicketsRoute = createRoute({
-  getParentRoute: () => SupportRoute,
+const supportTicketsRoute = createRoute({
+  getParentRoute: () => supportRoute,
   path: 'tickets',
 }).lazy(() =>
   import('src/features/Support/SupportTickets/SupportTicketsLanding').then(
@@ -38,8 +38,8 @@ const SupportTicketsRoute = createRoute({
   )
 );
 
-const SupportTicketDetailRoute = createRoute({
-  getParentRoute: () => SupportRoute,
+const supportTicketDetailRoute = createRoute({
+  getParentRoute: () => supportRoute,
   parseParams: (params) => ({
     ticketId: Number(params.ticketId),
   }),
@@ -50,8 +50,8 @@ const SupportTicketDetailRoute = createRoute({
   )
 );
 
-const SupportSearchLandingRoute = createRoute({
-  getParentRoute: () => SupportRoute,
+const supportSearchLandingRoute = createRoute({
+  getParentRoute: () => supportRoute,
   path: 'search',
 }).lazy(() =>
   import('src/features/Help/SupportSearchLanding/SupportSearchLanding').then(
@@ -59,8 +59,8 @@ const SupportSearchLandingRoute = createRoute({
   )
 );
 
-export const supportRouteTree = SupportRoute.addChildren([
-  SupportLandingRoute,
-  SupportTicketsRoute.addChildren([SupportTicketDetailRoute]),
-  SupportSearchLandingRoute,
+export const supportRouteTree = supportRoute.addChildren([
+  supportLandingRoute,
+  supportTicketsRoute.addChildren([supportTicketDetailRoute]),
+  supportSearchLandingRoute,
 ]);
diff --git a/packages/manager/src/routes/types.ts b/packages/manager/src/routes/types.ts
index b4998f1f250..dfcb907463f 100644
--- a/packages/manager/src/routes/types.ts
+++ b/packages/manager/src/routes/types.ts
@@ -1,6 +1,7 @@
-// TODO: TanStackRouter - type this better
+import type { AccountSettings } from '@linode/api-v4';
+
 export type RouterContext = {
-  accountSettings?: any;
+  accountSettings?: AccountSettings;
   globalErrors?: {
     account_unactivated?: boolean;
   };
diff --git a/packages/manager/src/routes/utils/allPaths.ts b/packages/manager/src/routes/utils/allPaths.ts
index 6a8779ad2e3..3a76edb1293 100644
--- a/packages/manager/src/routes/utils/allPaths.ts
+++ b/packages/manager/src/routes/utils/allPaths.ts
@@ -1,5 +1,7 @@
 import { routeTree } from '..';
 
+import type { AnyRoute } from '@tanstack/react-router';
+
 /**
  * This function is meant to be used for testing purposes only.
  * It allows us to generate a list of all unique @tanstack/router paths defined in the routing factory.
@@ -7,7 +9,10 @@ import { routeTree } from '..';
  * We import this util in cypress to loop through all routes and test them.
  * It probably should not be used for anything else.
  */
-export const getAllRoutePaths = (route: any, parentPath = ''): string[] => {
+export const getAllRoutePaths = (
+  route: AnyRoute,
+  parentPath = ''
+): string[] => {
   let currentPath = parentPath
     ? `${parentPath}/${route.path || ''}`
     : route.path || '';
@@ -15,15 +20,15 @@ export const getAllRoutePaths = (route: any, parentPath = ''): string[] => {
   // Remove leading and trailing slashes
   currentPath = currentPath.replace(/^\/+|\/+$/g, '');
 
-  const paths: Set<string> = new Set();
+  const paths = new Set<string>();
 
   // Check if the current path is valid
   if (currentPath && currentPath !== '//') {
     paths.add('/' + currentPath);
   }
 
-  if (route.children) {
-    route.children.forEach((childRoute: any) => {
+  if (route.children && Array.isArray(route.children)) {
+    route.children.forEach((childRoute) => {
       getAllRoutePaths(childRoute, currentPath).forEach((path) =>
         paths.add(path)
       );

From 19971cf4ae36683f289e15ebb631fe6657eefa1e Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 4 Oct 2024 14:51:22 -0400
Subject: [PATCH 45/45] post rebase fix

---
 packages/manager/src/features/Linodes/LinodeCreate/index.tsx | 4 ++--
 packages/manager/src/routes/linodes.tsx                      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/manager/src/features/Linodes/LinodeCreate/index.tsx b/packages/manager/src/features/Linodes/LinodeCreate/index.tsx
index 6a3cc1fccd3..ae4125d2ee1 100644
--- a/packages/manager/src/features/Linodes/LinodeCreate/index.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreate/index.tsx
@@ -230,6 +230,6 @@ export const LinodeCreate = () => {
   );
 };
 
-export const linodeCreatev2LazyRoute = createLazyRoute('/linodes/create')({
-  component: LinodeCreatev2,
+export const linodeCreateLazyRoute = createLazyRoute('/linodes/create')({
+  component: LinodeCreate,
 });
diff --git a/packages/manager/src/routes/linodes.tsx b/packages/manager/src/routes/linodes.tsx
index 095eb165e43..7574715c46e 100644
--- a/packages/manager/src/routes/linodes.tsx
+++ b/packages/manager/src/routes/linodes.tsx
@@ -30,8 +30,8 @@ const linodesCreateRoute = createRoute({
   getParentRoute: () => linodesRoute,
   path: 'create',
 }).lazy(() =>
-  import('src/features/Linodes/LinodeCreatev2').then(
-    (m) => m.linodeCreatev2LazyRoute
+  import('src/features/Linodes/LinodeCreate').then(
+    (m) => m.linodeCreateLazyRoute
   )
 );