Notes: Warning message should go away once resolved

Flash error messages disappear(`fadeOut`) automatically after any successful request

app/assets/javascripts/notes.js

@@ -47,6 +47,7 @@ const normalizeNewlines = function(str) {
       this.keydownNoteText = this.keydownNoteText.bind(this);
       this.toggleCommitList = this.toggleCommitList.bind(this);
       this.postComment = this.postComment.bind(this);
+      this.clearFlashWrapper = this.clearFlash.bind(this);
 
       this.notes_url = notes_url;
       this.note_ids = note_ids;
@@ -57,6 +58,7 @@ const normalizeNewlines = function(str) {
       this.notesCountBadge || (this.notesCountBadge = $(".issuable-details").find(".notes-tab .badge"));
       this.basePollingInterval = 15000;
       this.maxPollingSteps = 4;
+      this.flashErrors = [];
 
       this.cleanBinding();
       this.addBinding();
@@ -298,7 +300,7 @@ const normalizeNewlines = function(str) {
 
       if (!noteEntity.valid) {
         if (noteEntity.errors.commands_only) {
-          new Flash(noteEntity.errors.commands_only, 'notice', this.parentTimeline);
+          this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline);
           this.refresh();
         }
         return;
@@ -551,14 +553,14 @@ const normalizeNewlines = function(str) {
       return this.renderNote(note);
     };
 
-    Notes.prototype.addNoteError = ($form) => {
+    Notes.prototype.addNoteError = function($form) {
       let formParentTimeline;
       if ($form.hasClass('js-main-target-form')) {
         formParentTimeline = $form.parents('.timeline');
       } else if ($form.hasClass('js-discussion-note-form')) {
         formParentTimeline = $form.closest('.discussion-notes').find('.notes');
       }
-      return new Flash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', formParentTimeline);
+      return this.addFlash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', formParentTimeline);
     };
 
     Notes.prototype.updateNoteError = $parentTimeline => new Flash('Your comment could not be updated! Please check your network connection and try again.');
@@ -1101,6 +1103,15 @@ const normalizeNewlines = function(str) {
       });
     };
 
+    Notes.prototype.addFlash = function(...flashParams) {
+      this.flashErrors.push(new Flash(...flashParams));
+    };
+
+    Notes.prototype.clearFlash = function() {
+      this.flashErrors.forEach(flash => flash.flashContainer.remove());
+      this.flashErrors = [];
+    };
+
     Notes.prototype.cleanForm = function($form) {
       // Remove JS classes that are not needed here
       $form
@@ -1281,6 +1292,8 @@ const normalizeNewlines = function(str) {
         .then((note) => {
           // Submission successful! remove placeholder
           $notesContainer.find(`#${uniqueId}`).remove();
+          // Clear previous form errors
+          this.clearFlashWrapper();
 
           // Check if this was discussion comment
           if (isDiscussionForm) {

changelogs/unreleased/24373-warning-message-go-away.yml

+---
+title: 'Notes: Warning message should go away once resolved'
+merge_request: 10823
+author: Jacopo Beschi @jacopo-beschi

spec/javascripts/notes_spec.js

@@ -14,6 +14,7 @@ import '~/notes';
   gl.utils = gl.utils || {};
 
   describe('Notes', function() {
+    const FLASH_TYPE_ALERT = 'alert';
     var commentsTemplate = 'issues/issue_with_comment.html.raw';
     preloadFixtures(commentsTemplate);
 
@@ -460,5 +461,33 @@ import '~/notes';
         expect($tempNote.find('.timeline-content').hasClass('discussion')).toBeTruthy();
       });
     });
+
+    describe('appendFlash', () => {
+      beforeEach(() => {
+        this.notes = new Notes();
+      });
+
+      it('shows a flash message', () => {
+        this.notes.addFlash('Error message', FLASH_TYPE_ALERT, this.notes.parentTimeline);
+
+        expect(document.querySelectorAll('.flash-alert').length).toBe(1);
+      });
+    });
+
+    describe('clearFlash', () => {
+      beforeEach(() => {
+        $(document).off('ajax:success');
+        this.notes = new Notes();
+      });
+
+      it('removes all the associated flash messages', () => {
+        this.notes.addFlash('Error message 1', FLASH_TYPE_ALERT, this.notes.parentTimeline);
+        this.notes.addFlash('Error message 2', FLASH_TYPE_ALERT, this.notes.parentTimeline);
+
+        this.notes.clearFlash();
+
+        expect(document.querySelectorAll('.flash-alert').length).toBe(0);
+      });
+    });
   });
 }).call(window);