[M3-10372] - Routing: Full switch + cleanup + remove react-router-dom (linode#12602)

* initial pass

* initial pass

* auth

* auth progress

* auth progress

* typing progress

* type fixes

* tackling all the strays

* tackling all the strays

* remove react-router-dom entirely

* unit tests

* cleanup 1

* post rebase fix

* moar cleanup

* fix marketplace tab

* cleanup comments

* Added changeset: Routing: remove `react-router-dom` and fully switch to tanstack router

* some e2e fixes

* snackbar provider can contain links!

* feedback @bnussman-akamai

* feedback @coliu-akamai part 1

---------

Co-authored-by: Alban Bailly <[email protected]>
Co-authored-by: Alban Bailly <[email protected]>

Author: alioso

packages/manager/.changeset/pr-12602-tech-stories-1753879656857.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Routing: remove `react-router-dom` and fully switch to tanstack router ([#12602](https://github.com/linode/manager/pull/12602))

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

@@ -21,7 +21,7 @@ describe('resize linode', () => {
       createTestLinode({ booted: true }, { securityMethod: 'vlan_no_internet' })
     ).then((linode) => {
       interceptLinodeResize(linode.id).as('linodeResize');
-      cy.visitWithLogin(`/linodes/${linode.id}?resize=true`);
+      cy.visitWithLogin(`/linodes/${linode.id}/metrics?resize=true`);
 
       ui.dialog
         .findByTitle(`Resize Linode ${linode.label}`)
@@ -63,7 +63,7 @@ describe('resize linode', () => {
       createTestLinode({ booted: true }, { securityMethod: 'vlan_no_internet' })
     ).then((linode) => {
       interceptLinodeResize(linode.id).as('linodeResize');
-      cy.visitWithLogin(`/linodes/${linode.id}?resize=true`);
+      cy.visitWithLogin(`/linodes/${linode.id}/metrics?resize=true`);
 
       ui.dialog
         .findByTitle(`Resize Linode ${linode.label}`)
@@ -168,7 +168,7 @@ describe('resize linode', () => {
       // Error flow when attempting to resize a linode to a smaller size without
       // resizing the disk to the requested size first.
       interceptLinodeResize(linode.id).as('linodeResize');
-      cy.visitWithLogin(`/linodes/${linode.id}?resize=true`);
+      cy.visitWithLogin(`/linodes/${linode.id}/metrics?resize=true`);
 
       ui.dialog
         .findByTitle(`Resize Linode ${linode.label}`)

packages/manager/cypress/support/component/setup.tsx

@@ -29,7 +29,6 @@ import { LDProvider } from 'launchdarkly-react-client-sdk';
 import { SnackbarProvider } from 'notistack';
 import * as React from 'react';
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
 
 import { LinodeThemeWrapper } from 'src/LinodeThemeWrapper';
 import { storeFactory } from 'src/store';
@@ -79,9 +78,7 @@ export const mountWithTheme = (
             options={{ bootstrap: flags }}
           >
             <SnackbarProvider>
-              <MemoryRouter>
-                <RouterProvider router={router} />
-              </MemoryRouter>
+              <RouterProvider router={router} />
             </SnackbarProvider>
           </LDProvider>
         </LinodeThemeWrapper>

packages/manager/eslint.config.js

@@ -29,10 +29,10 @@ const restrictedImportPaths = [
       'Please use Typography component from @linode/ui instead of @mui/material',
   },
   {
-    name: 'react-router-dom',
+    name: '@tanstack/react-router',
     importNames: ['Link'],
     message:
-      'Please use the Link component from src/components/Link instead of react-router-dom',
+      'Please use the Link component from src/components/Link instead of direct imports from @tanstack/react-router',
   },
 ];
 
@@ -401,93 +401,7 @@ export const baseConfig = [
     },
   },
 
-  // 14. Tanstack Router (temporary)
-  {
-    files: [
-      // for each new features added to the migration router, add its directory here
-      'src/features/Account/**/*',
-      'src/features/Billing/**/*',
-      'src/features/Betas/**/*',
-      'src/features/CloudPulse/**/*',
-      'src/features/Databases/**/*',
-      'src/features/Domains/**/*',
-      'src/features/DataStream/**/*',
-      'src/features/Events/**/*',
-      'src/features/Firewalls/**/*',
-      'src/features/Help/**/*',
-      'src/features/IAM/**/*',
-      'src/features/Images/**/*',
-      'src/features/Kubernetes/**/*',
-      'src/features/Linodes/**/*',
-      'src/features/Longview/**/*',
-      'src/features/Managed/**/*',
-      'src/features/NodeBalancers/**/*',
-      'src/features/ObjectStorage/**/*',
-      'src/features/PlacementGroups/**/*',
-      'src/features/Profile/**/*',
-      'src/features/Search/**/*',
-      'src/features/TopMenu/SearchBar/**/*',
-      'src/components/Tag/**/*',
-      'src/features/StackScripts/**/*',
-      'src/features/Support/**/*',
-      'src/features/Users/**/*',
-      'src/features/Volumes/**/*',
-      'src/features/VPCs/**/*',
-    ],
-    rules: {
-      'no-restricted-imports': [
-        // This needs to remain an error however trying to link to a feature that is not yet migrated will break the router
-        // For those cases react-router-dom history.push is still needed
-        // using `eslint-disable-next-line no-restricted-imports` can help bypass those imports
-        'error',
-        {
-          paths: [
-            {
-              importNames: [
-                // intentionally not including <Link> in this list as this will be updated last globally
-                'useNavigate',
-                'useParams',
-                'useLocation',
-                'useHistory',
-                'useRouteMatch',
-                'matchPath',
-                'MemoryRouter',
-                'Route',
-                'RouteProps',
-                'Switch',
-                'Redirect',
-                'RouteComponentProps',
-                'withRouter',
-              ],
-              message:
-                'Please use routing utilities intended for @tanstack/react-router.',
-              name: 'react-router-dom',
-            },
-            {
-              importNames: ['TabLinkList'],
-              message:
-                'Please use the TanStackTabLinkList component for components being migrated to TanStack Router.',
-              name: 'src/components/Tabs/TabLinkList',
-            },
-            {
-              importNames: ['OrderBy', 'default'],
-              message:
-                'Please use useOrderV2 hook for components being migrated to TanStack Router.',
-              name: 'src/components/OrderBy',
-            },
-            {
-              importNames: ['Prompt'],
-              message:
-                'Please use the TanStack useBlocker hook for components/features being migrated to TanStack Router.',
-              name: 'src/components/Prompt/Prompt',
-            },
-          ],
-        },
-      ],
-    },
-  },
-
-  // 15. Prettier (coming last as recommended)
+  // 14. Prettier (coming last as recommended)
   {
     files: ['**/*.{js,ts,tsx}'],
     plugins: {

packages/manager/package.json

@@ -77,8 +77,6 @@
     "react-hook-form": "^7.51.0",
     "react-number-format": "^3.5.0",
     "react-redux": "~7.1.3",
-    "react-router-dom": "~5.3.4",
-    "react-router-hash-link": "^2.3.1",
     "react-vnc": "^3.0.7",
     "react-waypoint": "^10.3.0",
     "recharts": "^2.14.1",
@@ -153,8 +151,6 @@
     "@types/react-csv": "^1.1.3",
     "@types/react-dom": "^19.1.6",
     "@types/react-redux": "~7.1.7",
-    "@types/react-router-dom": "~5.3.3",
-    "@types/react-router-hash-link": "^1.2.1",
     "@types/redux-mock-store": "^1.0.1",
     "@types/throttle-debounce": "^1.0.0",
     "@types/zxcvbn": "^4.4.0",

packages/manager/src/App.tsx

@@ -9,21 +9,27 @@ import withFeatureFlagProvider from 'src/containers/withFeatureFlagProvider.cont
 import { ErrorBoundaryFallback } from 'src/features/ErrorBoundary/ErrorBoundaryFallback';
 
 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 { usePendo } from './hooks/usePendo';
-import { useSessionExpiryToast } from './hooks/useSessionExpiryToast';
-import { MainContent } from './MainContent';
-import { useEventsPoller } from './queries/events/events';
-// import { Router } from './Router';
+import { Router } from './Router';
 import { useSetupFeatureFlags } from './useSetupFeatureFlags';
 
 export const App = withDocumentTitleProvider(
   withFeatureFlagProvider(() => {
-    const { isLoading } = useInitialRequests();
+    // Skip all initialization if we're on any authentication callback - just let the router handle it
+    const isAuthCallback =
+      window.location.pathname === '/oauth/callback' ||
+      window.location.pathname === '/admin/callback';
+
+    if (isAuthCallback) {
+      return (
+        <ErrorBoundaryFallback>
+          <DocumentTitleSegment segment="Akamai Cloud Manager" />
+          <Router />
+        </ErrorBoundaryFallback>
+      );
+    }
 
+    const { isLoading } = useInitialRequests();
     const { areFeatureFlagsLoading } = useSetupFeatureFlags();
 
     if (isLoading || areFeatureFlagsLoading) {
@@ -43,24 +49,9 @@ export const App = withDocumentTitleProvider(
             Opens an external site in a new window
           </span>
         </div>
-        <GoTo />
         <DocumentTitleSegment segment="Akamai Cloud Manager" />
-        {/**
-         * Eventually we will have the <Router /> here in place of <MainContent />
-         * <Router />
-         */}
-        <MainContent />
-        <GlobalListeners />
+        <Router />
       </ErrorBoundaryFallback>
     );
   })
 );
-
-const GlobalListeners = () => {
-  useEventsPoller();
-  useAdobeAnalytics();
-  usePendo();
-  useNewRelic();
-  useSessionExpiryToast();
-  return null;
-};

packages/manager/src/GoTo.tsx

@@ -1,7 +1,7 @@
 import { useAccountSettings, useGrants, useProfile } from '@linode/queries';
 import { Dialog, Select } from '@linode/ui';
+import { useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
-import { useHistory } from 'react-router-dom';
 
 import { useIsDatabasesEnabled } from './features/Databases/utilities';
 import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
@@ -10,7 +10,7 @@ import { useGlobalKeyboardListener } from './hooks/useGlobalKeyboardListener';
 import type { SelectOption } from '@linode/ui';
 
 export const GoTo = React.memo(() => {
-  const routerHistory = useHistory();
+  const navigate = useNavigate();
 
   const { data: accountSettings } = useAccountSettings();
   const { data: grants } = useGrants();
@@ -30,7 +30,7 @@ export const GoTo = React.memo(() => {
   };
 
   const onSelect = (item: SelectOption<string>) => {
-    routerHistory.push(item.value);
+    navigate({ to: item.value });
     onClose();
   };