Add button for toggling inline comments in diff view.

This is useful when there are many comments and they're becoming a distraction when trying to read the diff.

app/assets/stylesheets/sections/commits.scss

@@ -60,6 +60,9 @@
     }
 
     table {
+      &.text-file {
+        border-collapse: separate;
+      }
       width: 100%;
       font-family: $monospace_font;
       border: none;

app/assets/stylesheets/sections/notes.scss

@@ -184,13 +184,40 @@ ul.notes {
     }
   }
 }
+
+.file {
+  .discussion-actions {
+    margin-right: 5px;
+    margin-top: 3px;
+
+    .turn-off {
+      display: inherit;
+    }
+    .turn-on {
+      display: none;
+    }
+  }
+
+  &.open .discussion-actions {
+    .turn-off {
+      display: none;
+    }
+    .turn-on {
+      display: inherit;
+    }
+  }
+
+  &[id^="diff"] .content {
+    display: block;
+  }
+}
+
 .file .note .note-actions {
   right: 0;
   top: 0;
 }
 
 
-
 /**
  * Line note button on the side of diffs
  */

app/views/projects/commits/_diffs.html.haml

@@ -44,7 +44,7 @@
       - file = project.repository.blob_at(@commit.id, diff.new_path)
       - file = project.repository.blob_at(@commit.parent_id, diff.old_path) unless file
       - next unless file
-      .file{id: "diff-#{i}"}
+      .file.js-details-container.js-toggle-container.open{id: "diff-#{i}"}
         .header
           - if diff.deleted_file
             %span= diff.old_path
@@ -62,6 +62,14 @@
               View file @
               %span.commit-short-id= @commit.short_id(6)
 
+          .discussion-actions.pull-right
+            = link_to "javascript:;", class: "js-details-target js-toggle-button turn-on" do
+              %i.icon-eye-close
+              Hide inline discussion
+            = link_to "javascript:;", class: "js-details-target js-toggle-button turn-off" do
+              %i.icon-eye-open
+              Show inline discussion
+
         .content
           -# Skipp all non non-supported blobs
           - next unless file.respond_to?('text?')

app/views/projects/notes/_diff_notes_with_reply.html.haml

@@ -1,7 +1,7 @@
 - note = notes.first # example note
 -# Check if line want not changed since comment was left
 - if !defined?(line) || line == note.diff_line
-  %tr.notes_holder
+  %tr.notes_holder.js-toggle-content
     %td.notes_line{ colspan: 2 }
       %span.btn.disabled
         %i.icon-comment

app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml

@@ -1,6 +1,6 @@
 - note1 = notes1.first # example note
 - note2 = notes2.first # example note
-%tr.notes_holder
+%tr.notes_holder.js-toggle-content
   -# Check if line want not changed since comment was left
   /- if !defined?(line1) || line1 == note1.diff_line
   - if note1

features/project/merge_requests.feature

@@ -88,3 +88,47 @@ Feature: Project Merge Requests
     Given I visit merge request page "Bug NS-04"
     And I leave a comment with a header containing "Comment with a header"
     Then The comment with the header should not have an ID
+
+  # Toggling inline comments
+
+  @javascript
+  Scenario: I hide comments on a merge request diff with comments in a single file
+    Given project "Shop" have "Bug NS-05" open merge request with diffs inside
+    And I visit merge request page "Bug NS-05"
+    And I switch to the diff tab
+    And I leave a comment like "Line is wrong" on line 39 of the second file
+    And I click link "Hide inline discussion" of the second file
+    Then I should not see a comment like "Line is wrong" in the second file
+
+  @javascript
+  Scenario: I show comments on a merge request diff with comments in a single file
+    Given project "Shop" have "Bug NS-05" open merge request with diffs inside
+    And I visit merge request page "Bug NS-05"
+    And I switch to the diff tab
+    And I leave a comment like "Line is wrong" on line 39 of the second file
+    And I click link "Hide inline discussion" of the second file
+    And I click link "Show inline discussion" of the second file
+    Then I should see a comment like "Line is wrong" in the second file
+
+  @javascript
+  Scenario: I hide comments on a merge request diff with comments in multiple files
+    Given project "Shop" have "Bug NS-05" open merge request with diffs inside
+    And I visit merge request page "Bug NS-05"
+    And I switch to the diff tab
+    And I leave a comment like "Line is correct" on line 12 of the first file
+    And I leave a comment like "Line is wrong" on line 39 of the second file
+    And I click link "Hide inline discussion" of the second file
+    Then I should not see a comment like "Line is wrong" in the second file
+    And I should still see a comment like "Line is correct" in the first file
+
+  @javascript
+  Scenario: I show comments on a merge request diff with comments in multiple files
+    Given project "Shop" have "Bug NS-05" open merge request with diffs inside
+    And I visit merge request page "Bug NS-05"
+    And I switch to the diff tab
+    And I leave a comment like "Line is correct" on line 12 of the first file
+    And I leave a comment like "Line is wrong" on line 39 of the second file
+    And I click link "Hide inline discussion" of the second file
+    And I click link "Show inline discussion" of the second file
+    Then I should see a comment like "Line is wrong" in the second file
+    And I should still see a comment like "Line is correct" in the first file

features/steps/project/project_merge_requests.rb

@@ -170,6 +170,62 @@ class ProjectMergeRequests < Spinach::FeatureSteps
     end
   end
 
+  step 'I click link "Hide inline discussion" of the second file' do
+    within '.files [id^=diff]:nth-child(2)' do
+      click_link "Hide inline discussion"
+    end
+  end
+
+  step 'I click link "Show inline discussion" of the second file' do
+    within '.files [id^=diff]:nth-child(2)' do
+      click_link "Show inline discussion"
+    end
+  end
+
+  step 'I should not see a comment like "Line is wrong" in the second file' do
+    within '.files [id^=diff]:nth-child(2)' do
+      page.should_not have_visible_content "Line is wrong"
+    end
+  end
+
+  step 'I should see a comment like "Line is wrong" in the second file' do
+    within '.files [id^=diff]:nth-child(2) .note-text' do
+      page.should have_visible_content "Line is wrong"
+    end
+  end
+
+  step 'I leave a comment like "Line is correct" on line 12 of the first file' do
+    init_diff_note_first_file
+
+    within(".js-discussion-note-form") do
+      fill_in "note_note", with: "Line is correct"
+      click_button "Add Comment"
+    end
+
+    within ".files [id^=diff]:nth-child(1) .note-text" do
+      page.should have_content "Line is correct"
+    end
+  end
+
+  step 'I leave a comment like "Line is wrong" on line 39 of the second file' do
+    init_diff_note_second_file
+
+    within(".js-discussion-note-form") do
+      fill_in "note_note", with: "Line is wrong"
+      click_button "Add Comment"
+    end
+
+    within ".files [id^=diff]:nth-child(2) .note-text" do
+      page.should have_content "Line is wrong"
+    end
+  end
+
+  step 'I should still see a comment like "Line is correct" in the first file' do
+    within '.files [id^=diff]:nth-child(1) .note-text' do
+      page.should have_visible_content "Line is correct"
+    end
+  end
+
   def project
     @project ||= Project.find_by!(name: "Shop")
   end
@@ -192,4 +248,16 @@ class ProjectMergeRequests < Spinach::FeatureSteps
       page.should have_content message
     end
   end
+
+  def init_diff_note_first_file
+    find('a[data-line-code="a5cc2925ca8258af241be7e5b0381edf30266302_12_12"]').click
+  end
+
+  def init_diff_note_second_file
+    find('a[data-line-code="8ec9a00bfd09b3190ac6b22251dbb1aa95a0579d_28_39"]').click
+  end
+
+  def have_visible_content (text)
+    have_css("*", text: text, visible: true)
+  end
 end