refactor: [M3-9080] - Tanstack routing for VPCs #11906

coliu-akamai · 2025-03-21T14:32:44Z

Note

I see some VPC related work coming in, so hopefully I'm putting this up early enough to not interrupt VPC stuff. If not, I can def close this and come back to it at a later time

I also have a few questions/stuff I'm unsure of for this refactor, def would appreciate some thoughts! 🙏
(I can also move the bug fixes to a separate PR if needed)

Description 📝

Refactors VPC routing to use tanstack routing

Changes 🔄

Implement tanstack routing
route drawers and modals
Fixed a couple of bugs unrelated to tanstack routing:
- Subnet pagination
- Subnet create drawer IP incrementation (whoops)

Preview 📷

No visual changes besides loading states

How to test 🧪

Navigate to /vpcs and confirm routing behavior for

VPC Landing:

edit/delete VPCS
pagination/order

VPC Create
VPCDetails ******

edit/delete VPCs
subnet actions
subnet pagination/search/order
linode actions

Bug fixes:

confirm pagination for subnets table works
Confirm IP increments in Subnet Create drawer whenever you create a new Subnet

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

buncha eslint import sort fixes step 6 save progress

save more progress? save more progress

…unassign drawer now

coliu-akamai · 2025-03-21T14:36:29Z

packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx

@@ -318,47 +385,54 @@ export const VPCSubnetsTable = (props: Props) => {
        TableRowHead={SubnetTableRowHead}
      />
      <PaginationFooter
-        count={subnets.data?.length || 0}
+        count={subnets.results || 0}


fixes bug for subnet pagination

coliu-akamai · 2025-03-21T14:36:41Z

packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx

@@ -61,7 +61,7 @@ export const SubnetCreateDrawer = (props: Props) => {
    setError,
    watch,
  } = useForm<CreateSubnetPayload>({
-    defaultValues: {
+    values: {


fixes bug for IP incrementation

coliu-akamai · 2025-03-21T14:40:50Z

packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx

+  const handleEditVPC = (vpc: VPC) => {
+    navigate({
+      params: { action: 'edit', vpcId: vpc.id },
+      to: '/vpcs/$vpcId/details/$action',
+    });
+  };
+
+  const handleDeleteVPC = (vpc: VPC) => {
+    navigate({
+      params: { action: 'delete', vpcId: vpc.id },
+      to: '/vpcs/$vpcId/details/$action',
+    });
+  };


VPC Details was interesting to refactor, and I'm not sure about all the decisions I made

Here:

we have edit/delete dialogs on the detail page itself + we fetch the VPC, so I currently went with not using dialog data for VPC in details. In terms of error handling, if we're unable to get the VPC, we remain on the VPC's detail page and display the following error below. Should we reroute to the /vpcs landing page instead?

if (!vpc || error) { return ( <ErrorState errorText="There was a problem retrieving your VPC. Please try again." /> ); }

I have different routes for the edit/delete dialogs on the landing vs details page. Otherwise clicking Edit/Delete on the details page would take us to the landing page

landing edit/delete routes for comparison:

/vpcs/$vpcId/edit

/vpcs/$vpcId/delete

packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx

packages/manager/src/hooks/useDialogSecondaryData.ts

coliu-akamai · 2025-03-21T15:14:18Z

packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx

+  // If the user initiates a history -/+ to complete a linode action and the linode
+  // is no longer assigned to a subnet, push navigation to the vpc's detail page
  React.useEffect(() => {
-    if (subnets && selectedSubnet) {
-      const updatedSubnet = subnets.data.find(
-        (subnet) => subnet.id === selectedSubnet.id
-      );
-      setSelectedSubnet(updatedSubnet);
+    if (params.linodeAction && !selectedLinode) {
+      navigate({
+        params: { vpcId },
+        to: VPC_DETAILS_ROUTE,
+      });


(see selected subnet comment above)
I've currently kept the selected Linode in a useState, so it has the same issue as mentioned above ^. Thinking about switching to useDialogData, but may still have to keep the useEffect - the Linode actions here don't delete the Linode, so useDialogData won't time out

update: using useDialogData for this as well now + a useEffect that determines if the selected Linode no longer exists in the selectedSubnet

coliu-akamai · 2025-03-21T15:17:45Z

putting this up for initial review, but likely will be returning it to a draft state based on feedback on ^ items (and other stuff as found)

@abailly-akamai would appreciate your thoughts on this!

abailly-akamai

Alight, fixed the useDialogData hook to handle a secondary argument. Hopefully this will work as we want!

Will do a deeper review once some changes and cleanup discussed during pair programming are addressed.

Great work so far tho, this is looking solid as a 🪨

packages/manager/src/routes/vpcs/index.ts

coliu-akamai · 2025-03-24T16:26:34Z

thanks Alban! will get to the changes we discussed sooner rather than later, and then re-request you

coliu-akamai · 2025-03-27T20:39:47Z

alrighty should be in a better state now!

linode-gh-bot · 2025-03-27T21:46:30Z

Cloud Manager UI test results

🎉 534 passing tests on test run #10 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`534 Passing`	`4 Skipped`	`106m 48s`

coliu-akamai added 12 commits March 21, 2025 10:18

steps 1-2

6e754bf

steps 3-5

aea86bf

step 6 VPCCreate

006a51a

buncha eslint import sort fixes step 6 save progress

save progress - subnet table ;-;

5c131f9

the more I do this the more lost I get..

b4b240f

save more progress? save more progress

subnets

becc530

pagination and searching

f97e237

figure out these tests

9dd44b7

fix unit tests

ee1a7fa

update cypress tests

2d96c4f

try dialog hook with secondary data - note: weird behavior in assign/…

863df09

…unassign drawer now

add some margin for checkbox

8635ef8

coliu-akamai added the Routing Refactor label Mar 21, 2025

coliu-akamai self-assigned this Mar 21, 2025

changesets

762ebef

coliu-akamai commented Mar 21, 2025

View reviewed changes

coliu-akamai added the Help Wanted Teamwork makes the dream work! label Mar 21, 2025

coliu-akamai marked this pull request as ready for review March 21, 2025 15:17

coliu-akamai requested review from a team as code owners March 21, 2025 15:17

coliu-akamai requested review from jdamore-linode, mjac0bs and abailly-akamai and removed request for a team March 21, 2025 15:17

coliu-akamai and others added 3 commits March 24, 2025 10:22

Merge branch 'develop' into m3-9080

8023c54

Simplify useDialogData usage for multiple params

6d2695b

Add comments

ac68b1d

abailly-akamai reviewed Mar 24, 2025

View reviewed changes

packages/manager/src/routes/vpcs/index.ts Outdated Show resolved Hide resolved

packages/manager/src/routes/vpcs/index.ts Outdated Show resolved Hide resolved

coliu-akamai marked this pull request as draft March 24, 2025 16:26

coliu-akamai added 6 commits March 25, 2025 23:15

update route names

72dd0ad

Merge branch 'develop' into m3-9080

b483448

update behavior for linodes

b296f79

fix some tests but not another (yet)

f2f80c5

fix this test omg

f3be2ee

hyphenate

40c8b94

coliu-akamai removed the Help Wanted Teamwork makes the dream work! label Mar 27, 2025

coliu-akamai added 2 commits March 27, 2025 16:30

add comments

d524ac0

update toast

ce11a1e

coliu-akamai requested a review from abailly-akamai March 27, 2025 20:39

coliu-akamai marked this pull request as ready for review March 27, 2025 20:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: [M3-9080] - Tanstack routing for VPCs #11906

refactor: [M3-9080] - Tanstack routing for VPCs #11906

coliu-akamai commented Mar 21, 2025 •

edited

Loading

coliu-akamai Mar 21, 2025

coliu-akamai Mar 21, 2025

coliu-akamai Mar 21, 2025

coliu-akamai Mar 21, 2025 •

edited

Loading

coliu-akamai commented Mar 21, 2025

abailly-akamai left a comment

coliu-akamai commented Mar 24, 2025

coliu-akamai commented Mar 27, 2025

linode-gh-bot commented Mar 27, 2025

refactor: [M3-9080] - Tanstack routing for VPCs #11906

Are you sure you want to change the base?

refactor: [M3-9080] - Tanstack routing for VPCs #11906

Conversation

coliu-akamai commented Mar 21, 2025 • edited Loading

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

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

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

coliu-akamai Mar 21, 2025

Choose a reason for hiding this comment

coliu-akamai Mar 21, 2025

Choose a reason for hiding this comment

coliu-akamai Mar 21, 2025

Choose a reason for hiding this comment

coliu-akamai Mar 21, 2025 • edited Loading

Choose a reason for hiding this comment

coliu-akamai commented Mar 21, 2025

abailly-akamai left a comment

Choose a reason for hiding this comment

coliu-akamai commented Mar 24, 2025

coliu-akamai commented Mar 27, 2025

linode-gh-bot commented Mar 27, 2025

Cloud Manager UI test results

🎉 534 passing tests on test run #10 ↗︎

coliu-akamai commented Mar 21, 2025 •

edited

Loading

coliu-akamai Mar 21, 2025 •

edited

Loading