Add comments on the side-by-side diff.

app/assets/stylesheets/sections/notes.scss

@@ -90,6 +90,9 @@ ul.notes {
       border-width: 1px 0;
       padding-top: 0;
       vertical-align: top;
+      &.parallel{
+        border-width: 1px;
+      }
     }
   }
 }

app/helpers/diff_helper.rb

@@ -49,14 +49,16 @@ module DiffHelper
       next_line = diff_file.next_line(line.index)
 
       if next_line
+        next_line_code = generate_line_code(diff_file.file_path, next_line)
         next_type = next_line.type
         next_line = next_line.text
       end
 
-      line = [type, line_old, full_line, line_code, next_type, line_new]
+      line = [type, line_old, full_line, line_code, next_line_code, next_type, line_new]
+
       if type == 'match' || type.nil?
         # line in the right panel is the same as in the left one
-        line = [type, line_old, full_line, line_code, type, line_new, full_line]
+        line = [type, line_old, full_line, line_code, line_code, type, line_new, full_line]
         lines.push(line)
       elsif type == 'old'
         if next_type == 'new'
@@ -78,7 +80,7 @@ module DiffHelper
           next
         else
           # Change is only on the right side, left side has no change
-          line = [nil, nil, " ", line_code, type, line_new, full_line]
+          line = [nil, nil, " ", line_code, line_code, type, line_new, full_line]
           lines.push(line)
         end
       end
@@ -97,4 +99,8 @@ module DiffHelper
       line
     end
   end
+
+  def line_comments
+    @line_comments ||= @line_notes.group_by(&:line_code)
+  end
 end

app/views/projects/diffs/_parallel_view.html.haml

@@ -6,21 +6,41 @@
       - line_number_left = line[1]
       - line_content_left = line[2]
       - line_code = line[3]
-      - type_right = line[4]
-      - line_number_right = line[5]
-      - line_content_right = line[6]
+      - line_code_next = line[4]
+      - type_right = line[5]
+      - line_number_right = line[6]
+      - line_content_right = line[7]
 
-      %tr.line_holder.parallel{id: line_code}
+      %tr.line_holder.parallel
         - if type_left == 'match'
           = render "projects/diffs/match_line_parallel", { line: line_content_left,
           line_old: line_number_left, line_new: line_number_right }
         - elsif type_left ==  'old' || type_left.nil?
-          %td.old_line{class: "#{type_left}"}
+          %td.old_line{id: line_code, class: "#{type_left}"}
             = link_to raw(line_number_left), "##{line_code}", id: line_code
             %td.line_content{class: "parallel noteable_line #{type_left} #{line_code}", "line_code" => line_code }= raw line_content_left
-          %td.new_line{ class: "#{type_right == 'new' ? 'new' : nil}", data: { linenumber: line_number_right }}
-            = link_to raw(line_number_right), "##{line_code}", id: line_code
-            %td.line_content.parallel{class: "noteable_line #{type_right == 'new' ? 'new' : nil} #{line_code}", "line_code" => line_code}= raw line_content_right
+
+          - if type_right == 'new'
+            - new_line_class = 'new'
+            - new_line_code = line_code_next
+          - else
+            - new_line_class = nil
+            - new_line_code = line_code
+
+          %td.new_line{id: new_line_code, class: "#{new_line_class}", data: { linenumber: line_number_right }}
+            = link_to raw(line_number_right), "##{new_line_code}", id: new_line_code
+            %td.line_content.parallel{class: "noteable_line #{new_line_class} #{new_line_code}", "line_code" => new_line_code}= raw line_content_right
+
+      - if @reply_allowed
+        - if type_left.nil? && type_right == 'new'
+          - comments1 = nil
+        - else
+          - comments1 = line_comments[line_code]
+        - unless type_left.nil? && type_right.nil?
+          - comments2 = line_comments[line_code_next]
+
+        - if comments1.present? || comments2.present?
+          = render "projects/notes/diff_notes_with_reply_parallel", notes1: comments1, notes2: comments2
 
 - if diff_file.diff.diff.blank? && diff_file.mode_changed?
   .file-mode-changed

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

@@ -1,5 +1,5 @@
-- note1 = notes1.first # example note
-- note2 = notes2.first # example note
+- note1 = notes1.present? ? notes1.first : nil
+- note2 = notes2.present? ? notes2.first : nil
 -# Check if line want not changed since comment was left
 /- if !defined?(line) || line == note.diff_line
 %tr.notes_holder
@@ -8,7 +8,7 @@
       %span.btn.disabled
         %i.icon-comment
         = notes1.count
-    %td.notes_content
+    %td.notes_content.parallel
       %ul.notes{ rel: note1.discussion_id }
         = render notes1
 
@@ -23,7 +23,7 @@
       %span.btn.disabled
         %i.icon-comment
         = notes2.count
-    %td.notes_content
+    %td.notes_content.parallel
       %ul.notes{ rel: note2.discussion_id }
         = render notes2