Fix broken side-by-side diff view on merge request page

Closes #1294

4 files changed, 26 insertions, 0 deletions

diff --git a/CHANGELOG b/CHANGELOG
index f9bd0940a71..0de04eac64f 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,6 +1,7 @@
 Please view this file on the master branch, on stable branches it's out of date.
 
 v 7.10.0 (unreleased)
+  - Fix broken side-by-side diff view on merge request page (Stan Hu)
   - Allow HTML tags in Markdown input
   - Fix code unfold not working on Compare commits page (Stan Hu)
   - Include missing events and fix save functionality in admin service template settings form (Stan Hu)
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index f81504991d3..b56f21c7a18 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -121,6 +121,8 @@ module DiffHelper
   def inline_diff_btn
     params_copy = params.dup
     params_copy[:view] = 'inline'
+    # Always use HTML to handle case where JSON diff rendered this button
+    params_copy.delete(:format)
 
     link_to url_for(params_copy), id: "commit-diff-viewtype", class: (params[:view] != 'parallel' ? 'btn btn-sm active' : 'btn btn-sm') do
       'Inline'
@@ -130,6 +132,8 @@ module DiffHelper
   def parallel_diff_btn
     params_copy = params.dup
     params_copy[:view] = 'parallel'
+    # Always use HTML to handle case where JSON diff rendered this button
+    params_copy.delete(:format)
 
     link_to url_for(params_copy), id: "commit-diff-viewtype", class: (params[:view] == 'parallel' ? 'btn active btn-sm' : 'btn btn-sm') do
       'Side-by-side'
diff --git a/features/project/merge_requests.feature b/features/project/merge_requests.feature
index 91dc576f8b4..cbb5c8eb39b 100644
--- a/features/project/merge_requests.feature
+++ b/features/project/merge_requests.feature
@@ -166,6 +166,13 @@ Feature: Project Merge Requests
     And I click Side-by-side Diff tab
     Then I should see comments on the side-by-side diff page
 
+  @javascript
+  Scenario: I view diffs on a merge request
+    Given project "Shop" have "Bug NS-05" open merge request with diffs inside
+    And I visit merge request page "Bug NS-05"
+    And I click on the Changes tab via Javascript
+    Then I should see the proper Inline and Side-by-side links
+
   # Task status in issues list
 
   Scenario: Merge requests list should display task status
diff --git a/features/steps/project/merge_requests.rb b/features/steps/project/merge_requests.rb
index 6f6ce439f3e..40c102833a4 100644
--- a/features/steps/project/merge_requests.rb
+++ b/features/steps/project/merge_requests.rb
@@ -117,6 +117,20 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
     visit diffs_namespace_project_merge_request_path(project.namespace, project, merge_request)
   end
 
+  step 'I click on the Changes tab via Javascript' do
+    find('.diffs-tab').click
+    sleep 2
+  end
+
+  step 'I should see the proper Inline and Side-by-side links' do
+    buttons = all('#commit-diff-viewtype')
+    expect(buttons.count).to eq(2)
+
+    buttons.each do |b|
+      expect(b['href']).should_not have_content('json')
+    end
+  end
+
   step 'I switch to the merge request\'s comments tab' do
     visit namespace_project_merge_request_path(project.namespace, project, merge_request)
   end