chore(ui): upgrade the dashboard to React 19 - #37411
Conversation
Bumps react and react-dom from 18.3.1 to 19.2.8 with matching @types. Next 16 already required a React 19 peer, so this aligns the dashboard with what the framework expects and unblocks Base UI and shadcn work that assumes the React 19 ref model. React 19 passes ref through as a regular prop, so the setup file's forwardRef tripwire and the ref-forwarding test's forwardRef case no longer describe real behavior; both now assert the React 19 contract instead. useRef<T>(null) now yields RefObject<T | null>, which is the one prop type MessageList had to widen.
Greptile SummaryThe PR upgrades the dashboard from React 18 to React 19 and aligns its types and ref expectations with the new contract
Confidence Score: 4/5The React 19 migration appears safe to merge, with a non-blocking gap in the replacement coverage for ref-forwarding regressions The dependency and nullable-ref changes are internally consistent, but the new focused assertion does not preserve the removed suite-wide ref regression check Files Needing Attention: ui/litellm-dashboard/tests/setupTests.ts and ui/litellm-dashboard/src/components/ui/ref-forwarding.test.tsx
|
| Filename | Overview |
|---|---|
| ui/litellm-dashboard/package.json | Upgrades React, React DOM, and their types to mutually compatible React 19 versions |
| ui/litellm-dashboard/package-lock.json | Resolves the React 19 dependency graph without an identified incompatible peer or duplicate React installation |
| ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_editor_view/conversation_panel/MessageList.tsx | Correctly widens the DOM ref prop for React 19's nullable RefObject typing |
| ui/litellm-dashboard/src/components/ui/ref-forwarding.test.tsx | Adds a valid React 19 ref-as-prop assertion, but it does not replace the removed suite-wide regression coverage |
| ui/litellm-dashboard/tests/setupTests.ts | Removes obsolete React 18 warning handling while also dropping suite-wide detection of ref regressions |
Reviews (1): Last reviewed commit: "chore(ui): upgrade the dashboard to Reac..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| ); | ||
| } | ||
| }); | ||
| afterEach(cleanup); |
There was a problem hiding this comment.
Replacing the global ref-warning check with cleanup leaves ref regressions outside the explicitly enumerated primitive tests undetected, reducing the suite's regression coverage.
Rule Used: What: Flag any modifications to existing tests and... (source)
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
|
The dropped-ref tripwire keyed on a React 18 warning that React 19 removed. Broad ref coverage returns with the forwardRef removal follow-up |
…option The option lands in the DOM one render before the popup finishes entering, while its positioner still carries pointer-events: none, so clicking it throws. Waiting on the option's text alone was a race that React 19's flush timing loses, which is why four ToolPolicies cases went red on the bump. chooseSelectOption in test-utils opens the trigger, finds the option by role, waits for it to stop being pointer-blocked, then clicks. It also replaces the last-match-by-text hack, which only worked because the popup happens to portal after the table.
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
|
Holding off on approving — With |
…it form mounts Form.useWatch returns undefined until its field mounts and registers, so a server with a stored flow rendered the "This server has no OAuth flow set" alert for the first commits of the form and then dropped it. The delegate switch two lines below already guards against exactly this by falling back to the stored value; the flow type now does the same. React 19 makes the extra commit observable in CI, which is how the existing assertion caught it. The new test watches the DOM for the alert during mount rather than sampling it once, so the flash fails the suite instead of depending on flush timing.
…itellm_react_19 # Conflicts: # ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.tsx
…ctOption Same popup-still-entering race the ToolPolicies cases hit: the option text lands a render before the positioner drops pointer-events: none, so the click throws under React 19's flush timing.
4 participants
TLDR
Problem this solves:
How it solves it:
User Flow
Before: nothing is broken for the end user, the dashboard just runs a React major behind the framework serving it
After: the same pages render the same way on React 19
Relevant issues
Linear ticket
Pre-Submission checklist
@greptileaito re-request a review after pushing changes)Screenshots / Proof of Fix
To be added: this is a pure runtime upgrade with no intended visual change, so the proof is the same set of pages rendering identically before and after.
Type
🚄 Infrastructure
Caveats (if any)
tests/setupTests.tsno longer fails a test on dropped refsFinal Attestation