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;