Flash is now a ES6 module

Reduced the technical debt around our JS flash function by making it a
module that is imported rather than relying on the global function.
The global function still exists mainly for technical debt with how
some requests are being completed, but new JS should import the module
directly.

Also reduces some tech debt in the file by removing the need for jQuery.
Instead Flash is now 100% vanilla JS.

1 files changed, 58 insertions, 61 deletions

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index ccff8f0ace7..69e4f884f34 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -1,71 +1,68 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, no-param-reassign, quotes, quote-props, prefer-template, comma-dangle, max-len */
+import _ from 'underscore';
 
-window.Flash = (function() {
-  var hideFlash;
+const hideFlash = (flashEl) => {
+  flashEl.style.transition = 'opacity .3s'; // eslint-disable-line no-param-reassign
+  flashEl.style.opacity = '0'; // eslint-disable-line no-param-reassign
 
-  hideFlash = function() {
-    return $(this).fadeOut();
-  };
+  flashEl.addEventListener('transitionend', () => {
+    flashEl.remove();
+  }, {
+    once: true,
+  });
+};
 
-  /**
-   * 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
-   * @param {String} type Type of Flash, it can be `notice` 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 link should point (default '#')
-   *    @param {String} title Title of action
-   *    @param {Function} clickHandler Method to call when action is clicked on
-   */
-  function Flash(message, type, parent, actionConfig) {
-    var flash, textDiv, actionLink;
-    if (type == null) {
-      type = 'alert';
-    }
-    if (parent == null) {
-      parent = null;
-    }
-    if (parent) {
-      this.flashContainer = parent.find('.flash-container');
-    } else {
-      this.flashContainer = $('.flash-container-page');
-    }
-    this.flashContainer.html('');
-    flash = $('<div/>', {
-      "class": "flash-" + type
-    });
-    flash.on('click', hideFlash);
-    textDiv = $('<div/>', {
-      "class": 'flash-text',
-      text: message
-    });
-    textDiv.appendTo(flash);
+const createAction = config => `
+  <a
+    href="${config.href || '#'}"
+    class="flash-action"
+    ${config.href ? 'role="button"' : ''}
+  >
+    ${_.escape(config.title)}
+  </a>
+`;
 
-    if (actionConfig) {
-      const actionLinkConfig = {
-        class: 'flash-action',
-        href: actionConfig.href || '#',
-        text: actionConfig.title
-      };
+const createFlashEl = (message, type) => `
+  <div
+    class="flash-${type}"
+  >
+    <div
+      class="flash-text"
+    >
+      ${_.escape(message)}
+    </div>
+  </div>
+`;
 
-      if (!actionConfig.href) {
-        actionLinkConfig.role = 'button';
-      }
+const Flash = function Flash(message, type = 'alert', parent = document, actionConfig = null) {
+  const flashContainer = parent.querySelector('.flash-container');
+  flashContainer.innerHTML = createFlashEl(message, type);
 
-      actionLink = $('<a/>', actionLinkConfig);
+  const flashEl = flashContainer.querySelector(`.flash-${type}`);
+  flashEl.addEventListener('click', () => hideFlash(flashEl));
 
-      actionLink.appendTo(flash);
-      this.flashContainer.on('click', '.flash-action', actionConfig.clickHandler);
-    }
-    if (this.flashContainer.parent().hasClass('content-wrapper')) {
-      textDiv.addClass('container-fluid container-limited');
+  if (actionConfig) {
+    flashEl.innerHTML += createAction(actionConfig);
+
+    if (actionConfig.clickHandler) {
+      flashEl.querySelector('.flash-action').addEventListener('click', e => actionConfig.clickHandler(e));
     }
-    flash.appendTo(this.flashContainer);
-    this.flashContainer.show();
   }
 
-  return Flash;
-})();
+  if (flashContainer.parentNode.classList.contains('content-wrapper')) {
+    const flashText = flashEl.querySelector('.flash-text');
+
+    flashText.classList.add('container-fluid');
+    flashText.classList.add('container-limited');
+  }
+
+  flashContainer.style.display = 'block';
+
+  return flashContainer;
+};
+
+export {
+  Flash as default,
+  createFlashEl,
+  hideFlash,
+};
+window.Flash = Flash;