Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: [M3-9157] - TanStack Router Migration for Images Feature #11578

Merged
merged 10 commits into from
Feb 3, 2025

Conversation

abailly-akamai
Copy link
Contributor

@abailly-akamai abailly-akamai commented Jan 28, 2025

TanStack Router Migration for Images Feature

Overview 📝

  1. Router Migration
  • Removed old React Router routes and components
  • Added new TanStack Router routes in routes/images/
  • Implemented route validation and type safety
  • Added support for search params and URL parameters
  1. Component Updates
  • Updated ImagesLanding to use TanStack Router hooks
  • Refactored dialog/drawer state management to use URL parameters
  • Updated tests to use new router utilities
  • Improved error handling and loading states
  1. Key Features
  • Added type-safe route definitions
  • Implemented URL-based state management for modals/drawers
  • Added validation for route parameters and search queries
  • Maintained existing functionality while improving type safety
  1. Notable Changes
  • Moved from URL query params to TanStack Router search params
  • Replaced React Router hooks with TanStack equivalents
  • Added proper loading states for async operations
  • Improved error handling and user feedback
  1. Code Organization
  • Added new constants file for preferences and defaults
  • Separated route definitions into dedicated files
  • Improved component structure and prop types
  • Updated ESLint configuration for new router patterns

The changes maintain existing functionality while providing better type safety and state management through the URL.

Preview 📷

No visual difference/regression should be experioenced as a result of this PR

How to test 🧪

Prerequisites

Verification steps

  • Test all flows for the /images feature
    • actions (edit, delete etc)
  • Test search, sorting and pagination for the Images landing page (you can use prod-test-019 to test pagination since it has a large amount of images
  • Confirm params and prefilled fields for Deploy and Rebuild actions
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 abailly-akamai self-assigned this Jan 28, 2025
@abailly-akamai abailly-akamai changed the title refactor: [M3-9157] - Tanstack Router for Images refactor: [M3-9157] - TanStack Router Migration for Images Feature Jan 30, 2025
@abailly-akamai abailly-akamai marked this pull request as ready for review January 30, 2025 22:20
@abailly-akamai abailly-akamai requested a review from a team as a code owner January 30, 2025 22:20
@abailly-akamai abailly-akamai requested review from bnussman-akamai and coliu-akamai and removed request for a team January 30, 2025 22:20
@abailly-akamai abailly-akamai requested a review from a team as a code owner January 30, 2025 22:32
@abailly-akamai abailly-akamai requested review from dmcintyr-akamai and removed request for a team January 30, 2025 22:32
Copy link

github-actions bot commented Jan 30, 2025

Coverage Report:
Base Coverage: 79.3%
Current Coverage: 79.3%

@linode-gh-bot
Copy link
Collaborator

Cloud Manager UI test results

🎉 494 passing tests on test run #9 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
0 Failing494 Passing2 Skipped101m 9s

Copy link
Contributor

@coliu-akamai coliu-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ pagination and search and ordering
✅ image actions and create flows
couple small questions below

awesome, thanks Alban! good to see another newly routed feature 🚀

'images-manual-order',
'manual'
);
preferenceKey: MANUAL_IMAGES_PREFERENCE_KEY,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use MANUAL_IMAGES_ORDER_PREFERENCE_KEY instead? I see you have it defined in the constants but it isn't imported here. (not seeing any differences besides the preference key's name):

image

Comment on lines -75 to -78
{
onClick: () => onCancelFailed?.(id),
title: 'Cancel',
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the onCancelFailed handler is defined in the Handlers interface - do we still need it?

@coliu-akamai coliu-akamai added the Add'tl Approval Needed Waiting on another approval! label Jan 31, 2025
Copy link
Member

@bnussman-akamai bnussman-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All routes and deep links look good to me ✅

Thanks!!

@bnussman-akamai bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Feb 3, 2025
@abailly-akamai abailly-akamai merged commit 46bfc6f into linode:develop Feb 3, 2025
23 checks passed
Copy link

cypress bot commented Feb 3, 2025

Cloud Manager E2E    Run #7161

Run Properties:  status check passed Passed #7161  •  git commit 46bfc6f9e1: refactor: [M3-9157] - TanStack Router Migration for Images Feature (#11578)
Project Cloud Manager E2E
Branch Review develop
Run status status check passed Passed #7161
Run duration 28m 14s
Commit git commit 46bfc6f9e1: refactor: [M3-9157] - TanStack Router Migration for Images Feature (#11578)
Committer Alban Bailly
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 1
Tests that did not run due to a developer annotating a test with .skip  Pending 2
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 495
View all changes introduced in this branch ↗︎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Multiple approvals and ready to merge! Routing Refactor
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants