refactor: [M3-9531] - Nodebalancer routing (Tanstack)

[abailly-akamai]

Description 📝

This PR contributes to the refactor of Cloud Manager Routing. It implements the Tanstack API for the Nodebalancers feature.

Changes 🔄

• Implements tanstack routing utils
• Route Nodebalancer Delete modal and Unassign Modal
• Fix units and e2e tests

Preview 📷

• Aside from the Delete & Unassign modals inheriting a loading state, there should be no visual or functional regressions as a result of this PR

How to test 🧪

Verification steps

• Navigate to /nodebalancers:
  • compare overall behavior with production
    • Tab navigation
    • Create flow
    • Delete flow
    • Unassign Firewall flow
    • Clicking on Ports in the NB Summary sidebar
• Navigate to Firewall > Detail and confirm add firewall and unassigmnent still works
• Navigate to Linode > Detail > Networking and confirm add firewall and unassigmnent still works

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 unit tests are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[abailly-akamai]

Dealing with Class Components is a bit trickier, and the cleanest way is to wrap the class component in a functional one and pass the params as props

[github-actions]

Coverage Report: ✅
Base Coverage: 79.96%
Current Coverage: 79.96%

[bill-akamai]

Nice work, @abailly-akamai with this clean migration. The route organization looks very maintainable. Confirming all verifications as well.

[dwiley-akamai]

• Tab navigation ⚠️

Did we lose some keyboard accessibility with transition to Tanstack Router? I was unable to switch tabs using the directional arrows on my keyboard as I'm able to do in prod.

Video

Screen.Recording.2025-03-18.at.4.51.53.PM.mov

(focus changes are from me hitting the Tab key, the rest of the time I was pressing arrows)

• Create flow ✅
• Delete flow ⚠️

It doesn't seem that we'd want the breadcrumb change in the background:

Prod	This Branch

• Unassign Firewall flow ✅
• Clicking on Ports in the NB Summary sidebar ✅
• Navigate to Firewall > Detail and confirm add firewall and unassigmnent still works ✅
• Navigate to Linode > Detail > Networking and confirm add firewall and unassigmnent still works ✅

[abailly-akamai]

@dwiley-akamai fixed the breadcrumb in acce170

Great catch on the tabs 👀 - it's still using reach-tabs but somehow it indeed messed up the accessibility with navigation

I will create a separate ticket (high priority) in order not to extend the scope of this PR as I also will add a component test to avoid future regressions

[dwiley-akamai]

Code review ✅
Verified breadcrumb fix ✅

[linode-gh-bot]

Cloud Manager UI test results

🎉 539 passing tests on test run #14 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	539 Passing	3 Skipped	109m 26s