Skip to content

console: upgrade to React 19 - #39615

Draft
leedqin wants to merge 5 commits into
MaterializeInc:mainfrom
leedqin:console-react-19
Draft

leedqin wants to merge 5 commits into
MaterializeInc:mainfrom
leedqin:console-react-19

Conversation

@leedqin

@leedqin leedqin commented Oct 7, 2026

Copy link
Copy Markdown
Contributor

Motivation

Moves the Console to React 19. Dependabot's #39497 bumps the packages alone, which fails typecheck and 37 unit tests. This PR includes the code and test changes the bump needs.

Supersedes #39497.

The first four commits are separate PRs. Please review them there: #39609 (use-resize-observer, react-window, auto-sizer), #39610 (codemirror-toolkit), #39611 (visx) and #39613 (Chakra 2.10). Each removes a dependency that doesn't support React 19. They drop out of this PR once they merge. Review only the last commit here.

Description

  • Dependencies: react, react-dom, @types/react and @types/react-dom move to 19.3.0.
    • resolutions pins @types/react, because @types/react-is 17 (via Frontegg) otherwise keeps an @types/react 17 copy. A second copy hides real errors, because it keeps the global JSX namespace alive.
    • @emotion/react is deduped, which drops react-select's nested 11.11.4 copy.
  • Type fixes, mostly from types-react-codemod:
    • useRef() calls get an initial value.
    • RefObject types become nullable.
    • Global JSX.Element becomes React.JSX.Element.
  • Manual fixes:
    • IntegrationsGallery dropped a second props: any parameter, which React treated as legacy context.
    • A lost narrowing in ShellVirtualizedList is fixed.
    • Two Chakra radio cards are typed with UseRadioProps.
    • act comes from @testing-library/react instead of the removed react-dom/test-utils export.
    • SwitchStackModal's icon is a display: contents span instead of a fragment. React 19 warns when Chakra puts aria-hidden on a fragment, and the button already has its own label.
  • Test harness: React 19 doesn't retry a component that suspends inside an act that isn't awaited. That left 37 tests stuck on the Suspense fallback.
    • renderComponent, two local render helpers and the renderHook calls in environments.test.ts now render inside await act(async () => …).
    • Every caller awaits them. A type-aware no-floating-promises pass over the tests found no unawaited render left.
    • Four spinner and empty-state tests only passed because they asserted before the mocked response arrived. They now use a handler that never resolves, or waitFor.

Verification

Existing tests, with the harness changes above. Compared with React 18, the suite no longer logs the ReactDOMTestUtils.act deprecation or the element.ref warning.

Worth clicking through on the preview, roughly by risk:

  1. Log out and back in through Frontegg. Check the "Contact support" footer and the sign-up message: Frontegg still uses react-is 17 to recognize these custom slots.
  2. Cold boot and a region switch, watching for a stuck loading screen or flicker.
  3. Cluster details: the replicas, materialized view and index lists, the largest-objects card and the charts. React 19 shows a Suspense fallback before rendering the suspended component's siblings, so watch for spinner flashes.
  4. Radio cards: the enable-region selector and the Connect drawer's MCP option.
  5. react-select and downshift dropdowns in the create-source forms and Query History filters. react-select now shares Chakra's emotion instance.
  6. The Shell: run queries, autoscroll, history search and the tutorial.
  7. Billing and the Stripe payment form.

🤖 Generated with Claude Code

…act 19

use-resize-observer 10, react-window 1.8.11 and react-virtualized-auto-sizer
1.0.25 are the first versions whose peer ranges allow React 19. Only
use-resize-observer needs code changes: v10 drops its default export.
0.7 drops the React 18 peer cap, so it's needed for React 19. Its context
API replaces createCodeMirrorWithContext and removes useViewDispatch, so
the provider wraps the new hooks under the old names and callers dispatch
through the view. 0.7 re-runs view effects when their setup changes, so
the editor's change listener is memoized on a stable onChange.

The @lezer/highlight bump keeps a single copy installed. Lezer matches
highlight tags by identity, so a second copy silently turns off SQL
highlighting. The new theme test fails if that happens.
visx 3.12 caps React at 18, so this is needed for React 19. It also ends
the mix of visx 3 and 4 packages on main.

visx 4 adds an exports map, so deep imports move to the package roots. Its
ParentSize now collapses to 0px tall without a fixed-height parent, so the
cluster utilization graphs measure only their width, and the connector
error graph gives ParentSize its fixed height.
Chakra 2.10.5 stops reading element.ref and 2.10.6 adds React 19 Ref and
RefObject typings, both needed before the React 19 upgrade. Imports from
sub-packages 2.10 no longer installs move to @chakra-ui/react or
@chakra-ui/utils, and the separate @chakra-ui/toast is dropped. Dependabot
now groups @chakra-ui/* and skips majors, since v3 is a rewrite.

2.10's modal takes focus a moment after opening, so NewClusterForm's tests
wait for it before typing.
Bump react, react-dom and their types to 19.3, with a resolution so one
@types/react remains. Apply the types-react-codemod fixes plus a few manual
ones, and render tests inside an awaited act, which React 19 needs to
resolve components that suspend on mount.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant