Reapply "chore: upgrat de React 17 to React 18" - #2210
Merged
Conversation
This reverts commit cd44fa3.
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (25)
📝 WalkthroughWalkthroughThe project upgrades React and its type definitions to version 18, migrates application, modal, and chart rendering to ChangesReact 18 migration
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Bump ansi-to-react to ^6.2.6 and react-highlight-words to ^0.21.0. Add react-sortable-hoc override to resolve React 18 peer dependency warning. Fix t() return type in TestFireModal for strict TypeScript.
Wrap value with String() to ensure non-string types render correctly in JSX without React warnings.
Contributor
There was a problem hiding this comment.
🟡 Not ready to approve
Several updated typings (notably forwardRef<any> and err as string) weaken type-safety and do not reliably fix runtime behavior, and should be corrected before approval.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.
Pull request overview
This PR reapplies the previously reverted React 17 → React 18 upgrade, updating runtime rendering APIs and introducing TypeScript compatibility patches to address stricter React 18 typings across the codebase.
Changes:
- Upgrade React/ReactDOM and related typings to React 18, and migrate
ReactDOM.render/unmountComponentAtNodeusage tocreateRoot. - Add a React 18 type-compatibility
.d.tspatch file to reduce third‑party type friction (e.g., draggable/sortable/antd). - Apply targeted TS/JSX adjustments (stringifying displayed values, minor typing tweaks) to satisfy stricter checks.
File summaries
| File | Description |
|---|---|
| src/types/react18-fixes.d.ts | Adds module-augmentation type patches for React 18 compatibility with several third-party libs. |
| src/plugins/elasticsearch/ExplorerNG/components/QueryInputAddonAfter.tsx | Stringifies displayed historical-record values to satisfy React 18 typing/render constraints. |
| src/plugins/doris/ExplorerNG/components/QueryInputAddonAfter.tsx | Stringifies displayed historical-record values. |
| src/plugins/doris/Explorer/Query/index.tsx | Stringifies displayed historical-record values. |
| src/plugins/clickHouse/ExplorerNG/components/QueryInputAddonAfter.tsx | Stringifies displayed historical-record values. |
| src/pages/user/component/userForm/index.tsx | Adjusts forwardRef typing during React 18 migration. |
| src/pages/user/component/teamForm/index.tsx | Adjusts forwardRef typing during React 18 migration. |
| src/pages/user/component/passwordForm/index.tsx | Adjusts forwardRef typing during React 18 migration. |
| src/pages/user/component/businessForm/index.tsx | Adjusts forwardRef typing during React 18 migration. |
| src/pages/taskOutput/index.jsx | Removes legacy componentWillMount usage (React 18 strictness). |
| src/pages/taskOutput/host.jsx | Removes legacy componentWillMount usage (React 18 strictness). |
| src/pages/targets/index.tsx | Wraps siblings in a fragment / adjusts conditional rendering for React 18 TS checks. |
| src/pages/logExplorer/components/LogsViewer/components/LogFieldValue/Token.tsx | Narrows getPopupContainer return type to satisfy typings. |
| src/pages/log/IndexPatterns/index.tsx | Tweaks SortableHandle typing for React 18 compatibility. |
| src/pages/hosts/pages/List/OperationModal.tsx | Wraps siblings in a fragment / adjusts conditional rendering for React 18 TS checks. |
| src/pages/explorer/Loki/index.tsx | Adjusts error handling typing for React 18/TS stricter checks. |
| src/pages/explorer/Loki/component/context/index.tsx | Adjusts error handling typing for React 18/TS stricter checks. |
| src/pages/explorer/Elasticsearch/QueryBuilder.tsx | Stringifies displayed cached-query values to satisfy React 18 constraints. |
| src/pages/embeddedProduct/pages/List/index.tsx | Tweaks SortableHandle typing for React 18 compatibility. |
| src/pages/dashboard/Renderer/Renderer/TimeSeriesNG/Main.tsx | Migrates uPlot tooltip/marker rendering to createRoot and manages roots. |
| src/pages/dashboard/Components/ModalHOC.tsx | Migrates modal rendering from legacy ReactDOM APIs to createRoot. |
| src/pages/alertRules/FormNG/components/TestFireModal/index.tsx | Tightens translation helper return typing for TS compatibility. |
| src/main.tsx | Migrates app bootstrap from ReactDOM.render to createRoot. |
| src/components/ModalHOC.tsx | Migrates modal rendering from legacy ReactDOM APIs to createRoot. |
| package.json | Upgrades React/ReactDOM and related packages; adds overrides for dependency alignment. |
Review details
- Files reviewed: 24/26 changed files
- Comments generated: 6
- Review effort level: Lite
We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.
|
|
||
| const { Option } = Select; | ||
| const UserForm = React.forwardRef<ReactNode, UserAndPasswordFormProps>((props, ref) => { | ||
| const UserForm = React.forwardRef<any, UserAndPasswordFormProps>((props, ref) => { |
| import { CommonStateContext } from '@/App'; | ||
|
|
||
| const TeamForm = React.forwardRef<ReactNode, TeamProps>((props, ref) => { | ||
| const TeamForm = React.forwardRef<any, TeamProps>((props, ref) => { |
| import { UserAndPasswordFormProps } from '@/store/manageInterface'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| const PasswordForm = React.forwardRef<ReactNode, UserAndPasswordFormProps>((props, ref) => { | ||
| const PasswordForm = React.forwardRef<any, UserAndPasswordFormProps>((props, ref) => { |
|
|
||
| const { Option } = Select; | ||
| const TeamForm = React.forwardRef<ReactNode, TeamProps>((props, ref) => { | ||
| const TeamForm = React.forwardRef<any, TeamProps>((props, ref) => { |
Comment on lines
187
to
189
| } catch (err) { | ||
| message.error(err); | ||
| message.error(err as string); | ||
| } finally { |
Comment on lines
63
to
65
| } catch (err) { | ||
| message.error(err); | ||
| message.error(err as string); | ||
| } finally { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This reverts commit cd44fa3.
Summary by CodeRabbit