Merge branch '3895-mlunoe-migrate-away-from-deprecated-create-flash-2' into 'master'

Refactor(createFlash): call original from deprecated

See merge request gitlab-org/gitlab!56223

app/assets/javascripts/flash.js

@@ -61,55 +61,6 @@ const removeFlashClickListener = (flashEl, fadeTransition) => {
     .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
- *  additional action or link on banner next to message
- *
- *  @param {String} message           Flash message text
- *  @param {String} type              Type of Flash, it can be `notice`, `success`, `warning` or `alert` (default)
- *  @param {Object} parent            Reference to parent element under which Flash needs to appear
- *  @param {Object} actionConfig      Map of config to show action on banner
- *    @param {String} href            URL to which action config should point to (default: '#')
- *    @param {String} title           Title of action
- *    @param {Function} clickHandler  Method to call when action is clicked on
- *  @param {Boolean} fadeTransition   Boolean to determine whether to fade the alert out
- */
-const deprecatedCreateFlash = function deprecatedCreateFlash(
-  message,
-  type = FLASH_TYPES.ALERT,
-  parent = document,
-  actionConfig = null,
-  fadeTransition = true,
-  addBodyClass = false,
-) {
-  const flashContainer = parent.querySelector('.flash-container');
-
-  if (!flashContainer) return null;
-
-  flashContainer.innerHTML = createFlashEl(message, type);
-
-  const flashEl = flashContainer.querySelector(`.flash-${type}`);
-
-  if (actionConfig) {
-    flashEl.innerHTML += createAction(actionConfig);
-
-    if (actionConfig.clickHandler) {
-      flashEl
-        .querySelector('.flash-action')
-        .addEventListener('click', (e) => actionConfig.clickHandler(e));
-    }
-  }
-
-  removeFlashClickListener(flashEl, fadeTransition);
-
-  flashContainer.style.display = 'block';
-
-  if (addBodyClass) document.body.classList.add('flash-shown');
-
-  return flashContainer;
-};
-
 /*
  *  Flash banner supports different types of Flash configurations
  *  along with ability to provide actionConfig which can be used to show
@@ -166,6 +117,31 @@ const createFlash = function createFlash({
   return flashContainer;
 };
 
+/*
+ *  Flash banner supports different types of Flash configurations
+ *  along with ability to provide actionConfig which can be used to show
+ *  additional action or link on banner next to message
+ *
+ *  @param {String} message           Flash message text
+ *  @param {String} type              Type of Flash, it can be `notice`, `success`, `warning` or `alert` (default)
+ *  @param {Object} parent            Reference to parent element under which Flash needs to appear
+ *  @param {Object} actionConfig      Map of config to show action on banner
+ *    @param {String} href            URL to which action config should point to (default: '#')
+ *    @param {String} title           Title of action
+ *    @param {Function} clickHandler  Method to call when action is clicked on
+ *  @param {Boolean} fadeTransition   Boolean to determine whether to fade the alert out
+ */
+const deprecatedCreateFlash = function deprecatedCreateFlash(
+  message,
+  type,
+  parent,
+  actionConfig,
+  fadeTransition,
+  addBodyClass,
+) {
+  return createFlash({ message, type, parent, actionConfig, fadeTransition, addBodyClass });
+};
+
 export {
   createFlash as default,
   deprecatedCreateFlash,

spec/frontend/flash_spec.js

@@ -126,9 +126,17 @@ describe('Flash', () => {
   });
 
   describe('deprecatedCreateFlash', () => {
+    const message = 'test';
+    const type = 'alert';
+    const parent = document;
+    const actionConfig = null;
+    const fadeTransition = false;
+    const addBodyClass = true;
+    const defaultParams = [message, type, parent, actionConfig, fadeTransition, addBodyClass];
+
     describe('no flash-container', () => {
       it('does not add to the DOM', () => {
-        const flashEl = deprecatedCreateFlash('testing');
+        const flashEl = deprecatedCreateFlash(message);
 
         expect(flashEl).toBeNull();
 
@@ -138,11 +146,9 @@ describe('Flash', () => {
 
     describe('with flash-container', () => {
       beforeEach(() => {
-        document.body.innerHTML += `
-          <div class="content-wrapper js-content-wrapper">
-            <div class="flash-container"></div>
-          </div>
-        `;
+        setFixtures(
+          '<div class="content-wrapper js-content-wrapper"><div class="flash-container"></div></div>',
+        );
       });
 
       afterEach(() => {
@@ -150,7 +156,7 @@ describe('Flash', () => {
       });
 
       it('adds flash element into container', () => {
-        deprecatedCreateFlash('test', 'alert', document, null, false, true);
+        deprecatedCreateFlash(...defaultParams);
 
         expect(document.querySelector('.flash-alert')).not.toBeNull();
 
@@ -158,26 +164,35 @@ describe('Flash', () => {
       });
 
       it('adds flash into specified parent', () => {
-        deprecatedCreateFlash('test', 'alert', document.querySelector('.content-wrapper'));
+        deprecatedCreateFlash(
+          message,
+          type,
+          document.querySelector('.content-wrapper'),
+          actionConfig,
+          fadeTransition,
+          addBodyClass,
+        );
 
         expect(document.querySelector('.content-wrapper .flash-alert')).not.toBeNull();
+        expect(document.querySelector('.content-wrapper').innerText.trim()).toEqual(message);
       });
 
       it('adds container classes when inside content-wrapper', () => {
-        deprecatedCreateFlash('test');
+        deprecatedCreateFlash(...defaultParams);
 
         expect(document.querySelector('.flash-text').className).toBe('flash-text');
+        expect(document.querySelector('.content-wrapper').innerText.trim()).toEqual(message);
       });
 
       it('does not add container when outside of content-wrapper', () => {
         document.querySelector('.content-wrapper').className = 'js-content-wrapper';
-        deprecatedCreateFlash('test');
+        deprecatedCreateFlash(...defaultParams);
 
         expect(document.querySelector('.flash-text').className.trim()).toContain('flash-text');
       });
 
       it('removes element after clicking', () => {
-        deprecatedCreateFlash('test', 'alert', document, null, false, true);
+        deprecatedCreateFlash(...defaultParams);
 
         document.querySelector('.flash-alert .js-close-icon').click();
 
@@ -188,24 +203,37 @@ describe('Flash', () => {
 
       describe('with actionConfig', () => {
         it('adds action link', () => {
-          deprecatedCreateFlash('test', 'alert', document, {
-            title: 'test',
-          });
+          const newActionConfig = { title: 'test' };
+          deprecatedCreateFlash(
+            message,
+            type,
+            parent,
+            newActionConfig,
+            fadeTransition,
+            addBodyClass,
+          );
 
           expect(document.querySelector('.flash-action')).not.toBeNull();
         });
 
         it('calls actionConfig clickHandler on click', () => {
-          const actionConfig = {
+          const newActionConfig = {
             title: 'test',
             clickHandler: jest.fn(),
           };
 
-          deprecatedCreateFlash('test', 'alert', document, actionConfig);
+          deprecatedCreateFlash(
+            message,
+            type,
+            parent,
+            newActionConfig,
+            fadeTransition,
+            addBodyClass,
+          );
 
           document.querySelector('.flash-action').click();
 
-          expect(actionConfig.clickHandler).toHaveBeenCalled();
+          expect(newActionConfig.clickHandler).toHaveBeenCalled();
         });
       });
     });