Upgrade React from 18.3.1 to 19.2.7 - #521
Merged
Merged
Conversation
- Bump react and react-dom from 18.3.1 to 19.2.7 - Remove react-app-polyfill (dead dependency, no imports in source) - Convert forwardRef to direct ref prop in JobEvent, JobEventSkeleton, and ToolbarAddButton (forwardRef is no longer needed in React 19) - Fix nested form DOM nesting error in NodeModal test mock (React 19 promotes nested <form> warning to console.error) - Clean up Jest setupFiles (remove react-app-polyfill/jsdom) All 552 test suites pass (2911 tests).
PatternFly v6 ships per-component CSS via .mjs modules in @patternfly/react-styles that import adjacent .css files (e.g. `import './login.css'`). The package marks only *.css as sideEffects in its package.json, but not the .mjs files that import them. Webpack tree-shakes the .mjs → .css imports away, leaving only the base reset styles (205 rules instead of ~2800). Add a webpack rule to force @patternfly/react-styles .mjs files to be treated as side-effectful so the CSS imports are preserved.
cigamit
reviewed
Jun 28, 2026
cigamit
added
the
Needs triage
Contributor
There was a problem hiding this comment.
Pull request overview
Upgrades the AWX UI’s core React runtime to React 19, removing now-unneeded polyfills and aligning a few components/tests with React 19 behavior while ensuring PatternFly v6 CSS continues to load correctly under webpack.
Changes:
- Bump
react/react-domto 19.2.7 and removereact-app-polyfillfrom Jest setup. - Replace
forwardRefusage with directrefprop handling in several UI components. - Adjust PF6/webpack behavior (sideEffects) and update a NodeModal test mock to avoid React 19 nested-form warnings.
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.js | Updates PF Form mock to avoid nested <form> warnings promoted to errors in React 19. |
| awx/ui/src/screens/Job/JobOutput/JobEventSkeleton.js | Removes forwardRef and uses ref prop directly. |
| awx/ui/src/screens/Job/JobOutput/JobEvent.js | Removes React.forwardRef wrapper and attaches ref prop to the root element. |
| awx/ui/src/components/PaginatedTable/ToolbarAddButton.js | Removes forwardRef and passes ref prop directly to MenuToggle. |
| awx/ui/package.json | Bumps React deps, removes react-app-polyfill, tweaks Jest setupFiles, and changes dev-server PORT. |
| awx/ui/package-lock.json | Lockfile updates reflecting React 19 and removal of react-app-polyfill transitive deps. |
| awx/ui/config/webpack.config.js | Forces PF6 @patternfly/react-styles .mjs modules to be treated as side-effectful so CSS imports aren’t tree-shaken away. |
Files not reviewed (1)
- awx/ui/package-lock.json: Generated file
- Revert dev server port from 3002 back to 3001 (accidental change from local testing) - Pin react and react-dom to exact 19.2.7 (no caret range) to avoid unintended minor/patch bumps on a major upgrade
Contributor
Author
|
All review findings have been addressed:
|
cigamit
removed
the
Needs triage
cigamit
approved these changes
Jun 28, 2026
sy-base
pushed a commit
to sy-base/ascender
that referenced
this pull request
Jul 4, 2026
* Upgrade React from 18.3.1 to 19.2.7 - Bump react and react-dom from 18.3.1 to 19.2.7 - Remove react-app-polyfill (dead dependency, no imports in source) - Convert forwardRef to direct ref prop in JobEvent, JobEventSkeleton, and ToolbarAddButton (forwardRef is no longer needed in React 19) - Fix nested form DOM nesting error in NodeModal test mock (React 19 promotes nested <form> warning to console.error) - Clean up Jest setupFiles (remove react-app-polyfill/jsdom) All 552 test suites pass (2911 tests). * Fix PatternFly v6 component CSS not loading PatternFly v6 ships per-component CSS via .mjs modules in @patternfly/react-styles that import adjacent .css files (e.g. `import './login.css'`). The package marks only *.css as sideEffects in its package.json, but not the .mjs files that import them. Webpack tree-shakes the .mjs → .css imports away, leaving only the base reset styles (205 rules instead of ~2800). Add a webpack rule to force @patternfly/react-styles .mjs files to be treated as side-effectful so the CSS imports are preserved. * Revert port to 3001 and pin react versions - Revert dev server port from 3002 back to 3001 (accidental change from local testing) - Pin react and react-dom to exact 19.2.7 (no caret range) to avoid unintended minor/patch bumps on a major upgrade
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
Upgrade React and React DOM from 18.3.1 to 19.2.7 (latest).
Changes:
JobEvent,JobEventSkeleton,ToolbarAddButton) —forwardRefis no longer needed in React 19Formchanged from<form>to<div>— React 19 promotes nested<form>DOM nesting warning toconsole.error, which the test harness catchesAll prerequisites were completed in earlier PRs:
createRootmigration (noReactDOM.render)defaultPropson function components converted to default paramsprop-typesimports removedreact-virtualizedreplaced with@tanstack/react-virtualAlso unblocks: react-router 8 (requires React 19.2.7+, separate PR).
ISSUE TYPE
COMPONENT NAME
ASCENDER VERSION
ADDITIONAL INFORMATION
Test results: All 552 test suites pass (2911 tests, 0 failures).
Formik risk: formik 2.4.9 (project in stasis since 2023) declares
react >=16.8.0so it installs cleanly, but runtime regressions are the main risk. Form-heavy screens (Settings, Templates, Credentials, Users) should be exercised during review.