feat: update react router

cerberus-dashboard/package.json

@@ -19,25 +19,26 @@
  "license": "Apache-2.0",
  "dependencies": {
  "axios": "^0.21.1",
+ "connected-react-router": "^6.9.1",
  "cookie": "0.4.1",
  "downloadjs": "1.4.7",
  "handlebars": "^4.7.7",
+ "history": "^4.10.1",
  "humps": "2.0.1",
  "klona": "^2.0.4",
  "lodash": "^4.17.21",
  "loglevel": "1.7.1",
- "node-sass": "5.0.0",
  "prop-types": "^15.7.2",
- "react": "15.7",
+ "react": "^16.14.0",
  "react-addons-create-fragment": "15.6.2",
  "react-addons-shallow-compare": "15.6.3",
  "react-copy-to-clipboard": "5.0.3",
- "react-dom": "15.7.0",
+ "react-dom": "^16.14.0",
  "react-json-pretty": "^2.2.0",
  "react-paginate": "4.4.4",
- "react-redux": "5.1.2",
- "react-router": "^3.2.6",
- "react-router-redux": "4.0.8",
+ "react-redux": "^6.0.1",
+ "react-router": "^5.2.0",
+ "react-router-dom": "^5.2.0",
  "react-select": "1.3.0",
  "react-simple-file-input": "2.1.0",
  "react-transition-group": "2.9.0",
@@ -50,23 +51,22 @@
  "devDependencies": {
  "babel-core": "6.26.3",
  "babel-preset-stage-1": "6.24.1",
+ "bufferutil": "^4.0.3",
+ "canvas": "^2.7.0",
  "eslint-html-reporter": "^0.7.4",
  "eslint-loader": "4.0.2",
  "eslint-plugin-react": "7.22.0",
  "estraverse-fb": "1.3.2",
- "react-scripts": "4.0.3",
- "redux-devtools": "3.7.0",
- "bufferutil": "^4.0.3",
- "utf-8-validate": "^5.0.4",
- "typescript": "^4.2.3",
- "sass": "^1.32.8",
  "fibers": "^5.0.0",
- "canvas": "^2.7.0",
+ "react-scripts": "^4.0.3",
+ "redux-devtools": "3.7.0",
+ "sass": "^1.32.11",
+ "sockjs-client": "^1.5.1",
  "ts-node": "^9.1.1",
- "webpack-plugin-serve": "^1.3.0",
- "webpack-hot-middleware": "^2.25.0",
  "type-fest": "~0.21.3",
- "sockjs-client": "^1.4.0"
+ "utf-8-validate": "^5.0.4",
+ "webpack-hot-middleware": "^2.25.0",
+ "webpack-plugin-serve": "^1.4.1"
  },
  "browserslist": {
  "production": [

cerberus-dashboard/src/actions/appActions.js

@@ -15,7 +15,6 @@
  */
 
 import React from 'react';
-import { hashHistory } from 'react-router';
 import axios from 'axios';
 import * as constants from '../constants/actions';
 import * as cms from '../constants/cms';
@@ -26,6 +25,7 @@ import CreateSDBoxForm from '../components/CreateSDBoxForm/CreateSDBoxForm';
 import { initCreateNewSDB } from './createSDBoxActions';
 import ApiError from '../components/ApiError/ApiError';
 import * as messengerActions from './messengerActions';
+import { push } from 'connected-react-router';
 
 import { getLogger } from "../utils/logger";
 var log = getLogger('application-actions');
@@ -149,7 +149,7 @@ export function loadManageSDBPage(id, path, cerberusAuthToken) {
  dispatch(mSDBActions.resetToInitialState());
  dispatch(mSDBActions.fetchSDBDataFromCMS(id, cerberusAuthToken));
  dispatch(mSDBActions.updateNavigatedPath(path, cerberusAuthToken));
- hashHistory.push(`/manage-safe-deposit-box/${id}`);
+ dispatch(push(`/manage-safe-deposit-box/${id}`));
  };
 }
 

cerberus-dashboard/src/actions/authenticationActions.js

@@ -16,7 +16,6 @@
 
 import React from 'react';
 import environmentService from '../service/EnvironmentService';
-import { hashHistory } from 'react-router';
 import axios from 'axios';
 import * as constants from '../constants/actions';
 import * as appActions from './appActions';
@@ -30,6 +29,7 @@ import * as modalActions from './modalActions';
 import * as manageSDBActions from './manageSafetyDepositBoxActions';
 import * as workerTimers from 'worker-timers';
 import { getLogger } from "../utils/logger";
+import { push } from 'connected-react-router';
 
 var log = getLogger('authentication-actions');
 
@@ -129,7 +129,7 @@ function handleUserLogin(response, dispatch, redirectToWelcome = true) {
  dispatch(loginUserSuccess(response.data, sessionExpirationCheckIntervalId));
  dispatch(appActions.fetchSideBarData(token));
  if (redirectToWelcome) {
- hashHistory.push("/");
+ dispatch(push("/"));
  }
 }
 
@@ -305,7 +305,7 @@ export function refreshAuth(token, redirectPath = '/', redirect = true) {
  workerTimers.setTimeout(function () {
  handleUserLogin(response, dispatch, false);
  if (redirect) {
- hashHistory.push(redirectPath);
+ dispatch(push(redirectPath));
  }
  }, 2000);
 
@@ -315,7 +315,7 @@ export function refreshAuth(token, redirectPath = '/', redirect = true) {
  dispatch(modalActions.clearAllModals());
  log.error('Failed to login user', response);
  dispatch(resetAuthState());
- hashHistory.push('dashboard/#/login');
+ dispatch(push('dashboard/#/login'));
  dispatch(messengerActions.addNewMessage(<ApiError message="Failed to refresh user token" response={response} />));
  });
  };
@@ -340,7 +340,7 @@ export function logoutUser(token) {
  dispatch(removeSessionWarningTimeout());
  dispatch(resetAuthState());
  dispatch(headerActions.mouseOutUsername());
- hashHistory.push('/login');
+ dispatch(push('/login'));
  })
  .catch(function ({ response }) {
  log.error('Failed to logout user', response);

cerberus-dashboard/src/actions/createSDBoxActions.js

@@ -18,13 +18,13 @@ import React from 'react';
 import axios from 'axios';
 import * as constants from '../constants/actions';
 import * as cms from '../constants/cms';
-import { hashHistory } from 'react-router';
 import environmentService from '../service/EnvironmentService';
 import * as messengerActions from './messengerActions';
 import * as modalActions from './modalActions';
 import * as appActions from './appActions';
 import ApiError from '../components/ApiError/ApiError';
 import * as humps from 'humps';
+import { push } from 'connected-react-router';
 
 import { getLogger } from "../utils/logger";
 var log = getLogger('create-new-sdb-actions');
@@ -49,7 +49,7 @@ export function submitCreateNewSDB(data, token) {
  dispatch(clearSecureData());
  dispatch(resetVersionBrowserState());
  dispatch(appActions.fetchSideBarData(token));
- hashHistory.push(`/manage-safe-deposit-box/${response.data.id}`);
+ dispatch(push(`/manage-safe-deposit-box/${response.data.id}`));
  })
  .catch(function ({ response }) {
  log.error('Failed to create new SDB', response);

cerberus-dashboard/src/actions/manageSafetyDepositBoxActions.js

@@ -22,8 +22,8 @@ import * as actions from '../constants/actions';
 import * as cms from '../constants/cms';
 import * as appActions from './appActions';
 import * as messengerActions from './messengerActions';
-import { hashHistory } from 'react-router';
 import * as modalActions from './modalActions';
+import { push } from 'connected-react-router';
 import ApiError from '../components/ApiError/ApiError';
 import ConfirmationBox from '../components/ConfirmationBox/ConfirmationBox';
 import downloadjs from 'downloadjs';
@@ -521,7 +521,7 @@ export function deleteSDB(sdbId, token) {
  dispatch(resetToInitialState());
  dispatch(resetVersionBrowserState());
  dispatch(appActions.fetchSideBarData(token));
- hashHistory.push('/');
+ dispatch(push('/'));
  })
  .catch(({ response }) => {
  log.error("Failed to delete SDB", response);

cerberus-dashboard/src/components/App/App.js

@@ -17,6 +17,7 @@
 import React from 'react';
 import { Component } from 'react';
 import { connect } from 'react-redux';
+import { Route, Switch } from 'react-router-dom';
 import axios from 'axios';
 import * as appActions from '../../actions/appActions';
 import Login from '../Login/Login';
@@ -26,6 +27,13 @@ import Messenger from '../Messenger/Messenger';
 import SideBar from '../SideBar/SideBar';
 import Footer from '../Footer/Footer';
 import './App.scss';
+import LandingView from "../LandingView/LandingView";
+import ManageSafeDepositBox from "../ManageSafeDepositBox/ManageSafeDepositBox";
+import SDBMetadataList from "../SDBMetadataList/SDBMetadataList";
+import NotFound from "../NotFound/NotFound";
+
+import {ConnectedRouter} from "connected-react-router";
+import { history } from '../../store/configureStore';
 
 /**
  * This is the main Component that loads the header, content div and footer
@@ -44,34 +52,44 @@ class App extends Component {
  axios.defaults.headers.common['X-Cerberus-Client'] = `Dashboard/${dashboardVersion}`;
 
  return (
- <div id='main-wrapper'>
- <Modal modalStack={modalStack} />
+ <ConnectedRouter history={history}>
+ <div id='main-wrapper'>
+ <Modal modalStack={modalStack} />
 
- {!isAuthenticated && <Login />}
- {(isAuthenticated || isSessionExpired) &&
- <div id='content-wrapper'>
- <Header userName={userName}
- displayUserContextMenu={displayUserContextMenu}
- dispatch={dispatch}
- cerberusAuthToken={cerberusAuthToken}
- isAdmin={isAdmin} />
- {isAuthenticated &&
- <div id="app-messenger-wrapper">
- <Messenger />
- </div>
- }
- <div id='content'>
- <SideBar />
- <div id='workspace'>
- <div id='workspace-wrapper'>
- {children}
+ {!isAuthenticated && <Login />}
+ {(isAuthenticated || isSessionExpired) &&
+ <div id='content-wrapper'>
+ <Header userName={userName}
+ displayUserContextMenu={displayUserContextMenu}
+ dispatch={dispatch}
+ cerberusAuthToken={cerberusAuthToken}
+ isAdmin={isAdmin} />
+ {isAuthenticated &&
+ <div id="app-messenger-wrapper">
+ <Messenger />
+ </div>
+ }
+ <div id='content'>
+ <SideBar />
+ <div id='workspace'>
+ <div id='workspace-wrapper'>
+ <Switch>
+ <Route
+ path="/manage-safe-deposit-box/:id"
+ component={ManageSafeDepositBox}
+ />
+ <Route path="/admin/sdb-metadata" component={SDBMetadataList} />
+ <Route path="/" exact component={LandingView} />
+ <Route path="*" component={NotFound} />
+ </Switch>
+ </div>
  </div>
  </div>
+ <Footer />
  </div>
- <Footer />
- </div>
- }
- </div>
+ }
+ </div>
+ </ConnectedRouter>
  );
  }
 }

cerberus-dashboard/src/components/Header/Header.js

@@ -16,13 +16,13 @@
 
 import React from 'react'
 import { Component } from 'react'
-import { hashHistory } from 'react-router'
 import * as headerActions from '../../actions/headerActions'
 import * as authActions from '../../actions/authenticationActions'
 import './Header.scss'
 import '../../assets/images/cerberus-logo-narrow-off-white.svg'
 import * as modalActions from '../../actions/modalActions'
 import ViewTokenModal from '../ViewTokenModal/ViewTokenModal'
+import { push } from 'connected-react-router';
 
 export default class Header extends Component {
 
@@ -31,7 +31,7 @@ export default class Header extends Component {
  <header id='header'>
  <div id='bottom-header'>
  <div id='header-logo' onClick={ function(dispatch) {
- hashHistory.push('/')
+ push('/')
  }.bind(this, this.props.dispatch)
  }></div>
  <div id='header-title' className='ncss-brand u-uppercase un-selectable'>Cerberus</div>
@@ -83,7 +83,7 @@ class UserBox extends Component {
  <div id='u-b-context-menu' className={this.props.displayUserContextMenu ? 'show-me-block' : 'hide-me'}
  onMouseEnter={this.handleMouseClickUserName}
  onMouseLeave={this.handleMouseLeaveUserMenuContext} >
- {isAdmin && <div className='context-menu-button' onClick={() => {hashHistory.push('/admin/sdb-metadata')}}>SDB Summary</div>}
+ {isAdmin && <div className='context-menu-button' onClick={() => {push('/admin/sdb-metadata')}}>SDB Summary</div>}
  <div className='context-menu-button' onClick={this.handleMouseClickViewToken}>View Token</div>
  <div className='context-menu-button' onClick={this.handleMouseClickLogout}>Logout</div>
  </div>

cerberus-dashboard/src/components/Login/Login.js

@@ -68,7 +68,7 @@ const mapStateToProps = state => ({
  isMfaRequired: state.auth.isMfaRequired,
  statusText: state.auth.statusText,
  initialValues: {
- redirectTo: state.routing.locationBeforeTransitions.query.next || '/'
+ redirectTo: state.router.location.query.next || '/'
  }
 });
 

cerberus-dashboard/src/components/LoginMfaForm/LoginMfaForm.js

@@ -150,7 +150,7 @@ const mapStateToProps = state => ({
  isChallengeSent: state.auth.isChallengeSent,
  statusText: state.auth.statusText,
  initialValues: {
- redirectTo: state.routing.locationBeforeTransitions.query.next || '/',
+ redirectTo: state.router.location.query.next || '/',
  }
 });
 

cerberus-dashboard/src/components/LoginUserForm/LoginUserForm.js

@@ -109,7 +109,7 @@ const mapStateToProps = state => ({
  isAuthenticating: state.auth.isAuthenticating,
  statusText: state.auth.statusText,
  initialValues: {
- redirectTo: state.routing.locationBeforeTransitions.query.next || '/'
+ redirectTo: state.router.location.query.next || '/'
  }
 });
 

cerberus-dashboard/src/components/ManageSafeDepositBox/ManageSafeDepositBox.js

@@ -29,10 +29,10 @@ import './ManageSafeDepositBox.scss';
 
 class ManageSafeDepositBox extends Component {
 
- componentWillReceiveProps(nextProps) {
+ componentDidUpdate(prevProps) {
  // Fetch and load SDB details based on id in uri
- if (nextProps.routeParams.id !== this.props.routeParams.id) {
- this.props.dispatch(sdbMActions.fetchSDBDataFromCMS(nextProps.routeParams.id, this.props.cerberusAuthToken));
+ if (prevProps.match.params.id !== this.props.match.params.id) {
+ this.props.dispatch(sdbMActions.fetchSDBDataFromCMS(this.props.match.params.id, this.props.cerberusAuthToken));
  }
  }
 
@@ -44,7 +44,7 @@ class ManageSafeDepositBox extends Component {
  this.props.dispatch(appActions.fetchCmsDomainData(this.props.cerberusAuthToken));
  }
  if (!this.props.hasFetchedSDBData) {
- this.props.dispatch(sdbMActions.fetchSDBDataFromCMS(this.props.routeParams.id, this.props.cerberusAuthToken));
+ this.props.dispatch(sdbMActions.fetchSDBDataFromCMS(this.props.match.params.id, this.props.cerberusAuthToken));
  }
  }
 

cerberus-dashboard/src/components/NotFound/NotFound.js

@@ -16,11 +16,12 @@
 
 import React from "react";
 import { Component } from "react";
-import { hashHistory } from "react-router";
+import store from '../../store/configureStore';
+import { push } from 'connected-react-router';
 
 export default class NotFound extends Component {
  componentDidMount() {
- hashHistory.push("/");
+ store.dispatch(push("/"));
  }
 
  render() {

cerberus-dashboard/src/components/SecureDataForm/SecureDataForm.js

@@ -22,7 +22,6 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import AddButton from '../AddButton/AddButton';
 import * as mSDBActions from '../../actions/manageSafetyDepositBoxActions';
 import './SecureDataForm.scss';
-const { DOM: { textarea } } = React;
 
 const fields = [
  'path',