Upgrade to React 18 (#8095)

* Upgrade to React 18

* Update related packages (rebased)

* Increase max asset size for webpack build to pass

* Replace react-hot-loader by @pmmmwh/react-refresh-webpack-plugin

* Revert "Replace react-hot-loader by @pmmmwh/react-refresh-webpack-plugin"

This reverts commit ca7652a.

* Upgrade ESLint

* Run linter

* Update all existing tests with legacy rendering

* Update other tests

* Run linting

* Restrore Eslint 8.21.0

* Restore files (Eslint 8.21.0)

* Lint fix

package.json

@@ -23,9 +23,9 @@
     "ajv": "8.6.3",
     "assert": "2.0.0",
     "auth0-js": "9.22.1",
-    "babel-jest": "29.3.1",
+    "babel-jest": "29.7.0",
     "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",
@@ -44,23 +44,23 @@
     "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.3.1",
+    "react-dates": "21.8.0",
+    "react-dom": "18.3.1",
+    "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-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",
+    "react-tabs": "6.0.2",
+    "reactstrap": "8.10.1",
+    "redoc": "2.1.5",
     "redux": "4.0.5",
     "redux-debounce": "1.0.1",
     "redux-mock-store": "1.5.4",
@@ -75,18 +75,20 @@
     "victory": "36.6.12"
   },
   "devDependencies": {
+    "@babel/core": "7.24.7",
     "@babel/eslint-parser": "7.22.15",
     "@babel/plugin-proposal-class-properties": "7.17.12",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.17.12",
+    "@babel/preset-env": "7.24.7",
     "@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": "6.1.6",
-    "@testing-library/react": "12.0.0",
+    "@testing-library/dom": "10.1.0",
+    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/react": "16.0.0",
     "babel-loader": "9.1.3",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "12.0.2",

tests/ui/job-view/AppHistory_test.jsx

@@ -46,7 +46,11 @@ describe('history', () => {
       },
     );
     fetchMock.get(
-      `begin:${getProjectUrl('/push/?full=true&count=', repoName)}`,
+      `begin:${getProjectUrl('/push/?full=true&count=10&revision=', 'try')}`,
+      { results: [] },
+    );
+    fetchMock.get(
+      `begin:${getProjectUrl('/push/?full=true&count=10', repoName)}`,
       {
         ...pushListFixture,
         results: [pushListFixture.results[0]],
@@ -66,7 +70,7 @@ describe('history', () => {
     history.push(
       '/#/jobs?repo=try&revision=07615c30668c70692d01a58a00e7e271e69ff6f1',
     );
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({
@@ -78,7 +82,7 @@ describe('history', () => {
   });
 
   test('lack of a specified route should redirect to jobs view with a default repo', () => {
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({

tests/ui/job-view/AppRoutes_test.jsx

@@ -7,6 +7,7 @@ import { ConnectedRouter } from 'connected-react-router';
 import App from '../../../ui/App';
 import reposFixture from '../mock/repositories';
 import { getApiUrl } from '../../../ui/helpers/url';
+import { getProjectUrl } from '../../../ui/helpers/location';
 import {
   configureStore,
   history,
@@ -28,6 +29,12 @@ describe('Test for backwards-compatible routes for other apps', () => {
     fetchMock.get('/revision.txt', []);
     fetchMock.get(getApiUrl('/repository/'), reposFixture);
     fetchMock.get(getApiUrl('/failureclassification/'), []);
+    fetchMock.get(getApiUrl('/user/'), []);
+    fetchMock.get(getProjectUrl('/jobs/319893964/', 'autoland'), {});
+    fetchMock.get(
+      getProjectUrl('/jobs/319893964/text_log_errors/', 'autoland'),
+      {},
+    );
   });
 
   test('old push health url should redirect to correct url', () => {
@@ -39,7 +46,7 @@ describe('Test for backwards-compatible routes for other apps', () => {
     history.push(
       '/pushhealth.html?repo=autoland&revision=3c8e093335315c42a87eebf0531effe9cd6fdb95',
     );
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({
@@ -56,7 +63,7 @@ describe('Test for backwards-compatible routes for other apps', () => {
     fetchMock.get('/api/performance/tag/', []);
 
     history.push('/perf.html#/alerts?id=27285&hideDwnToInv=0');
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({
@@ -71,7 +78,7 @@ describe('Test for backwards-compatible routes for other apps', () => {
     history.push(
       '/logviewer.html#/jobs?job_id=319893964&repo=autoland&lineNumber=2728',
     );
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({
@@ -83,12 +90,10 @@ describe('Test for backwards-compatible routes for other apps', () => {
   });
 
   test('url is not broken when it contains a table permalink hash', async () => {
-    fetchMock.get(getApiUrl('/user/'), []);
-
     history.push(
       '/perfherder/compare?originalProject=mozilla-central&originalRevision=54e7fb66ad44b8dcb8caab587f929dad60932d71&newProject=mozilla-central&newRevision=54e7fb66ad44b8dcb8caab587f929dad60932d71&framework=1&page=1#tableLink-header-134266337',
     );
-    render(testApp());
+    render(testApp(), { legacyRoot: true });
 
     expect(history.location).toEqual(
       expect.objectContaining({

tests/ui/job-view/App_test.jsx

@@ -138,7 +138,7 @@ describe('App', () => {
   });
 
   test('should have links to Perfherder and Intermittent Failures View', async () => {
-    const { getByText, getByAltText } = render(testApp());
+    const { getByText, getByAltText } = render(testApp(), { legacyRoot: true });
     const appMenu = await waitFor(() => getByAltText('Treeherder'));
 
     expect(appMenu).toBeInTheDocument();
@@ -160,7 +160,9 @@ describe('App', () => {
     secondJobSymbol,
     secondJobTaskId,
   ) => {
-    const { getByText, findByText, findByTestId } = render(testApp());
+    const { getByText, findByText, findByTestId } = render(testApp(), {
+      legacyRoot: true,
+    });
     const firstJob = await findByText(firstJobSymbol);
 
     fireEvent.mouseDown(firstJob);
@@ -228,7 +230,7 @@ describe('App', () => {
   });
 
   test('changing repo updates ``currentRepo``', async () => {
-    const { getByText, getByTitle } = render(testApp());
+    const { getByText, getByTitle } = render(testApp(), { legacyRoot: true });
 
     const autolandRevision = await waitFor(() => getByText('ba9c692786e9'));
     expect(autolandRevision).toBeInTheDocument();

tests/ui/job-view/Filtering_test.jsx

@@ -190,9 +190,12 @@ describe('Filtering', () => {
     });
 
     test('should have 1 push', async () => {
-      const { getAllByText, getAllByTestId, getByText, getByTitle } = render(
-        testApp(),
-      );
+      const {
+        getAllByText,
+        getAllByTestId,
+        getByText,
+        getByTitle,
+      } = render(testApp(), { legacyRoot: true });
       const unfilteredPushes = await waitFor(() =>
         getAllByTestId('push-header'),
       );
@@ -216,7 +219,9 @@ describe('Filtering', () => {
 
   describe('by failure result', () => {
     test('should have 10 failures', async () => {
-      const { getByTitle, findAllByText, queryAllByText } = render(testApp());
+      const { getByTitle, findAllByText, queryAllByText } = render(testApp(), {
+        legacyRoot: true,
+      });
 
       await findAllByText('B');
       const unclassifiedOnlyButton = getByTitle(
@@ -242,7 +247,9 @@ describe('Filtering', () => {
       expect(jobCount()).toBe(50);
     });
     test('KeyboardShortcut u: toggle unclassified jobs', async () => {
-      const { queryAllByText, getAllByText } = render(testApp());
+      const { queryAllByText, getAllByText } = render(testApp(), {
+        legacyRoot: true,
+      });
       const symbolToRemove = 'yaml';
       await waitFor(() => getAllByText(symbolToRemove));
       fireEvent.keyDown(document.body, { key: 'u', keyCode: 85 });
@@ -295,7 +302,9 @@ describe('Filtering', () => {
     };
 
     test('click signature should have 10 jobs', async () => {
-      const { getByTitle, findAllByText } = render(testApp());
+      const { getByTitle, findAllByText } = render(testApp(), {
+        legacyRoot: true,
+      });
 
       const build = await findAllByText('B');
 
@@ -311,7 +320,10 @@ describe('Filtering', () => {
     });
 
     test('string "yaml" should have 10 jobs', async () => {
-      const { getAllByText, findAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, findAllByText, queryAllByText } = render(
+        testApp(),
+        { legacyRoot: true },
+      );
       await findAllByText('B');
       const filterField = document.querySelector('#quick-filter');
       setFilterText(filterField, 'yaml');
@@ -328,7 +340,7 @@ describe('Filtering', () => {
     });
 
     test('KeyboardShortcut f: focus the quick filter input', async () => {
-      const { findAllByText } = render(testApp());
+      const { findAllByText } = render(testApp(), { legacyRoot: true });
       await findAllByText('B');
 
       const filterField = document.querySelector('#quick-filter');
@@ -344,7 +356,7 @@ describe('Filtering', () => {
         getAllByText,
         getByPlaceholderText,
         queryAllByText,
-      } = render(testApp());
+      } = render(testApp(), { legacyRoot: true });
       await findAllByText('B');
       const filterField = getByPlaceholderText('Filter platforms & jobs');
       setFilterText(filterField, 'yaml');
@@ -373,7 +385,10 @@ describe('Filtering', () => {
     };
 
     test('uncheck success should leave 30 jobs', async () => {
-      const { getAllByText, findAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, findAllByText, queryAllByText } = render(
+        testApp(),
+        { legacyRoot: true },
+      );
 
       await findAllByText('B');
       clickFilterChicklet('green');
@@ -391,7 +406,10 @@ describe('Filtering', () => {
     });
 
     test('uncheck failures should leave 20 jobs', async () => {
-      const { getAllByText, findAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, findAllByText, queryAllByText } = render(
+        testApp(),
+        { legacyRoot: true },
+      );
       const symbolToRemove = 'B';
 
       await findAllByText(symbolToRemove);
@@ -410,7 +428,10 @@ describe('Filtering', () => {
     });
 
     test('uncheck in progress should leave 20 jobs', async () => {
-      const { getAllByText, findAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, findAllByText, queryAllByText } = render(
+        testApp(),
+        { legacyRoot: true },
+      );
       const symbolToRemove = 'yaml';
 
       await findAllByText('B');
@@ -428,7 +449,9 @@ describe('Filtering', () => {
     });
 
     test('KeyboardShortcut i: toggle off in-progress tasks', async () => {
-      const { getAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, queryAllByText } = render(testApp(), {
+        legacyRoot: true,
+      });
       const symbolToRemove = 'yaml';
 
       await waitFor(() => getAllByText(symbolToRemove));
@@ -445,7 +468,10 @@ describe('Filtering', () => {
     });
 
     test('KeyboardShortcut i: toggle on in-progress tasks', async () => {
-      const { getAllByText, findAllByText, queryAllByText } = render(testApp());
+      const { getAllByText, findAllByText, queryAllByText } = render(
+        testApp(),
+        { legacyRoot: true },
+      );
       const symbolToRemove = 'yaml';
 
       await waitFor(() => getAllByText(symbolToRemove));
@@ -473,7 +499,7 @@ describe('Filtering', () => {
         findAllByText,
         findByText,
         queryAllByText,
-      } = render(testApp());
+      } = render(testApp(), { legacyRoot: true });
       const symbolToRemove = 'yaml';
 
       await findAllByText('B');

tests/ui/job-view/PushList_test.jsx

@@ -158,13 +158,13 @@ describe('PushList', () => {
   const push2Id = 'push-511137';
 
   test('should have 2 pushes', async () => {
-    render(testPushList());
+    render(testPushList(), { legacyRoot: true });
 
     expect(await pushCount()).toHaveLength(2);
   });
 
   test('should switch to single loaded revision', async () => {
-    const { getAllByTitle } = render(testPushList());
+    const { getAllByTitle } = render(testPushList(), { legacyRoot: true });
 
     expect(await pushCount()).toHaveLength(2);
     const pushLinks = await getAllByTitle('View only this push');
@@ -175,7 +175,9 @@ describe('PushList', () => {
   });
 
   test('should reload pushes when setting fromchange', async () => {
-    const { queryAllByTestId, queryByTestId } = render(testPushList());
+    const { queryAllByTestId, queryByTestId } = render(testPushList(), {
+      legacyRoot: true,
+    });
 
     expect(await pushCount()).toHaveLength(2);
 
@@ -200,7 +202,7 @@ describe('PushList', () => {
   });
 
   test('should reload pushes when setting tochange', async () => {
-    const { getByTestId } = render(testPushList());
+    const { getByTestId } = render(testPushList(), { legacyRoot: true });
 
     expect(await pushCount()).toHaveLength(2);
 
@@ -223,7 +225,9 @@ describe('PushList', () => {
   });
 
   test('should load N more pushes when click next N', async () => {
-    const { getByTestId, getAllByTestId } = render(testPushList());
+    const { getByTestId, getAllByTestId } = render(testPushList(), {
+      legacyRoot: true,
+    });
     const nextNUrl = (count) =>
       getProjectUrl(`/push/?full=true&count=${count + 1}&push_timestamp__lte=`);
     const clickNext = (count) =>
@@ -272,7 +276,7 @@ describe('PushList', () => {
   });
 
   test('jobs should have fields required for retriggers', async () => {
-    const { getByText } = render(testPushList());
+    const { getByText } = render(testPushList(), { legacyRoot: true });
     const jobEl = await waitFor(() => getByText('yaml'));
     const jobInstance = findJobInstance(jobEl.getAttribute('data-job-id'));
     const { job } = jobInstance.props;