* Error: A <Route> is only ever to be used as the child of <Routes> e…

…lement, never rendered directly. Please wrap your <Route> in a <Routes>. * Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app. See https://reactrouter.com/docs/en/v6/upgrading/v5, and therein linked https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f * BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. * Module not found: Error: Can't resolve 'os' in '/home/jdanek/repos/qpid/qpid-dispatch/console/react/node_modules/rhea/lib' * facebook/create-react-app#11756 * downgraded and filled amqp/rhea#379
jiridanek · Feb 13, 2022 · 8b9e6ca · 8b9e6ca
1 parent 1b7cb6f
commit 8b9e6ca
Show file tree

Hide file tree

Showing 10 changed files with 25,841 additions and 14,034 deletions.
diff --git a/console/react/package-lock.json b/console/react/package-lock.json
diff --git a/console/react/package.json b/console/react/package.json
@@ -66,7 +66,7 @@
     "browserslist": "^4.19.1",
     "jest-axe": "^5.0.1",
     "prettier": "^2.5.1",
-    "react-scripts": "^5.0.0",
+    "react-scripts": "^4.0.3",
     "typescript": "^4.5.5"
   }
 }
diff --git a/console/react/src/App.js b/console/react/src/App.js
@@ -18,7 +18,8 @@ under the License.
 */
 
 import React, { Component } from "react";
-import { HashRouter as Router, Route } from "react-router-dom";
+import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
+import { createHashHistory } from "history";
 
 import "@patternfly/patternfly/patternfly.css";
 import "@patternfly/patternfly/patternfly-addons.css";
@@ -28,26 +29,22 @@ import "@patternfly/patternfly/components/Nav/nav.css";
 import { QDRService } from "./common/qdrService";
 import "./App.css";
 import PageLayout from "./overview/dashboard/layout";
-class App extends Component {
-  state = {};
-
-  render() {
-    // 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
-    return (
-      <Router>
-        <div className="App pf-m-redhat-font">
-          <Route
-            path="/"
-            render={props => (
-              <PageLayout service={service} {...props} config={this.props.config} />
-            )}
-          />
-        </div>
-      </Router>
-    );
-  }
+
+function App(props) {
+
+  // service is passed in to make testing easier
+  let service = new QDRService();
+
+  // also, a router is used here to provide PageLayout with a history property
+  let history = createHashHistory({ window });
+
+  return (
+    <HistoryRouter history={history}>
+      <div className="App pf-m-redhat-font">
+        <PageLayout service={service} {...props} history={history} config={props.config}/>
+      </div>
+    </HistoryRouter>
+  );
 }
 
 export default App;
diff --git a/console/react/src/details/createTablePage.js b/console/react/src/details/createTablePage.js
@@ -43,7 +43,7 @@ import {
 
 import { cellWidth } from "@patternfly/react-table";
 import { Card, CardBody } from "@patternfly/react-core";
-import { Redirect } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 import { dataMap as detailsDataMap, defaultData } from "./entityData";
 
 class CreateTablePage extends React.Component {
@@ -263,7 +263,7 @@ class CreateTablePage extends React.Component {
   render() {
     if (this.state.redirect) {
       return (
-        <Redirect
+        <Navigate
           to={{
             pathname: this.state.redirectPath,
             state: this.state.redirectState

diff --git a/console/react/src/details/detailsTablePage.js b/console/react/src/details/detailsTablePage.js
@@ -37,7 +37,7 @@ import {
   TableVariant
 } from "@patternfly/react-table";
 import { Card, CardBody } from "@patternfly/react-core";
-import { Redirect } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 import { dataMap } from "../overview/entityData";
 import { dataMap as detailsDataMap, defaultData } from "./entityData";
 import Updated from "../common/updated";
@@ -171,7 +171,7 @@ class DetailsTablePage extends React.Component {
   render() {
     if (this.state.redirect) {
       return (
-        <Redirect
+        <Navigate
           to={{
             pathname: this.state.redirectPath,
             state: this.state.redirectState

diff --git a/console/react/src/details/entityListTable.js b/console/react/src/details/entityListTable.js
@@ -27,7 +27,7 @@ import {
   TableVariant
 } from "@patternfly/react-table";
 import { Button, Pagination } from "@patternfly/react-core";
-import { Redirect } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 import TableToolbar from "../common/tableToolbar";
 import { dataMap, defaultData } from "./entityData";
 import EmptyTable from "./emptyTablePage";
@@ -402,7 +402,7 @@ class EntityListTable extends React.Component {
 
     if (this.state.redirect) {
       return (
-        <Redirect
+        <Navigate
           to={{
             pathname: this.dataSource.detailPath || "/details",
             state: this.state.redirectState

diff --git a/console/react/src/details/updateTablePage.js b/console/react/src/details/updateTablePage.js
@@ -43,7 +43,7 @@ import {
 
 import { cellWidth } from "@patternfly/react-table";
 import { Card, CardBody } from "@patternfly/react-core";
-import { Redirect } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 import { dataMap as detailsDataMap, defaultData } from "./entityData";
 import { utils } from "../common/amqp/utilities";
 
@@ -270,7 +270,7 @@ class UpdateTablePage extends React.Component {
   render() {
     if (this.state.redirect) {
       return (
-        <Redirect
+        <Navigate
           to={{
             pathname: this.state.redirectPath,
             state: this.state.redirectState

diff --git a/console/react/src/overview/dashboard/layout.js b/console/react/src/overview/dashboard/layout.js
@@ -36,7 +36,8 @@ import {
   PageSidebar
 } from "@patternfly/react-core";
 
-import { HashRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom";
+import { Routes, Route, Link, Navigate } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 
 import accessibleStyles from "@patternfly/patternfly/utilities/Accessibility/accessibility.css";
 import { css } from "@patternfly/react-styles";
@@ -61,6 +62,25 @@ import img_avatar from "../../assets/img_avatar.svg";
 
 const SUPPRESS_NOTIFICATIONS = "noNotify";
 
+// Wrapper that injects the react-router-dom hooks into a class-based component
+// https://github.com/remix-run/react-router/blob/main/docs/faq.md
+function withRouter(Component) {
+  function ComponentWithRouterProp(props) {
+    let location = useLocation();
+    let navigate = useNavigate();
+    let params = useParams();
+    return (
+      <Component
+        {...props}
+        router={{ location, navigate, params }} // intended usage
+        location={location} navigate={navigate} params={params} // what the code currently expects
+      />
+    );
+  }
+
+  return ComponentWithRouterProp;
+}
+
 class PageLayout extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -240,14 +260,14 @@ class PageLayout extends React.PureComponent {
             }
             return false;
           });
-          this.props.history.replace(connectPath);
           this.setState({
             user,
             activeItem,
             activeGroup,
             connected: true,
             isConnectFormOpen: false
           });
+          this.props.navigate(connectPath);
         }
       );
     }
@@ -426,29 +446,21 @@ class PageLayout extends React.PureComponent {
     };
 
     // don't allow access to this component unless we are logged in
-    const PrivateRoute = ({ component: Component, path: rpath, ...more }) => (
-      <Route
-        path={rpath}
-        {...(more.exact ? "exact" : "")}
-        render={props =>
-          this.state.connected ? (
-            <Component
-              service={this.service}
-              handleAddNotification={this.handleAddNotification}
-              {...props}
-              {...more}
-            />
-          ) : (
-            <Redirect
-              to={{
-                pathname: `/login${this.state.connecting ? "/connecting" : ""}`,
-                state: { from: props.location }
-              }}
-            />
-          )
-        }
-      />
-    );
+    // 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 connectForm = () => {
       return this.state.isConnectFormOpen ? (
@@ -471,78 +483,87 @@ class PageLayout extends React.PureComponent {
     const redirectAfterConnect = () => {
       if (this.state.connected && this.redirect) {
         this.redirect = false;
-        return <Redirect to={this.props.location.pathname} />;
+        return <Navigate to={this.props.location.pathname} />;
       } else {
         return <React.Fragment />;
       }
     };
 
     return (
-      <Router>
+      <Page
+        header={Header}
+        sidebar={sidebar(PageNav)}
+        onPageResize={this.onPageResize}
+        skipToContent={PageSkipToContent}
+        mainContainerId={pageId}
+      >
         {redirectAfterConnect()}
-        <Page
-          header={Header}
-          sidebar={sidebar(PageNav)}
-          onPageResize={this.onPageResize}
-          skipToContent={PageSkipToContent}
-          mainContainerId={pageId}
-        >
-          {connectForm()}
-          <Switch>
-            <PrivateRoute
-              path="/"
-              exact
-              throughputChartData={this.throughputChartData}
-              inflightChartData={this.inflightChartData}
-              component={DashboardPage}
-            />
-            <PrivateRoute
-              path="/dashboard"
-              throughputChartData={this.throughputChartData}
-              inflightChartData={this.inflightChartData}
-              component={DashboardPage}
-            />
-            <PrivateRoute path="/overview/:entity" component={OverviewPage} />
-            <PrivateRoute
-              path="/details"
-              schema={this.schema}
-              component={DetailsTablePage}
-            />
-            <PrivateRoute path="/topology" component={TopologyPage} />
-            <PrivateRoute path="/flow" component={MessageFlowPage} />
-            <PrivateRoute path="/logs" component={LogDetails} />
-            <PrivateRoute path="/entities" component={EntitiesPage} />
-            <PrivateRoute path="/schema" schema={this.schema} component={SchemaPage} />
-            <Route
-              path="/login"
-              render={props => (
-                <ConnectPage
-                  {...props}
-                  connecting={this.state.connecting}
-                  connectingTitle={
-                    this.state.connecting ? "Attempting to auto connect" : undefined
-                  }
-                  connectingMessage={
-                    this.state.connecting
-                      ? `Trying to connect to ${window.location.hostname}:${window.location.port}`
-                      : undefined
-                  }
-                  fromPath={"/"}
-                  service={this.service}
-                  config={this.props.config}
-                  handleConnect={this.handleConnect}
-                  handleAddNotification={this.handleAddNotification}
-                />
-              )}
-            />
-          </Switch>
-        </Page>
-      </Router>
+        {connectForm()}
+        <Routes>
+          <Route
+            exact path={"/"}
+            element={
+              <RequireLogin
+                throughputChartData={this.throughputChartData}
+                inflightChartData={this.inflightChartData}
+                component={DashboardPage}
+              />
+            }
+          />
+          <Route
+            path={"/dashboard"}
+            element={
+              <RequireLogin
+                throughputChartData={this.throughputChartData}
+                inflightChartData={this.inflightChartData}
+                component={DashboardPage}
+              />
+            }
+          />
+          <Route path="/overview/:entity" element={<RequireLogin component={OverviewPage}/>}/>
+          <Route
+            path="/details"
+            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="/login/*"
+            element={
+              <ConnectPage
+                {...this.props}
+                connecting={this.state.connecting}
+                connectingTitle={
+                  this.state.connecting ? "Attempting to auto connect" : undefined
+                }
+                connectingMessage={
+                  this.state.connecting
+                    ? `Trying to connect to ${window.location.hostname}:${window.location.port}`
+                    : undefined
+                }
+                fromPath={"/"}
+                service={this.service}
+                config={this.props.config}
+                handleConnect={this.handleConnect}
+                handleAddNotification={this.handleAddNotification}
+              />
+            }
+          />
+        </Routes>
+      </Page>
     );
   }
 }
 
-export default PageLayout;
+export default withRouter(PageLayout);
 
 const idle = (elapsed, callback) => {
   let timer;