chore: upgrade React 17 to React 18 - #2172
Merged
Merged
Conversation
- Migrate ReactDOM.render to createRoot API - Remove deprecated componentWillMount lifecycle - Update react, react-dom, @types/react, @types/react-dom deps
|
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 was upgraded from version 17 to 18, application and modal mounting now use ChangesReact 18 migration
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant BrowserDOM
participant ReactRoot
participant AppTree
BrowserDOM->>ReactRoot: createRoot(root container)
ReactRoot->>AppTree: root.render(I18nextProvider and App)
AppTree->>BrowserDOM: render application UI
BrowserDOM->>ReactRoot: root.unmount()
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 upgrades the app from React 17 to React 18, updating ReactDOM rendering APIs and addressing stricter React 18 / TypeScript typings across the codebase (including targeted third‑party type augmentations and JSX typing fixes).
Changes:
- Upgrade
react,react-dom,@types/react, and@types/react-domdependencies. - Migrate
ReactDOM.render/unmountComponentAtNodeusage to the React 18createRootAPI. - Apply React 18 TypeScript compatibility adjustments (type augmentations, safer JSX rendering via
String(...), and children typing workarounds).
Reviewed changes
Copilot reviewed 25 out of 27 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/react18-fixes.d.ts | Adds module augmentations to smooth React 18 typing friction with third-party libraries. |
| src/plugins/pgsql/Explorer/Table.tsx | React 18 typing adjustments around resizable header tooltip rendering. |
| src/plugins/mysql/Explorer/Table.tsx | React 18 typing adjustments around resizable header tooltip rendering. |
| src/plugins/clickHouse/Explorer/Table.tsx | React 18 typing adjustments around resizable header tooltip rendering. |
| src/plugins/elasticsearch/ExplorerNG/components/QueryInputAddonAfter.tsx | Ensures displayed historical record values are renderable under stricter typings. |
| src/plugins/doris/ExplorerNG/components/QueryInputAddonAfter.tsx | Ensures displayed historical record values are renderable under stricter typings. |
| src/plugins/doris/Explorer/Query/index.tsx | Ensures displayed historical record values are renderable under stricter typings. |
| src/pages/explorer/Elasticsearch/QueryBuilder.tsx | Ensures displayed query metadata values are renderable under stricter typings. |
| src/pages/explorer/Loki/index.tsx | React 18 typing adjustments for error display. |
| src/pages/explorer/Loki/component/context/index.tsx | React 18 typing adjustments for error display. |
| src/pages/dashboard/Renderer/Renderer/TimeSeriesNG/Main.tsx | Migrates embedded React rendering inside uPlot overlays to createRoot. |
| src/pages/dashboard/Components/ModalHOC.tsx | Migrates modal HOC rendering/unmounting to createRoot. |
| src/components/ModalHOC.tsx | Migrates modal HOC rendering/unmounting to createRoot. |
| src/main.tsx | Migrates application bootstrap rendering to createRoot. |
| src/pages/user/component/userForm/index.tsx | Adjusts forwardRef typing for React 18 / TS strictness. |
| src/pages/user/component/teamForm/index.tsx | Adjusts forwardRef typing for React 18 / TS strictness. |
| src/pages/user/component/passwordForm/index.tsx | Adjusts forwardRef typing for React 18 / TS strictness. |
| src/pages/user/component/businessForm/index.tsx | Adjusts forwardRef typing for React 18 / TS strictness. |
| src/pages/targets/index.tsx | JSX children typing workaround via fragment wrapping and explicit nullability. |
| src/pages/hosts/pages/List/OperationModal.tsx | JSX children typing workaround via fragment wrapping and explicit nullability. |
| src/pages/logExplorer/components/LogsViewer/components/LogFieldValue/Token.tsx | Tightens popup container callback typing/casting under React 18 typings. |
| src/pages/log/IndexPatterns/index.tsx | Improves generic typing for SortableHandle with React 18 typings. |
| src/pages/embeddedProduct/pages/List/index.tsx | Improves generic typing for SortableHandle with React 18 typings. |
| src/pages/taskOutput/index.jsx | Removes deprecated lifecycle usage as part of React 18 migration. |
| src/pages/taskOutput/host.jsx | Removes deprecated lifecycle usage as part of React 18 migration. |
| package.json | Bumps React + type dependencies and removes obsolete overrides. |
Comment on lines
52
to
55
| const { components, resizableColumns, tableWidth, resetColumns } = useAntdResizableHeader({ | ||
| columns: useMemo(() => columns, [columnsKeys]), | ||
| tooltipRender: (props) => <Tooltip {...props} />, | ||
| tooltipRender: (props: any) => <Tooltip {...props} />, | ||
| defaultWidth: 150, |
Comment on lines
53
to
56
| const { components, resizableColumns, tableWidth, resetColumns } = useAntdResizableHeader({ | ||
| columns: useMemo(() => columns, [columnsKeys]), | ||
| tooltipRender: (props) => <Tooltip {...props} />, | ||
| tooltipRender: (props: any) => <Tooltip {...props} />, | ||
| defaultWidth: 150, |
Comment on lines
51
to
54
| const { components, resizableColumns, tableWidth, resetColumns } = useAntdResizableHeader({ | ||
| columns: useMemo(() => columns, [columnsKeys]), | ||
| tooltipRender: (props) => <Tooltip {...props} />, | ||
| tooltipRender: (props: any) => <Tooltip {...props} />, | ||
| defaultWidth: 150, |
| } | ||
| } catch (err) { | ||
| message.error(err); | ||
| message.error(err as string); |
| setData(_.concat(parseResponse(res2.result || []).dataRows, parseResponse(res1.result || []).dataRows)); | ||
| } catch (err) { | ||
| message.error(err); | ||
| message.error(err as string); |
|
|
||
| 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) => { |
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.
Summary by CodeRabbit