CSV Response viewer

packages/insomnia-app/app/ui/components/viewers/response-cookies-viewer.js

@@ -51,7 +51,7 @@ class ResponseCookiesViewer extends PureComponent {
           </div>
         )}
 
-        <table className="table--fancy table--striped">
+        <table className="table--fancy table--striped table--compact">
           <thead>
           <tr>
             <th>Name</th>

packages/insomnia-app/app/ui/components/viewers/response-csv-viewer.js

@@ -0,0 +1,69 @@
+// @flow
+import * as React from 'react';
+import Papa from 'papaparse';
+import autobind from 'autobind-decorator';
+
+type Props = {
+  body: Buffer
+};
+
+type State = {
+  result: null | {data: Array<Array<string>>}
+};
+
+@autobind
+class ResponseCSVViewer extends React.PureComponent<Props, State> {
+  currentHash: string;
+
+  constructor (props: Props) {
+    super(props);
+    this.state = {
+      result: null
+    };
+    this.currentHash = '';
+  }
+
+  update (body: Buffer) {
+    const csv = body.toString('utf8');
+
+    Papa.parse(csv, {
+      skipEmptyLines: true,
+      complete: result => {
+        this.setState({result});
+      }
+    });
+  }
+
+  componentDidMount () {
+    this.update(this.props.body);
+  }
+
+  componentWillUpdate (nextProps: Props, nextState: State) {
+    if (this.props.body === nextProps.body) {
+      return;
+    }
+
+    this.update(nextProps.body);
+  }
+
+  render () {
+    const {result} = this.state;
+    if (!result) {
+      return 'Parsing CSV...';
+    }
+
+    return (
+      <div className="pad-sm">
+        <table className="table--fancy table--striped table--compact selectable">
+          <tbody>
+          {result.data.map(row => (
+            <tr>{row.map(c => <td>{c}</td>)}</tr>
+          ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default ResponseCSVViewer;

packages/insomnia-app/app/ui/components/viewers/response-headers-viewer.js

@@ -14,7 +14,7 @@ class ResponseHeadersViewer extends React.PureComponent<Props> {
     const headersString = headers.map(h => `${h.name}: ${h.value}`).join('\n');
 
     return [
-      <table key='table' className="table--fancy table--striped">
+      <table key='table' className="table--fancy table--striped table--compact">
         <thead>
         <tr>
           <th>Name</th>

packages/insomnia-app/app/ui/components/viewers/response-pdf-viewer.js

@@ -13,7 +13,7 @@ type State = {
 };
 
 @autobind
-class PDFViewer extends React.PureComponent<Props, State> {
+class ResponsePDFViewer extends React.PureComponent<Props, State> {
   container: ?HTMLDivElement;
   debounceTimeout: any;
 
@@ -109,4 +109,4 @@ class PDFViewer extends React.PureComponent<Props, State> {
   }
 }
 
-export default PDFViewer;
+export default ResponsePDFViewer;

packages/insomnia-app/app/ui/components/viewers/response-viewer.js

@@ -3,7 +3,8 @@ import * as React from 'react';
 import iconv from 'iconv-lite';
 import autobind from 'autobind-decorator';
 import {shell} from 'electron';
-import PDFViewer from '../pdf-viewer';
+import PDFViewer from './response-pdf-viewer';
+import CSVViewer from './response-csv-viewer';
 import CodeEditor from '../codemirror/code-editor';
 import ResponseWebView from './response-webview';
 import MultipartViewer from './response-multipart';
@@ -279,6 +280,12 @@ class ResponseViewer extends React.Component<Props, State> {
           <PDFViewer body={bodyBuffer} uniqueKey={responseId}/>
         </div>
       );
+    } else if (previewMode === PREVIEW_MODE_FRIENDLY && ct.indexOf('text/csv') === 0) {
+      return (
+        <div className="tall wide scrollable">
+          <CSVViewer body={bodyBuffer}/>
+        </div>
+      );
     } else if (previewMode === PREVIEW_MODE_FRIENDLY && ct.indexOf('multipart/') === 0) {
       return (
         <MultipartViewer

packages/insomnia-app/app/ui/css/layout/base.less

@@ -96,6 +96,10 @@ table.table--fancy {
     padding: @padding-sm;
   }
 
+  &.table--compact td, th {
+    padding: @padding-xs;
+  }
+
   th {
     text-align: left;
     padding-bottom: @padding-sm;

packages/insomnia-app/flow-typed/papaparse.js

@@ -0,0 +1,5 @@
+declare module 'papaparse' {
+  declare module.exports: {
+    parse: Function
+  }
+}

packages/insomnia-app/package-lock.json

@@ -11211,6 +11211,11 @@
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
       "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg=="
     },
+    "papaparse": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-4.3.6.tgz",
+      "integrity": "sha1-lWbtoOyrE6/LdApiOBxpn0hssUU="
+    },
     "parse-asn1": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.0.tgz",

packages/insomnia-app/package.json

@@ -127,6 +127,7 @@
     "node-forge": "^0.7.0",
     "nunjucks": "^3.0.0",
     "oauth-1.0a": "^2.2.2",
+    "papaparse": "^4.3.6",
     "pdfjs-dist": "^1.9.640",
     "prop-types": "^15.5.10",
     "react": "^16.0.0",