[pashidlos]

This is the React 19 step that #434 deferred. It's rebased onto master (after #434 and #436) and is two commits:

• 788bce0: the upgrade itself.
• 8834f46: fixes from the review.

React 18 was held back by react-joyride 2 (whose peer dependency caps React at 18) and react-konva 18 (which tracks React's major version), so all three move together:

Package	From	To
react, react-dom	18.3	19.3
@types/react, @types/react-dom	18.3	19.3
react-joyride	2.5	3.2
react-konva	18.2	19.3 (konva stays on 9)

material-ui-popup-state, notistack, react-hotkeys-hook 4 and react-material-ui-form-validator 5 already accept React 19 and stay as they are. The code had no string refs, legacy context or defaultProps on function components. The only defaultProps hits are MUI theme config.

Code changes

• GuidedTour.tsx uses the react-joyride 3 API.
  • Joyride is now a named export, and onEvent replaces callback.
  • options replaces the old styles.options, with buttons: [back, primary, skip], skipBeacon, showProgress and dismissKeyAction: false. This replaces mutating every step with disableBeacon/hideCloseButton, and it replaces showSkipButton/disableCloseOnEsc.
  • buttonNext is renamed buttonPrimary, and the spotlight radius and overlay colour are now options.
  • The tooltip keeps .react-joyride__tooltip, so the TourModal page object is unchanged.
  • The "Next (1/2)" and "Last (1/1)" labels are kept through locale. Joyride 3 would otherwise show plain "Last".
• Two behaviour changes from joyride 3, fixed, each with a test that fails without the fix:
  • Clicks on the highlighted element were reaching it. Joyride 2 blocked them; joyride 3 lets them through by default, so "Builds" on the highlighted project card navigated away mid-tour. blockTargetInteraction: true restores the old behaviour. A new e2e test, keeps the highlighted project inert during the tour, clicks through the spotlight and checks the page stays on /projects.
  • "Take a tour" could stop working until reload. Joyride 3 only starts when run turns true while it already has steps. A click on a page without steps (profile, users) set run anyway, and after that the button did nothing on any page. The click handler now returns early when there are no steps. A new unit test clicks with no steps, adds steps, then clicks again.
• Joyride stays inside the "Take a tour" button, as before. A new test, stays closed after the last step, shows a click in the tooltip does not restart a finished tour.
• useRef gets an explicit starting value in DebouncedTextField and DrawArea, as React 19's types require.
• integration_tests/tsconfig.json sets skipLibCheck, as src already does. Two libraries' type files fail the check under React 19's types: joyride 3's .d.cts (its 'use client' line) and the legacy @types/material-ui that @types/react-material-ui-form-validator pulls in.
• Two unit tests that flaked under load are now deterministic:
  • In socket.context.test, renderSocket waited for the open build to appear but not for the effect that re-subscribes the socket handlers with it. React 19 defers that effect more readily. It now flushes pending effects with act.
  • In PasswordField.test, the validator clears its message asynchronously, so the test now waits for the message to go.
• AGENTS.md now says React 19, drops the note that React is pinned to 18 and documents how the tour is styled.

Screenshots

Only guided-tour-light.png and guided-tour-dark.png changed. Both were regenerated in Docker on top of #434's graphite dark theme and checked by eye:

• Joyride 3 cuts the spotlight out of an SVG overlay, so the spotlight now has the 14 px rounded corners already configured.
• The overlay now shows its configured colour, rgba(15, 23, 42, 0.55), which is slate. v2's hard-light blend hid that tint. On the new graphite dark theme it reads slightly blue.
• The tooltip, its text and its buttons are unchanged.

Testing

• npm run lint has 0 errors. The warnings were already there.
• npm run typecheck passes.
• npm test passes all 564 tests.
• npm run build passes.
• npm run test:pw:docker: 296 of 298 passed in the full run. The other two, the testVariationList and testVariationDetails "renders" screenshots, were captured before the page had rendered. Both then passed 50 of 50 times when repeated.
• Under heavy machine load, tests that open the details dialog from ?testId= sometimes miss the 5 s wait. master before React 19 fails this way too, and more often: 19 of 132 runs against 10 of 132 on this branch with --repeat-each=6.

🤖 Generated with Claude Code

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud