Upgrade React from 18.3.1 to 19.2.7

awx/ui/config/webpack.config.js

@@ -332,6 +332,16 @@ module.exports = function (webpackEnv) {
           include: /node_modules/,
           resolve: { fullySpecified: false },
         },
+        {
+          // PatternFly v6 ships per-component CSS via .mjs modules that
+          // `import './component.css'`. The package marks only *.css as
+          // sideEffects, so webpack tree-shakes the .mjs → .css imports
+          // away. Force all @patternfly/react-styles .mjs files to be
+          // treated as side-effectful so the CSS actually loads.
+          test: /\.mjs$/,
+          include: /node_modules\/@patternfly\/react-styles/,
+          sideEffects: true,
+        },
         {
           // "oneOf" will traverse all following loaders until one will
           // match the requirements. When no loader matches it will fall

awx/ui/package.json

@@ -22,9 +22,9 @@
     "html-entities": "2.6.0",
     "js-yaml": "4.2.0",
     "luxon": "^3.7.2",
-    "react": "18.3.1",
+    "react": "19.2.7",
     "react-ace": "^14.0.1",
-    "react-dom": "18.3.1",
+    "react-dom": "19.2.7",
     "react-error-boundary": "^6.1.2",
     "react-router": "^7.18.0",
     "rrule": "2.8.1",
@@ -92,7 +92,6 @@
     "postcss-preset-env": "^7.8.3",
     "prettier": "3.8.3",
     "prompts": "^2.4.2",
-    "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-refresh": "^0.18.0",
     "resolve": "^1.22.12",
@@ -151,8 +150,7 @@
       "testUtils/**/*.{js,jsx}"
     ],
     "setupFiles": [
-      "<rootDir>/config/jest/textEncoderPolyfill.js",
-      "react-app-polyfill/jsdom"
+      "<rootDir>/config/jest/textEncoderPolyfill.js"
     ],
     "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.js"

awx/ui/src/components/PaginatedTable/ToolbarAddButton.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { Link } from 'react-router';
 import {
 	Button,
@@ -9,15 +9,16 @@ import {
 import { useLingui } from '@lingui/react/macro';
 import { useKebabifiedMenu } from 'contexts/Kebabified';
 
-const ToolbarAddButton = forwardRef(({
+function ToolbarAddButton({
   linkTo = null,
   onClick = null,
   isDisabled,
   isExpanded,
   defaultLabel,
   showToggleIndicator,
   ouiaId,
-}, ref) => {
+  ref,
+}) {
   const { t } = useLingui();
   const { isKebabified } = useKebabifiedMenu();
 
@@ -77,5 +78,5 @@ const ToolbarAddButton = forwardRef(({
       </Button>
     </Tooltip>
   );
-});
+}
 export default ToolbarAddButton;

awx/ui/src/screens/Job/JobOutput/JobEvent.js

@@ -12,22 +12,19 @@ const HIDDEN_PASSWORD_PROMPTS = [
   "BECOME password[defaults to SSH password]: "
 ];
 
-const JobEvent = React.forwardRef(
-  (
-    {
-      style,
-      lineTextHtml,
-      isClickable,
-      onJobEventClick,
-      event,
-      measure,
-      isCollapsed,
-      onToggleCollapsed,
-      hasChildren,
-      jobStatus,
-    },
-    ref
-  ) => {
+function JobEvent({
+  style,
+  lineTextHtml,
+  isClickable,
+  onJobEventClick,
+  event,
+  measure,
+  isCollapsed,
+  onToggleCollapsed,
+  hasChildren,
+  jobStatus,
+  ref,
+}) {
     const numOutputLines = lineTextHtml?.length || 0;
     useEffect(() => {
       const timeout = setTimeout(measure, 0);
@@ -88,7 +85,6 @@ const JobEvent = React.forwardRef(
         })}
       </div>
     );
-  }
-);
+}
 
 export default JobEvent;

awx/ui/src/screens/Job/JobOutput/JobEventSkeleton.js

@@ -1,4 +1,4 @@
-import React, { useEffect, forwardRef } from 'react';
+import React, { useEffect } from 'react';
 import {
   JobEventLine,
   JobEventLineToggle,
@@ -14,7 +14,7 @@ function JobEventSkeletonContent({ contentLength }) {
   );
 }
 
-const JobEventSkeleton = forwardRef(({ counter, contentLength, style, measure }, ref) => {
+function JobEventSkeleton({ counter, contentLength, style, measure, ref }) {
   useEffect(() => {
     measure();
   }, [measure]);
@@ -30,6 +30,6 @@ const JobEventSkeleton = forwardRef(({ counter, contentLength, style, measure },
       </div>
     )
   );
-});
+}
 
 export default JobEventSkeleton;

awx/ui/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.js

@@ -131,7 +131,7 @@ jest.mock('@patternfly/react-core', () => {
       R.createElement('option', strip(props), children || label),
     Switch: (props) => R.createElement('input', { ...strip(props), type: 'checkbox' }),
     Checkbox: (props) => R.createElement('input', { ...strip(props), type: 'checkbox' }),
-    Form: el('form'),
+    Form: el('div'),
     Title: el('h2'),
     Tooltip: ({ children }) => children || null,
     WizardFooterWrapper: el('div'),