Merge pull request #164 from edgi-govdata-archiving/html-diff-returns…

…-multiple-views

Handle new HTML diffs that return multiple views at once

src/components/diff-view.jsx

@@ -127,7 +127,7 @@ export default class DiffView extends React.Component {
     //     (page: Page) => page.uuid === pageId);
     // Promise.resolve(fromList || this.context.api.getDiff(pageId, aId, bId, changeDiffTypes[diffType]))
     this.setState({diffData: null});
-    this.context.api.getDiff(pageId, aId, bId, diffTypes[diffType].diffService)
+    this.context.api.getDiff(pageId, aId, bId, diffTypes[diffType].diffService, diffTypes[diffType].options)
       .catch(error => {
         return error;
       })

src/components/inline-rendered-diff.jsx

@@ -16,9 +16,11 @@ import SandboxedHtml from './sandboxed-html';
  */
 export default class InlineRenderedDiff extends React.Component {
   render () {
+    const diff = this.props.diffData.combined || this.props.diffData.diff;
+
     return (
       <div className="inline-render">
-        <SandboxedHtml html={this.props.diffData.diff} baseUrl={this.props.page.url} />
+        <SandboxedHtml html={diff} baseUrl={this.props.page.url} />
       </div>
     );
   }

src/components/side-by-side-rendered-diff.jsx

@@ -19,17 +19,27 @@ const showAdditions = showType.bind(null, 'additions');
  */
 export default class SideBySideRenderedDiff extends React.Component {
   render () {
+    // The newest version of this diff includes separate, more accurate
+    // versions to show for each side, but the old one needs transformations.
+    // TODO: remove this transforms business when new diffs are fully deployed.
+    let transformDeletions = (x) => x;
+    let transformInsertions = transformDeletions;
+    if (!this.props.diffData.deletions) {
+      transformDeletions = showRemovals;
+      transformInsertions = showAdditions;
+    }
+
     return (
       <div className="side-by-side-render">
         <SandboxedHtml
-          html={this.props.diffData.diff}
+          html={this.props.diffData.deletions || this.props.diffData.diff}
           baseUrl={this.props.page.url}
-          transform={showRemovals}
+          transform={transformDeletions}
         />
         <SandboxedHtml
-          html={this.props.diffData.diff}
+          html={this.props.diffData.insertions || this.props.diffData.diff}
           baseUrl={this.props.page.url}
-          transform={showAdditions}
+          transform={transformInsertions}
         />
       </div>
     );

src/constants/diff-types.js

@@ -13,7 +13,8 @@ export const diffTypes = {
   },
   SIDE_BY_SIDE_RENDERED: {
     description: 'Side-by-Side Rendered',
-    diffService: 'html_token'
+    diffService: 'html_token',
+    options: {include: 'all'}
   },
   OUTGOING_LINKS: {
     description: 'Outgoing Links',

src/services/web-monitoring-db.js

@@ -226,8 +226,9 @@ export default class WebMonitoringDb {
      * @param {string} diffType
      * @returns {Promise<DiffData>}
      */
-  getDiff (pageId, aId, bId, diffType) {
-    return this._request(this._createUrl(`pages/${pageId}/changes/${aId}..${bId}/diff/${diffType}`, {format: 'json'}))
+  getDiff (pageId, aId, bId, diffType, options) {
+    const query = Object.assign({format: 'json'}, options);
+    return this._request(this._createUrl(`pages/${pageId}/changes/${aId}..${bId}/diff/${diffType}`, query))
       .then(response => response.json())
       .then(throwIfError('Could not load diff'))
       .then(data => parseDiff(data.data));