Avoid render edit_form in each notes.

Use RJS to render edit note feature.

Before:

```
Rendered projects/notes/_note.html.haml (27.9ms)
Rendered projects/_zen.html.haml (0.3ms)
Rendered projects/notes/_hints.html.haml (0.7ms)
Rendered projects/_md_preview.html.haml (3.9ms)
Rendered projects/notes/_edit_form.html.haml (6.9ms)
Rendered projects/notes/_note.html.haml (17.7ms)
Rendered projects/_zen.html.haml (0.3ms)
Rendered projects/notes/_hints.html.haml (0.6ms)
Rendered projects/_md_preview.html.haml (3.4ms)
Rendered projects/notes/_edit_form.html.haml (7.0ms)
```

After:

```
Rendered projects/notes/_note.html.haml (13.8ms)
Rendered projects/notes/_note.html.haml (7.1ms)
Rendered projects/notes/_note.html.haml (9.5ms)
Rendered projects/notes/_note.html.haml (8.5ms)
```

This change reduce at least 6ms * N ('N' - number of notes).

5 files changed, 16 insertions, 13 deletions

diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index ea75c656bcc..b0682f16845 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -29,7 +29,6 @@ class @Notes
     $(document).on "ajax:success", "form.edit_note", @updateNote
 
     # Edit note link
-    $(document).on "click", ".js-note-edit", @showEditForm
     $(document).on "click", ".note-edit-cancel", @cancelEdit
 
     # Reopen and close actions for Issue/MR combined with note form submit
@@ -67,7 +66,6 @@ class @Notes
     $(document).off "ajax:success", ".js-main-target-form"
     $(document).off "ajax:success", ".js-discussion-note-form"
     $(document).off "ajax:success", "form.edit_note"
-    $(document).off "click", ".js-note-edit"
     $(document).off "click", ".note-edit-cancel"
     $(document).off "click", ".js-note-delete"
     $(document).off "click", ".js-note-attachment-delete"
@@ -287,13 +285,14 @@ class @Notes
   Adds a hidden div with the original content of the note to fill the edit note form with
   if the user cancels
   ###
-  showEditForm: (e) ->
-    e.preventDefault()
-    note = $(this).closest(".note")
+  showEditForm: (note, formHTML) ->
+    nodeText = note.find(".note-text");
+    nodeText.hide()
+    note.find('.note-edit-form').remove()
+    nodeText.after(formHTML)
     note.find(".note-body > .note-text").hide()
     note.find(".note-header").hide()
-    base_form = note.find(".note-edit-form")
-    form = base_form.clone().insertAfter(base_form)
+    form = note.find(".note-edit-form")
     form.addClass('current-note-edit-form gfm-form')
     form.find('.div-dropzone').remove()
 
diff --git a/app/controllers/projects/notes_controller.rb b/app/controllers/projects/notes_controller.rb
index 41cd08c93c6..0c98e2f1bfd 100644
--- a/app/controllers/projects/notes_controller.rb
+++ b/app/controllers/projects/notes_controller.rb
@@ -3,7 +3,7 @@ class Projects::NotesController < Projects::ApplicationController
   before_action :authorize_read_note!
   before_action :authorize_create_note!, only: [:create]
   before_action :authorize_admin_note!, only: [:update, :destroy]
-  before_action :find_current_user_notes, except: [:destroy, :delete_attachment]
+  before_action :find_current_user_notes, except: [:destroy, :edit, :delete_attachment]
 
   def index
     current_fetched_at = Time.now.to_i
@@ -29,6 +29,11 @@ class Projects::NotesController < Projects::ApplicationController
     end
   end
 
+  def edit
+    @note = note
+    render layout: false
+  end
+
   def update
     @note = Notes::UpdateService.new(project, current_user, note_params).execute(note)
 
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index 5d184730796..d0e5286cbdd 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -7,7 +7,7 @@
       .note-header
         - if note_editable?(note)
           .note-actions
-            = link_to '#', title: 'Edit comment', class: 'js-note-edit' do
+            = link_to edit_namespace_project_note_path(note.project.namespace, note.project, note), title: 'Edit comment', remote: true, class: 'js-note-edit' do
               = icon('pencil-square-o')
 
             = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'js-note-delete danger' do
@@ -59,9 +59,6 @@
         .note-text
           = preserve do
             = markdown(note.note, {no_header_anchors: true})
-        - unless note.system?
-          -# System notes can't be edited
-          = render 'projects/notes/edit_form', note: note
 
       - if note.attachment.url
         .note-attachment
diff --git a/app/views/projects/notes/_notes_with_form.html.haml b/app/views/projects/notes/_notes_with_form.html.haml
index 04222b8f7c4..91cefa6d14d 100644
--- a/app/views/projects/notes/_notes_with_form.html.haml
+++ b/app/views/projects/notes/_notes_with_form.html.haml
@@ -7,4 +7,4 @@
   = render "projects/notes/form", view: params[:view]
 
 :javascript
-  new Notes("#{namespace_project_notes_path(namespace_id: @project.namespace, target_id: @noteable.id, target_type: @noteable.class.name.underscore)}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{params[:view]}")
+  window._notes = new Notes("#{namespace_project_notes_path(namespace_id: @project.namespace, target_id: @noteable.id, target_type: @noteable.class.name.underscore)}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{params[:view]}")
diff --git a/app/views/projects/notes/edit.js.erb b/app/views/projects/notes/edit.js.erb
new file mode 100644
index 00000000000..2599bad5d6e
--- /dev/null
+++ b/app/views/projects/notes/edit.js.erb
@@ -0,0 +1,2 @@
+$note = $('.note-row-<%= @note.id %>:visible');
+_notes.showEditForm($note, '<%= escape_javascript(render('edit_form', note: @note)) %>');