Upgrade React to 18.2

.eslintrc.js

@@ -30,6 +30,8 @@ module.exports = {
     'default-param-last': 'off',
     'import/extensions': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
+    'jsx-a11y/control-has-associated-label': 'off',
+    'jsx-a11y/role-supports-aria-props': 'off',
     'no-alert': 'off',
     'no-continue': 'off',
     'no-param-reassign': 'off',
@@ -53,6 +55,7 @@ module.exports = {
     'react/prefer-exact-props': 'off',
     'react/prop-types': 'off',
     'react/sort-comp': [0, {}],
+    'react/forbid-prop-types': 'off',
     // Override AirBnB's config for this rule to make it more strict.
     // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md
     'import/order': [

babel.config.json

@@ -31,6 +31,12 @@
       {
         "loose": true
       }
+    ],
+    [
+      "@babel/plugin-transform-private-methods",
+      {
+        "loose": true
+      }
     ]
   ]
 }

package.json

@@ -23,16 +23,16 @@
     "ajv": "8.6.3",
     "assert": "2.0.0",
     "auth0-js": "9.22.1",
-    "babel-jest": "29.3.1",
+    "babel-jest": "29.6.4",
     "buffer": "6.0.3",
-    "connected-react-router": "6.8.0",
+    "connected-react-router": "6.9.3",
     "crypto-browserify": "3.12.0",
     "d3-color": "3.1.0",
     "d3-scale": "4.0.2",
     "eslint-formatter-codeframe": "7.32.1",
     "fuse.js": "6.0.4",
     "history": "4.10.1",
-    "jest-environment-jsdom": "28.1.3",
+    "jest-environment-jsdom": "29.6.4",
     "js-cookie": "3.0.5",
     "js-yaml": "4.1.0",
     "json-e": "4.4.3",
@@ -44,29 +44,29 @@
     "pako": "2.0.4",
     "prop-types": "15.7.2",
     "query-string": "7.0.1",
-    "react": "17.0.2",
-    "react-dates": "21.5.1",
-    "react-dom": "17.0.2",
-    "react-helmet": "6.0.0",
-    "react-highlight-words": "0.16.0",
+    "react": "18.2.0",
+    "react-dates": "21.8.0",
+    "react-dom": "18.2.0",
+    "react-helmet": "6.1.0",
+    "react-highlight-words": "0.20.0",
     "react-hot-keys": "2.5.2",
     "react-hot-loader": "4.13.1",
-    "react-lazylog": "4.4.4",
+    "react-lazylog": "4.5.3",
     "react-linkify": "0.2.2",
-    "react-redux": "8.0.7",
+    "react-redux": "8.1.2",
     "react-router-dom": "5.1.2",
     "react-split-pane": "0.1.92",
     "react-table": "7.8.0",
     "react-table-6": "6.11.0",
     "react-tabs": "3.0.0",
     "reactstrap": "8.5.1",
-    "redoc": "2.0.0",
-    "redux": "4.0.5",
+    "redoc": "2.1.1",
+    "redux": "4.2.1",
     "redux-debounce": "1.0.1",
     "redux-mock-store": "1.5.4",
     "redux-thunk": "2.3.0",
     "stream-browserify": "3.0.0",
-    "styled-components": "^5",
+    "styled-components": "6.0.7",
     "taskcluster-client-web": "44.18.0",
     "taskcluster-lib-scopes": "11.0.0",
     "taskcluster-lib-urls": "13.0.1",
@@ -75,18 +75,19 @@
     "victory": "36.6.11"
   },
   "devDependencies": {
+    "@babel/core": "7.22.15",
     "@babel/eslint-parser": "7.22.15",
-    "@babel/plugin-proposal-class-properties": "7.17.12",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/plugin-transform-private-methods": "7.22.5",
     "@babel/preset-env": "7.17.12",
     "@babel/preset-react": "7.17.12",
     "@pollyjs/adapter-fetch": "5.1.1",
     "@pollyjs/adapter-node-http": "5.1.1",
     "@pollyjs/adapter-puppeteer": "5.1.1",
     "@pollyjs/core": "5.1.1",
     "@pollyjs/persister-fs": "6.0.6",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.0.0",
+    "@testing-library/jest-dom": "6.1.3",
+    "@testing-library/react": "14.0.0",
     "babel-loader": "9.1.3",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "11.0.0",
@@ -95,14 +96,14 @@
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jest": "27.1.7",
-    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-jest": "27.2.3",
+    "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.16.0",
+    "eslint-plugin-react": "7.33.2",
     "fetch-mock": "9.4.0",
     "html-loader": "4.2.0",
     "html-webpack-plugin": "5.5.3",
-    "jest": "28.1.3",
+    "jest": "29.6.4",
     "jest-environment-puppeteer": "6.0.3",
     "jest-puppeteer": "6.0.3",
     "markdownlint-cli": "0.32.2",

tests/ui/integration/test-setup.js

@@ -1,2 +1,2 @@
 // Entry point for Jest tests
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

tests/ui/job-view/App_test.jsx

@@ -136,6 +136,7 @@ describe('App', () => {
 
   test('should have links to Perfherder and Intermittent Failures View', async () => {
     const { getByText, getByAltText } = render(testApp());
+
     const appMenu = await waitFor(() => getByAltText('Treeherder'));
 
     expect(appMenu).toBeInTheDocument();

tests/ui/job-view/details/PinBoard_test.jsx

@@ -256,7 +256,7 @@ describe('DetailsPanel', () => {
 
   test('pin all jobs', async () => {
     const { queryAllByTitle } = render(testDetailsPanel());
-    store.dispatch(pinJobs(jobList.data));
+    await store.dispatch(pinJobs(jobList.data));
     const unPinJobBtns = queryAllByTitle('Unpin job');
     expect(unPinJobBtns).toHaveLength(5);
   });

tests/ui/test-setup.js

@@ -1,5 +1,5 @@
 // Entry point for Jest tests
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 const mockBuildUrl = jest.fn((root, taskId, path) => {
   return `${root}/${taskId}/artifacts/${path}`;

ui/index.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
 import './css/treeherder-custom-styles.css';
 import './css/treeherder-navbar.css';
 import './css/treeherder-base.css';
 
-render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

ui/perfherder/alerts/AlertTableRow.jsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-did-update-set-state */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, FormGroup, Input, Label } from 'reactstrap';

ui/perfherder/alerts/AlertsView.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-did-update-set-state */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Alert, Container } from 'reactstrap';
@@ -222,7 +221,9 @@ class AlertsView extends React.Component {
     const userInputArray = userInput.split(' ');
 
     const repositories = projects.map(({ name }) => name);
-    const optionsCollection = Object.values(optionCollectionMap);
+    const optionsCollection = optionCollectionMap
+      ? Object.values(optionCollectionMap)
+      : [];
 
     const allNotSupportedFilters = [...repositories, ...optionsCollection];
     return allNotSupportedFilters.filter((elem) =>

ui/perfherder/alerts/AlertsViewControls.jsx

@@ -33,7 +33,7 @@ export default class AlertsViewControls extends React.Component {
       this.alertsRef = new Array(alertsLength)
         .fill(null)
         .map(() => React.createRef());
-      // eslint-disable-next-line react/no-did-update-set-state
+
       this.setState({
         currentAlert: -1,
         alertsLength,

ui/perfherder/compare/CompareTableControls.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-did-update-set-state */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Container, Row } from 'reactstrap';

ui/perfherder/graphs/GraphsView.jsx

@@ -68,7 +68,6 @@ class GraphsView extends React.Component {
       loading !== true &&
       location.search !== prevProps.location.search
     ) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         testData: [],
       });

ui/perfherder/graphs/TestDataModal.jsx

@@ -83,15 +83,14 @@ export default class TestDataModal extends React.Component {
         ? platform
         : platforms[0];
 
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({ platform: newPlatform });
     }
 
     if (prevState.availableTags !== availableTags) {
       const newActiveTags = activeTags.filter((tag) =>
         availableTags.includes(tag),
       );
-      // eslint-disable-next-line react/no-did-update-set-state
+
       this.setState({ activeTags: newActiveTags }, this.applyFilters);
     }
 
@@ -100,7 +99,6 @@ export default class TestDataModal extends React.Component {
     }
 
     if (timeRange !== prevProps.timeRange) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({ innerTimeRange: timeRange });
     }
 

ui/perfherder/tests/PlatformList.jsx

@@ -31,7 +31,6 @@ export default class PlatformList extends React.Component {
   componentDidUpdate(prevProps) {
     const { items } = this.props;
     if (items !== prevProps.items) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState(
         {
           platformsVersions: {},

ui/perfherder/tests/TestsView.jsx

@@ -44,7 +44,6 @@ class TestsView extends React.PureComponent {
       platformsMap !== false &&
       location.search === ''
     ) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState(
         {
           framework: { id: 1, name: 'talos' },

ui/push-health/MyPushes.jsx

@@ -63,7 +63,7 @@ class MyPushes extends React.Component {
     if (!prevProps.user.isLoggedIn && user.isLoggedIn) {
       const { author } = parseQueryParams(window.location.search);
       const displayedUser = author ?? user.email;
-      // eslint-disable-next-line react/no-did-update-set-state
+
       this.setState({ displayedUser }, () => this.fetchMetrics(true));
       // Update the tests every two minutes.
       this.testTimerId = setInterval(() => this.fetchMetrics(), 120000);

ui/push-health/TaskSelection.jsx

@@ -19,7 +19,6 @@ class TaskSelection extends React.PureComponent {
       prevProps.allPlatformsSelected !== allPlatformsSelected &&
       allPlatformsSelected !== isTestSelected
     ) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({ isTestSelected: allPlatformsSelected });
     }
   }

ui/push-health/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 // Treeherder Styles
 import '../css/failure-summary.css';
@@ -11,4 +11,5 @@ import 'react-tabs/style/react-tabs.css';
 
 import App from './App';
 
-render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

ui/shared/ErrorMessages.jsx

@@ -19,7 +19,7 @@ class ErrorMessages extends React.PureComponent {
       !this.state.visible
     ) {
       // reset Alert if previouly dismissed
-      // eslint-disable-next-line react/no-did-update-set-state
+
       this.setState({ visible: true });
     }
   }

ui/shared/InputFilter.jsx

@@ -22,7 +22,6 @@ export default class InputFilter extends React.Component {
     const { filteredTextValue } = this.props;
 
     if (filteredTextValue !== prevProps.filteredTextValue) {
-      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({ input: filteredTextValue });
     }
   }

ui/taskcluster-auth-callback/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import TaskClusterCallback from './TaskclusterCallback';
 
-render(<TaskClusterCallback />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<TaskClusterCallback />);