adoptium / adoptium/aqa-test-tools

Migrate to React 19 (blocked dependency: react-day-picker v7 API in DateRangePickers.jsx

Open
#1,285 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.