DISPATCH-2352: deps(console): update dependencies and refactor the code (#1643)

* DISPATCH-2352: deps(console): update to react 18

* DISPATCH-2352: deps(console): update react router

* DISPATCH-2352: deps(console): update various other dependencies

Author: bartoval

console/react/babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

console/react/package-lock.json

@@ -3,23 +3,22 @@
   "version": "1.19.0",
   "private": true,
   "dependencies": {
-    "@patternfly/patternfly": "^4.183.1",
-    "@patternfly/react-charts": "^6.51.19",
-    "@patternfly/react-core": "^4.198.19",
-    "@patternfly/react-icons": "^4.49.19",
-    "@patternfly/react-styles": "^4.48.19",
-    "@patternfly/react-table": "^4.67.19",
-    "@patternfly/react-topology": "^4.45.19",
+    "@patternfly/patternfly": "^4.224.2",
+    "@patternfly/react-charts": "^6.94.19",
+    "@patternfly/react-core": "^4.276.8",
+    "@patternfly/react-icons": "^4.93.6",
+    "@patternfly/react-styles": "^4.92.6",
+    "@patternfly/react-table": "^4.113.0",
+    "@patternfly/react-topology": "^4.93.5",
     "d3": "^3.5.17",
     "d3-queue": "^3.0.7",
-    "express": "^4.17.3",
     "font-awesome": "^4.7.0",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-fontawesome": "^1.7.1",
-    "react-router-dom": "^6.2.2",
-    "rhea": "^3.0.0",
+    "react-router-dom": "^6.14.1",
+    "rhea": "^3.0.2",
     "topojson-client": "^3.1.0"
   },
   "scripts": {
@@ -58,15 +57,24 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.22.9",
     "@react-mock/localstorage": "^0.1.2",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.4",
-    "@types/jest": "^27.4.1",
-    "body-parser": "^1.19.2",
-    "browserslist": "^4.20.0",
-    "jest-axe": "^6.0.0",
-    "prettier": "^2.5.1",
-    "react-scripts": "^4.0.3",
-    "typescript": "^4.6.2"
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.3",
+    "body-parser": "^1.20.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.6.1",
+    "jest-axe": "^8.0.0",
+    "prettier": "^3.0.0",
+    "react-scripts": "^5.0.1"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(css)$": "identity-obj-proxy"
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!@patternfly/.*)"
+    ]
   }
 }

console/react/package.json

@@ -18,8 +18,7 @@ under the License.
 */
 
 import React from "react";
-import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
-import { createHashHistory } from "history";
+import { HashRouter } from "react-router-dom";
 
 import "@patternfly/patternfly/patternfly.css";
 import "@patternfly/patternfly/patternfly-addons.css";
@@ -31,19 +30,17 @@ import "./App.css";
 import PageLayout from "./overview/dashboard/layout";
 
 function App(props) {
-
   // service is passed in to make testing easier
   const service = new QDRService();
 
   // also, a router is used here to provide PageLayout with a history property
-  const history = createHashHistory({ window });
 
   return (
-    <HistoryRouter history={history}>
+    <HashRouter>
       <div className="App pf-m-redhat-font">
-        <PageLayout service={service} {...props} history={history} config={props.config}/>
+        <PageLayout service={service} {...props} config={props.config} />
       </div>
-    </HistoryRouter>
+    </HashRouter>
   );
 }
 

console/react/src/App.js

@@ -18,7 +18,7 @@ under the License.
 */
 
 import Correlator from "./correlator";
-import rhea from "rhea";
+import rhea from "rhea/dist/rhea-umd";
 
 class ConnectionManager {
   constructor(protocol) {

console/react/src/common/amqp/connection.js

@@ -18,7 +18,7 @@ under the License.
 */
 
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
 let config = { title: "Apache Qpid Dispatch Console" };
@@ -30,6 +30,8 @@ fetch("/config.json")
   .catch(error => {
     console.log("/config.json not found. Using default console title");
   })
-  .finally(() =>
-    ReactDOM.render(<App config={config} />, document.getElementById("root"))
-  );
+  .finally(() => {
+    const rootElement = document.getElementById("root");
+    const root = createRoot(rootElement);
+    root.render(<App config={config} />);
+  });

console/react/src/index.js

@@ -18,7 +18,7 @@ under the License.
 */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import AlertList from "./alertList";
 
 it("renders the AlertList component", async () => {
@@ -33,12 +33,14 @@ it("renders the AlertList component", async () => {
   expect(queryByLabelText("alert-close-button")).toBeNull();
 
   // add an alert
-  ref.addAlert("info", "testing");
+  await waitFor(() => {
+    ref.addAlert("info", "testing");
+  });
   // the alert close button should now be there
   expect(getByLabelText("alert-close-button")).toBeInTheDocument();
 
   const alert = {
-    key: 0
+    key: 0,
   };
   // hide the alert
   ref.hideAlert(alert);

console/react/src/overview/dashboard/alertList.test.js

@@ -33,7 +33,7 @@ import {
   NavExpandable,
   NavItem,
   NavList,
-  PageSidebar
+  PageSidebar,
 } from "@patternfly/react-core";
 
 import { Routes, Route, Link, Navigate } from "react-router-dom";
@@ -73,7 +73,9 @@ function withRouter(Component) {
       <Component
         {...props}
         router={{ location, navigate, params }} // intended usage
-        location={location} navigate={navigate} params={params} // what the code currently expects
+        location={location}
+        navigate={navigate}
+        params={params} // what the code currently expects
       />
     );
   }
@@ -95,7 +97,7 @@ class PageLayout extends React.PureComponent {
       isMobileView: false,
       user: "anonymous",
       timePeriod: 60,
-      suppress: JSON.parse(localStorage.getItem(SUPPRESS_NOTIFICATIONS)) || false
+      suppress: JSON.parse(localStorage.getItem(SUPPRESS_NOTIFICATIONS)) || false,
     };
     this.isDropdownOpen = false;
 
@@ -108,10 +110,10 @@ class PageLayout extends React.PureComponent {
         { name: "addresses", pre: true },
         { name: "links", pre: true },
         { name: "connections", pre: true },
-        { name: "logs", pre: true }
+        { name: "logs", pre: true },
       ],
       visualizations: [{ name: "topology" }, { name: "flow", title: "Message flow" }],
-      details: [{ name: "entities" }, { name: "schema" }]
+      details: [{ name: "entities" }, { name: "schema" }],
     };
     this.state.connecting = true;
     this.tryInitialConnect();
@@ -138,9 +140,7 @@ class PageLayout extends React.PureComponent {
   };
 
   handleIdleTimeout = () => {
-    this.props.history.replace(
-      `${this.props.location.pathname}${this.props.location.search}`
-    );
+    this.props.navigate(`${this.props.location.pathname}${this.props.location.search}`);
   };
 
   tryInitialConnect = () => {
@@ -149,15 +149,15 @@ class PageLayout extends React.PureComponent {
       address: window.location.hostname,
       port: window.location.port === "" ? defaultPort : window.location.port,
       timeout: 2000,
-      reconnect: true
+      reconnect: true,
     };
     this.service.connect(connectOptions).then(
       () => {
         this.handleConnect("/dashboard");
       },
       () => {
         //this.service.disconnect();
-        this.props.history.replace("/");
+        this.props.navigate("/");
         this.setState({ connecting: false });
       }
     );
@@ -187,10 +187,10 @@ class PageLayout extends React.PureComponent {
       if (this.lastLocation) {
         to = this.lastLocation;
       }
-      this.props.history.push(to);
+      this.props.navigate(to);
       this.setState({
         isConnectFormOpen: false,
-        connected: true
+        connected: true,
       });
     }
   };
@@ -265,7 +265,7 @@ class PageLayout extends React.PureComponent {
             activeItem,
             activeGroup,
             connected: true,
-            isConnectFormOpen: false
+            isConnectFormOpen: false,
           });
           this.props.navigate(connectPath);
         }
@@ -276,7 +276,7 @@ class PageLayout extends React.PureComponent {
   onNavSelect = result => {
     this.setState({
       activeItem: result.itemId,
-      activeGroup: result.groupId
+      activeGroup: result.groupId,
     });
   };
 
@@ -290,19 +290,19 @@ class PageLayout extends React.PureComponent {
 
   onNavToggleDesktop = () => {
     this.setState({
-      isNavOpenDesktop: !this.state.isNavOpenDesktop
+      isNavOpenDesktop: !this.state.isNavOpenDesktop,
     });
   };
 
   onNavToggleMobile = () => {
     this.setState({
-      isNavOpenMobile: !this.state.isNavOpenMobile
+      isNavOpenMobile: !this.state.isNavOpenMobile,
     });
   };
 
   onPageResize = ({ mobileView, windowSize }) => {
     this.setState({
-      isMobileView: mobileView
+      isMobileView: mobileView,
     });
   };
 
@@ -322,7 +322,7 @@ class PageLayout extends React.PureComponent {
         message,
         timestamp,
         severity,
-        silent
+        silent,
       });
     }
   };
@@ -447,20 +447,24 @@ class PageLayout extends React.PureComponent {
 
     // don't allow access to this component unless we are logged in
     // https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f
-    const RequireLogin = ( props ) => {
-      const { component: Component, ...more } = props
-
-      return this.state.connected ? <Component
-        service={this.service}
-        handleAddNotification={this.handleAddNotification}
-        {...this.props}
-        {...more}
-        location={this.props.history.location}
-      /> : <Navigate
-        to={`/login${this.state.connecting ? "/connecting" : ""}`}
-        state={{ from: this.props.history.location }}
-      />;
-    }
+    const RequireLogin = props => {
+      const { component: Component, ...more } = props;
+
+      return this.state.connected ? (
+        <Component
+          service={this.service}
+          handleAddNotification={this.handleAddNotification}
+          {...this.props}
+          {...more}
+          location={this.props.location}
+        />
+      ) : (
+        <Navigate
+          to={`/login${this.state.connecting ? "/connecting" : ""}`}
+          state={{ from: this.props.location }}
+        />
+      );
+    };
 
     const connectForm = () => {
       return this.state.isConnectFormOpen ? (
@@ -501,7 +505,8 @@ class PageLayout extends React.PureComponent {
         {connectForm()}
         <Routes>
           <Route
-            exact path={"/"}
+            exact
+            path={"/"}
             element={
               <RequireLogin
                 throughputChartData={this.throughputChartData}
@@ -520,21 +525,22 @@ class PageLayout extends React.PureComponent {
               />
             }
           />
-          <Route path="/overview/:entity" element={<RequireLogin component={OverviewPage}/>}/>
+          <Route
+            path="/overview/:entity"
+            element={<RequireLogin component={OverviewPage} />}
+          />
           <Route
             path="/details"
-            element={
-              <RequireLogin
-                schema={this.schema}
-                component={DetailsTablePage}
-              />
-            }
+            element={<RequireLogin schema={this.schema} component={DetailsTablePage} />}
+          />
+          <Route path="/topology" element={<RequireLogin component={TopologyPage} />} />
+          <Route path="/flow" element={<RequireLogin component={MessageFlowPage} />} />
+          <Route path="/logs" element={<RequireLogin component={LogDetails} />} />
+          <Route path="/entities" element={<RequireLogin component={EntitiesPage} />} />
+          <Route
+            path="/schema"
+            element={<RequireLogin schema={this.schema} component={SchemaPage} />}
           />
-          <Route path="/topology" element={<RequireLogin component={TopologyPage}/>}/>
-          <Route path="/flow" element={<RequireLogin component={MessageFlowPage}/>}/>
-          <Route path="/logs" element={<RequireLogin component={LogDetails}/>}/>
-          <Route path="/entities" element={<RequireLogin component={EntitiesPage}/>}/>
-          <Route path="/schema" element={<RequireLogin schema={this.schema} component={SchemaPage}/>}/>
           <Route
             path="/login/*"
             element={