Optinally download prettified response body

packages/insomnia-app/app/ui/components/dropdowns/preview-mode-dropdown.js

@@ -1,16 +1,35 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+// @flow
+import * as React from 'react';
 import autobind from 'autobind-decorator';
 import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown';
 import { getPreviewModeName, PREVIEW_MODES } from '../../../common/constants';
 
+type Props = {|
+  download: (pretty: boolean) => any,
+  fullDownload: (pretty: boolean) => any,
+  updatePreviewMode: string => any,
+  previewMode: string,
+  showPrettifyOption?: boolean,
+|};
+
 @autobind
-class PreviewModeDropdown extends PureComponent {
-  _handleClick(previewMode) {
-    this.props.updatePreviewMode(previewMode);
+class PreviewModeDropdown extends React.PureComponent<Props> {
+  async _handleClick(previewMode: string) {
+    const { updatePreviewMode } = this.props;
+    await updatePreviewMode(previewMode);
   }
 
-  renderPreviewMode(mode) {
+  async _handleDownloadPrettify() {
+    const { download } = this.props;
+    download(true);
+  }
+
+  async _handleDownloadNormal() {
+    const { download } = this.props;
+    download(false);
+  }
+
+  renderPreviewMode(mode: string) {
     const { previewMode } = this.props;
     return (
       <DropdownItem key={mode} onClick={this._handleClick} value={mode}>
@@ -21,7 +40,8 @@ class PreviewModeDropdown extends PureComponent {
   }
 
   render() {
-    const { download, fullDownload, previewMode } = this.props;
+    const { fullDownload, previewMode, showPrettifyOption } = this.props;
+
     return (
       <Dropdown beside>
         <DropdownButton className="tall">
@@ -31,27 +51,23 @@ class PreviewModeDropdown extends PureComponent {
         <DropdownDivider>Preview Mode</DropdownDivider>
         {PREVIEW_MODES.map(this.renderPreviewMode)}
         <DropdownDivider>Actions</DropdownDivider>
-        <DropdownItem onClick={download}>
+        <DropdownItem onClick={this._handleDownloadNormal}>
           <i className="fa fa-save" />
-          Save Response Body
+          Save Raw Response
         </DropdownItem>
+        {showPrettifyOption && (
+          <DropdownItem onClick={this._handleDownloadPrettify}>
+            <i className="fa fa-save" />
+            Save Prettified Response
+          </DropdownItem>
+        )}
         <DropdownItem onClick={fullDownload}>
-          <i className="fa fa-save" />
-          Save Full Response
+          <i className="fa fa-bug" />
+          Save HTTP Debug
         </DropdownItem>
       </Dropdown>
     );
   }
 }
 
-PreviewModeDropdown.propTypes = {
-  // Functions
-  updatePreviewMode: PropTypes.func.isRequired,
-  download: PropTypes.func.isRequired,
-  fullDownload: PropTypes.func.isRequired,
-
-  // Required
-  previewMode: PropTypes.string.isRequired,
-};
-
 export default PreviewModeDropdown;

packages/insomnia-app/app/ui/components/response-pane.js

@@ -29,7 +29,7 @@ import type { HotKeyRegistry } from '../../common/hotkeys';
 import { hotKeyRefs } from '../../common/hotkeys';
 import type { RequestVersion } from '../../models/request-version';
 import { showError } from '../components/modals/index';
-import prettify from 'insomnia-prettify';
+import { json as jsonPrettify } from 'insomnia-prettify';
 
 type Props = {
   // Functions
@@ -75,7 +75,7 @@ class ResponsePane extends React.PureComponent<Props> {
     return models.response.getBodyBuffer(this.props.response);
   }
 
-  async _handleDownloadResponseBody() {
+  async _handleDownloadResponseBody(prettify: boolean) {
     const { response, request } = this.props;
     if (!response || !request) {
       // Should never happen
@@ -105,10 +105,8 @@ class ResponsePane extends React.PureComponent<Props> {
         });
         readStream.on('end', () => {
           const to = fs.createWriteStream(outputPath);
-          if (extension === 'json') {
-            dataBuffers = prettify.json(dataBuffers);
-          }
-          to.write(dataBuffers);
+          const finalBuffer = Buffer.concat(dataBuffers);
+
           to.on('error', err => {
             showError({
               title: 'Save Failed',
@@ -116,6 +114,12 @@ class ResponsePane extends React.PureComponent<Props> {
               error: err,
             });
           });
+
+          if (prettify && contentType.includes('json')) {
+            to.write(jsonPrettify(finalBuffer.toString('utf8')));
+          } else {
+            to.write(finalBuffer);
+          }
         });
       }
     });
@@ -304,6 +308,7 @@ class ResponsePane extends React.PureComponent<Props> {
                 fullDownload={this._handleDownloadFullResponseBody}
                 previewMode={previewMode}
                 updatePreviewMode={handleSetPreviewMode}
+                showPrettifyOption={response.contentType.includes('json')}
               />
             </Tab>
             <Tab tabIndex="-1">