Merge branch 'server-flash-click-remove' into 'master'

Fixed server rendered flash not being removed on click

See merge request gitlab-org/gitlab-ce!14864

app/assets/javascripts/flash.js

@@ -40,6 +40,10 @@ const createFlashEl = (message, type, isInContentWrapper = false) => `
   </div>
 `;
 
+const removeFlashClickListener = (flashEl, fadeTransition) => {
+  flashEl.parentNode.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
+};
+
 /*
  *  Flash banner supports different types of Flash configurations
  *  along with ability to provide actionConfig which can be used to show
@@ -70,7 +74,7 @@ const createFlash = function createFlash(
   flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
-  flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
+  removeFlashClickListener(flashEl, fadeTransition);
 
   if (actionConfig) {
     flashEl.innerHTML += createAction(actionConfig);
@@ -90,5 +94,6 @@ export {
   createFlashEl,
   createAction,
   hideFlash,
+  removeFlashClickListener,
 };
 window.Flash = createFlash;

app/assets/javascripts/main.js

@@ -63,7 +63,7 @@ import './diff';
 import './dropzone_input';
 import './due_date_select';
 import './files_comment_button';
-import Flash from './flash';
+import Flash, { removeFlashClickListener } from './flash';
 import './gl_dropdown';
 import './gl_field_error';
 import './gl_field_errors';
@@ -336,4 +336,10 @@ $(function () {
     event.preventDefault();
     gl.utils.visitUrl(`${action}${$(this).serialize()}`);
   });
+
+  const flashContainer = document.querySelector('.flash-container');
+
+  if (flashContainer && flashContainer.children.length) {
+    removeFlashClickListener(flashContainer.children[0]);
+  }
 });

spec/javascripts/flash_spec.js

@@ -2,6 +2,7 @@ import flash, {
   createFlashEl,
   createAction,
   hideFlash,
+  removeFlashClickListener,
 } from '~/flash';
 
 describe('Flash', () => {
@@ -266,4 +267,24 @@ describe('Flash', () => {
       });
     });
   });
+
+  describe('removeFlashClickListener', () => {
+    beforeEach(() => {
+      document.body.innerHTML += '<div class="flash-container"><div class="flash"></div></div>';
+    });
+
+    it('removes global flash on click', (done) => {
+      const flashEl = document.querySelector('.flash');
+
+      removeFlashClickListener(flashEl, false);
+
+      flashEl.parentNode.click();
+
+      setTimeout(() => {
+        expect(document.querySelector('.flash')).toBeNull();
+
+        done();
+      });
+    });
+  });
 });