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;

src/dashboard/AppData.react.js

@@ -8,13 +8,14 @@
 import AppsManager from 'lib/AppsManager';
 import Dropdown    from 'components/Dropdown/Dropdown.react';
 import Field       from 'components/Field/Field.react';
-import history     from 'dashboard/history';
 import Label       from 'components/Label/Label.react';
 import Modal       from 'components/Modal/Modal.react';
 import Option      from 'components/Dropdown/Option.react';
 import React       from 'react';
+import { withRouter } from 'lib/withRouter';
 
-export default class AppSelector extends React.Component {
+@withRouter
+class AppSelector extends React.Component {
   constructor(props) {
     super(props);
     let apps = AppsManager.apps();
@@ -25,12 +26,12 @@ export default class AppSelector extends React.Component {
   }
 
   handleConfirm() {
-    let newPath = location.pathname.replace(/\/_(\/|$)/, '/' + this.state.slug + '/');
-    history.push(newPath);
+    let newPath = this.location.pathname.replace(/\/_(\/|$)/, '/' + this.state.slug + '/');
+    this.props.navigate(newPath);
   }
 
   handleCancel() {
-    history.push('/apps');
+    this.props.navigate('/apps');
   }
 
   render() {
@@ -58,3 +59,5 @@ export default class AppSelector extends React.Component {
     );
   }
 }
+
+export default AppSelector;

src/dashboard/AppSelector.react.js

@@ -7,7 +7,6 @@
  */
 import AppsManager   from 'lib/AppsManager';
 import FlowFooter    from 'components/FlowFooter/FlowFooter.react';
-import history       from 'dashboard/history';
 import html          from 'lib/htmlString';
 import Icon          from 'components/Icon/Icon.react';
 import joinWithFinal from 'lib/joinWithFinal';
@@ -17,6 +16,8 @@ import React         from 'react';
 import styles        from 'dashboard/Apps/AppsIndex.scss';
 import baseStyles    from 'stylesheets/base.scss';
 import AppBadge      from 'components/AppBadge/AppBadge.react';
+import { withRouter } from 'lib/withRouter';
+import { useNavigate } from 'react-router-dom';
 
 function dash(value, content) {
   if (value === undefined) {
@@ -64,7 +65,8 @@ let AppCard = ({
   app,
   icon,
 }) => {
-  let canBrowse = app.serverInfo.error ? null : () => history.push(html`/apps/${app.slug}/browser`);
+  const navigate = useNavigate();
+  let canBrowse = app.serverInfo.error ? null : () => navigate(html`/apps/${app.slug}/browser`);
   let versionMessage = app.serverInfo.error ?
     <div className={styles.serverVersion}>Server not reachable: <span className={styles.ago}>{app.serverInfo.error.toString()}</span></div>:
     <div className={styles.serverVersion}>
@@ -88,7 +90,8 @@ let AppCard = ({
   </li>
 }
 
-export default class AppsIndex extends React.Component {
+@withRouter
+class AppsIndex extends React.Component {
   constructor() {
     super();
     this.state = { search: '' };
@@ -99,7 +102,7 @@ export default class AppsIndex extends React.Component {
   componentWillMount() {
     if (AppsManager.apps().length === 1) {
       const [app] = AppsManager.apps();
-      history.push(`/apps/${app.slug}/browser`);
+      this.props.navigate(`/apps/${app.slug}/browser`);
       return;
     }
     document.body.addEventListener('keydown', this.focusField);
@@ -169,3 +172,5 @@ export default class AppsIndex extends React.Component {
     );
   }
 }
+
+export default AppsIndex;