Merge branch 'tor/feature/closeable-flash' into 'master'

Add the ability to close a flash message in code

See merge request gitlab-org/gitlab!60537

app/assets/javascripts/flash.js

@@ -9,6 +9,10 @@ const FLASH_TYPES = {
   WARNING: 'warning',
 };
 
+const getCloseEl = (flashEl) => {
+  return flashEl.querySelector('.js-close-icon');
+};
+
 const hideFlash = (flashEl, fadeTransition = true) => {
   if (fadeTransition) {
     Object.assign(flashEl.style, {
@@ -56,9 +60,7 @@ const createFlashEl = (message, type) => `
 `;
 
 const removeFlashClickListener = (flashEl, fadeTransition) => {
-  flashEl
-    .querySelector('.js-close-icon')
-    .addEventListener('click', () => hideFlash(flashEl, fadeTransition));
+  getCloseEl(flashEl).addEventListener('click', () => hideFlash(flashEl, fadeTransition));
 };
 
 /*
@@ -114,6 +116,10 @@ const createFlash = function createFlash({
 
   if (captureError && error) Sentry.captureException(error);
 
+  flashContainer.close = () => {
+    getCloseEl(flashEl).click();
+  };
+
   return flashContainer;
 };
 

spec/frontend/flash_spec.js

@@ -339,6 +339,20 @@ describe('Flash', () => {
           expect(actionConfig.clickHandler).toHaveBeenCalled();
         });
       });
+
+      describe('additional behavior', () => {
+        describe('close', () => {
+          it('clicks the close icon', () => {
+            const flash = createFlash({ ...defaultParams });
+            const close = document.querySelector('.flash-alert .js-close-icon');
+
+            jest.spyOn(close, 'click');
+            flash.close();
+
+            expect(close.click.mock.calls.length).toBe(1);
+          });
+        });
+      });
     });
   });