9th: Upgrade to react router 7 and post-React19 Plan #9143
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…use safer approach.
The withView HOC is a class component that expected location and history props to be passed automatically by React Router. In React Router v6, these are no longer passed - you must use hooks instead. This caused the error: "Cannot read properties of undefined (reading 'state')" at line 21: this.default = this.props.location.state || defaultState; Fix by creating a ViewWithRouter wrapper component that: - Uses useLocation() and useNavigate() hooks - Injects location and navigate as props to the class component - Creates a history-like object with push/replace for backwards compatibility Also adds unit tests to verify the intermittent-failures routes render correctly with React Router v6. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Replace the withView class-based Higher Order Component with a modern useIntermittentFailuresData custom hook. This eliminates the need for the ViewWithRouter wrapper and makes the code more readable and testable. Changes: - Create useIntermittentFailuresData.jsx custom hook that encapsulates all state management and data fetching logic - Update MainView.jsx to use the hook directly instead of withView HOC - Update BugDetailsView.jsx to use the hook directly instead of withView HOC - Remove View.jsx (the old class-based HOC) - Update tests to work with the new hook-based implementation The hook uses: - useState for state management (replacing this.state) - useEffect for lifecycle (replacing componentDidMount) - useCallback for memoized functions - useRef for pending update tracking (replacing setState callbacks) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add Zustand dependency - Create notificationStore.js with notify, clearNotification, clearExpiredNotifications, clearAllOnScreenNotifications actions - Update 17 components to use Zustand notifications instead of Redux - Export standalone notify function for use outside React components - Remove notify from Redux connect() mapDispatchToProps in all components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Create Zustand pinnedJobsStore with all pinned jobs functionality - Export standalone functions for use outside React components - Migrate 7 components to use the new store: - PinBoard.jsx: Add Zustand subscription for class component reactivity - KeyboardShortcuts.jsx: Use standalone pinJob, unPinAll functions - DetailsPanel.jsx: Use setPinBoardVisible from Zustand - PushList.jsx: Use usePinnedJobsStore hook - PushHeader.jsx: Use standalone pinJobs function - PushJobs.jsx: Use standalone togglePinJob function - FiltersMenu.jsx: Use standalone pinJobs function - Remove pinnedJobs state from Redux mapStateToProps in all components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Create selectedJobStore.js with Zustand implementation - Migrate job selection, clearing, and URL-based selection - Update all components to use Zustand selectedJobStore: - KeyboardShortcuts.jsx: Remove Redux connect, use store directly - DetailsPanel.jsx: Subscribe to Zustand, track selectedJob in state - PinBoard.jsx: Import setSelectedJob from Zustand store - TabsPanel.jsx: Use Zustand hooks for selectedJob - ActiveFilters.jsx: Use Zustand selectedJobStore - FiltersMenu.jsx: Use Zustand hooks - PushHeader.jsx: Import from Zustand store - PushJobs.jsx: Remove Redux connect, use memo only - PushList.jsx: Use Zustand for selectedJob 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Create comprehensive pushStore.js with: - Nested jobs structure within pushes (jobs stored as push.jobs) - Derived getters: getJobById, getJobByTaskRun, getPushJobs - Actions: fetchPushes, pollPushes, updateRange, updatePushJobs - Pre-calculated unclassified counts per push - jobMap kept for compatibility during migration Migrate all components from Redux connect to Zustand: - PushList, Push, PushHeader, PushLoadErrors, PushActionMenu - DetailsPanel, PinBoard, ActionBar, AnnotationsTab - PerformanceTab, PerfData, SideBySide - SecondaryNavBar, ActiveFilters - CustomJobActions, BugFiler, InternalIssueFiler - App.jsx (updated imports, removed useDispatch) Class component pattern used: Zustand subscription in componentDidMount/componentWillUnmount with state initialization from usePushStore.getState() All components now use Zustand instead of Redux for: - pushList, jobMap, decisionTaskMap, bugSummaryMap - loadingPushes, jobsLoaded - allUnclassifiedFailureCount, filteredUnclassifiedFailureCount - revisionTips 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add v7_startTransition and v7_relativeSplatPath future flags to BrowserRouter to eliminate deprecation warnings and prepare for React Router v7 migration - Update react-19-upgrade-plan.md with verified dependency compatibility 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Document decision to replace react-helmet with React 19 native document metadata support in a follow-up PR after the React 19 upgrade. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Upgrade react and react-dom from 18.3.1 to 19.2.3 - Move @types/react and @types/react-dom to devDependencies with ^19.0.0 - Fix test_data_modal_test.jsx: reset mock for each test to handle React 19's stricter state batching behavior All 421 tests pass, build succeeds, lint passes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
React 19 has built-in support for <title>, <meta>, and <link> tags that automatically hoist to <head> when rendered anywhere in the component tree. Updated files: - ui/intermittent-failures/BugDetailsView.jsx - ui/push-health/Health.jsx - ui/push-health/MyPushes.jsx - ui/shared/ComparePageTitle.jsx Removed react-helmet dependency from package.json. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Mark React 19 upgrade as completed (18.3.1 → 19.2.3) - Mark react-helmet replacement as completed - Add replacement options for react-highlight-words: - Recommend keeping as-is (works at runtime) - Include custom implementation pattern if needed - Add replacement options for react-table-6: - TanStack Table v8 (headless, official successor) - Material React Table (TanStack + MUI) - Mantine React Table (TanStack + Mantine) - AG Grid (most features) - Recommend keeping as-is for now 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
camd
requested review from
a team,
beatrice-acasandrei and
esanuandra
as code owners
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## master #9143 +/- ##
==========================================
+ Coverage 80.01% 81.37% +1.35%
==========================================
Files 601 604 +3
Lines 32715 34024 +1309
Branches 3314 3265 -49
==========================================
+ Hits 26178 27687 +1509
+ Misses 6371 5954 -417
- Partials 166 383 +217 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
React Router v7 Migration: - Update react-router-dom to [email protected] - Update imports in 32 source files and 21 test files - Remove v7 future flags from BrowserRouter (no longer needed) - Add TextEncoder/TextDecoder polyfills to test setup Planning Document: - Replace react-19-upgrade-plan.md with post-react19-upgrade-plan.md - Add Phase 5: Class → Functional component migration (57 components) - Add Phase 6: API Type Safety (OpenAPI codegen + Zod) - Document PropTypes strategy (keep for docs, no Zod for props) - Add detailed migration order by feature area 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
camd
force-pushed
the
camd/react-router-7
branch
from
9a2e889 to
8d04f9e
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Upgrade to React Router v7 and create comprehensive upgrade plan
React Router v7 Migration:
Planning Document:
58 files changed, including the new comprehensive planning document at docs/post-react19-upgrade-plan.md.