Refactor diff notes creation

app/views/notes/_common_form.html.haml

@@ -8,7 +8,7 @@
 
     = f.hidden_field :noteable_id
     = f.hidden_field :noteable_type
-    = f.text_area :note, size: 255, class: 'note-text js-gfm-input'
+    = f.text_area :note, size: 255, class: 'js-note-text js-gfm-input'
     #preview-note.preview_note.hide
     .hint
       .right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
@@ -16,7 +16,7 @@
 
     .row.note_advanced_opts
       .span3
-        = f.submit 'Add Comment', class: "btn comment-btn submit_note grouped", id: "submit_note"
+        = f.submit 'Add Comment', class: "btn comment-btn grouped js-comment-button"
         = link_to 'Preview', preview_project_notes_path(@project), class: 'btn grouped', id: 'preview-link'
       .span4.notify_opts
         %h6.left Notify via email:

app/views/notes/_create_diff_note.js.haml

@@ -1,18 +1,14 @@
 - if note.valid?
   :plain
     // hide and reset the form
-    $(".per_line_form").hide();
-    $('.line-note-form-holder textarea').val("");
+    var form = $("form[rel='#{note.discussion_id}']");
+    var row = form.closest("tr");
 
-    // find the reply button for this line
-    // (might not be there if this is the first note)
-    var trRpl = $(".js-note-add-to-diff-line[data-noteable-type='#{note.noteable_type}'][data-noteable-id='#{note.noteable_id}'][data-line-code='#{note.line_code}']").closest("tr");
-    if (trRpl.size() == 0) {
-      // find the commented line ...
-      var trEl = $(".#{note.line_code}").parent();
-      // ... and insert the note and the reply button after it
-      trEl.after("#{escape_javascript(render "notes/diff_notes_with_reply", notes: [note])}");
+    // is this the first note?
+    if (row.is(".js-temp-notes-holder")) {
+      // insert the note and the reply button after it
+      row.after("#{escape_javascript(render "notes/diff_notes_with_reply", notes: [note])}");
     } else {
       // instert new note before reply button
-      trRpl.before("#{escape_javascript(render "notes/diff_note", note: note)}");
+      row.find(".notes").append("#{escape_javascript(render "notes/note", note: note)}");
     }

app/views/notes/_diff_note_form.html.haml

@@ -1,31 +1,26 @@
-%table{style: "display:none;"}
-  %tr.per_line_form
-    %td{colspan: 3 }
-      .line-note-form-holder
-        = form_for [@project, @note], remote: "true", multipart: true do |f|
-          %h3.page_title Leave a comment
-          %div.span10
-            -if @note.errors.any?
-              .alert-message.block-message.error
-                - @note.errors.full_messages.each do |msg|
-                  %div= msg
+= form_for [@project, @note], remote: true, html: { multipart: true, class: "new_note new_diff_note js-diff-note-form" } do |f|
+  .span10
+    -if @note.errors.any?
+      .alert-message.block-message.error
+        - @note.errors.full_messages.each do |msg|
+          %div= msg
 
-            = f.hidden_field :noteable_id
-            = f.hidden_field :noteable_type
-            = f.hidden_field :line_code
-            = f.text_area :note,  size: 255, class: 'line-note-text js-gfm-input'
-            .note_actions
-              .buttons
-                = f.submit 'Add Comment', class: "btn save-btn submit_note submit_inline_note", id: "submit_note"
-                = link_to "Cancel", "javascript:;", class: "btn hide-button"
-              .options
-                %h6.left Notify via email:
-                .labels
-                  = label_tag :notify do
-                    = check_box_tag :notify, 1, @note.noteable_type != "Commit"
-                    %span Project team
+    = f.hidden_field :noteable_id
+    = f.hidden_field :noteable_type
+    = f.hidden_field :line_code
+    = f.text_area :note,  size: 255, class: 'js-note-text js-gfm-input'
+    .note_actions
+      .buttons
+        = f.submit 'Add Comment', class: "btn save-btn js-comment-button"
+        %button.btn.js-hide-diff-note-form Cancel
+      .options
+        %h6.left Notify via email:
+        .labels
+          = label_tag :notify do
+            = check_box_tag :notify, 1, @note.noteable_type != "Commit"
+            %span Project team
 
-                  - if @note.notify_only_author?(current_user)
-                    = label_tag :notify_author do
-                      = check_box_tag :notify_author, 1 , @note.noteable_type == "Commit"
-                      %span Commit author
+          - if @note.notify_only_author?(current_user)
+            = label_tag :notify_author do
+              = check_box_tag :notify_author, 1 , @note.noteable_type == "Commit"
+              %span Commit author

app/views/notes/_diff_note_link.html.haml

@@ -1,6 +1,9 @@
+- note = @project.notes.new(@comments_target.merge({ line_code: line_code }))
 = link_to "",
-          "#",
-          id: "add-diff-line-note-#{line_code}",
-          class: "line_note_link js-note-add-to-diff-line",
-          data: @comments_target.merge({ line_code: line_code }),
+          "javascript:;",
+          class: "add-diff-note js-add-diff-note-button",
+          data: { noteable_type: note.noteable_type,
+                  noteable_id:   note.noteable_id,
+                  line_code:     note.line_code,
+                  discussion_id: note.discussion_id },
           title: "Add a comment to this line"

app/views/notes/_diff_notes_with_reply.html.haml

@@ -1,4 +1,5 @@
-%tr.notes_holder
+- note = notes.first # example note
+%tr.notes_holder{ data: { :'discussion-id' => note.discussion_id } }
   %td.notes_line{ colspan: 2 }
     %span.btn.disabled
       %i.icon-comment
@@ -8,11 +9,12 @@
       = render notes
 
     -# reply button
-    - note = notes.first # example note
-    %button{  class: "btn comment-btn js-note-add-to-diff-line",
-              data: { line_code:     note.line_code,
-                      noteable_type: note.noteable_type,
-                      noteable_id:   note.noteable_id },
-              title: "Add a comment to this line" }
+    = link_to "javascript:;",
+              class: "btn comment-btn js-diff-note-reply-button",
+              data: { noteable_type: note.noteable_type,
+                      noteable_id:   note.noteable_id,
+                      line_code:     note.line_code,
+                      discussion_id: note.discussion_id },
+              title: "Add a comment to this line" do
       %i.icon-comment
       Reply

app/views/notes/_notes_with_form.html.haml

@@ -3,7 +3,9 @@
 .notes-status
 
 - if can? current_user, :write_note, @project
-  = render "notes/common_form"
+  .note-forms.js-note-forms
+    = render "notes/common_form"
+    = render "notes/diff_note_form"
 
 :javascript
   $(function(){

app/views/notes/create.js.haml

@@ -2,7 +2,3 @@
   = render "create_diff_note", note: @note
 - else
   = render "create_common_note", note: @note
-
--# Enable submit button
-:plain
-  $("#submit_note").removeAttr("disabled");

app/views/notes/index.js.haml

@@ -16,7 +16,3 @@
   - if loading_more_notes?
     :plain
       NoteList.finishedLoadingMore();
-
-- if @has_diff
-  :plain
-    PerLineNotes.init();