CUMULUS-3862: Upgrade React Router to v6

CHANGELOG.md

@@ -21,6 +21,11 @@ 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**
+  - Upgraded React Router to v6.26.2
+  - Updated routes for navigation for menus, pagination, sections, and parent-child pages
+  - Established new router with withRouter.js HOC
+  - Replaced URL params utility with withUrlHelper.js HOC
 - **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

@@ -14,4 +14,4 @@ import App from './js/App';
     });
 } */
 
-ReactDOM.render(<App />, document.getElementById('site-canvas'));
+ReactDOM.render(<App />, document.getElementById('root'));

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/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,7 +2,6 @@ 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';
@@ -11,6 +10,7 @@ import _config from '../../config';
 import { strings } from '../locale';
 import { window } from '../../utils/browser';
 import { historyPushWithQueryParams } from '../../utils/url-helper';
+import withRouter from '../../withRouter';
 
 const { updateDelay } = _config;
 

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

@@ -1,6 +1,6 @@
 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';
@@ -9,6 +9,7 @@ import _config from '../../config';
 import TextArea from '../TextAreaForm/text-area';
 import DefaultModal from '../Modal/modal';
 import { historyPushWithQueryParams } from '../../utils/url-helper';
+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/edit.js

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
 import {
   getCollection,
   updateCollection,
   clearUpdateCollection,
 } from '../../actions';
 import { getCollectionId, collectionHrefFromNameVersion } from '../../utils/format';
 import EditRaw from '../EditRaw/edit-raw';
+import { withRouter } from '../../withRouter';
 
 const SCHEMA_KEY = 'collection';
 
@@ -20,6 +20,12 @@ const EditCollection = ({ match, collections }) => {
   const decodedVersion = decodeURIComponent(version);
   const collectionId = getCollectionId({ name, version: decodedVersion });
 
+  useEffect(() => {
+    if (name && version) {
+      getCollection(name, version);
+    }
+  }, [name, version, decodedVersion]);
+
   return (
     <div className = "edit_collections">
       <Helmet>
@@ -47,6 +53,6 @@ EditCollection.propTypes = {
 
 export default withRouter(
   connect((state) => ({
-    collections: state.collections,
+    collections: state.collections
   }))(EditCollection)
 );

app/src/js/components/Collections/granules.js

@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from 'react';
+import { connect, useDispatch } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
-import { connect } from 'react-redux';
 import { get } from 'object-path';
 import {
   getCollectionId,
@@ -33,16 +32,17 @@ import { granuleStatus as statusOptions } from '../../utils/status';
 import { workflowOptionNames } from '../../selectors';
 import ListFilters from '../ListActions/ListFilters';
 import CollectionHeader from './collection-header';
+import withRouter from '../../withRouter';
 
 const CollectionGranules = ({
-  dispatch,
   granules,
-  match,
   queryParams,
   workflowOptions,
   providers,
+  router
 }) => {
-  const { params } = match;
+  const dispatch = useDispatch();
+  const { params } = router;
   const { name: collectionName, version: collectionVersion, status } = params;
   const granuleStatus = status === 'processing' ? 'running' : status;
   const { list } = granules;
@@ -52,9 +52,11 @@ const CollectionGranules = ({
     name: collectionName,
     version: decodedVersion,
   });
+
   const [workflow, setWorkflow] = useState(workflowOptions[0]);
   const [workflowMeta, setWorkflowMeta] = useState(defaultWorkflowMeta);
   const [selected, setSelected] = useState([]);
+
   const query = generateQuery();
   const { dropdowns } = providers;
 
@@ -213,16 +215,18 @@ const CollectionGranules = ({
 CollectionGranules.propTypes = {
   granules: PropTypes.object,
   dispatch: PropTypes.func,
-  match: PropTypes.object,
   queryParams: PropTypes.object,
   workflowOptions: PropTypes.array,
   providers: PropTypes.object,
+  router: PropTypes.shape({
+    params: PropTypes.object
+  }),
 };
 
-export default withRouter(
-  connect((state) => ({
-    granules: state.granules,
-    workflowOptions: workflowOptionNames(state),
-    providers: state.providers,
-  }))(CollectionGranules)
-);
+const mapStateToProps = (state) => ({
+  granules: state.granules,
+  workflowOptions: workflowOptionNames(state),
+  providers: state.providers,
+});
+
+export default withRouter(connect(mapStateToProps)(CollectionGranules));