Chore/submit feedback

src/Submission/ReduxProjectSubmission.js

@@ -48,22 +48,12 @@ const submitToServer = (methodIn = 'PUT') => (dispatch, getState) => {
     body: file,
     dispatch,
   }).then(
-    ({ status, data }) => {
-      switch (status) {
-      case 200:
-        return {
-          type: 'RECEIVE_SUBMISSION',
-          submit_status: `succeed: ${status}`,
-          data,
-        };
-      default:
-        return {
-          type: 'RECEIVE_SUBMISSION',
-          submit_status: `failed: ${status}`,
-          data,
-        };
-      }
-    },
+    ({ status, data }) => (
+      {
+        type: 'RECEIVE_SUBMISSION',
+        submit_status: status,
+        data,
+      }),
   ).then(msg => dispatch(msg));
 };
 

src/Submission/SubmissionResult.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import styled from 'styled-components';
+import brace from 'brace'; // needed by AceEditor
+import 'brace/mode/json';
+import 'brace/theme/kuroir';
+import AceEditor from 'react-ace';
+import PropTypes from 'prop-types';
+
+import { button } from '../theme';
+
+const Container = styled.div`
+border-top: 1px dashed ${props => props.theme.mid_gray};
+padding-top: 1em;
+margin-top: 1em;
+`;
+
+const Status = styled.div`
+${button};
+background-color: ${props => ((props.status === 200) ? '#168616' : 'gray')};
+color: white;
+margin-bottom: 1em;
+`;
+
+const summaryDivStyle = {
+  maxHeight: '250px',
+  overflow: 'auto',
+};
+
+const summaryListStyle = {
+  listStyle: 'disc',
+  padding: '0px 0px 25px 25px',
+};
+
+/**
+ * Present summary of a submission success or failure given
+ * the HTTP status code and response data object.
+ * 
+ * @param {number} status
+ * @param {object} data 
+ */
+const SubmissionResult = ({ status, data }) => {
+  let summary = null;
+
+  if (status === 200) {
+    // List number of entites of each type created
+    const entityType2Count = (data.entities || [])
+      .map(ent => ent.type || 'unknown')
+      .reduce((db, type) => { db[type] = (db[type] || 0) + 1; return db; }, {});
+    summary = (<div id="cd-summary__result_200" style={summaryDivStyle}>
+      <p>Successfully created entities:</p>
+      <ul style={summaryListStyle}>
+        {Object.keys(entityType2Count).sort()
+          .map(type => <li key={type}>{entityType2Count[type]} of {type}</li>)}
+      </ul>
+    </div>);
+  } else if (status >= 400 && status < 500) {
+    const errorList = (data.entities || []).filter(ent => !!ent.errors);
+    if (errorList.length > 0) {
+      summary = (<div id="cd-summary__result_400"><p>
+          Errors:
+      </p>
+      <AceEditor
+        width="100%"
+        height="300px"
+        style={{ marginBottom: '2em' }}
+        mode="json"
+        theme="kuroir"
+        readOnly
+        value={JSON.stringify(errorList, null, '    ')}
+      />
+      </div>);
+    }
+  } else if (status === 504) {
+    summary = (<div id="cd-summary__result_504"><p>
+      Submission timed out.  Try submitting the data in chunks of 1000 entries or less.
+    </p></div>);
+  }
+
+  return (
+    <Container id="cd-submit-tsv__result">
+      <Status status={status}>{status === 200 ? `succeeded: ${status}` : `failed: ${status}`}</Status>
+      {summary}
+      <p>Full response:</p>
+      <AceEditor width="100%" height="300px" style={{ marginBottom: '1em' }} mode="json" theme="kuroir" readOnly value={JSON.stringify(data, null, '    ')} />
+    </Container>
+  );
+};
+
+SubmissionResult.propTypes = {
+  status: PropTypes.number.isRequired,
+  data: PropTypes.object.isRequired,
+};
+
+
+export default SubmissionResult;

src/Submission/SubmissionResult.test.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import AceEditor from 'react-ace';
+
+import SubmissionResult from './SubmissionResult';
+
+describe('the submission result component', () => {
+  const testData = {
+    entities: [
+      {
+        type: 'type1',
+      },
+      {
+        type: 'type2',
+        errors: ['bla bla bla'],
+      },
+      {
+        type: 'type2',
+      },
+      {
+        type: 'type2',
+        errors: ['bla bla bla'],
+      },
+    ],
+  };
+
+  it('presents a summary of a successful submission', () => {
+    const $dom = shallow(<SubmissionResult status={200} data={testData} />);
+    const $summary = $dom.find('#cd-summary__result_200');
+    expect($summary).toHaveLength(1);
+    const $li = $summary.find('li');
+    expect($li).toHaveLength(2); // type1 and type2
+  });
+
+  it('presents a summary of a failed submission', () => {
+    const $dom = shallow(<SubmissionResult status={400} data={testData} />);
+    const $summary = $dom.find('#cd-summary__result_400');
+    expect($summary).toHaveLength(1);
+    const $jsonError = $summary.find(AceEditor);
+    expect($jsonError).toHaveLength(1);
+  });
+
+  it('tries to help on a 504 timeout', () => {
+    const $dom = shallow(<SubmissionResult status={504} data={testData} />);
+    const $summary = $dom.find('#cd-summary__result_504');
+    expect($summary).toHaveLength(1);
+  });
+});

src/Submission/SubmitTSV.jsx

@@ -1,27 +1,15 @@
 import React from 'react';
-import styled from 'styled-components';
 import brace from 'brace'; // needed by AceEditor
 import 'brace/mode/json';
 import 'brace/theme/kuroir';
 import AceEditor from 'react-ace';
 import PropTypes from 'prop-types';
 
 import { predictFileType } from '../utils';
-import { button, UploadButton, SubmitButton } from '../theme';
+import { UploadButton, SubmitButton } from '../theme';
+import SubmissionResult from './SubmissionResult';
 
 
-const SubmissionResult = styled.div`
-  border-top: 1px dashed ${props => props.theme.mid_gray};
-  padding-top: 1em;
-  margin-top: 1em;
-`;
-const Status = styled.div`
-  ${button};
-  background-color: ${props => ((props.status === 'succeed: 200') ? '#168616' : 'gray')};
-  color: white;
-  margin-bottom: 1em;
-`;
-
 /**
  * Manage TSV/JSON submission
  * 
@@ -96,10 +84,7 @@ const SubmitTSV = ({ path, submission, onUploadClick, onSubmitClick, onFileChang
       />
       }
       {submission.submit_result &&
-      <SubmissionResult id="cd-submit-tsv__result">
-        <Status status={submission.submit_status}>{submission.submit_status}</Status>
-        <AceEditor width="100%" height="300px" style={{ marginBottom: '1em' }} mode="json" theme="kuroir" readOnly value={JSON.stringify(submission.submit_result, null, '    ')} />
-      </SubmissionResult>
+      <SubmissionResult status={submission.submit_status} data={submission.submit_result} />
       }
     </form>
   );

src/Submission/SubmitTSV.test.jsx

@@ -53,7 +53,7 @@ describe('the TSV submission componet', () => {
   it('shows a submit result when appropriate', () => {
     const state = {
       file: JSON.stringify({ type: 'whatever', submitter_id: 'frickjack' }),
-      submit_result: JSON.stringify({ message: 'submission failed' }),
+      submit_result: { message: 'submission ok', entities: [{ type: 'frickjack' }] },
       submit_status: 200,
     };
     const { $dom } = buildTest(state);