CUMULUS-3862: Upgrade React Router to v6

.eslintrc

@@ -52,14 +52,19 @@
     "react/react-in-jsx-scope": 2,
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "eslint-comments/no-unused-disable": "warn",
+    "eslint-comments/no-unused-disable": "off",
     "eslint-comments/disable-enable-pair": [
       "error",
       { "allowWholeFile": true }
     ],
     "import/no-extraneous-dependencies": "off",
     "import/newline-after-import": "off",
     "import/no-named-as-default": "off",
+    "import/no-cycle": ["error", { 
+      "maxDepth": 10,
+      "ignoreExternal": true,
+      "allowUnsafeDynamicCyclicDependency": false
+    }],
     "lodash/import-scope": ["error", "method"],
     "lodash/prefer-constant": "off",
     "lodash/prefer-lodash-method": "off",

CHANGELOG.md

@@ -11,20 +11,11 @@ This version of the dashboard requires Cumulus API >= v19.2.0-alpha.1 (TBD API r
 
 ### Changed
 
-- **CUMULUS-3862**
-  - Updated documentation to account for short term React upgrade version dependency issues that arise using npm.
-
 - **GitHub Issue 1162**
   - Added documentation for beginners starting from scratch.
-
-### Changed
-
 - **CUMULUS-3861**
   - Updated React 17 to React 18  
   - Removed test script references to Enzyme and replaced them with React compliant testing components
-
-### Changed
-
 - **CUMULUS-3860/3870**
   - Updated React and dependencies
   - react 17.0.2 ⇒ 18.3.1
@@ -39,6 +30,13 @@ This version of the dashboard requires Cumulus API >= v19.2.0-alpha.1 (TBD API r
     `@cumulus/[email protected]`
   - Updated the integration tests to work with updated API
   - Updated packages to address [CVE-2024-21538] (https://github.com/advisories/GHSA-3xgq-45jj-v275)
+- **CUMULUS-3862**
+  - Updated React Router v5.2.0 to v6.26.2
+  - Updated routes and hooks for app navigation
+  - Established new router with withRouter.js HOC
+  - Established withUrlHelper.js HOC to later replace URL params utility
+  - Updated unit tests to accommodate component changes
+  - Updated documentation to account for short term React upgrade version dependency issues that arise using npm.
 - **CUMULUS-3870**
   - Remove launchpad security key information from cypress fixture for `valid-execution.json`
   - Add placeholders for security information with `fakePassword` and `userName`

app/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 
 import './css/main.scss';
 import './public/favicon.ico';
@@ -13,5 +13,5 @@ import App from './js/App';
       axe.default(React, ReactDOM, 1000);
     });
 } */
-
-ReactDOM.createRoot(document.getElementById('site-canvas')).render(<App />);
+const root = createRoot(document.getElementById('app'));
+root.render(<App />);

app/src/js/App.js

@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
-import { Provider } from 'react-redux';
-import { Route, Redirect, Switch } from 'react-router-dom';
-import { ConnectedRouter } from 'connected-react-router';
-
-import ourConfigureStore, { history } from './store/configureStore';
+import { Provider, useSelector } from 'react-redux';
+import {
+  Routes,
+  Route,
+  Navigate,
+  BrowserRouter,
+} from 'react-router-dom';
+import ourConfigureStore from './store/configureStore';
 
 // Authorization & Error Handling
-// import ErrorBoundary from './components/Errors/ErrorBoundary';
+import ErrorBoundary from './components/Errors/ErrorBoundary';
 import NotFound from './components/404';
 import OAuth from './components/oauth';
 
@@ -27,44 +30,51 @@ import config from './config';
 
 console.log('Environment', config.environment);
 
-// Wrapper for Main component to include routing
-const MainRoutes = () => (
-  <Main path='/'>
-    <Switch>
-      <Route exact path='/' component={Home} />
-      <Route path='/404' component={NotFound} />
-      <Route path='/collections' component={Collections} />
-      <Route path='/granules' component={Granules} />
-      <Route path='/pdrs' component={Pdrs} />
-      <Route path='/providers' component={Providers} />
-      <Route path='/workflows' component={Workflows} />
-      <Route path='/executions' component={Executions} />
-      <Route path='/operations' component={Operations} />
-      <Route path='/rules' component={Rules} />
-      <Route path='/reconciliation-reports' component={ReconciliationReports} />
-    </Switch>
-  </Main>
-);
+// Establish auth and login rules if user is or is not authenticated via Launchpad
+const AuthenicatedRoute = () => {
+  const isAuthenticated = useSelector((state) => state.api.authenticated);
+  console.log('Authentication status:', isAuthenticated);
+  return isAuthenticated ? <Main /> : <Navigate to='auth' replace />;
+};
+
+const LoginRoute = () => {
+  const isAuthenticated = useSelector((state) => state.api.authenticated);
+  return isAuthenticated ? <Navigate to='/' replace /> : <OAuth />;
+};
 
-// generate the root App Component
+// Routes for the Cumulus Dashboard app
 const App = () => {
   const [store] = useState(ourConfigureStore({}));
-  const isLoggedIn = () => store.getState().api.authenticated;
 
   return (
-      // <ErrorBoundary> // Add after troublshooting other errors
-      // Routes
-      <div className="routes">
+    // Router with Store
+    <div className='routes'>
+      <ErrorBoundary>
         <Provider store={store}>
-          <ConnectedRouter history={history}>
-            <Switch>
-              <Redirect exact from='/login' to='/auth' />
-              <Route path='/auth' render={() => (isLoggedIn() ? <Redirect to='/' /> : <OAuth />)} />
-              <Route path='/' render={() => (isLoggedIn() ? <MainRoutes /> : <Redirect to='/auth' />)} />
-            </Switch>
-          </ConnectedRouter>
+          <BrowserRouter>
+            <Routes>
+              <Route path={'/login'} element={<Navigate to='/auth' replace />} />
+              <Route path={'/auth'} element={<LoginRoute />} />
+              <Route element={<AuthenicatedRoute />}>
+                <Route path={'/'} index element={<Home />} />
+                <Route path={'/collections/*'} element={<Collections />} />
+                <Route path={'/providers/*'} element={<Providers />} />
+                <Route path={'/granules/*'} element={<Granules />} />
+                <Route path={'/workflows/*'} element={<Workflows />} />
+                <Route path={'/executions/*'} element={<Executions />} />
+                <Route path={'/operations/*'} element={<Operations />} />
+                <Route path={'/rules/*'} element={<Rules />} />
+                <Route path={'/pdrs/*'} element={<Pdrs />} />
+                <Route path={'/reconciliation-reports/*'} element={<ReconciliationReports />}/>
+              </Route>
+              <Route path={'/404'} element={<NotFound />} />
+              <Route path={'*'} element={<Navigate to='/404' replace />} />
+              <Route path={'*'} element={<Navigate to='/' replace />} />
+            </Routes>
+          </BrowserRouter>
         </Provider>
-      </div>
+      </ErrorBoundary>
+    </div>
   );
 };
 

app/src/js/actions/helpers.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-cycle */
 import { get as getProperty } from 'object-path';
 import _config from '../config';
-import { filterQueryParams } from '../utils/url-helper';
+import { filterQueryParams } from '../withUrlHelper';
 
 export const formatError = (response = {}, body = {}) => {
   let error = response

app/src/js/actions/index.js

@@ -12,7 +12,7 @@ import { getCollectionId, collectionNameVersion } from '../utils/format';
 import { fetchCurrentTimeFilters } from '../utils/datepicker';
 import log from '../utils/log';
 import * as types from './types';
-import { historyPushWithQueryParams } from '../utils/url-helper';
+// import { historyPushWithQueryParams } from '../withUrlHelper';
 
 const { CALL_API } = types;
 const {
@@ -617,8 +617,8 @@ export const deleteToken = () => (dispatch, getState) => {
 };
 
 export const loginError = (error) => (dispatch) => dispatch(deleteToken())
-  .then(() => dispatch({ type: 'LOGIN_ERROR', error }))
-  .then(() => historyPushWithQueryParams('/auth'));
+  .then(() => dispatch({ type: 'LOGIN_ERROR', error }));
+  // .then(() => historyPushWithQueryParams('/auth')); -- handled in oauth component instead
 
 export const getSchema = (type) => ({
   [CALL_API]: {

app/src/js/components/404.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import withRouter from '../withRouter';
 
 const NotFound = () => (
     <div className='page__404'>

app/src/js/components/Add/add.js

@@ -2,15 +2,15 @@ import path from 'path';
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
 import { get } from 'object-path';
 import { getSchema } from '../../actions';
 import Schema from '../FormSchema/schema';
 import Loading from '../LoadingIndicator/loading-indicator';
 import _config from '../../config';
 import { strings } from '../locale';
 import { window } from '../../utils/browser';
-import { historyPushWithQueryParams } from '../../utils/url-helper';
+import { historyPushWithQueryParams } from '../../withUrlHelper';
+import withRouter from '../../withRouter';
 
 const { updateDelay } = _config;
 

app/src/js/components/AddRaw/add-raw.js

@@ -1,14 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+// import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { get } from 'object-path';
 import { displayCase } from '../../utils/format';
 import _config from '../../config';
 
 import TextArea from '../TextAreaForm/text-area';
 import DefaultModal from '../Modal/modal';
-import { historyPushWithQueryParams } from '../../utils/url-helper';
+import { historyPushWithQueryParams } from '../../withUrlHelper';
+import withRouter from '../../withRouter';
 
 const { updateDelay } = _config;
 

app/src/js/components/BatchAsyncCommands/BatchAsyncCommands.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router';
+// import { withRouter } from 'react-router';
 import queue from 'stubborn-queue';
 import {
   CircularProgressbar,
@@ -13,6 +13,7 @@ import isArray from 'lodash/isArray';
 import AsyncCommand from '../AsyncCommands/AsyncCommands';
 import DefaultModal from '../Modal/modal';
 import ErrorReport from '../Errors/report';
+import withRouter from '../../withRouter';
 
 const CONCURRENCY = 3;
 

app/src/js/components/Breadcrumbs/Breadcrumbs.js

@@ -1,11 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Link, useLocation } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 import { Breadcrumb } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
-import { connect } from 'react-redux';
-import { getPersistentQueryParams } from '../../utils/url-helper';
+import PropTypes from 'prop-types';
+import { withUrlHelper } from '../../withUrlHelper';
 
-const Breadcrumbs = ({ config, locationQueryParams }) => (
+const Breadcrumbs = ({ config, urlHelper }) => {
+  const location = useLocation();
+  const locationQueryParams = useSelector((state) => state.locationQueryParams);
+  const { getPersistentQueryParams } = urlHelper;
+
+  return (
   <Breadcrumb>
     {config.map((item, index) => {
       const { href, label, active } = item || {};
@@ -17,24 +22,24 @@ const Breadcrumbs = ({ config, locationQueryParams }) => (
           {active
             ? <span>{label}</span>
             : <Link
-              to={(toLocation) => (
-                {
-                  pathname: href,
-                  search: locationQueryParams.search[href] || getPersistentQueryParams(toLocation)
-                })}>
+              to={{
+                pathname: href,
+                search: locationQueryParams.search[href] || getPersistentQueryParams(location)
+              }}>
               {label}
             </Link>}
         </li>
       );
     })}
   </Breadcrumb>
-);
+  );
+};
 
 Breadcrumbs.propTypes = {
   config: PropTypes.arrayOf(PropTypes.object),
-  locationQueryParams: PropTypes.object,
+  urlHelper: PropTypes.shape({
+    getPersistentQueryParams: PropTypes.func
+  }),
 };
 
-export default connect((state) => ({
-  locationQueryParams: state.locationQueryParams
-}))(Breadcrumbs);
+export default withUrlHelper(Breadcrumbs);

app/src/js/components/Collections/add.js

@@ -1,14 +1,21 @@
 import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
 import { createCollection, getSchema } from '../../actions';
 import { getCollectionId, collectionHrefFromId } from '../../utils/format';
 import { removeReadOnly } from '../FormSchema/schema';
 import AddRaw from '../AddRaw/add-raw';
+import withRouter from '../../withRouter';
+
+const AddCollection = () => {
+  const dispatch = useDispatch();
+  const location = useLocation();
+
+  const collections = useSelector((state) => state.collections);
+  const schema = useSelector((state) => state.schema);
 
-const AddCollection = ({ location = {}, collections, dispatch, schema }) => {
   const [defaultValue, setDefaultValue] = useState({});
   const { state: locationState } = location;
   const { name, version } = locationState || {};
@@ -52,15 +59,8 @@ const AddCollection = ({ location = {}, collections, dispatch, schema }) => {
 };
 
 AddCollection.propTypes = {
-  location: PropTypes.object,
   collections: PropTypes.object,
-  dispatch: PropTypes.func,
   schema: PropTypes.object,
 };
 
-export default withRouter(
-  connect((state) => ({
-    collections: state.collections,
-    schema: state.schema,
-  }))(AddCollection)
-);
+export default withRouter(AddCollection);

app/src/js/components/Collections/collection-header.js

@@ -7,7 +7,7 @@ import {
   lastUpdated,
   collectionHrefFromNameVersion,
 } from '../../utils/format';
-import { getPersistentQueryParams } from '../../utils/url-helper';
+import { getPersistentQueryParams } from '../../withUrlHelper';
 import { strings } from '../locale';
 import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';