From 08e37c1fee2f6d7e7fb2ce5dea8769c359448fe8 Mon Sep 17 00:00:00 2001 From: Rob Brackett Date: Mon, 11 Dec 2017 17:32:47 -0800 Subject: [PATCH 1/3] Add ability to specify options for diffs --- src/services/web-monitoring-db.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/services/web-monitoring-db.js b/src/services/web-monitoring-db.js index d0d31280..7030cfc5 100644 --- a/src/services/web-monitoring-db.js +++ b/src/services/web-monitoring-db.js @@ -226,8 +226,9 @@ export default class WebMonitoringDb { * @param {string} diffType * @returns {Promise} */ - 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)); From e36b6fe87b044fa5361cf89c1e6d5c4b2f3b85c9 Mon Sep 17 00:00:00 2001 From: Rob Brackett Date: Mon, 11 Dec 2017 17:34:16 -0800 Subject: [PATCH 2/3] Rough pass on HTML diff returning multiple views The HTML diff can now return multiple views (e.g. deletions only, insertions only, combined) all together. This adds handling for those responses in the UI, which allows us to have much more accurate side-by-side rendering. --- src/components/diff-view.jsx | 2 +- src/components/inline-rendered-diff.jsx | 4 +++- src/components/side-by-side-rendered-diff.jsx | 8 ++++---- src/constants/diff-types.js | 3 ++- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/diff-view.jsx b/src/components/diff-view.jsx index 40943fd9..3794c413 100644 --- a/src/components/diff-view.jsx +++ b/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; }) diff --git a/src/components/inline-rendered-diff.jsx b/src/components/inline-rendered-diff.jsx index 8b9618c5..879de715 100644 --- a/src/components/inline-rendered-diff.jsx +++ b/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 (
- +
); } diff --git a/src/components/side-by-side-rendered-diff.jsx b/src/components/side-by-side-rendered-diff.jsx index 9932182f..2758eb8f 100644 --- a/src/components/side-by-side-rendered-diff.jsx +++ b/src/components/side-by-side-rendered-diff.jsx @@ -22,14 +22,14 @@ export default class SideBySideRenderedDiff extends React.Component { return (
); diff --git a/src/constants/diff-types.js b/src/constants/diff-types.js index e4805c10..3fd05a05 100644 --- a/src/constants/diff-types.js +++ b/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', From 182e6bc482b31cc92febdb3700c50b0a56e618ee Mon Sep 17 00:00:00 2001 From: Rob Brackett Date: Mon, 18 Dec 2017 11:58:15 -0800 Subject: [PATCH 3/3] Make diff code work w/ old + combined diffs Make sure everywhere we handle diffs works with the current setup and with the changes on edgi-govdata-archiving/web-monitoring-processing#136, where the HTML visual diff returns multiple diffs. --- src/components/side-by-side-rendered-diff.jsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/side-by-side-rendered-diff.jsx b/src/components/side-by-side-rendered-diff.jsx index 2758eb8f..e457be48 100644 --- a/src/components/side-by-side-rendered-diff.jsx +++ b/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 (
);