tech-stories: [M3-10023] - The final boss: Linodes Reroute by abailly-akamai · Pull Request #12363 · linode/manager

abailly-akamai · 2025-06-10T23:23:28Z

Description 📝

Rerouting the last feature: Linodes

As much as I tried to keep a reasonable scope & diff size for the routing refactor, it's hard to break things down and Linodes is a big feature.

This PR does not remove (yet) react router dom from teh codebase, just reroute this particular chunk. A LOT of the diff is also due to extra mocking on our unit tests.

Changes 🔄

Replace routing utils
Adjust components code structure accordingly
Implement new sorting and pagination utils
Fixes a test where cloning a linode would break sorting and linode selection table (we would see all linodes VS the one we're trying to clone)
Update unit tests
Update e2e tests

Preview 📷

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

How to test 🧪

Verification steps

Landing

/linodes

Create Route

/linodes/create

Detail Routes

/linodes/$linodeId
/linodes/$linodeId/clone
/linodes/$linodeId/clone/configs
/linodes/$linodeId/clone/disks
/linodes/$linodeId/analytics
/linodes/$linodeId/networking
/linodes/$linodeId/networking/interfaces
/linodes/$linodeId/networking/interfaces/$interfaceId (where $interfaceId is a number)
/linodes/$linodeId/storage
/linodes/$linodeId/configurations
/linodes/$linodeId/configurations/upgrade-interfaces
/linodes/$linodeId/backup
/linodes/$linodeId/activity
/linodes/$linodeId/settings
/linodes/$linodeId/alerts
/linodes/$linodeId/metrics

👉 Test all paths and confirm

behavior & flow
table sorting & ordering when applicable
submit redirects
links to other entities
tests

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 · 2025-06-12T21:19:17Z

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

  const regionQuery = `&regionID=${linode.region}`;
  const typeQuery = linode.type ? `&typeID=${linode.type}` : '';
-  return `/linodes/create?linodeID=${linode.id}${regionQuery}&type=Clone+Linode${typeQuery}`;
+  return `/linodes/create?linodeID=${linode.id}${regionQuery}&type=Clone%20Linode${typeQuery}`;


the new router is more strict about params encoding/decoding, which is good!

abailly-akamai · 2025-06-12T21:19:46Z

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

      });

    // Confirm can navigate to Linode after success
+    cy.visitWithLogin(`/linodes/${mockLinode.id}`);


I think something was amiss with this last step. Not sure how it passed before

Opening up the upgrade interface dialog used to just append /upgrade-interfaces to the end of the route, so if you opened the dialog on /linodes/$linodeID, closing it would take you back there

with the new routing updates, I think correct behavior for this test would be to confirm the url ends with linodes/mockLinode.id/configurations if you don't click the navigate to network settings button

abailly-akamai · 2025-06-12T21:26:21Z

packages/manager/src/features/Linodes/LinodeCreate/utilities.ts

+        subtype: params.subtype ?? undefined,
+        type: params.type ?? undefined,
+      }),
+    });


this could be trimmed and optimized, but this touches so many files using this util i wanted to keep things scoped. I'll make a ticket to make this util more aligned with the new router's API

coliu-akamai

so awesome to see this pr up - thanks for all your hard work on this, Alban! 🎉

breaking up my review of this into multiple passes to make sure I look over stuff as carefully as possible. Currently reviewed:

✅ linode landing - order by, pagination and list/grid view (I've been using msw for pagination/order by - could you remind me if there's a shared account with a large # of Linodes we could use?)
✅ Linode create - tabs look good
✅ linode interfaces - upgrade dialog

left a comment regarding linode interfaces - detail drawer

coliu-akamai · 2025-06-16T19:40:44Z

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

      });

    // Confirm can navigate to Linode after success
+    cy.visitWithLogin(`/linodes/${mockLinode.id}`);


Opening up the upgrade interface dialog used to just append /upgrade-interfaces to the end of the route, so if you opened the dialog on /linodes/$linodeID, closing it would take you back there

with the new routing updates, I think correct behavior for this test would be to confirm the url ends with linodes/mockLinode.id/configurations if you don't click the navigate to network settings button

coliu-akamai · 2025-06-16T19:41:52Z

packages/manager/src/features/Linodes/CloneLanding/cloneLandingLazyRoute.ts

@@ -0,0 +1,9 @@
+import { createLazyRoute } from '@tanstack/react-router';


qq, are we no longer putting lazy routes in their own file in the routes package?

good eyes! Correct, @bnussman-akamai found that it created issues with lazy loading. There will be follow up tickets to change this in other features

coliu-akamai · 2025-06-16T19:52:13Z

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

+    navigate({
+      to: '/linodes/$linodeId/configurations/upgrade-interfaces',
+      params: { linodeId },
+    });


thank you!! 🚀 🚀

(discovered while testing that this takes care of a bug when trying to open up the upgrade dialog in Linode Landing, summary view)

...er/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfaces.tsx

packages/manager/src/features/Linodes/LinodeCreate/utilities.ts

packages/manager/src/features/Linodes/LinodeCreate/Details/PlacementGroupPanel.test.tsx

coliu-akamai · 2025-06-18T20:16:28Z

Linode Interfaces - when navigating to an interface from the firewall page, the detail drawer doesn't open:

firewall-interface-details-drawer.mov

^ same issue for navigating to a Linode Interface from the VPC subnet table page

small issue, I also noticed that after closing the details drawer, /interfaces is still at the end of the url

coliu-akamai

Thanks Alban! went through rest of Linode pages, things are looking good from what I've seen! (one small thing for /linodes/id/storage page below)

✅ /linodes/$linodeId
✅ /linodes/$linodeId/clone
✅ /linodes/$linodeId/clone/configs
✅ /linodes/$linodeId/clone/disks
✅ /linodes/$linodeId/analytics
✅ /linodes/$linodeId/networking
✅ /linodes/$linodeId/networking/interfaces
✅ /linodes/$linodeId/networking/interfaces/$interfaceId
✅ /linodes/$linodeId/storage (see below)
✅ /linodes/$linodeId/configurations
✅ /linodes/$linodeId/configurations/upgrade-interfaces
✅ /linodes/$linodeId/backup
✅ /linodes/$linodeId/activity
✅ /linodes/$linodeId/settings
✅ /linodes/$linodeId/alerts
✅ /linodes/$linodeId/metrics
✅ links to other entities like firewalls/vpcs/lke
✅ submit redirects

When on /linodes/id/storage, I noticed that sorting the Volumes table affects the disk table (and sorting the Disk table affects the arrows for the Volumes table) - see video

prod	this branch
prod-order-by-storage.mov	this-branch-order-by-storage.mov

linode-gh-bot · 2025-06-26T20:33:03Z

Cloud Manager UI test results

🎉 666 passing tests on test run #22 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`666 Passing`	`4 Skipped`	`123m 58s`

abailly-akamai self-assigned this Jun 10, 2025

github-project-automation bot added this to Cloud Manager Jun 10, 2025

github-project-automation bot moved this to Review in Cloud Manager Jun 10, 2025

abailly-akamai force-pushed the M3-10023 branch 4 times, most recently from ed7044f to 757ec00 Compare June 12, 2025 20:37

abailly-akamai changed the title ~~tech-stories: [M3-10023] - Ze Linode Reroute~~ tech-stories: [M3-10023] - The big boss: Linodes Reroute Jun 12, 2025

abailly-akamai marked this pull request as ready for review June 12, 2025 21:11

abailly-akamai requested review from a team as code owners June 12, 2025 21:11

abailly-akamai requested review from bnussman-akamai, jdamore-linode and pmakode-akamai and removed request for a team June 12, 2025 21:11

abailly-akamai changed the title ~~tech-stories: [M3-10023] - The big boss: Linodes Reroute~~ tech-stories: [M3-10023] - The final boss: Linodes Reroute Jun 12, 2025

abailly-akamai requested review from coliu-akamai, dwiley-akamai, hana-akamai, jaalah-akamai and mjac0bs June 12, 2025 21:12

abailly-akamai commented Jun 12, 2025

View reviewed changes

abailly-akamai added 2 commits June 16, 2025 16:14

initial commit - save work

9ca80f1

Wrapping up Lidnodes Landing

00ded5e

coliu-akamai reviewed Jun 16, 2025

View reviewed changes

coliu-akamai self-requested a review June 16, 2025 20:14

abailly-akamai added 3 commits June 16, 2025 16:15

Save progress

003c63f

utils and types

bbec514

moooar utils

8977b6b

abailly-akamai added 7 commits June 16, 2025 16:18

fixing stackscript flow

1e330c4

test adjustement

8037dd4

fix remaining e2e tests

0796f10

more test fixes

41bfb36

Added changeset: Reroute Linodes

cc43696

remove comment

2c5b262

cleanup

75a4df4

abailly-akamai force-pushed the M3-10023 branch from 5e60f1c to 75a4df4 Compare June 16, 2025 20:20

coliu-akamai reviewed Jun 16, 2025

View reviewed changes

...er/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeInterfaces/LinodeInterfaces.tsx Show resolved Hide resolved

coliu-akamai self-requested a review June 16, 2025 20:27

bnussman-akamai reviewed Jun 17, 2025

View reviewed changes

packages/manager/src/features/Linodes/LinodeCreate/utilities.ts Outdated Show resolved Hide resolved

packages/manager/src/features/Linodes/LinodeCreate/Details/PlacementGroupPanel.test.tsx Show resolved Hide resolved

abailly-akamai and others added 2 commits June 17, 2025 12:42

feedback @coliu-akamai

2695cfc

Merge branch 'develop' into M3-10023

3a2cc43

abailly-akamai added 2 commits June 20, 2025 10:58

merge develop

b5c4532

feedback @coliu-akamai

b7b7481

coliu-akamai approved these changes Jun 20, 2025

View reviewed changes

abailly-akamai added 2 commits June 22, 2025 09:54

merge develop

50d2804

fix feedback @coliu-akamai

a0ce6c4

bnussman-akamai approved these changes Jun 23, 2025

View reviewed changes

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

abailly-akamai added 2 commits June 24, 2025 07:57

Merge branch 'develop' into M3-10023

b1bc572

Merge branch 'develop' into M3-10023

3e3e8fc

abailly-akamai merged commit 20e6abb into linode:develop Jun 26, 2025
35 checks passed

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

coliu-akamai mentioned this pull request Jun 27, 2025

fix: [STORIF-36] - Pagination navigation updated. #12424

Merged

4 tasks

This was referenced Jul 9, 2025

Release v1.146.0 - release → staging #12493

Merged

Release v1.146.0 - staging → master #12509

Merged

bnussman-akamai mentioned this pull request Aug 13, 2025

fix: [M3-10473] - smoke-linode-landing-table.spec.ts test failure and correct Linodes Landing ordering bug #12690

Merged

7 tasks

		@@ -0,0 +1,9 @@
		import { createLazyRoute } from '@tanstack/react-router';

Conversation

abailly-akamai commented Jun 10, 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

Landing

Create Route

Detail Routes

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!

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!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coliu-akamai commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coliu-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

linode-gh-bot commented Jun 26, 2025

Cloud Manager UI test results

🎉 666 passing tests on test run #22 ↗︎

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

abailly-akamai commented Jun 10, 2025 •

edited

Loading

coliu-akamai commented Jun 18, 2025 •

edited

Loading