[M3-10372] - Routing: Full switch + cleanup + remove `react-router-dom` by alioso · Pull Request #12602 · linode/manager

alioso · 2025-07-30T10:59:10Z

Description 📝

This PR will close the first chapter of the rerouting saga and fully switch Cloud Manager to TanStack router.

Changes 🔄

Replace final react-router-dom util instances
Tackles TanStack router left over TODOs
Remove all references to react-router-dom
Remove react-router-dom package
Fix utils and e2e units

Please see PR self review for more details

Preview 📷

There should be no functional or visual regressions as a result of this PR

How to test 🧪

Verification steps

Note

In order to test this locally, It is a good idea to do a dependency cleanup (pnpm clean) and rebuild your application prior to running things locally, and disable the cache in your browser dev tools' network request tab

Verify application behavior by testing a variety of routes and features
Verify signing/in signing out etc (auth in general)
Verify table data ordering
Verify preloading of data functioning well (ex: PrimaryNav)
Verify behavior of active links in PrimaryNav
Verify self components mentioned in self review
Verify behavior of navigate away prompts (Firewall Rules, ACLP Alerts, Image Upload))
Verify Main Search behavior

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All tests and CI checks are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

alioso · 2025-07-30T11:10:50Z

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

    closeMenu,
    display,
-    href,
+    to,


renamed for consistency with router naming conventions

alioso · 2025-07-30T11:12:12Z

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

-                '/managed/ssh-access',
-                '/managed/credentials',
-                '/managed/contacts',
-              ],


This was used to define what children routes should show as active (this is so old and could be solved by using a simple function)

alioso · 2025-07-30T11:22:20Z

packages/manager/src/components/PrimaryNav/utils.ts

  }

-  return isPathOneOf([href, ...activeLinks], locationPathname);
+  return to?.split('/')[1] === locationPathname.split('/')[1];


I don't see any issue handling this whole thing with this matching pattern, rather than the complex computing that was done with isPathOneOf and router-dom's matchPath.

alioso · 2025-07-30T11:23:16Z

packages/manager/src/components/Link.tsx

-        to={to as string}
+        style={style}
+        title={title}
+        {...(to && !shouldOpenInNewTab ? { to: to as _LinkProps['to'] } : {})}


The Link was mostly left untouched for the exception of matching the new types.

alioso · 2025-07-30T11:23:57Z

packages/manager/src/components/OrderBy.tsx

+        order: newOrder,
+        orderBy: newOrderBy,
+      }),
+    });


OrderBy is still useful in a couple places so I just retrofitted it with the new router

alioso · 2025-07-30T11:31:36Z

packages/manager/src/hooks/useOrder.ts

🧹 🧹 🧹

alioso · 2025-07-30T11:35:04Z

packages/manager/src/App.tsx

+          <Router />
+        </ErrorBoundaryFallback>
+      );
+    }


This is the condition that allows me to use the current auth logic without a deep refactor. I noticed that the way our router handles unauthenticated routes was a bit different and ran into race conditions with the nonce generation.

I believe we will eventually want to move authentication checks closer to the routing engine, as usually recommended (Tanstack has a variety of helpers to do so).

However, for the sake of not introducing extra complexity to this already involved PR, I chose to not move much of the auth logic at all.

alioso · 2025-07-30T11:35:47Z

packages/manager/src/MainContent.tsx

MainContent 👉 Root

alioso · 2025-07-30T11:37:13Z

packages/manager/src/request.tsx

Same comment as previous regarding Auth

alioso · 2025-07-30T11:39:15Z

packages/manager/package.json

    "react-number-format": "^3.5.0",
    "react-redux": "~7.1.3",
-    "react-router-dom": "~5.3.4",
-    "react-router-hash-link": "^2.3.1",


…to tanstack router

packages/manager/src/index.tsx

bnussman-akamai

Sooo goood. 👏

Confirmed this fixes the "navigation ghosting" we were seeing while having 2 routes in use.

I feel good with merging and monitoring closely!

coliu-akamai

thanks Alban! checked a bunch of stuff throughout the app + will continue monitoring after this gets merged. Noticed a few initial things (commented below)

coliu-akamai · 2025-08-06T16:09:35Z

packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx

+                    <Link
+                      params={{ linodeId }}
+                      to={`/linodes/$linodeId/networking#${ipTableId}`}


noticing a small regression:

prod this branch

view-all-ips-prod.mov

view-all-ips-this-branch.mov

coliu-akamai · 2025-08-06T16:35:37Z

packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx

+  const pagination = usePaginationV2({
+    currentRoute: '/profile/keys',
+    initialPage: 1,
+    preferenceKey: 'ssh-keys-users-table',
+  });


noticed a regression: this component appears in LinodeCreate, LinodeRebuild, and LinodeSettings flows - clicking on a new page or changing pagination size redirects us to /profile/keys instead of staying on whatever flow we're currently on

coliu-akamai · 2025-08-06T16:54:31Z

packages/manager/src/features/Lish/Lish.tsx

 import { useLinodeLishQuery, useLinodeQuery } from '@linode/queries';
 import { CircleProgress, ErrorState } from '@linode/ui';
 import { styled } from '@mui/material/styles';
+import { useNavigate, useParams } from '@tanstack/react-router';


clicking on "Launch Lish Console" for a Linode has some changes:

prod this branch

mjac0bs

Confirmed:

Analytics events are firing as expected (Adobe and Pendo)
No regressions with support tickets
Some general sanity checking with various tabs, sorting, breadcrumbs, search features, browser back/forward buttons but will also keep an eye out once this is in dev

As long as we get pending feedback addressed and this merged after the release branch cut happening today/tomorrow for 8/12, I think this is in a good place.

mjac0bs · 2025-08-06T21:00:35Z

packages/manager/src/hooks/useAdobeAnalytics.ts

+        url: location.pathname,
+      });
+    }
+  }, [location.pathname]); // Listen to location changes


✅ Via the preview link, I'm seeing the AA page view fire as expected with the debugger.

linode-gh-bot · 2025-08-07T09:20:41Z

Cloud Manager UI test results

🔺 1 failing test on test run #16 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`1 Failing`	`704 Passing`	`4 Skipped`	`123m 50s`

Details

Failing Tests
	Spec	Test
❌	`restricted-user-details-pages.spec.ts`	Cloud Manager Cypress Tests→restricted user details pages » should disable action elements and buttons in the 'Linodes' details page

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/account/restricted-user-details-pages.spec.ts"

pmakode-akamai

Great work! 🎉👏🏻

I didn't notice any other regressions apart from the ones mentioned in the comments

pmakode-akamai · 2025-08-07T15:30:05Z

packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx

+          An upload is in progress. If you navigate away from this page, the
+          upload will be canceled.
+        </Typography>
+      </ConfirmationDialog>


I'm not able to see the navigate-away prompt when an image is uploading (though it works well for Firewalls & Alerts 👏🏻). I'm not quite sure if it should appear when the user navigates away after clicking 'Upload Image', or only before. Just wanted to check if this might be an issue or something we need to handle

This appears to be matching production behavior and working for me

pmakode-akamai · 2025-08-07T15:31:14Z

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx

+
+  React.useEffect(() => {
+    if (ipAddressesTableRef.current && location.hash === `#${ipTableId}`) {
+      ipAddressesTableRef.current.scrollIntoView({ behavior: 'smooth' });


Based on the latest changes (aside from the "Launch Lish Console" issue), I noticed that the scrollIntoView behavior still doesn't work -- either when the page initially loads or when we're already on the "Network" tab and click "View all IP Addresses." It only seems to work after switching to a different tab and then clicking the link again.

Screen.Recording.2025-08-07.at.6.22.59.PM.mov

I'll address those!

abailly-akamai added 14 commits July 30, 2025 12:08

initial pass

6221989

initial pass

a8262e5

auth

4645e05

auth progress

281a358

auth progress

f40bb03

typing progress

e642b3f

type fixes

da3585f

tackling all the strays

e9e7a18

tackling all the strays

e54b614

remove react-router-dom entirely

b6ecbc3

unit tests

1d4733d

cleanup 1

b29576a

post rebase fix

ced56d7

moar cleanup

eb0a18b

github-project-automation bot added this to Cloud Manager Jul 30, 2025

github-project-automation bot moved this to Review in Cloud Manager Jul 30, 2025

abailly-akamai assigned alioso Jul 30, 2025

abailly-akamai added External Contribution PRs opened by outside contributors Routing Refactor labels Jul 30, 2025

fix marketplace tab

03a9ebf

alioso commented Jul 30, 2025

View reviewed changes

alioso and others added 2 commits July 30, 2025 13:39

Merge branch 'develop' into M3-10372

12c9d44

cleanup comments

b888767

alioso marked this pull request as ready for review July 30, 2025 12:45

alioso requested review from a team as code owners July 30, 2025 12:45

alioso requested review from cliu-akamai and cpathipa and removed request for a team July 30, 2025 12:45

abailly-akamai requested review from bnussman-akamai, jaalah-akamai and mjac0bs July 30, 2025 12:45

abailly-akamai and others added 4 commits July 30, 2025 14:47

Added changeset: Routing: remove react-router-dom and fully switch …

69fbc4e

…to tanstack router

some e2e fixes

3ccb990

Merge branch 'develop' into M3-10372

4c31924

snackbar provider can contain links!

30f1ccb

bnussman-akamai reviewed Jul 31, 2025

View reviewed changes

packages/manager/src/index.tsx Outdated Show resolved Hide resolved

bnussman-akamai approved these changes Jul 31, 2025

View reviewed changes

abailly-akamai and others added 3 commits August 4, 2025 09:18

merge develop

2f79e0c

feedback @bnussman-akamai

c90c40a

Merge branch 'develop' into M3-10372

8746f82

abailly-akamai mentioned this pull request Aug 5, 2025

feat: [UIE-8837] - IAM RBAC: account users permissions #12615

Closed

7 tasks

abailly-akamai added 2 commits August 5, 2025 11:13

Merge branch 'develop' into M3-10372

a144fe0

Merge branch 'develop' into M3-10372

3ee2636

abailly-akamai mentioned this pull request Aug 6, 2025

fix: [M3-10266] - Add automatic redirect for empty paginated Access Keys pages #12598

Merged

7 tasks

Merge branch 'develop' into M3-10372

6b4b876

cpathipa approved these changes Aug 6, 2025

View reviewed changes

github-project-automation bot moved this from Review to Approved in Cloud Manager Aug 6, 2025

coliu-akamai approved these changes Aug 6, 2025

View reviewed changes

mjac0bs approved these changes Aug 6, 2025

View reviewed changes

abailly-akamai and others added 2 commits August 7, 2025 09:37

Merge branch 'develop' into M3-10372

0c4c262

feedback @coliu-akamai part 1

31bd5fe

pmakode-akamai approved these changes Aug 7, 2025

View reviewed changes

cpathipa merged commit cd2342a into linode:develop Aug 7, 2025
34 of 35 checks passed

github-project-automation bot moved this from Approved to Merged in Cloud Manager Aug 7, 2025

abailly-akamai mentioned this pull request Aug 11, 2025

fix: [M3-10456] - Routing refactor follow-up bugs #12666

Merged

7 tasks

This was referenced Aug 21, 2025

Release v1.149.0 - release → staging #12741

Merged

Release v1.149.0 - staging → master #12751

Merged

Conversation

alioso commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Verification steps

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bnussman-akamai left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coliu-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mjac0bs left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

linode-gh-bot commented Aug 7, 2025

Cloud Manager UI test results

🔺 1 failing test on test run #16 ↗︎

Details

Troubleshooting

Uh oh!

pmakode-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

alioso commented Jul 30, 2025 •

edited

Loading

bnussman-akamai left a comment •

edited

Loading

mjac0bs left a comment •

edited

Loading