1 files changed, 21 insertions, 2 deletions
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 23eb470503e..65816495432 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -12,9 +12,13 @@ const UNFOLD_COUNT = 20;
 let isBound = false;
 
 export default class Diff {
-  constructor() {
+  constructor({ mergeRequestEventHub } = {}) {
     const $diffFile = $('.files .diff-file');
 
+    if (mergeRequestEventHub) {
+      this.mrHub = mergeRequestEventHub;
+    }
+
     $diffFile.each((index, file) => {
       if (!$.data(file, 'singleFileDiff')) {
         $.data(file, 'singleFileDiff', new SingleFileDiff(file));
@@ -34,7 +38,8 @@ export default class Diff {
       $(document)
         .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
         .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this))
-        .on('mousedown', 'td.line_content.parallel', this.handleParallelLineDown.bind(this));
+        .on('mousedown', 'td.line_content.parallel', this.handleParallelLineDown.bind(this))
+        .on('click', '.inline-parallel-buttons a', ($e) => this.viewTypeSwitch($e));
       isBound = true;
     }
 
@@ -135,6 +140,20 @@ export default class Diff {
   diffViewType() {
     return $('.inline-parallel-buttons a.active').data('viewType');
   }
+  viewTypeSwitch(event) {
+    const click = event.originalEvent;
+    const diffSource = new URL(click.target.getAttribute('href'), document.location.href);
+
+    if (this.mrHub) {
+      click.preventDefault();
+      click.stopPropagation();
+
+      diffSource.pathname = `${diffSource.pathname}.json`;
+
+      this.mrHub.$emit('diff:switch-view-type', { source: diffSource.toString() });
+    }
+  }
+
   // eslint-disable-next-line class-methods-use-this
   lineNumbers(line) {
     const children = line.find('.diff-line-num').toArray();