Fix/submit style

src/Submission/SubmissionResult.jsx

@@ -5,12 +5,14 @@ import 'brace/mode/json';
 import 'brace/theme/kuroir';
 import AceEditor from 'react-ace';
 import PropTypes from 'prop-types';
+import FlatButton from 'material-ui/FlatButton';
 
 import { button } from '../theme';
 
 const Container = styled.div`
 border-top: 1px dashed ${props => props.theme.mid_gray};
 padding-top: 1em;
+padding-bottom: 1em;
 margin-top: 1em;
 `;
 
@@ -38,53 +40,75 @@ const summaryListStyle = {
  * @param {number} status
  * @param {object} data 
  */
-const SubmissionResult = ({ status, data }) => {
-  let summary = null;
+class SubmissionResult extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { showFullResponse: false };
+  }
+
+  render() {
+    const { status, data } = this.props;
+    let summary = null;
+    const fullResponse = (() => {
+      if (this.state.showFullResponse) {
+        return (
+          <div>
+            <p>Details:</p>
+            <AceEditor width="100%" height="300px" style={{ marginBottom: '1em' }} mode="json" theme="kuroir" readOnly value={JSON.stringify(data, null, '    ')} />
+          </div>
+        );
+      }
+      return (
+        <div>
+          <FlatButton backgroundColor="#ddddee" onClick={() => this.setState({ showFullResponse: true })} label="Details" />
+        </div>
+      );
+    })();
 
-  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, '    ')}
-      />
+    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>);
     }
-  } 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>
-  );
-};
+    return (
+      <Container id="cd-submit-tsv__result">
+        <Status status={status}>{status === 200 ? `succeeded: ${status}` : `failed: ${status}`}</Status>
+        {summary}
+        {fullResponse}
+      </Container>
+    );
+  }
+}
 
 SubmissionResult.propTypes = {
   status: PropTypes.number.isRequired,

src/Submission/SubmitTSV.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 
 import SubmitTSV from './SubmitTSV';
 
@@ -15,13 +16,15 @@ describe('the TSV submission componet', () => {
    */
   function buildTest(submission = { file: '', submit_result: '', submit_status: 200 }, submitCallback = () => {}) {
     const $dom = mount(
-      <SubmitTSV
-        path={testProjName}
-        submission={submission}
-        onUploadClick={() => { console.log('onUpload'); }}
-        onSubmitClick={(typeStr, path, dict) => { console.log('onSubmitClick'); submitCallback(typeStr, path, dict); }}
-        onFileChange={() => { console.log('onFileChange'); }}
-      />,
+      <MuiThemeProvider>
+        <SubmitTSV
+          path={testProjName}
+          submission={submission}
+          onUploadClick={() => { console.log('onUpload'); }}
+          onSubmitClick={(typeStr, path, dict) => { console.log('onSubmitClick'); submitCallback(typeStr, path, dict); }}
+          onFileChange={() => { console.log('onFileChange'); }}
+        />
+      </MuiThemeProvider>,
     );
 
     return { $dom };