Fix handling form errors.

app/assets/javascripts/notes.js

@@ -69,12 +69,10 @@ var NoteList = {
                     ".js-note-delete",
                     NoteList.removeNote);
 
-    // clean up previews for forms
+    // clean up previews for main target form
-    $(document).on("ajax:complete", ".js-main-target-form", function(){
+    $(document).on("ajax:complete",
-      $(this).find('.error').remove();
+                   ".js-main-target-form",
-      $(this).find('.js-note-text').val("");
+                   NoteList.cleanupMainTargetForm);
-      $(this).show();
-    });
   },
 
 
@@ -83,6 +81,26 @@ var NoteList = {
    */
 
 
+  /**
+   *
+   */
+  cleanupMainTargetForm: function(){
+    var form = $(this);
+
+    // remove validation errors
+    form.find(".js-errors").remove();
+
+    // reset text and preview
+    var previewContainer = form.find(".js-toggler-container.note_text_and_preview");
+    if (previewContainer.is(".on")) {
+      previewContainer.removeClass("on");
+    }
+    form.find(".js-note-text").val("").trigger("input");
+
+    // re-enable submit button
+    form.find(".js-comment-button").enable();
+  },
+
   /**
    * Called when clicking on the "add a comment" button on the side of a diff line.
    *
@@ -218,6 +236,27 @@ var NoteList = {
    */
 
 
+  /**
+   * Called in response to creating a note failing validation.
+   *
+   * Adds the rendered errors to the respective form.
+   * If "discussionId" is null or undefined, the main target form is assumed.
+   */
+  errorsOnForm: function(errorsHtml, discussionId) {
+    // find the form
+    if (discussionId) {
+      var form = $("form[rel='"+discussionId+"']");
+    } else {
+      var form = $(".js-main-target-form");
+    }
+
+    form.find(".js-errors").remove();
+    form.prepend(errorsHtml);
+
+    form.find(".js-note-text").focus();
+  },
+
+
   /**
    * Shows the diff/discussion form and does some setup on it.
    *
@@ -235,8 +274,6 @@ var NoteList = {
 
     NoteList.setupNoteForm(form);
 
-    // cleanup after successfully creating a diff/discussion note
-    form.on("ajax:success", NoteList.removeDiscussionNoteForm);
   },
 
   /**
@@ -449,19 +486,26 @@ var NoteList = {
 
   /**
    * Adds a single discussion note to #notes-list.
+   *
+   * Also removes the corresponding form.
    */
   appendNewDiscussionNote: function(discussionId, diffRowHtml, noteHtml) {
+    var form = $("form[rel='"+discussionId+"']");
+    var row = form.closest("tr");
+
     // is this the first note of discussion?
-    var row = $("form[rel='"+discussionId+"']").closest("tr");
     if (row.is(".js-temp-notes-holder")) {
-      // insert the note and the reply button after it
+      // insert the note and the reply button after the temp row
       row.after(diffRowHtml);
-      // will be added again below
+      // remove the note (will be added again below)
       row.next().find(".note").remove();
     }
 
     // append new note to all matching discussions
     $(".notes[rel='"+discussionId+"']").append(noteHtml);
+
+    // cleanup after successfully creating a diff/discussion note
+    $.proxy(NoteList.removeDiscussionNoteForm, form).call();
   },
 
   /**

app/views/notes/_form.html.haml

@@ -5,11 +5,6 @@
   = f.hidden_field :noteable_id
   = f.hidden_field :noteable_type
 
-  - if @note.errors.any?
-    .alert-message.block-message.error
-      - @note.errors.full_messages.each do |msg|
-        %div= msg
-
   .note_text_and_preview.js-toggler-container
     %a.js-note-preview-button.js-toggler-target.turn-on{ href: "javascript:;", data: {title: "Preview", url: preview_project_notes_path(@project)} }
       %i.icon-eye-open

app/views/notes/_form_errors.html.haml

@@ -0,0 +1,3 @@
+.error_message.js-errors
+  - note.errors.full_messages.each do |msg|
+    %div= msg

app/views/notes/create.js.haml

@@ -7,10 +7,15 @@
     - else
       NoteList.appendNewNote(#{@note.id}, noteHtml);
   - else
+    :plain
       var firstDiscussionNoteHtml = "#{escape_javascript(render "notes/diff_notes_with_reply", notes: [@note])}";
-    NoteList.appendNewDiscussionNote("#{@note.discussion_id}", firstDiscussionNoteHtml, noteHtml);
+      NoteList.appendNewDiscussionNote("#{@note.discussion_id}",
+                                       firstDiscussionNoteHtml,
+                                       noteHtml);
 
 - else
-  -# TODO: insert form correctly
+  var errorsHtml = "#{escape_javascript(render 'notes/form_errors', note: @note)}";
-  $(".js-main-target-note").replaceWith("#{escape_javascript(render 'notes/common_form')}");
+  - if note_for_main_target?(@note)
-  GitLab.GfmAutoComplete.setup();
+    NoteList.errorsOnForm(errorsHtml);
+  - else
+    NoteList.errorsOnForm(errorsHtml, "#{@note.discussion_id}");