Revert "chore: upgrade React 17 to React 18" - #2208
Merged
Merged
Conversation
|
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 (26)
📝 WalkthroughWalkthroughReact is downgraded from version 18 to 17, rendering switches to legacy ReactDOM APIs, React 18 compatibility declarations are removed, and several component typings, cached-value renderers, form conditions, error handlers, and page styles are adjusted. ChangesReact 17 compatibility
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Checkov (3.3.8)package.jsonTraceback (most recent call last): 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 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR reverts the prior React 18 upgrade (#2172), downgrading the app back to React 17 and undoing React 18–specific runtime and typing adjustments across the codebase.
Changes:
- Downgrade
react,react-dom, and corresponding@types/*packages back to React 17. - Replace React 18
createRootusage with React 17ReactDOM.render/unmountComponentAtNodein app bootstrap and modal helpers. - Remove/adjust React 18–driven type and JSX changes across several pages/plugins.
Reviewed changes
Copilot reviewed 25 out of 27 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/react18-fixes.d.ts | Removes React 18 compatibility type augmentations. |
| src/plugins/pgsql/Explorer/Table.tsx | Removes explicit any from tooltip render callback (revert typing tweaks). |
| src/plugins/mysql/Explorer/Table.tsx | Same tooltip render typing tweak revert. |
| src/plugins/clickHouse/Explorer/Table.tsx | Same tooltip render typing tweak revert. |
| src/plugins/elasticsearch/ExplorerNG/components/QueryInputAddonAfter.tsx | Adjusts rendered historical-record values (revert React 18-driven stringification). |
| src/plugins/doris/ExplorerNG/components/QueryInputAddonAfter.tsx | Same historical-record rendering adjustment. |
| src/plugins/doris/Explorer/Query/index.tsx | Same historical-record rendering adjustment. |
| src/pages/user/component/userForm/index.tsx | Ref typing change related to React 17/18 typing differences. |
| src/pages/user/component/teamForm/index.tsx | Ref typing change related to React 17/18 typing differences. |
| src/pages/user/component/passwordForm/index.tsx | Ref typing change related to React 17/18 typing differences. |
| src/pages/user/component/businessForm/index.tsx | Ref typing change related to React 17/18 typing differences. |
| src/pages/taskOutput/index.jsx | Adds a legacy lifecycle hook to set body styles (React version related). |
| src/pages/taskOutput/host.jsx | Same body-style lifecycle adjustment. |
| src/pages/targets/index.tsx | Removes fragment wrapper and adjusts conditional rendering (JSX typing workaround removal). |
| src/pages/logExplorer/components/LogsViewer/components/LogFieldValue/Token.tsx | Adjusts popup container typing to align with older React typings. |
| src/pages/log/IndexPatterns/index.tsx | Adjusts SortableHandle typing to align with older React typings. |
| src/pages/hosts/pages/List/OperationModal.tsx | Removes fragment wrapper and adjusts conditional rendering (JSX typing workaround removal). |
| src/pages/explorer/Loki/index.tsx | Error handling change in message.error call. |
| src/pages/explorer/Loki/component/context/index.tsx | Error handling change in message.error call. |
| src/pages/explorer/Elasticsearch/QueryBuilder.tsx | Adjusts historical-record rendering to avoid React 18-only stringification. |
| src/pages/embeddedProduct/pages/List/index.tsx | Adjusts SortableHandle typing to align with older React typings. |
| src/pages/dashboard/Renderer/Renderer/TimeSeriesNG/Main.tsx | Replaces createRoot with ReactDOM.render in uPlot plugin render targets. |
| src/pages/dashboard/Components/ModalHOC.tsx | Reverts modal mounting from createRoot to ReactDOM.render + unmount. |
| src/components/ModalHOC.tsx | Reverts modal mounting from createRoot to ReactDOM.render + unmount. |
| src/main.tsx | Reverts app bootstrap from createRoot to ReactDOM.render. |
| package.json | Downgrades React and React DOM (+ types) to React 17. |
|
|
||
| const { Option } = Select; | ||
| const UserForm = React.forwardRef<any, UserAndPasswordFormProps>((props, ref) => { | ||
| const UserForm = React.forwardRef<ReactNode, UserAndPasswordFormProps>((props, ref) => { |
| import { CommonStateContext } from '@/App'; | ||
|
|
||
| const TeamForm = React.forwardRef<any, TeamProps>((props, ref) => { | ||
| const TeamForm = React.forwardRef<ReactNode, TeamProps>((props, ref) => { |
| import { UserAndPasswordFormProps } from '@/store/manageInterface'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| const PasswordForm = React.forwardRef<any, UserAndPasswordFormProps>((props, ref) => { | ||
| const PasswordForm = React.forwardRef<ReactNode, UserAndPasswordFormProps>((props, ref) => { |
|
|
||
| const { Option } = Select; | ||
| const TeamForm = React.forwardRef<any, TeamProps>((props, ref) => { | ||
| const TeamForm = React.forwardRef<ReactNode, TeamProps>((props, ref) => { |
Comment on lines
+23
to
+26
| componentWillMount = () => { | ||
| document.body.style.backgroundColor = '#f0f2f5'; | ||
| document.body.style.color = 'rgba(0, 0, 0, 0.65)'; | ||
| }; |
Comment on lines
36
to
40
| function destroy() { | ||
| root.unmount(); | ||
| if (div.parentNode) { | ||
| const unmountResult = ReactDOM.unmountComponentAtNode(div); | ||
| if (unmountResult && div.parentNode) { | ||
| div.parentNode.removeChild(div); | ||
| } |
| <I18nextProvider i18n={i18nInit}> | ||
| <App /> | ||
| </I18nextProvider>, | ||
| document.getElementById('root'), |
| } | ||
| } catch (err) { | ||
| message.error(err as string); | ||
| message.error(err); |
| setData(_.concat(parseResponse(res2.result || []).dataRows, parseResponse(res1.result || []).dataRows)); | ||
| } catch (err) { | ||
| message.error(err as string); | ||
| message.error(err); |
Comment on lines
355
to
357
| onDelete={(id) => { | ||
| uplotsMap.delete(id); | ||
| rootRefs.current.forEach((r) => r.unmount()); | ||
| rootRefs.current.clear(); | ||
| }} |
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.
Reverts #2172
Summary by CodeRabbit
Compatibility
Bug Fixes
Refactor