Allow resolve a submission failure

src/components/SubmissionFailures/FailuresList/FailuresList.js

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import FailuresListItem from '../FailuresListItem';
 
 const FailuresList = ({ failures, createActions }) =>
-  <Table striped hover>
+  <Table hover>
     <thead>
       <tr>
         <th>

src/components/SubmissionFailures/FailuresListItem/FailuresListItem.js

@@ -5,7 +5,7 @@ import Icon from 'react-fontawesome';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 const FailuresListItem = ({ id, createActions, failure }) =>
-  <tr>
+  <tr className={failure.resolvedAt ? 'success' : 'danger'}>
     <td className="text-center">
       <OverlayTrigger
         placement="top"

src/components/SubmissionFailures/ResolveFailure/ResolveFailure.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button } from 'react-bootstrap';
+import { CloseIcon } from '../../icons';
+import { FormattedMessage } from 'react-intl';
+import { Field, reduxForm } from 'redux-form';
+import TextField from '../../forms/Fields/TextField';
+import SubmitButton from '../../forms/SubmitButton';
+
+const ResolveFailure = ({
+  isOpen,
+  onClose,
+  submitting,
+  handleSubmit,
+  anyTouched,
+  submitFailed = false,
+  submitSucceeded = false,
+  invalid
+}) =>
+  <Modal show={isOpen} backdrop="static" onHide={onClose}>
+    <Modal.Header closeButton>
+      <Modal.Title>
+        <FormattedMessage
+          id="app.submissionFailures.resolveTitle"
+          defaultMessage="Resolve Failure"
+        />
+      </Modal.Title>
+    </Modal.Header>
+    <Modal.Body>
+      <Field
+        name="note"
+        component={TextField}
+        label={
+          <FormattedMessage
+            id="app.submissionFailures.resolveNote"
+            defaultMessage="Resolve note:"
+          />
+        }
+      />
+    </Modal.Body>
+    <Modal.Footer>
+      <SubmitButton
+        id="resolve-failure"
+        handleSubmit={handleSubmit}
+        submitting={submitting}
+        dirty={anyTouched}
+        hasSucceeded={submitSucceeded}
+        hasFailed={submitFailed}
+        invalid={invalid}
+        messages={{
+          submit: (
+            <FormattedMessage
+              id="app.submissionFailures.resolveSave"
+              defaultMessage="Save"
+            />
+          ),
+          submitting: (
+            <FormattedMessage
+              id="app.submissionFailures.resolveSaving"
+              defaultMessage="Saving ..."
+            />
+          ),
+          success: (
+            <FormattedMessage
+              id="app.submissionFailures.resolveSuccesss"
+              defaultMessage="Saved"
+            />
+          )
+        }}
+      />
+
+      <Button bsStyle="default" className="btn-flat" onClick={onClose}>
+        <CloseIcon />{' '}
+        <FormattedMessage
+          id="app.submissionFailures.resolveClose"
+          defaultMessage="Close"
+        />
+      </Button>
+    </Modal.Footer>
+  </Modal>;
+
+ResolveFailure.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  submitFailed: PropTypes.bool,
+  anyTouched: PropTypes.bool,
+  submitSucceeded: PropTypes.bool,
+  submitting: PropTypes.bool,
+  invalid: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired
+};
+
+export default reduxForm({ form: 'resolve-failure' })(ResolveFailure);

src/components/SubmissionFailures/ResolveFailure/index.js

@@ -0,0 +1 @@
+export default from './ResolveFailure';

src/pages/SubmissionFailures/SubmissionFailures.js

@@ -5,15 +5,22 @@ import { FormattedMessage } from 'react-intl';
 
 import PageContent from '../../components/layout/PageContent';
 import FetchManyResourceRenderer from '../../components/helpers/FetchManyResourceRenderer';
-import { fetchAllFailures } from '../../redux/modules/submissionFailures';
+import {
+  fetchAllFailures,
+  resolveFailure
+} from '../../redux/modules/submissionFailures';
 import {
   fetchManyStatus,
   readySubmissionFailuresSelector
 } from '../../redux/selectors/submissionFailures';
 import FailuresList from '../../components/SubmissionFailures/FailuresList/FailuresList';
 import Box from '../../components/widgets/Box/Box';
+import ResolveFailure from '../../components/SubmissionFailures/ResolveFailure/ResolveFailure';
+import { Button } from 'react-bootstrap';
 
 class SubmissionFailures extends Component {
+  state = { isOpen: false, activeId: null };
+
   static loadAsync = (params, dispatch) =>
     Promise.all([dispatch(fetchAllFailures)]);
 
@@ -22,7 +29,7 @@ class SubmissionFailures extends Component {
   }
 
   render() {
-    const { submissionFailures, fetchStatus } = this.props;
+    const { submissionFailures, fetchStatus, resolveFailure } = this.props;
 
     return (
       <FetchManyResourceRenderer
@@ -96,7 +103,33 @@ class SubmissionFailures extends Component {
               unlimitedHeight
               noPadding
             >
-              <FailuresList failures={submissionFailures} />
+              <div>
+                <FailuresList
+                  failures={submissionFailures}
+                  createActions={id =>
+                    <Button
+                      bsStyle="warning"
+                      className="btn-flat"
+                      bsSize="sm"
+                      onClick={() =>
+                        this.setState({ isOpen: true, activeId: id })}
+                    >
+                      <FormattedMessage
+                        id="app.submissionFailures.resolve"
+                        defaultMessage="Resolve"
+                      />
+                    </Button>}
+                />
+                <ResolveFailure
+                  isOpen={this.state.isOpen}
+                  onClose={() =>
+                    this.setState({ isOpen: false, activeId: null })}
+                  onSubmit={data =>
+                    resolveFailure(this.state.activeId, data.note).then(() =>
+                      this.setState({ isOpen: false, activeId: null })
+                    )}
+                />
+              </div>
             </Box>
           </PageContent>}
       </FetchManyResourceRenderer>
@@ -107,7 +140,8 @@ class SubmissionFailures extends Component {
 SubmissionFailures.propTypes = {
   loadAsync: PropTypes.func.isRequired,
   fetchStatus: PropTypes.string,
-  submissionFailures: PropTypes.array
+  submissionFailures: PropTypes.array,
+  resolveFailure: PropTypes.func
 };
 
 export default connect(
@@ -116,6 +150,7 @@ export default connect(
     submissionFailures: readySubmissionFailuresSelector(state)
   }),
   dispatch => ({
-    loadAsync: () => SubmissionFailures.loadAsync({}, dispatch)
+    loadAsync: () => SubmissionFailures.loadAsync({}, dispatch),
+    resolveFailure: (id, note) => dispatch(resolveFailure(id, note))
   })
 )(SubmissionFailures);

src/redux/modules/submissionFailures.js

@@ -1,12 +1,14 @@
 import { handleActions } from 'redux-actions';
 import factory, { initialState } from '../helpers/resourceManager';
 import { createApiAction } from '../middleware/apiMiddleware';
+import { fromJS } from 'immutable';
 
 const resourceName = 'submissionFailures';
 var { actions, reduceActions } = factory({ resourceName });
 
 export const additionalActionTypes = {
-  RESOLVE: 'recodex/submissionFailures/RESOLVE'
+  RESOLVE: 'recodex/submissionFailures/RESOLVE',
+  RESOLVE_FULFILLED: 'recodex/submissionFailures/RESOLVE_FULFILLED'
 };
 
 /**
@@ -32,7 +34,12 @@ export const resolveFailure = (id, note) =>
  */
 
 const reducer = handleActions(
-  Object.assign({}, reduceActions, {}),
+  Object.assign({}, reduceActions, {
+    [additionalActionTypes.RESOLVE_FULFILLED]: (
+      state,
+      { meta: { id }, payload }
+    ) => state.setIn(['resources', id, 'data'], fromJS(payload))
+  }),
   initialState
 );
 

src/redux/selectors/submissionFailures.js

@@ -26,6 +26,6 @@ export const readySubmissionFailuresSelector = createSelector(
       .toList()
       .filter(isReady)
       .map(getJsData)
-      .sort((a, b) => a.createdAt - b.createdAt)
+      .sort((a, b) => b.createdAt - a.createdAt)
       .toArray()
 );