Merge pull request #1091 from nasa/develop

Merge develop to master for v12.0.0

.eslintrc

@@ -43,8 +43,8 @@
     "react/jsx-uses-vars": 2,
     "react/no-danger": 0,
     "react/no-deprecated": 2,
-    "react/no-did-mount-set-state": 2,
-    "react/no-did-update-set-state": 2,
+    "react/no-did-mount-set-state": 0,
+    "react/no-did-update-set-state": 0,
     "react/no-direct-mutation-state": 2,
     "react/no-is-mounted": 2,
     "react/no-unknown-property": 2,

CHANGELOG.md

@@ -7,30 +7,48 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-## [v11.0.0] - 2022-04-19
+## [v12.0.0] - 2023-01-23
 
 ## Breaking Changes
 
-This version of the dashboard requires Cumulus API v11.1.0
+This version of the dashboard requires Cumulus API >= v14.0.0
 
 ### Added
 
-- **CUMULUS-2704**
-  - Added option to create ORCA Reconciliation Report to dashboard
-
-- **CUMULUS-2748**
-  - Added ORCA Reconciliation Report display to dashboard
+- **CUMULUS-2717**
+  - Added `Show/Hide Recovery Status` button to granule detail page
+- **CUMULUS-2915**
+  - Added download button to execution pages
+  - Updated dashboard to use alpha version `@cumulus/[email protected]` for testing
+  - Used npm 8.6.0
+  - Upgraded localstack to 0.12.13 to work with latest Cumulus
+  - Added action to list pages to refresh cumulus db connection
+  - Updated `git+ssh://git@` to `git+https://` for npm 8.6.0 generated package-lock.json,
+    and this is an [known issue](https://github.com/npm/cli/issues/2610) with npm 8.6.0
 
 ### Changed
 
-- **CUMULUS-2903**
-  - Bumped Node version from 12.18.0 to 14.19.1 to match Core
+- **CUMULUS-2763**
+  - Replaces disabled button interaction with hidden buttons for bulk actions.
+- **CUMULUS-2960**
+  - Fixed the following Axe accessibility issues:
+    + Specified title, level-one heading, and modal as main landmark on `/auth`
+    + Increased link-background contrast in the header
+    + Slight color adjustments for accessibility
+  - Updated dependencies with severe security vulnerabilities:
+    + `@cumulus/api` to `13.1.0`
+    + `moment` to `2.29.4`
+    + `terser-webpack-plugin` to `5.3.3`
+- **CUMULUS-3001**
+  - Removed `precss` dependency
+- **Snyk Security Fix**
+  - Upgraded jsonwebtoken from 8.5.1 to 9.0.0
 
-## [v10.0.0] - 2022-02-25
+## [v11.0.0] - 2022-04-19
 
 ## Breaking Changes
 
-This version of the dashboard requires Cumulus API v10.1.1
+This version of the dashboard requires Cumulus API v11.1.0
 
 - **CUMULUS-2728**
   - Removes kibana links and Metrics integration. To get this functionality,
@@ -47,10 +65,30 @@ This version of the dashboard requires Cumulus API v10.1.1
     + `SHOW_DISTRIBUTION_API_METRICS`
     + `SHOW_TEA_METRICS`
 
+### Added
+
+- **CUMULUS-2704**
+  - Added option to create ORCA Reconciliation Report to dashboard
+
+- **CUMULUS-2748**
+  - Added ORCA Reconciliation Report display to dashboard
+
 ### Changed
 
 - **CUMULUS-NONE**
   - Updates Cumulus development dependencies to v10.1.1 and upgrades localstack to 0.11.5 to work with latest Cumulus.
+
+- **CUMULUS-2903**
+  - Bumped Node version from 12.18.0 to 14.19.1 to match Core
+
+## [v10.0.0] - 2022-02-25
+
+## Breaking Changes
+
+This version of the dashboard requires Cumulus API v10.1.1
+
+### Changed
+
 - **CUMULUS-2843**
   - Create provider and create rule modals now dislpay the provider [rule]
     schema title directly as read from the Cumulus API.
@@ -1275,7 +1313,8 @@ Fix for serving the dashboard through the Cumulus API.
 ### Added
 
 - Versioning and changelog [CUMULUS-197] by @kkelly51
-  [Unreleased]: https://github.com/nasa/cumulus-dashboard/compare/v11.0.0...HEAD
+  [Unreleased]: https://github.com/nasa/cumulus-dashboard/compare/v12.0.0...HEAD
+  [v12.0.0]: https://github.com/nasa/cumulus-dashboard/compare/v11.0.0...v12.0.0
   [v11.0.0]: https://github.com/nasa/cumulus-dashboard/compare/v10.0.0...v11.0.0
   [v10.0.0]: https://github.com/nasa/cumulus-dashboard/compare/v9.0.0...v10.0.0
   [v9.0.0]: https://github.com/nasa/cumulus-dashboard/compare/v8.0.0...v9.0.0

README.md

@@ -99,7 +99,7 @@ In this example, the dashboard would be available at `http://localhost:3000/` in
 The dashboard uses node v14.19.1. To build/run the dashboard on your local machine, install [nvm](https://github.com/creationix/nvm) and run `nvm install v14.19.1`.
 
 #### install requirements
-We use npm for local package management, to install the requirements:
+We use npm for local package management, run `npm install -g [email protected]` to install npm 8.6.0. To install the requirements:
 ```bash
   $ nvm use
   $ npm ci

app/src/css/_buttons.scss

@@ -32,6 +32,11 @@ $delete-btn-hover-bg-color: darken($error-red, 10%);
     pointer-events: none;
   }
 
+  &--hidden {
+    visibility: hidden;
+    display: none;
+  }
+
   &:hover{
     background-color: $midnight-blue;
     color: $white;

app/src/css/utils/variables/_colors.scss

@@ -1,6 +1,6 @@
 /* EUI Colors */
 $light-green: #20ce6f;
-$ocean-blue: #2276ac;
+$ocean-blue: #2072a4;
 $midnight-blue: #2c3e50;
 $royal-purple: #673285;
 $dolphin-grey: #95a5a6;

app/src/js/actions/index.js

@@ -168,6 +168,10 @@ export const getCumulusInstanceMetadata = () => ({
   }
 });
 
+export const refreshCumulusDbConnection = () => (dispatch) => dispatch(
+  getGranule('fake-granuleid-refresh-connection')
+);
+
 export const getGranule = (granuleId, params) => ({
   [CALL_API]: {
     type: types.GRANULE,
@@ -178,6 +182,16 @@ export const getGranule = (granuleId, params) => ({
   }
 });
 
+export const getGranuleRecoveryStatus = (granuleId) => ({
+  [CALL_API]: {
+    type: types.RECOVERY_GRANULE,
+    method: 'POST',
+    id: granuleId,
+    path: 'orca/recovery/granules',
+    data: { granuleId }
+  }
+});
+
 export const listGranules = (options) => (dispatch, getState) => {
   const timeFilters = fetchCurrentTimeFilters(getState().datepicker);
   return dispatch({

app/src/js/actions/types.js

@@ -272,3 +272,7 @@ export const TIMER_SET_COUNTDOWN = 'TIMER_SET_COUNTDOWN';
 export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
 // Sorting Mechanism
 export const SORTS = 'SORTS';
+// ORCA recovery status
+export const RECOVERY_GRANULE = 'RECOVERY_GRANULE';
+export const RECOVERY_GRANULE_INFLIGHT = 'RECOVERY_GRANULE_INFLIGHT';
+export const RECOVERY_GRANULE_ERROR = 'RECOVERY_GRANULE_ERROR';

app/src/js/components/AsyncCommands/AsyncCommands.js

@@ -19,7 +19,7 @@ const AsyncCommand = ({
   confirmAction,
   confirmText,
   confirmOptions,
-  disabled,
+  hidden,
   element = 'button',
   error,
   postActionText,
@@ -33,7 +33,7 @@ const AsyncCommand = ({
   const inflight = status === 'inflight';
   const props = {
     className: element !== 'button' ? elementClass(inflight) : buttonClass(inflight),
-    onClick: disabled ? preventDefault : handleClick
+    onClick: hidden ? preventDefault : handleClick
   };
   if (element === 'a') props.href = '#';
   const children = (
@@ -61,7 +61,7 @@ const AsyncCommand = ({
     return [
       'button button--small form-group__element',
       `${processing ? 'button--loading' : ''}`,
-      `${disabled ? 'button--disabled' : ''}`,
+      `${hidden ? 'button--hidden' : ''}`,
       `${className || 'button__group'}`
     ].join(' ');
   }
@@ -70,7 +70,7 @@ const AsyncCommand = ({
   function elementClass (processing) {
     let newClassName = 'async__element';
     if (processing) newClassName += ' async__element--loading';
-    if (disabled) newClassName += ' async__element--disabled';
+    if (hidden) newClassName += ' async__element--disabled';
     if (className) newClassName += ` ${className}`;
     return newClassName;
   }
@@ -79,7 +79,7 @@ const AsyncCommand = ({
     e.preventDefault();
     if (confirmAction) {
       setConfirmModal(true);
-    } else if (status !== 'inflight' && !disabled) {
+    } else if (status !== 'inflight' && !hidden) {
       // prevent duplicate action if the action is already inflight.
       action();
     }
@@ -135,7 +135,7 @@ AsyncCommand.propTypes = {
   status: PropTypes.string,
   text: PropTypes.string,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
+  hidden: PropTypes.bool,
   element: PropTypes.string,
   confirmAction: PropTypes.bool,
   confirmText: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),

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

@@ -229,7 +229,7 @@ export class BatchCommand extends React.Component {
           action={this.handleClick}
           text={text}
           className={className}
-          disabled={!activeModal && (!todo || !!inflight)}
+          hidden={!activeModal && (!todo || !!inflight)}
           status={!activeModal && inflight ? 'inflight' : null}
         />
         {activeModal && <div className="modal__cover"></div>}

app/src/js/components/Collections/overview.js

@@ -18,6 +18,7 @@ import {
   listWorkflows,
   applyWorkflowToGranule,
   applyRecoveryWorkflowToGranule,
+  refreshCumulusDbConnection,
 } from '../../actions';
 import {
   collectionName as collectionLabelForId,
@@ -89,6 +90,7 @@ const CollectionOverview = ({
   const [selected, setSelected] = useState([]);
 
   useEffect(() => {
+    dispatch(refreshCumulusDbConnection());
     dispatch(listCollections());
     dispatch(getCumulusInstanceMetadata());
     dispatch(getCollection(collectionName, decodedVersion));

app/src/js/components/Executions/execution-events.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { withRouter } from 'react-router-dom';
+import get from 'lodash/get';
 import {
   getExecutionStatus,
   getCumulusInstanceMetadata,
@@ -45,7 +46,19 @@ const ExecutionEvents = ({
 }) => {
   const { params } = match || {};
   const { executionArn } = params;
-  const { error, execution, executionHistory, stateMachine, searchString } = executionStatus || {};
+
+  const { searchString } = executionStatus;
+  let error = get(executionStatus, 'error');
+  let recordData = get(executionStatus, 'data.data', {});
+
+  // record data is an error message
+  if (typeof recordData === 'string' && recordData.startsWith('Error')) {
+    const recordError = `${recordData}, please download the execution record instead`;
+    error = error || recordError;
+    recordData = {};
+  }
+
+  const { execution, executionHistory, stateMachine } = recordData;
   const { events } = executionHistory || {};
   const formattedEvents = formatEvents(events);
 
@@ -58,7 +71,7 @@ const ExecutionEvents = ({
     // when we have a new search, we also want to dispatch
   }, [dispatch, executionArn, searchString]);
 
-  if (!execution) return null;
+  if (!execution) return (error ? <ErrorReport report={error} /> : null);
 
   return (
     <div className='page__component'>
@@ -102,7 +115,7 @@ const ExecutionEvents = ({
           <div className='heading__wrapper--border'>
             <h2 className='heading--medium heading--shared-content'>All Events
               <span className="num-title">
-                {`${executionStatus.executionHistory.events.length || 0}`}
+                {`${events.length || 0}`}
               </span>
             </h2>
             <a className='csv__download button button--small button--green form-group__element--right'

app/src/js/components/Executions/execution-snapshot.js

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Alert } from 'react-bootstrap';
+import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import SortableTable from '../SortableTable/SortableTable';
 import { getExecutionStatus } from '../../actions';
@@ -15,7 +16,18 @@ const ExecutionSnapshot = ({
   const { original: { arn }, isExpanded } = row || {};
   const { map } = executionStatus || {};
   const currentExecutionStatus = useMemo(() => map[arn] || {}, [arn, map]);
-  const { execution, executionHistory, inflight, warning, error } = currentExecutionStatus || {};
+  const { inflight, warning } = currentExecutionStatus || {};
+  let error = get(currentExecutionStatus, 'error');
+  let recordData = get(currentExecutionStatus, 'data.data', {});
+
+  // record data is an error message
+  if (typeof recordData === 'string' && recordData.startsWith('Error')) {
+    const recordError = `${recordData}, please download the execution record instead`;
+    error = error || recordError;
+    recordData = {};
+  }
+
+  const { execution, executionHistory } = recordData;
   const { events } = executionHistory || {};
   const hasEvents = events?.length > 1;
 
@@ -50,11 +62,7 @@ const ExecutionSnapshot = ({
 
 ExecutionSnapshot.propTypes = {
   dispatch: PropTypes.func,
-  executionStatus: PropTypes.shape({
-    executionHistory: PropTypes.shape({
-      events: PropTypes.array
-    })
-  }),
+  executionStatus: PropTypes.object,
   row: PropTypes.object
 };
 

app/src/js/components/Executions/execution-status-graph.js

@@ -84,7 +84,10 @@ const ExecutionStatusGraph = ({ executionStatus }) => {
 };
 
 ExecutionStatusGraph.propTypes = {
-  executionStatus: PropTypes.object
+  executionStatus: PropTypes.shape({
+    executionHistory: PropTypes.object.isRequired,
+    stateMachine: PropTypes.object.isRequired,
+  })
 };
 
 export default ExecutionStatusGraph;