refactor: upgrade React Router to v6 (#1954)

Author: damianstasik

jsconfig.json

@@ -1,4 +1,7 @@
 {
+  "compilerOptions": {
+    "experimentalDecorators": true
+  },
   "typeAcquisition": {
       "include": [
           "jest"

package-lock.json

@@ -47,7 +47,6 @@
     "express": "4.18.1",
     "graphiql": "2.0.7",
     "graphql": "16.6.0",
-    "history": "4.10.1",
     "immutable": "4.1.0",
     "immutable-devtools": "0.1.5",
     "inquirer": "8.2.4",
@@ -68,8 +67,7 @@
     "react-helmet": "6.1.0",
     "react-json-view": "1.21.3",
     "react-popper-tooltip": "4.4.2",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
+    "react-router-dom": "6.4.1",
     "regenerator-runtime": "0.13.9",
     "semver": "7.3.7",
     "typescript": "4.8.2"
@@ -103,7 +101,6 @@
     "madge": "5.0.1",
     "marked": "4.0.10",
     "null-loader": "4.0.1",
-    "path-to-regexp": "3.2.0",
     "puppeteer": "18.0.5",
     "react-test-renderer": "16.13.1",
     "request": "2.88.2",

package.json

@@ -6,7 +6,7 @@
  * the root directory of this source tree.
  */
 import Position             from 'lib/Position';
-import PropTypes            from 'prop-types'
+import PropTypes            from 'lib/PropTypes'
 import React, { Component } from 'react';
 import styles               from 'components/Autocomplete/Autocomplete.scss';
 import SuggestionsList      from 'components/SuggestionsList/SuggestionsList.react';

src/components/Autocomplete/Autocomplete.react.js

@@ -7,7 +7,7 @@
  */
 import React      from 'react';
 import styles     from 'components/Chip/Chip.scss';
-import PropTypes  from 'prop-types'
+import PropTypes  from 'lib/PropTypes'
 import Icon       from 'components/Icon/Icon.react'
 
 let Chip = ({ value, onClose }) => (

src/components/Chip/Chip.react.js

@@ -5,13 +5,14 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import history from 'dashboard/history';
 import React   from 'react';
 import styles  from 'components/FourOhFour/FourOhFour.scss';
+import { withRouter } from 'lib/withRouter';
 
 const EMOJI_COUNT = 30;
 
-export default class FourOhFour extends React.Component {
+@withRouter
+class FourOhFour extends React.Component {
   constructor() {
     super();
 
@@ -51,10 +52,12 @@ export default class FourOhFour extends React.Component {
           <div className={styles.message}>Oh no, we can't find that page!</div>
 
           <div className={styles.back}>
-            <button type='button' onClick={() => history.goBack()}>Go back</button>
+            <button type='button' onClick={() => this.props.navigate(-1)}>Go back</button>
           </div>
         </div>
       </div>
     );
   }
 }
+
+export default FourOhFour;

src/components/FourOhFour/FourOhFour.react.js

@@ -23,7 +23,7 @@ const AppsMenu = ({ apps, current, height, onSelect, onPinClick }) => (
           return null;
         }
         return (
-          <Link to={{ pathname: html`/apps/${app.slug}/browser` }} key={app.slug} className={styles.menuRow} onClick={onSelect.bind(null, current.slug)}>
+          <Link to={html`/apps/${app.slug}/browser`} key={app.slug} className={styles.menuRow} onClick={onSelect.bind(null, current.slug)}>
             <span>{app.name}</span>
             <AppBadge production={app.production} />
           </Link>

src/components/Sidebar/AppsMenu.react.js

@@ -9,17 +9,17 @@ import PropTypes from 'lib/PropTypes';
 import React     from 'react';
 import Icon      from 'components/Icon/Icon.react';
 import styles    from 'components/Toolbar/Toolbar.scss';
-import history   from 'dashboard/history';
-
-const goBack = () => history.goBack();
+import { useNavigate, useNavigationType, NavigationType } from 'react-router-dom';
 
 let Toolbar = (props) => {
+  const action = useNavigationType();
+  const navigate = useNavigate();
   let backButton;
-  if ((props.relation || (props.filters && props.filters.size)) &&  history.action !== 'POP') {
+  if ((props.relation || (props.filters && props.filters.size)) && action !== NavigationType.Pop) {
     backButton = (
       <a
         className={styles.iconButton}
-        onClick={goBack}
+        onClick={() => navigate(-1)}
       >
         <Icon
           width={32}

src/components/Toolbar/Toolbar.react.js

@@ -28,6 +28,7 @@ import stylesTable               from 'components/Table/Table.scss';
 import subscribeTo               from 'lib/subscribeTo';
 import Toolbar                   from 'components/Toolbar/Toolbar.react';
 import baseStyles                from 'stylesheets/base.scss';
+import { withRouter } from 'lib/withRouter';
 
 let buildFriendlyName = (query) => {
   let name = [query.source];
@@ -38,8 +39,8 @@ let buildFriendlyName = (query) => {
   return name.join(' ');
 };
 
-export default
 @subscribeTo('AnalyticsQuery', 'customQueries')
+@withRouter
 class Explorer extends DashboardView {
   constructor() {
     super();
@@ -547,3 +548,5 @@ class Explorer extends DashboardView {
     );
   }
 }
+
+export default Explorer;

src/dashboard/Analytics/Explorer/Explorer.react.js

@@ -8,30 +8,33 @@
 import React          from 'react';
 import AppSelector    from 'dashboard/AppSelector.react';
 import AppsManager    from 'lib/AppsManager';
-import history        from 'dashboard/history';
 import { CurrentApp } from 'context/currentApp';
+import { Outlet, useNavigate , useParams} from 'react-router-dom';
 
-class AppData extends React.Component {
-  render() {
-    if (this.props.params.appId === '_') {
-      return <AppSelector />;
-    }
-    //Find by name to catch edge cases around escaping apostrophes in URLs
-    let current = AppsManager.findAppBySlugOrName(this.props.params.appId);
-    if (current) {
-      current.setParseKeys();
-    } else {
-      history.replace('/apps');
-      return <div />;
-    }
-    return (
-      <CurrentApp.Provider value={current}>
-        <div>
-          {this.props.children}
-        </div>
-      </CurrentApp.Provider>
-    );
+
+function AppData() {
+  const navigate = useNavigate();
+  const params = useParams();
+
+  if (params.appId === '_') {
+    return <AppSelector />;
+  }
+
+  // Find by name to catch edge cases around escaping apostrophes in URLs
+  let current = AppsManager.findAppBySlugOrName(params.appId);
+
+  if (current) {
+    current.setParseKeys();
+  } else {
+    navigate('/apps', { replace: true });
+    return <div />;
   }
+
+  return (
+    <CurrentApp.Provider value={current}>
+      <Outlet />
+    </CurrentApp.Provider>
+  );
 }
 
 export default AppData;