[ci skip] Show errors close to the textarea

app/assets/javascripts/notes/components/issue_comment_form.vue

@@ -98,7 +98,11 @@
                 if (res.errors.commands_only) {
                   this.discard();
                 } else {
-                  Flash('Something went wrong while adding your comment. Please try again.');
+                  Flash(
+                    'Something went wrong while adding your comment. Please try again.',
+                    'alert',
+                    $(this.$refs.commentForm),
+                  );
                 }
               } else {
                 this.discard();
@@ -168,7 +172,7 @@
     <ul
       v-if="isLoggedIn"
       class="notes notes-form timeline new-note">
-      <li class="timeline-entry">
+      <li class="timeline-entry" ref="commentForm">
         <div class="timeline-entry-inner">
           <div class="flash-container timeline-content"></div>
           <div class="timeline-icon hidden-xs hidden-sm">

app/assets/javascripts/notes/components/issue_note.vue

@@ -75,7 +75,7 @@
             });
         }
       },
-      formUpdateHandler(noteText) {
+      formUpdateHandler(noteText, parentElement) {
         const data = {
           endpoint: this.note.path,
           note: {
@@ -92,7 +92,11 @@
             // TODO: this could be moved down, by setting a prop
             $(this.$refs.noteBody.$el).renderGFM();
           })
-          .catch(() => Flash('Something went wrong while editing your comment. Please try again.'));
+          .catch(() => Flash(
+            'Something went wrong while editing your comment. Please try again.',
+            'alert',
+            $(parentElement),
+          ));
       },
       formCancelHandler(shouldConfirm, isDirty) {
         if (shouldConfirm && isDirty) {

app/assets/javascripts/notes/components/issue_note_body.vue

@@ -43,8 +43,8 @@
           });
         }
       },
-      handleFormUpdate(note) {
-        this.$emit('handleFormUpdate', note);
+      handleFormUpdate(note, parentElement) {
+        this.$emit('handleFormUpdate', note, parentElement);
       },
       formCancelHandler(shouldConfirm, isDirty) {
         this.$emit('cancelFormEdition', shouldConfirm, isDirty);

app/assets/javascripts/notes/components/issue_note_form.vue

@@ -68,7 +68,7 @@
     methods: {
       handleUpdate() {
         this.isSubmitting = true;
-        this.$emit('handleFormUpdate', this.note);
+        this.$emit('handleFormUpdate', this.note, this.$refs.editNoteForm);
       },
       editMyLastNote() {
         if (this.note === '') {
@@ -94,6 +94,7 @@
     },
     watch: {
       noteBody() {
+        debugger;
         if (this.note === this.initialNote) {
           this.note = this.noteBody;
         } else {
@@ -105,7 +106,7 @@
 </script>
 
 <template>
-  <div class="note-edit-form current-note-edit-form">
+  <div ref="editNoteForm" class="note-edit-form current-note-edit-form">
     <div
       v-if="conflictWhileEditing"
       class="js-conflict-edit-warning alert alert-danger">
@@ -116,6 +117,7 @@
         rel="noopener noreferrer">updated comment</a>
         to ensure information is not lost.
     </div>
+    <div class="flash-container timeline-content"></div>
     <form
       class="edit-note common-note-form">
       <markdown-field