adoptium / adoptium/aqa-test-tools
Migrate to React 19 (blocked dependency: react-day-picker v7 API in DateRangePickers.jsx
- Dominant language
- Jupyter Notebook
- Stars
- 33
- Forks
- 97
- Avg merge
- 7h 9m
- Merged PRs (30d)
- 5
Description
PR #[1273](https://github.com/adoptium/aqa-test-tools/pull/1273/) bumped react-router to 8.3.0, which requires React 19 (useOptimistic). This project is still on React 18.2.0, so the bump broke every Netlify deploy-preview build (Attempted import error: 'useOptimistic' is not exported from 'react'). #[1273](https://github.com/adoptium/aqa-test-tools/pull/1273/) has been reverted in https://github.com/adoptium/aqa-test-tools/pull/1284 to unblock previews; this issue tracks the real migration so react-router can be safely re-bumped afterward.
Some reworks needed are here
- `src/Dashboard/Widgets/DateRangePickers.jsx` — the one file blocking this migration. Uses:
- react-day-picker/DayPickerInput (v7-only API, removed in v8+; no React 19 support on v7 at all)
- react-jsx-highcharts's provideAxis HOC + highstock-release
Needs a rewrite of the date-input portion: replace **DayPickerInput** with the modern DayPicker component (v8/v9) plus a text-input wrapper to replicate current click-to-pick-date behavior, keeping the existing moment-based formatting and the `handleFromDateChange/handleToDateChange` logic that talks to the Highcharts axis. The Highcharts/provideAxis piece itself is unlikely to need changes — same pattern used cleanly in the Graph/ folder (5 files)
- **src/index.js, src/Dashboard/Widgets/Graph/*.jsx** (5 files) — also use react-jsx-highcharts; verify rendering under React 19 after the bump, though no API changes are expected here.
Contributor guide
Research direction
Start by reading src/Dashboard/Widgets/DateRangePickers.jsx, then compare the react-jsx-highcharts usage in src/Dashboard/Widgets/Graph/*.jsx and src/index.js. Replace the v7 DayPickerInput behavior with the modern DayPicker and text-input wrapper while preserving moment formatting and the existing date-change handlers; verify the Graph rendering and a successful React 19 deploy-preview build.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, web-dev
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 58/100