Upgrade to React 18 (#1173)

Upgrade to React 18.

## Which problem is this PR solving?
- Resolves #998

## Short description of the changes
- Upgrade to React 18

Signed-off-by: Sergio-Mira <sergio.mira@zendesk.com>

packages/jaeger-ui/package.json

@@ -27,10 +27,10 @@
     "bluebird": "^3.5.0",
     "customize-cra": "0.2.9",
     "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.2.0",
-    "enzyme-to-json": "^3.3.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "enzyme-to-json": "^3.6.2",
     "http-proxy-middleware": "^2.0.6",
-    "jest-junit": "^14.0.1",
+    "jest-junit": "^15.0.0",
     "less": "3.13.1",
     "less-loader": "4.1.0",
     "less-vars-to-js": "^1.2.1",
@@ -85,10 +85,10 @@
     "prop-types": "^15.5.10",
     "query-string": "^6.3.0",
     "raven-js": "^3.22.1",
-    "react": "^16.14.0",
-    "react-circular-progressbar": "^2.0.3",
-    "react-dimensions": "^1.3.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.2.0",
+    "react-circular-progressbar": "^2.1.0",
+    "react-dimensions": "^1.3.1",
+    "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
     "react-helmet": "^6.1.0",
     "react-icons": "2.2.7",

packages/jaeger-ui/src/index.js

@@ -13,13 +13,13 @@
 // limitations under the License.
 
 // site-prefix.js must be the first import of the main webpack entrypoint
-// becaue it configures the webpack publicPath.
+// because it configures the webpack publicPath.
 /* eslint-disable import/first */
 import './site-prefix';
 
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { document } from 'global';
 
 import JaegerUIApp from './components/App';
@@ -36,20 +36,20 @@ import 'u-basscss/css/typography.css';
 
 const UI_ROOT_ID = 'jaeger-ui-root';
 
+const root = createRoot(document.getElementById(UI_ROOT_ID));
+
 if (trackingContext) {
   trackingContext.context(() => {
-    ReactDOM.render(
+    root.render(
       <BrowserRouter>
         <JaegerUIApp />
-      </BrowserRouter>,
-      document.getElementById(UI_ROOT_ID)
+      </BrowserRouter>
     );
   });
 } else {
-  ReactDOM.render(
+  root.render(
     <BrowserRouter>
       <JaegerUIApp />
-    </BrowserRouter>,
-    document.getElementById(UI_ROOT_ID)
+    </BrowserRouter>
   );
 }

packages/jaeger-ui/src/setupTests.js

@@ -20,7 +20,7 @@ rafPolyfill();
 
 /* eslint-disable import/no-extraneous-dependencies */
 const Enzyme = require('enzyme');
-const EnzymeAdapter = require('enzyme-adapter-react-16');
+const EnzymeAdapter = require('@wojtekmaj/enzyme-adapter-react-17');
 const createSerializer = require('enzyme-to-json').createSerializer;
 
 Enzyme.configure({ adapter: new EnzymeAdapter() });