From fa2af5e0f5e290eff32f62c7ea9f935a6ad33967 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 2 Oct 2017 13:32:53 +0100
Subject: [PATCH 1/7] 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.
---
 app/assets/javascripts/awards_handler.js      |   2 +-
 .../javascripts/blob/balsamiq_viewer.js       |   5 +-
 .../blob/file_template_mediator.js            |   3 +-
 app/assets/javascripts/blob/viewer/index.js   |   2 +-
 .../javascripts/boards/boards_bundle.js       |   2 +-
 .../boards/components/board_sidebar.js        |   2 +-
 .../boards/components/modal/footer.js         |   2 +-
 .../boards/components/sidebar/remove_issue.js |   2 +-
 .../create_merge_request_dropdown.js          |   2 +-
 .../cycle_analytics/cycle_analytics_bundle.js |   1 +
 .../deploy_keys/components/app.vue            |   2 +-
 .../diff_notes/components/resolve_btn.js      |   2 +-
 .../diff_notes/services/resolve.js            |   2 +-
 .../environments/components/environment.vue   |   2 +-
 .../folder/environments_folder_view.vue       |   2 +-
 .../filtered_search/dropdown_emoji.js         |   7 +-
 .../filtered_search/dropdown_non_user.js      |   7 +-
 .../filtered_search/dropdown_user.js          |   5 +-
 .../filtered_search_manager.js                |   3 +-
 .../filtered_search_visual_tokens.js          |   2 +-
 app/assets/javascripts/flash.js               | 127 +++++++++---------
 app/assets/javascripts/groups/index.js        |   3 +-
 .../integrations/integration_settings_form.js |   4 +-
 .../issuable_bulk_update_actions.js           |   2 +-
 app/assets/javascripts/issue.js               |   4 +-
 .../javascripts/issue_show/components/app.vue |   2 +-
 .../javascripts/jobs/job_details_mediator.js  |   2 +-
 app/assets/javascripts/label_manager.js       |   3 +-
 app/assets/javascripts/main.js                |  11 +-
 .../components/diff_file_editor.js            |   2 +-
 .../merge_conflicts/merge_conflicts_bundle.js |   2 +-
 app/assets/javascripts/merge_request_tabs.js  |   3 +-
 app/assets/javascripts/milestone.js           |   3 +-
 .../mini_pipeline_graph_dropdown.js           |   2 +-
 .../monitoring/components/dashboard.vue       |   2 +-
 app/assets/javascripts/notes.js               |   4 +-
 .../notes/components/issue_comment_form.vue   |   7 +-
 .../notes/components/issue_discussion.vue     |   4 +-
 .../notes/components/issue_note.vue           |   5 +-
 .../components/issue_note_awards_list.vue     |   3 +-
 .../notes/components/issue_notes_app.vue      |   2 +-
 .../javascripts/notes/stores/actions.js       |  10 +-
 .../javascripts/notifications_dropdown.js     |   2 +-
 .../pipelines/components/stage.vue            |   2 +-
 .../javascripts/pipelines/mixins/pipelines.js |   3 +-
 .../pipelines/pipeline_details_bundle.js      |   3 +-
 .../pipelines/pipeline_details_mediatior.js   |   3 +-
 app/assets/javascripts/profile/profile.js     |   2 +-
 .../protected_branch_edit.js                  |   5 +-
 .../protected_tags/protected_tag_edit.js      |   5 +-
 .../repo/components/repo_commit_section.vue   |   2 +-
 .../javascripts/repo/helpers/repo_helper.js   |   3 +-
 .../javascripts/repo/services/repo_service.js |   6 +-
 app/assets/javascripts/search.js              |   2 +-
 .../components/assignees/sidebar_assignees.js |   3 +-
 .../confidential_issue_sidebar.vue            |   2 +-
 .../sidebar/lib/sidebar_move_issue.js         |   2 +-
 .../javascripts/sidebar/sidebar_mediator.js   |   3 +-
 app/assets/javascripts/star.js                |   3 +-
 app/assets/javascripts/task_list.js           |   3 +-
 .../components/mr_widget_deployment.js        |   3 +-
 .../mr_widget_merge_when_pipeline_succeeds.js |   2 +-
 .../components/states/mr_widget_merged.js     |   3 +-
 .../states/mr_widget_ready_to_merge.js        |   2 +-
 .../components/states/mr_widget_wip.js        |   2 +-
 .../mr_widget_options.js                      |   3 +-
 .../vue_shared/components/markdown/field.vue  |   2 +-
 67 files changed, 152 insertions(+), 183 deletions(-)

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 4f01345ee3b..622764107ad 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -1,8 +1,8 @@
 /* eslint-disable class-methods-use-this */
-/* global Flash */
 import _ from 'underscore';
 import Cookies from 'js-cookie';
 import { isInIssuePage, updateTooltipTitle } from './lib/utils/common_utils';
+import Flash from './flash';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
 const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js
index 8641a6fdae6..062577af385 100644
--- a/app/assets/javascripts/blob/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq_viewer.js
@@ -1,9 +1,8 @@
-/* global Flash */
-
+import Flash from '../flash';
 import BalsamiqViewer from './balsamiq/balsamiq_viewer';
 
 function onError() {
-  const flash = new window.Flash('Balsamiq file could not be loaded.');
+  const flash = new Flash('Balsamiq file could not be loaded.');
 
   return flash;
 }
diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js
index a20c6ca7a21..583e5faa506 100644
--- a/app/assets/javascripts/blob/file_template_mediator.js
+++ b/app/assets/javascripts/blob/file_template_mediator.js
@@ -1,6 +1,5 @@
 /* eslint-disable class-methods-use-this */
-/* global Flash */
-
+import Flash from '../flash';
 import FileTemplateTypeSelector from './template_selectors/type_selector';
 import BlobCiYamlSelector from './template_selectors/ci_yaml_selector';
 import DockerfileSelector from './template_selectors/dockerfile_selector';
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index e0b73f13d36..54132e8537b 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -1,4 +1,4 @@
-/* global Flash */
+import Flash from '../../flash';
 import { handleLocationHash } from '../../lib/utils/common_utils';
 
 export default class BlobViewer {
diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index 815248f38ee..ef4093b59e3 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -1,10 +1,10 @@
 /* eslint-disable one-var, quote-props, comma-dangle, space-before-function-paren */
 /* global BoardService */
-/* global Flash */
 
 import _ from 'underscore';
 import Vue from 'vue';
 import VueResource from 'vue-resource';
+import Flash from '../flash';
 import FilteredSearchBoards from './filtered_search_boards';
 import eventHub from './eventhub';
 import './models/issue';
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 590b7be36e3..7f3afefc9cc 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -3,9 +3,9 @@
 /* global MilestoneSelect */
 /* global LabelsSelect */
 /* global Sidebar */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../flash';
 import eventHub from '../../sidebar/event_hub';
 import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
 import Assignees from '../../sidebar/components/assignees/assignees';
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js
index a656f0546c0..de9e44cef35 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ b/app/assets/javascripts/boards/components/modal/footer.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-new */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../../flash';
 import './lists_dropdown';
 
 const ModalStore = gl.issueBoards.ModalStore;
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js b/app/assets/javascripts/boards/components/sidebar/remove_issue.js
index 1e623cf58b7..1ad97211934 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.js
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-new */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../../flash';
 
 const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js
index ff2f2c81971..bf40eb3ee11 100644
--- a/app/assets/javascripts/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/create_merge_request_dropdown.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-new */
-/* global Flash */
+import Flash from './flash';
 import DropLab from './droplab/drop_lab';
 import ISetter from './droplab/plugins/input_setter';
 
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index cdf5e3c0290..d184fcfeebd 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -2,6 +2,7 @@
 
 import Vue from 'vue';
 import Cookies from 'js-cookie';
+import Flash from '../flash';
 import Translate from '../vue_shared/translate';
 import banner from './components/banner.vue';
 import stageCodeComponent from './components/stage_code_component.vue';
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index a663e30dfd0..54e13b79a4f 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-  /* global Flash */
+  import Flash from '../../flash';
   import eventHub from '../eventhub';
   import DeployKeysService from '../service';
   import DeployKeysStore from '../store';
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js
index efb6ced9f46..20ddcbfb8bd 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js
@@ -1,9 +1,9 @@
 /* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, max-len */
 /* global CommentsStore */
 /* global ResolveService */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../flash';
 
 const ResolveBtn = Vue.extend({
   props: {
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js b/app/assets/javascripts/diff_notes/services/resolve.js
index 2f063f6fe1f..6eae54f830b 100644
--- a/app/assets/javascripts/diff_notes/services/resolve.js
+++ b/app/assets/javascripts/diff_notes/services/resolve.js
@@ -1,7 +1,7 @@
-/* global Flash */
 /* global CommentsStore */
 
 import Vue from 'vue';
+import Flash from '../../flash';
 import '../../vue_shared/vue_resource_interceptor';
 
 window.gl = window.gl || {};
diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue
index ce5f6219a3e..c039ae85cfb 100644
--- a/app/assets/javascripts/environments/components/environment.vue
+++ b/app/assets/javascripts/environments/components/environment.vue
@@ -1,6 +1,6 @@
 <script>
-/* global Flash */
 import Visibility from 'visibilityjs';
+import Flash from '../../flash';
 import EnvironmentsService from '../services/environments_service';
 import environmentTable from './environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index 01e70c0bbb7..b155560df9d 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -1,6 +1,6 @@
 <script>
-/* global Flash */
 import Visibility from 'visibilityjs';
+import Flash from '../../flash';
 import EnvironmentsService from '../services/environments_service';
 import environmentTable from '../components/environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
diff --git a/app/assets/javascripts/filtered_search/dropdown_emoji.js b/app/assets/javascripts/filtered_search/dropdown_emoji.js
index ada14d2053c..a6cc079d720 100644
--- a/app/assets/javascripts/filtered_search/dropdown_emoji.js
+++ b/app/assets/javascripts/filtered_search/dropdown_emoji.js
@@ -1,7 +1,6 @@
-/* global Flash */
-
-import Ajax from '~/droplab/plugins/ajax';
-import Filter from '~/droplab/plugins/filter';
+import Flash from '../flash';
+import Ajax from '../droplab/plugins/ajax';
+import Filter from '../droplab/plugins/filter';
 import './filtered_search_dropdown';
 
 class DropdownEmoji extends gl.FilteredSearchDropdown {
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js
index b32d589481d..788fb1dc614 100644
--- a/app/assets/javascripts/filtered_search/dropdown_non_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js
@@ -1,7 +1,6 @@
-/* global Flash */
-
-import Ajax from '~/droplab/plugins/ajax';
-import Filter from '~/droplab/plugins/filter';
+import Flash from '../flash';
+import Ajax from '../droplab/plugins/ajax';
+import Filter from '../droplab/plugins/filter';
 import './filtered_search_dropdown';
 
 class DropdownNonUser extends gl.FilteredSearchDropdown {
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index ce8817b1b2e..a9e2b65def0 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
-import AjaxFilter from '~/droplab/plugins/ajax_filter';
+import Flash from '../flash';
+import AjaxFilter from '../droplab/plugins/ajax_filter';
 import './filtered_search_dropdown';
 import { addClassIfElementExists } from '../lib/utils/dom_utils';
 
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index a44dc279a6f..7b233842d5a 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -1,3 +1,4 @@
+import Flash from '../flash';
 import FilteredSearchContainer from './container';
 import RecentSearchesRoot from './recent_searches_root';
 import RecentSearchesStore from './stores/recent_searches_store';
@@ -36,7 +37,7 @@ class FilteredSearchManager {
       .catch((error) => {
         if (error.name === 'RecentSearchesServiceError') return undefined;
         // eslint-disable-next-line no-new
-        new window.Flash('An error occurred while parsing recent searches');
+        new Flash('An error occurred while parsing recent searches');
         // Gracefully fail to empty array
         return [];
       })
diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
index 28e8240169d..dd24fc44d2a 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -1,5 +1,5 @@
 import AjaxCache from '../lib/utils/ajax_cache';
-import '../flash'; /* global Flash */
+import Flash from '../flash';
 import FilteredSearchContainer from './container';
 import UsersCache from '../lib/utils/users_cache';
 
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';
+const createAction = config => `
+  <a
+    href="${config.href || '#'}"
+    class="flash-action"
+    ${config.href ? 'role="button"' : ''}
+  >
+    ${_.escape(config.title)}
+  </a>
+`;
+
+const createFlashEl = (message, type) => `
+  <div
+    class="flash-${type}"
+  >
+    <div
+      class="flash-text"
+    >
+      ${_.escape(message)}
+    </div>
+  </div>
+`;
+
+const Flash = function Flash(message, type = 'alert', parent = document, actionConfig = null) {
+  const flashContainer = parent.querySelector('.flash-container');
+  flashContainer.innerHTML = createFlashEl(message, type);
+
+  const flashEl = flashContainer.querySelector(`.flash-${type}`);
+  flashEl.addEventListener('click', () => hideFlash(flashEl));
+
+  if (actionConfig) {
+    flashEl.innerHTML += createAction(actionConfig);
+
+    if (actionConfig.clickHandler) {
+      flashEl.querySelector('.flash-action').addEventListener('click', e => actionConfig.clickHandler(e));
     }
-    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);
-
-    if (actionConfig) {
-      const actionLinkConfig = {
-        class: 'flash-action',
-        href: actionConfig.href || '#',
-        text: actionConfig.title
-      };
-
-      if (!actionConfig.href) {
-        actionLinkConfig.role = 'button';
-      }
-
-      actionLink = $('<a/>', actionLinkConfig);
-
-      actionLink.appendTo(flash);
-      this.flashContainer.on('click', '.flash-action', actionConfig.clickHandler);
-    }
-    if (this.flashContainer.parent().hasClass('content-wrapper')) {
-      textDiv.addClass('container-fluid container-limited');
-    }
-    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;
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index 9ad8e5c6052..600bae24b52 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
 import Vue from 'vue';
+import Flash from '../flash';
 import GroupFilterableList from './groups_filterable_list';
 import GroupsComponent from './components/groups.vue';
 import GroupFolder from './components/group_folder.vue';
diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
index cf1e6a14725..32415a8791f 100644
--- a/app/assets/javascripts/integrations/integration_settings_form.js
+++ b/app/assets/javascripts/integrations/integration_settings_form.js
@@ -1,4 +1,4 @@
-/* global Flash */
+import Flash from '../flash';
 
 export default class IntegrationSettingsForm {
   constructor(formSelector) {
@@ -102,7 +102,7 @@ export default class IntegrationSettingsForm {
     })
     .done((res) => {
       if (res.error) {
-        new Flash(`${res.message} ${res.service_response}`, null, null, {
+        new Flash(`${res.message} ${res.service_response}`, 'alert', document, {
           title: 'Save anyway',
           clickHandler: (e) => {
             e.preventDefault();
diff --git a/app/assets/javascripts/issuable_bulk_update_actions.js b/app/assets/javascripts/issuable_bulk_update_actions.js
index c39ffdb2e0f..eb15949603f 100644
--- a/app/assets/javascripts/issuable_bulk_update_actions.js
+++ b/app/assets/javascripts/issuable_bulk_update_actions.js
@@ -1,7 +1,7 @@
 /* eslint-disable comma-dangle, quotes, consistent-return, func-names, array-callback-return, space-before-function-paren, prefer-arrow-callback, max-len, no-unused-expressions, no-sequences, no-underscore-dangle, no-unused-vars, no-param-reassign */
 /* global IssuableIndex */
-/* global Flash */
 import _ from 'underscore';
+import Flash from './flash';
 
 export default {
   init({ container, form, issues, prefixId } = {}) {
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index c0bd64814ca..3fc29f9a661 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -1,9 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
-/* global Flash */
-
 import 'vendor/jquery.waitforimages';
 import '~/lib/utils/text_utility';
-import './flash';
+import Flash from './flash';
 import TaskList from './task_list';
 import CreateMergeRequestDropdown from './create_merge_request_dropdown';
 import IssuablesHelper from './helpers/issuables_helper';
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 06f6ec241f4..0e63c723e2f 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -1,6 +1,6 @@
 <script>
-/* global Flash */
 import Visibility from 'visibilityjs';
+import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
 import eventHub from '../event_hub';
 import Service from '../services/index';
diff --git a/app/assets/javascripts/jobs/job_details_mediator.js b/app/assets/javascripts/jobs/job_details_mediator.js
index cc014b815c4..891b12c702c 100644
--- a/app/assets/javascripts/jobs/job_details_mediator.js
+++ b/app/assets/javascripts/jobs/job_details_mediator.js
@@ -1,7 +1,7 @@
-/* global Flash */
 /* global Build */
 
 import Visibility from 'visibilityjs';
+import Flash from '../flash';
 import Poll from '../lib/utils/poll';
 import JobStore from './stores/job_store';
 import JobService from './services/job_service';
diff --git a/app/assets/javascripts/label_manager.js b/app/assets/javascripts/label_manager.js
index d8814802d9e..a8f613c6cf2 100644
--- a/app/assets/javascripts/label_manager.js
+++ b/app/assets/javascripts/label_manager.js
@@ -1,7 +1,8 @@
 /* eslint-disable comma-dangle, class-methods-use-this, no-underscore-dangle, no-param-reassign, no-unused-vars, consistent-return, func-names, space-before-function-paren, max-len */
-/* global Flash */
 /* global Sortable */
 
+import Flash from './flash';
+
 ((global) => {
   class LabelManager {
     constructor({ togglePriorityButton, prioritizedLabels, otherLabels } = {}) {
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 974121412bd..bbe9553869b 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -1,5 +1,4 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, quotes, consistent-return, prefer-arrow-callback, comma-dangle, object-shorthand, no-new, max-len, no-multi-spaces, import/newline-after-import, import/first */
-/* global Flash */
 /* global ConfirmDangerModal */
 /* global Aside */
 
@@ -75,7 +74,7 @@ import './diff';
 import './dropzone_input';
 import './due_date_select';
 import './files_comment_button';
-import './flash';
+import Flash from './flash';
 import './gl_dropdown';
 import './gl_field_error';
 import './gl_field_errors';
@@ -168,7 +167,6 @@ $(function () {
   var $document = $(document);
   var $window = $(window);
   var $sidebarGutterToggle = $('.js-sidebar-toggle');
-  var $flash = $('.flash-container');
   var bootstrapBreakpoint = bp.getBreakpointSize();
   var fitSidebarForSize;
 
@@ -253,13 +251,6 @@ $(function () {
   // Form submitter
   });
   gl.utils.localTimeAgo($('abbr.timeago, .js-timeago'), true);
-  // Flash
-  if ($flash.length > 0) {
-    $flash.click(function () {
-      return $(this).fadeOut();
-    });
-    $flash.show();
-  }
   // Disable form buttons while a form is submitting
   $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function (e) {
     var buttons;
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
index 645045fea88..93f8f6ee926 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
@@ -1,8 +1,8 @@
 /* eslint-disable comma-dangle, quote-props, no-useless-computed-key, object-shorthand, no-new, no-param-reassign, max-len */
 /* global ace */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../flash';
 
 ((global) => {
   global.mergeConflicts = global.mergeConflicts || {};
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
index d74cf5328ad..17591829b76 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
@@ -1,7 +1,7 @@
 /* eslint-disable new-cap, comma-dangle, no-new */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../flash';
 import initIssuableSidebar from '../init_issuable_sidebar';
 import './merge_conflict_store';
 import './merge_conflict_service';
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index c042b22d1fd..df042c7baff 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -1,9 +1,8 @@
 /* eslint-disable no-new, class-methods-use-this */
-/* global Flash */
 /* global notes */
 
 import Cookies from 'js-cookie';
-import './flash';
+import Flash from './flash';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import initChangesDropdown from './init_changes_dropdown';
 import bp from './breakpoints';
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index 3e07ec4d0aa..8f3f1986763 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -1,7 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-use-before-define, camelcase, quotes, object-shorthand, no-shadow, no-unused-vars, comma-dangle, no-var, prefer-template, no-underscore-dangle, consistent-return, one-var, one-var-declaration-per-line, default-case, prefer-arrow-callback, max-len */
-/* global Flash */
 /* global Sortable */
 
+import Flash from './flash';
+
 (function() {
   this.Milestone = (function() {
     function Milestone() {
diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
index 64c1447f427..ca3d271663b 100644
--- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js
+++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-new */
-/* global Flash */
+import Flash from './flash';
 
 /**
  * In each pipelines table we have a mini pipeline graph for each pipeline.
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 442ed86d50c..cbe24c0915b 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -1,6 +1,6 @@
 <script>
-  /* global Flash */
   import _ from 'underscore';
+  import Flash from '../../flash';
   import MonitoringService from '../services/monitoring_service';
   import GraphGroup from './graph_group.vue';
   import Graph from './graph.vue';
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 24de21f2ce2..e1895e45918 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -5,7 +5,6 @@ default-case, prefer-template, consistent-return, no-alert, no-return-assign,
 no-param-reassign, prefer-arrow-callback, no-else-return, comma-dangle, no-new,
 brace-style, no-lonely-if, vars-on-top, no-unused-vars, no-sequences, no-shadow,
 newline-per-chained-call, no-useless-escape, class-methods-use-this */
-/* global Flash */
 /* global Autosave */
 /* global ResolveService */
 /* global mrRefreshWidgetUrl */
@@ -18,6 +17,7 @@ import Dropzone from 'dropzone';
 import 'vendor/jquery.caret'; // required by jquery.atwho
 import 'vendor/jquery.atwho';
 import AjaxCache from '~/lib/utils/ajax_cache';
+import Flash from './flash';
 import CommentTypeToggle from './comment_type_toggle';
 import loadAwardsHandler from './awards_handler';
 import './autosave';
@@ -354,7 +354,7 @@ export default class Notes {
             Object.keys(noteEntity.commands_changes).length > 0) {
           $notesList.find('.system-note.being-posted').remove();
         }
-        this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline);
+        this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline); // TODO: CHECK THIS!
         this.refresh();
       }
       return;
diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index ab8516296a8..2ce52e4538a 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -1,8 +1,9 @@
 <script>
-  /* global Flash, Autosave */
+  /* global Autosave */
   import { mapActions, mapGetters } from 'vuex';
   import _ from 'underscore';
   import autosize from 'vendor/autosize';
+  import Flash from '../../flash';
   import '../../autosave';
   import TaskList from '../../task_list';
   import * as constants from '../constants';
@@ -145,7 +146,7 @@
                   Flash(
                     'Something went wrong while adding your comment. Please try again.',
                     'alert',
-                    $(this.$refs.commentForm),
+                    this.$refs.commentForm,
                   );
                 }
               } else {
@@ -160,7 +161,7 @@
               this.isSubmitting = false;
               this.discard(false);
               const msg = 'Your comment could not be submitted! Please check your network connection and try again.';
-              Flash(msg, 'alert', $(this.$el));
+              Flash(msg, 'alert', this.$el);
               this.note = noteData.data.note.note; // Restore textarea content.
               this.removePlaceholderNotes();
             });
diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index b131ef4b182..baf43190d9e 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -1,6 +1,6 @@
 <script>
-  /* global Flash */
   import { mapActions, mapGetters } from 'vuex';
+  import Flash from '../../flash';
   import { SYSTEM_NOTE } from '../constants';
   import issueNote from './issue_note.vue';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
@@ -133,7 +133,7 @@
             this.isReplying = true;
             this.$nextTick(() => {
               const msg = 'Your comment could not be submitted! Please check your network connection and try again.';
-              Flash(msg, 'alert', $(this.$el));
+              Flash(msg, 'alert', this.$el);
               this.$refs.noteForm.note = noteText;
               callback(err);
             });
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index 1f43b8a16ad..0ddbd672bed 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -1,7 +1,6 @@
 <script>
-  /* global Flash */
-
   import { mapGetters, mapActions } from 'vuex';
+  import Flash from '../../flash';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import issueNoteHeader from './issue_note_header.vue';
   import issueNoteActions from './issue_note_actions.vue';
@@ -101,7 +100,7 @@
             this.isEditing = true;
             this.$nextTick(() => {
               const msg = 'Something went wrong while editing your comment. Please try again.';
-              Flash(msg, 'alert', $(this.$el));
+              Flash(msg, 'alert', this.$el);
               this.recoverNoteContent(noteText);
               callback();
             });
diff --git a/app/assets/javascripts/notes/components/issue_note_awards_list.vue b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
index d42e61e3899..c3a340139e7 100644
--- a/app/assets/javascripts/notes/components/issue_note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
@@ -1,10 +1,9 @@
 <script>
-  /* global Flash */
-
   import { mapActions, mapGetters } from 'vuex';
   import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
   import emojiSmile from 'icons/_emoji_smile.svg';
   import emojiSmiley from 'icons/_emoji_smiley.svg';
+  import Flash from '../../flash';
   import { glEmojiTag } from '../../emoji';
   import tooltip from '../../vue_shared/directives/tooltip';
 
diff --git a/app/assets/javascripts/notes/components/issue_notes_app.vue b/app/assets/javascripts/notes/components/issue_notes_app.vue
index b6fc5e5036f..aecd1f957e5 100644
--- a/app/assets/javascripts/notes/components/issue_notes_app.vue
+++ b/app/assets/javascripts/notes/components/issue_notes_app.vue
@@ -1,6 +1,6 @@
 <script>
-  /* global Flash */
   import { mapGetters, mapActions } from 'vuex';
+  import Flash from '../../flash';
   import store from '../stores/';
   import * as constants from '../constants';
   import issueNote from './issue_note.vue';
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 1a791039909..6f04aecc9b7 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -1,5 +1,5 @@
-/* global Flash */
 import Visibility from 'visibilityjs';
+import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
 import * as types from './mutation_types';
 import * as utils from './utils';
@@ -99,7 +99,7 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
         eTagPoll.makeRequest();
 
         $('.js-gfm-input').trigger('clear-commands-cache.atwho');
-        Flash('Commands applied', 'notice', $(noteData.flashContainer));
+        Flash('Commands applied', 'notice', noteData.flashContainer);
       }
 
       if (commandsChanges) {
@@ -114,8 +114,8 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
             .catch(() => {
               Flash(
                 'Something went wrong while adding your award. Please try again.',
-                null,
-                $(noteData.flashContainer),
+                'alert',
+                noteData.flashContainer,
               );
             });
         }
@@ -126,7 +126,7 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
       }
 
       if (errors && errors.commands_only) {
-        Flash(errors.commands_only, 'notice', $(noteData.flashContainer));
+        Flash(errors.commands_only, 'notice', noteData.flashContainer);
       }
       commit(types.REMOVE_PLACEHOLDER_NOTES);
 
diff --git a/app/assets/javascripts/notifications_dropdown.js b/app/assets/javascripts/notifications_dropdown.js
index 838356133cd..f90ac2d9f71 100644
--- a/app/assets/javascripts/notifications_dropdown.js
+++ b/app/assets/javascripts/notifications_dropdown.js
@@ -1,5 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, no-unused-vars, consistent-return, prefer-arrow-callback, no-else-return, max-len */
-/* global Flash */
+import Flash from './flash';
 
 (function() {
   this.NotificationsDropdown = (function() {
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index a4a27247406..1a7a5c2a415 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -13,7 +13,7 @@
  * 4. Commit widget
  */
 
-/* global Flash */
+import Flash from '../../flash';
 import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
 import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index e97f5632dc8..50bdf80c3e3 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -1,6 +1,5 @@
-/* global Flash */
-import '~/flash';
 import Visibility from 'visibilityjs';
+import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
 import emptyState from '../components/empty_state.vue';
 import errorState from '../components/error_state.vue';
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index bfc416da50b..206023d4ddb 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
 import Vue from 'vue';
+import Flash from '../flash';
 import PipelinesMediator from './pipeline_details_mediatior';
 import pipelineGraph from './components/graph/graph_component.vue';
 import pipelineHeader from './components/header_component.vue';
diff --git a/app/assets/javascripts/pipelines/pipeline_details_mediatior.js b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
index 385e7430a7d..823ccd849f4 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
 import Visibility from 'visibilityjs';
+import Flash from '../flash';
 import Poll from '../lib/utils/poll';
 import PipelineStore from './stores/pipeline_store';
 import PipelineService from './services/pipeline_service';
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index 3deb242bc1f..0dc02f012e4 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -1,5 +1,5 @@
 /* eslint-disable comma-dangle, no-unused-vars, class-methods-use-this, quotes, consistent-return, func-names, prefer-arrow-callback, space-before-function-paren, max-len */
-/* global Flash */
+import Flash from '../flash';
 import { getPagePath } from '../lib/utils/common_utils';
 
 ((global) => {
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js b/app/assets/javascripts/protected_branches/protected_branch_edit.js
index 3b920942a3f..632625da8e7 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_edit.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-new */
-/* global Flash */
-
+import Flash from '../flash';
 import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
 
 export default class ProtectedBranchEdit {
@@ -57,7 +56,7 @@ export default class ProtectedBranchEdit {
         },
       },
       error() {
-        new Flash('Failed to update branch!', null, $('.js-protected-branches-list'));
+        new Flash('Failed to update branch!', 'alert', document.querySelector('.js-protected-branches-list'));
       },
     }).always(() => {
       this.$allowedToMergeDropdown.enable();
diff --git a/app/assets/javascripts/protected_tags/protected_tag_edit.js b/app/assets/javascripts/protected_tags/protected_tag_edit.js
index 09a387c0f9e..dad0ad25b65 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_edit.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_edit.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-new */
-/* global Flash */
-
+import Flash from '../flash';
 import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
 
 export default class ProtectedTagEdit {
@@ -43,7 +42,7 @@ export default class ProtectedTagEdit {
         },
       },
       error() {
-        new Flash('Failed to update tag!', null, $('.js-protected-tags-list'));
+        new Flash('Failed to update tag!', 'alert', document.querySelector('.js-protected-tags-list'));
       },
     }).always(() => {
       this.$allowedToCreateDropdownButton.enable();
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index 119e38c583d..6d8cc964eb2 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/components/repo_commit_section.vue
@@ -1,5 +1,5 @@
 <script>
-/* global Flash */
+import Flash from '../../flash';
 import Store from '../stores/repo_store';
 import RepoMixin from '../mixins/repo_mixin';
 import Service from '../services/repo_service';
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index 7483f8bc305..46204598e1d 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -1,7 +1,6 @@
-/* global Flash */
 import Service from '../services/repo_service';
 import Store from '../stores/repo_store';
-import '../../flash';
+import Flash from '../../flash';
 
 const RepoHelper = {
   monacoInstance: null,
diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js
index af83497fa39..fe37102880b 100644
--- a/app/assets/javascripts/repo/services/repo_service.js
+++ b/app/assets/javascripts/repo/services/repo_service.js
@@ -1,5 +1,5 @@
-/* global Flash */
 import axios from 'axios';
+import Flash from '../../flash';
 import Store from '../stores/repo_store';
 import Api from '../../api';
 import Helper from '../helpers/repo_helper';
@@ -72,9 +72,9 @@ const RepoService = {
 
   commitFlash(data) {
     if (data.short_id && data.stats) {
-      window.Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
+      Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
     } else {
-      window.Flash(data.message);
+      Flash(data.message);
     }
   },
 };
diff --git a/app/assets/javascripts/search.js b/app/assets/javascripts/search.js
index 05caf177aec..07fee53d814 100644
--- a/app/assets/javascripts/search.js
+++ b/app/assets/javascripts/search.js
@@ -1,5 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, object-shorthand, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-else-return, max-len */
-/* global Flash */
+import Flash from './flash';
 import Api from './api';
 
 (function() {
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
index f83c3b037ed..74c17bc14a2 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
@@ -1,5 +1,4 @@
-/* global Flash */
-
+import Flash from '../../../flash';
 import AssigneeTitle from './assignee_title';
 import Assignees from './assignees';
 
diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
index f2b1099a678..22a9a34dda3 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -1,5 +1,5 @@
 <script>
-/* global Flash */
+import Flash from '../../../flash';
 import editForm from './edit_form.vue';
 
 export default {
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
index 3c9de02407e..ecc0f0d21f5 100644
--- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
+++ b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
@@ -1,4 +1,4 @@
-/* global Flash */
+import Flash from '../../flash';
 
 function isValidProjectId(id) {
   return id > 0;
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index 2fe6e5b31f0..ede3a0de144 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -1,5 +1,4 @@
-/* global Flash */
-
+import Flash from '../flash';
 import Service from './services/sidebar_service';
 import Store from './stores/sidebar_store';
 
diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/star.js
index 3a06b477d7c..77db075d1ef 100644
--- a/app/assets/javascripts/star.js
+++ b/app/assets/javascripts/star.js
@@ -1,6 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-unused-vars, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, no-new, max-len */
-/* global Flash */
-
+import Flash from './flash';
 import { __, s__ } from './locale';
 
 export default class Star {
diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
index c39f569da5e..dcbec40c79e 100644
--- a/app/assets/javascripts/task_list.js
+++ b/app/assets/javascripts/task_list.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
 import 'deckar01-task_list';
+import Flash from './flash';
 
 export default class TaskList {
   constructor(options = {}) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
index e98d147733c..e86a0f7e749 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
 import '~/lib/utils/datetime_utility';
+import Flash from '../../flash';
 import MemoryUsage from './mr_widget_memory_usage';
 import StatusIcon from './mr_widget_status_icon';
 import MRWidgetService from '../services/mr_widget_service';
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
index bdfd4d9667c..05c4a28be88 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
@@ -1,4 +1,4 @@
-/* global Flash */
+import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon';
 import MRWidgetAuthor from '../../components/mr_widget_author';
 import eventHub from '../../event_hub';
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
index 74fc52796a0..2dfd87ed904 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
@@ -1,5 +1,4 @@
-/* global Flash */
-
+import Flash from '../../../flash';
 import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index 61734163b6e..b8a96b23012 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -1,7 +1,7 @@
-/* global Flash */
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import simplePoll from '~/lib/utils/simple_poll';
+import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon';
 import eventHub from '../../event_hub';
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
index 54be1fbe675..e9a97e8fe5e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
@@ -1,4 +1,4 @@
-/* global Flash */
+import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 044b664484b..4f497b204a3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -1,5 +1,4 @@
-/* global Flash */
-
+import Flash from '../flash';
 import {
   WidgetHeader,
   WidgetMergeHelp,
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 759d30c9c7c..af4187fab46 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,5 +1,5 @@
 <script>
-  /* global Flash */
+  import Flash from '../../../flash';
   import markdownHeader from './header.vue';
   import markdownToolbar from './toolbar.vue';
 

From d668294f28c7a54a34b6cc896953ece1c9def15d Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 3 Oct 2017 15:01:02 +0100
Subject: [PATCH 2/7] spec fixes

---
 app/assets/javascripts/flash.js                   | 15 ++++++++++-----
 app/assets/javascripts/notes.js                   |  4 ++--
 .../integration_settings_form_spec.js             |  2 +-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 69e4f884f34..1a52c5a07bf 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -1,8 +1,10 @@
 import _ from 'underscore';
 
 const hideFlash = (flashEl) => {
-  flashEl.style.transition = 'opacity .3s'; // eslint-disable-line no-param-reassign
-  flashEl.style.opacity = '0'; // eslint-disable-line no-param-reassign
+  Object.assign(flashEl.style, {
+    transition: 'opacity .3s',
+    opacity: '0',
+  });
 
   flashEl.addEventListener('transitionend', () => {
     flashEl.remove();
@@ -33,8 +35,11 @@ const createFlashEl = (message, type) => `
   </div>
 `;
 
-const Flash = function Flash(message, type = 'alert', parent = document, actionConfig = null) {
+const createFlash = function createFlash(message, type = 'alert', parent = document, actionConfig = null) {
   const flashContainer = parent.querySelector('.flash-container');
+
+  if (!flashContainer) return null;
+
   flashContainer.innerHTML = createFlashEl(message, type);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
@@ -61,8 +66,8 @@ const Flash = function Flash(message, type = 'alert', parent = document, actionC
 };
 
 export {
-  Flash as default,
+  createFlash as default,
   createFlashEl,
   hideFlash,
 };
-window.Flash = Flash;
+window.Flash = createFlash;
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index e1895e45918..dafbfb59c99 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -354,7 +354,7 @@ export default class Notes {
             Object.keys(noteEntity.commands_changes).length > 0) {
           $notesList.find('.system-note.being-posted').remove();
         }
-        this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline); // TODO: CHECK THIS!
+        this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline.get(0));
         this.refresh();
       }
       return;
@@ -593,7 +593,7 @@ export default class Notes {
     } else if ($form.hasClass('js-discussion-note-form')) {
       formParentTimeline = $form.closest('.discussion-notes').find('.notes');
     }
-    return this.addFlash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', formParentTimeline);
+    return this.addFlash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', formParentTimeline.get(0));
   }
 
   updateNoteError($parentTimeline) {
diff --git a/spec/javascripts/integrations/integration_settings_form_spec.js b/spec/javascripts/integrations/integration_settings_form_spec.js
index 3daeb91b1e2..b83a4abca9a 100644
--- a/spec/javascripts/integrations/integration_settings_form_spec.js
+++ b/spec/javascripts/integrations/integration_settings_form_spec.js
@@ -181,7 +181,7 @@ describe('IntegrationSettingsForm', () => {
 
       deferred.reject();
 
-      expect($('.flash-container .flash-text').text()).toEqual(errorMessage);
+      expect($('.flash-container .flash-text').text().trim()).toEqual(errorMessage);
     });
 
     it('should always call `toggleSubmitBtnState` with `false` once request is completed', () => {

From bbf7ea24a560e22c3b51326d2413a6f8d6f0a530 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 4 Oct 2017 12:13:11 +0100
Subject: [PATCH 3/7] flash tests added back in documentation comment to flash
 file

---
 app/assets/javascripts/flash.js |  45 ++++--
 spec/javascripts/flash_spec.js  | 248 ++++++++++++++++++++++++++++++++
 2 files changed, 282 insertions(+), 11 deletions(-)
 create mode 100644 spec/javascripts/flash_spec.js

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 1a52c5a07bf..d745483c93f 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -1,23 +1,27 @@
 import _ from 'underscore';
 
-const hideFlash = (flashEl) => {
-  Object.assign(flashEl.style, {
-    transition: 'opacity .3s',
-    opacity: '0',
-  });
+const hideFlash = (flashEl, fadeTransition = true) => {
+  if (fadeTransition) {
+    Object.assign(flashEl.style, {
+      transition: 'opacity .3s',
+      opacity: '0',
+    });
+  }
 
   flashEl.addEventListener('transitionend', () => {
     flashEl.remove();
   }, {
     once: true,
   });
+
+  if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
 };
 
 const createAction = config => `
   <a
     href="${config.href || '#'}"
     class="flash-action"
-    ${config.href ? 'role="button"' : ''}
+    ${config.href ? '' : 'role="button"'}
   >
     ${_.escape(config.title)}
   </a>
@@ -35,7 +39,27 @@ const createFlashEl = (message, type) => `
   </div>
 `;
 
-const createFlash = function createFlash(message, type = 'alert', parent = document, actionConfig = null) {
+/*
+ *  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` or `alert` (default)
+ *  @param {Object} parent              Reference to parent element under which Flash needs to appear
+ *  @param {Object} actonConfig         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 createFlash = function createFlash(
+  message,
+  type = 'alert',
+  parent = document,
+  actionConfig = null,
+  fadeTransition = true,
+) {
   const flashContainer = parent.querySelector('.flash-container');
 
   if (!flashContainer) return null;
@@ -43,7 +67,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
   flashContainer.innerHTML = createFlashEl(message, type);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
-  flashEl.addEventListener('click', () => hideFlash(flashEl));
+  flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
 
   if (actionConfig) {
     flashEl.innerHTML += createAction(actionConfig);
@@ -55,9 +79,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
 
   if (flashContainer.parentNode.classList.contains('content-wrapper')) {
     const flashText = flashEl.querySelector('.flash-text');
-
-    flashText.classList.add('container-fluid');
-    flashText.classList.add('container-limited');
+    flashText.className = `${flashText.className} container-fluid container-limited`;
   }
 
   flashContainer.style.display = 'block';
@@ -68,6 +90,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
 export {
   createFlash as default,
   createFlashEl,
+  createAction,
   hideFlash,
 };
 window.Flash = createFlash;
diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js
new file mode 100644
index 00000000000..1feb31f5c4f
--- /dev/null
+++ b/spec/javascripts/flash_spec.js
@@ -0,0 +1,248 @@
+import flash, {
+  createFlashEl,
+  createAction,
+  hideFlash,
+} from '~/flash';
+
+describe('Flash', () => {
+  describe('createFlashEl', () => {
+    let el;
+
+    beforeEach(() => {
+      el = document.createElement('div');
+    });
+
+    afterEach(() => {
+      el.innerHTML = '';
+    });
+
+    it('creates flash element with type', () => {
+      el.innerHTML = createFlashEl('testing', 'alert');
+
+      expect(
+        el.querySelector('.flash-alert'),
+      ).not.toBeNull();
+    });
+
+    it('escapes text', () => {
+      el.innerHTML = createFlashEl('<script>alert("a");</script>', 'alert');
+
+      expect(
+        el.querySelector('.flash-text').textContent.trim(),
+      ).toBe('<script>alert("a");</script>');
+    });
+  });
+
+  describe('hideFlash', () => {
+    let el;
+
+    beforeEach(() => {
+      el = document.createElement('div');
+      el.className = 'js-testing';
+    });
+
+    it('sets transition style', () => {
+      hideFlash(el);
+
+      expect(
+        el.style.transition,
+      ).toBe('opacity 0.3s');
+    });
+
+    it('sets opacity style', () => {
+      hideFlash(el);
+
+      expect(
+        el.style.opacity,
+      ).toBe('0');
+    });
+
+    it('removes element after transitionend', () => {
+      document.body.appendChild(el);
+
+      hideFlash(el);
+      el.dispatchEvent(new Event('transitionend'));
+
+      expect(
+        document.querySelector('.js-testing'),
+      ).toBeNull();
+    });
+
+    it('calls event listener callback once', () => {
+      spyOn(el, 'remove').and.callThrough();
+      document.body.appendChild(el);
+
+      hideFlash(el);
+
+      el.dispatchEvent(new Event('transitionend'));
+      el.dispatchEvent(new Event('transitionend'));
+
+      expect(
+        el.remove.calls.count(),
+      ).toBe(1);
+    });
+  });
+
+  describe('createAction', () => {
+    let el;
+
+    beforeEach(() => {
+      el = document.createElement('div');
+    });
+
+    it('creates link with href', () => {
+      el.innerHTML = createAction({
+        href: 'testing',
+        title: 'test',
+      });
+
+      expect(
+        el.querySelector('.flash-action').href,
+      ).toContain('testing');
+    });
+
+    it('uses hash as href when no href is present', () => {
+      el.innerHTML = createAction({
+        title: 'test',
+      });
+
+      expect(
+        el.querySelector('.flash-action').href,
+      ).toContain('#');
+    });
+
+    it('adds role when no href is present', () => {
+      el.innerHTML = createAction({
+        title: 'test',
+      });
+
+      expect(
+        el.querySelector('.flash-action').getAttribute('role'),
+      ).toBe('button');
+    });
+
+    it('escapes the title text', () => {
+      el.innerHTML = createAction({
+        title: '<script>alert("a")</script>',
+      });
+
+      expect(
+        el.querySelector('.flash-action').textContent.trim(),
+      ).toBe('<script>alert("a")</script>');
+    });
+  });
+
+  describe('createFlash', () => {
+    describe('no flash-container', () => {
+      it('does not add to the DOM', () => {
+        const el = flash('test');
+        const flashEl = flash('testing');
+
+        expect(
+          flashEl,
+        ).toBeNull();
+        expect(
+          document.querySelector('.flash-alert'),
+        ).toBeNull();
+      });
+    });
+
+    describe('with flash-container', () => {
+      beforeEach(() => {
+        document.body.innerHTML += `
+          <div class="content-wrapper js-content-wrapper">
+            <div class="flash-container"></div>
+          </div>
+        `;
+      });
+
+      afterEach(() => {
+        document.querySelector('.js-content-wrapper').remove();
+      });
+
+      it('adds flash element into container', () => {
+        flash('test');
+
+        expect(
+          document.querySelector('.flash-alert'),
+        ).not.toBeNull();
+      });
+
+      it('adds flash into specified parent', () => {
+        flash(
+          'test',
+          'alert',
+          document.querySelector('.content-wrapper'),
+        );
+
+        expect(
+          document.querySelector('.content-wrapper .flash-alert'),
+        ).not.toBeNull();
+      });
+
+      it('adds container classes when inside content-wrapper', () => {
+        flash('test');
+
+        expect(
+          document.querySelector('.flash-text').className,
+        ).toBe('flash-text container-fluid container-limited')
+      });
+
+      it('does not add container when outside of content-wrapper', () => {
+        document.querySelector('.content-wrapper').className = 'js-content-wrapper';
+        flash('test');
+
+        expect(
+          document.querySelector('.flash-text').className,
+        ).toBe('flash-text')
+      });
+
+      it('removes element after clicking', () => {
+        flash('test', 'alert', document, null, false);
+
+        document.querySelector('.flash-alert').click();
+
+        expect(
+          document.querySelector('.flash-alert'),
+        ).toBeNull();
+      });
+
+      describe('with actionConfig', () => {
+        it('adds action link', () => {
+          flash(
+            'test',
+            'alert',
+            document,
+            {
+              title: 'test',
+            },
+          );
+
+          expect(
+            document.querySelector('.flash-action'),
+          ).not.toBeNull();
+        });
+
+        it('calls actionConfig clickHandler on click', () => {
+          const actionConfig = {
+            title: 'test',
+            clickHandler: jasmine.createSpy('actionConfig'),
+          };
+
+          flash(
+            'test',
+            'alert',
+            document,
+            actionConfig,
+          );
+
+          document.querySelector('.flash-action').click();
+
+          expect(
+            actionConfig.clickHandler,
+          ).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+});

From 6c97107d37771522d1deec6007a791332270ba6f Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 4 Oct 2017 14:44:43 +0100
Subject: [PATCH 4/7] fixed eslint

---
 app/assets/javascripts/flash.js | 16 ++++++++--------
 spec/javascripts/flash_spec.js  |  5 ++---
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index d745483c93f..8ac2b96a22d 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -44,14 +44,14 @@ const createFlashEl = (message, type) => `
  *  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` or `alert` (default)
- *  @param {Object} parent              Reference to parent element under which Flash needs to appear
- *  @param {Object} actonConfig         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
+ *  @param {String} message           Flash message text
+ *  @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} actonConfig       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 createFlash = function createFlash(
   message,
diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js
index 1feb31f5c4f..66cc76ee626 100644
--- a/spec/javascripts/flash_spec.js
+++ b/spec/javascripts/flash_spec.js
@@ -135,7 +135,6 @@ describe('Flash', () => {
   describe('createFlash', () => {
     describe('no flash-container', () => {
       it('does not add to the DOM', () => {
-        const el = flash('test');
         const flashEl = flash('testing');
 
         expect(
@@ -185,7 +184,7 @@ describe('Flash', () => {
 
         expect(
           document.querySelector('.flash-text').className,
-        ).toBe('flash-text container-fluid container-limited')
+        ).toBe('flash-text container-fluid container-limited');
       });
 
       it('does not add container when outside of content-wrapper', () => {
@@ -194,7 +193,7 @@ describe('Flash', () => {
 
         expect(
           document.querySelector('.flash-text').className,
-        ).toBe('flash-text')
+        ).toBe('flash-text');
       });
 
       it('removes element after clicking', () => {

From cbfc97b112849299b0aaf3b5155e278d3db17c91 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 4 Oct 2017 15:55:01 +0100
Subject: [PATCH 5/7] karma spec fixes

---
 app/assets/javascripts/issue_show/components/app.vue        | 5 ++---
 app/assets/javascripts/repo/services/repo_service.js        | 5 ++---
 app/assets/javascripts/sidebar/lib/sidebar_move_issue.js    | 6 ++----
 .../components/states/mr_widget_wip.js                      | 5 ++---
 .../integrations/integration_settings_form_spec.js          | 6 +++---
 spec/javascripts/notes_spec.js                              | 4 ++--
 6 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 0e63c723e2f..eecb56cb185 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -1,6 +1,5 @@
 <script>
 import Visibility from 'visibilityjs';
-import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
 import eventHub from '../event_hub';
 import Service from '../services/index';
@@ -153,7 +152,7 @@ export default {
         })
         .catch(() => {
           eventHub.$emit('close.form');
-          return new Flash('Error updating issue');
+          window.Flash('Error updating issue');
         });
     },
     deleteIssuable() {
@@ -167,7 +166,7 @@ export default {
         })
         .catch(() => {
           eventHub.$emit('close.form');
-          return new Flash('Error deleting issue');
+          window.Flash('Error deleting issue');
         });
     },
   },
diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js
index fe37102880b..830685f7e6e 100644
--- a/app/assets/javascripts/repo/services/repo_service.js
+++ b/app/assets/javascripts/repo/services/repo_service.js
@@ -1,5 +1,4 @@
 import axios from 'axios';
-import Flash from '../../flash';
 import Store from '../stores/repo_store';
 import Api from '../../api';
 import Helper from '../helpers/repo_helper';
@@ -72,9 +71,9 @@ const RepoService = {
 
   commitFlash(data) {
     if (data.short_id && data.stats) {
-      Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
+      window.Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
     } else {
-      Flash(data.message);
+      window.Flash(data.message);
     }
   },
 };
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
index ecc0f0d21f5..977dd83a7ea 100644
--- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
+++ b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
@@ -1,5 +1,3 @@
-import Flash from '../../flash';
-
 function isValidProjectId(id) {
   return id > 0;
 }
@@ -38,7 +36,7 @@ class SidebarMoveIssue {
       data: (searchTerm, callback) => {
         this.mediator.fetchAutocompleteProjects(searchTerm)
           .then(callback)
-          .catch(() => new Flash('An error occurred while fetching projects autocomplete.'));
+          .catch(() => new window.Flash('An error occurred while fetching projects autocomplete.'));
       },
       renderRow: project => `
         <li>
@@ -73,7 +71,7 @@ class SidebarMoveIssue {
 
       this.mediator.moveIssue()
         .catch(() => {
-          Flash('An error occurred while moving the issue.');
+          window.Flash('An error occurred while moving the issue.');
           this.$confirmButton
             .enable()
             .removeClass('is-loading');
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
index e9a97e8fe5e..4f83350e07c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
@@ -1,4 +1,3 @@
-import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
@@ -27,12 +26,12 @@ export default {
         .then(res => res.json())
         .then((res) => {
           eventHub.$emit('UpdateWidgetData', res);
-          new Flash('The merge request can now be merged.', 'notice'); // eslint-disable-line
+          new window.Flash('The merge request can now be merged.', 'notice'); // eslint-disable-line
           $('.merge-request .detail-page-description .title').text(this.mr.title);
         })
         .catch(() => {
           this.isMakingRequest = false;
-          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
+          new window.Flash('Something went wrong. Please try again.'); // eslint-disable-line
         });
     },
   },
diff --git a/spec/javascripts/integrations/integration_settings_form_spec.js b/spec/javascripts/integrations/integration_settings_form_spec.js
index b83a4abca9a..9033eb9ce02 100644
--- a/spec/javascripts/integrations/integration_settings_form_spec.js
+++ b/spec/javascripts/integrations/integration_settings_form_spec.js
@@ -138,9 +138,9 @@ describe('IntegrationSettingsForm', () => {
       deferred.resolve({ error: true, message: errorMessage, service_response: 'some error' });
 
       const $flashContainer = $('.flash-container');
-      expect($flashContainer.find('.flash-text').text()).toEqual('Test failed. some error');
+      expect($flashContainer.find('.flash-text').text().trim()).toEqual('Test failed. some error');
       expect($flashContainer.find('.flash-action')).toBeDefined();
-      expect($flashContainer.find('.flash-action').text()).toEqual('Save anyway');
+      expect($flashContainer.find('.flash-action').text().trim()).toEqual('Save anyway');
     });
 
     it('should submit form if ajax request responds without any error in test', () => {
@@ -168,7 +168,7 @@ describe('IntegrationSettingsForm', () => {
       expect($flashAction).toBeDefined();
 
       spyOn(integrationSettingsForm.$form, 'submit');
-      $flashAction.trigger('click');
+      $flashAction.get(0).click();
       expect(integrationSettingsForm.$form.submit).toHaveBeenCalled();
     });
 
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index 3e791a31604..65d2e8fd9fb 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -815,7 +815,7 @@ import '~/notes';
       });
 
       it('shows a flash message', () => {
-        this.notes.addFlash('Error message', FLASH_TYPE_ALERT, this.notes.parentTimeline);
+        this.notes.addFlash('Error message', FLASH_TYPE_ALERT, this.notes.parentTimeline.get(0));
 
         expect($('.flash-alert').is(':visible')).toBeTruthy();
       });
@@ -828,7 +828,7 @@ import '~/notes';
       });
 
       it('hides visible flash message', () => {
-        this.notes.addFlash('Error message 1', FLASH_TYPE_ALERT, this.notes.parentTimeline);
+        this.notes.addFlash('Error message 1', FLASH_TYPE_ALERT, this.notes.parentTimeline.get(0));
 
         this.notes.clearFlash();
 

From fcd842b55837d2a8eab4ef32b65b5a44dfab6eba Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 5 Oct 2017 10:27:43 +0100
Subject: [PATCH 6/7] fixed notes specs changed how the container class is
 added onto the text element more specs

---
 app/assets/javascripts/flash.js | 14 ++++++--------
 app/assets/javascripts/notes.js |  8 ++++----
 spec/javascripts/flash_spec.js  | 24 +++++++++++++++++++++++-
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 8ac2b96a22d..bc5cd818e1c 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -12,6 +12,7 @@ const hideFlash = (flashEl, fadeTransition = true) => {
     flashEl.remove();
   }, {
     once: true,
+    passive: true,
   });
 
   if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
@@ -27,12 +28,12 @@ const createAction = config => `
   </a>
 `;
 
-const createFlashEl = (message, type) => `
+const createFlashEl = (message, type, isInContentWrapper = false) => `
   <div
     class="flash-${type}"
   >
     <div
-      class="flash-text"
+      class="flash-text ${isInContentWrapper ? 'container-fluid container-limited' : ''}"
     >
       ${_.escape(message)}
     </div>
@@ -64,7 +65,9 @@ const createFlash = function createFlash(
 
   if (!flashContainer) return null;
 
-  flashContainer.innerHTML = createFlashEl(message, type);
+  const isInContentWrapper = flashContainer.parentNode.classList.contains('content-wrapper');
+
+  flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
   flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
@@ -77,11 +80,6 @@ const createFlash = function createFlash(
     }
   }
 
-  if (flashContainer.parentNode.classList.contains('content-wrapper')) {
-    const flashText = flashEl.querySelector('.flash-text');
-    flashText.className = `${flashText.className} container-fluid container-limited`;
-  }
-
   flashContainer.style.display = 'block';
 
   return flashContainer;
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index dafbfb59c99..cf7322ba1da 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1213,13 +1213,13 @@ export default class Notes {
   }
 
   addFlash(...flashParams) {
-    this.flashInstance = new Flash(...flashParams);
+    this.flashContainer = new Flash(...flashParams);
   }
 
   clearFlash() {
-    if (this.flashInstance && this.flashInstance.flashContainer) {
-      this.flashInstance.flashContainer.hide();
-      this.flashInstance = null;
+    if (this.flashContainer) {
+      this.flashContainer.style.display = 'none';
+      this.flashContainer = null;
     }
   }
 
diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js
index 66cc76ee626..060ffaa339b 100644
--- a/spec/javascripts/flash_spec.js
+++ b/spec/javascripts/flash_spec.js
@@ -31,6 +31,17 @@ describe('Flash', () => {
         el.querySelector('.flash-text').textContent.trim(),
       ).toBe('<script>alert("a");</script>');
     });
+
+    it('adds container classes when inside content wrapper', () => {
+      el.innerHTML = createFlashEl('testing', 'alert', true);
+
+      expect(
+        el.querySelector('.flash-text').classList.contains('container-fluid'),
+      ).toBeTruthy();
+      expect(
+        el.querySelector('.flash-text').classList.contains('container-limited'),
+      ).toBeTruthy();
+    });
   });
 
   describe('hideFlash', () => {
@@ -57,6 +68,17 @@ describe('Flash', () => {
       ).toBe('0');
     });
 
+    it('does not set styles when fadeTransition is false', () => {
+      hideFlash(el, false);
+
+      expect(
+        el.style.opacity,
+      ).toBe('');
+      expect(
+        el.style.transition,
+      ).toBe('');
+    });
+
     it('removes element after transitionend', () => {
       document.body.appendChild(el);
 
@@ -192,7 +214,7 @@ describe('Flash', () => {
         flash('test');
 
         expect(
-          document.querySelector('.flash-text').className,
+          document.querySelector('.flash-text').className.trim(),
         ).toBe('flash-text');
       });
 

From b40bac3a3c251110ddba3f90d6d1e4419a65afe3 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 5 Oct 2017 14:42:29 +0100
Subject: [PATCH 7/7] removed global eslint for remaining files

---
 .../javascripts/cycle_analytics/cycle_analytics_bundle.js       | 2 --
 .../javascripts/issue_show/components/fields/description.vue    | 1 -
 app/assets/javascripts/jobs/job_details_bundle.js               | 2 --
 .../javascripts/pipelines/components/pipelines_actions.vue      | 2 --
 app/assets/javascripts/repo/stores/repo_store.js                | 1 -
 5 files changed, 8 deletions(-)

diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index d184fcfeebd..49bb6c52180 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -1,5 +1,3 @@
-/* global Flash */
-
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import Flash from '../flash';
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index dc902eefc5f..0aa1b2c2e31 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -1,5 +1,4 @@
 <script>
-  /* global Flash */
   import updateMixin from '../../mixins/update';
   import markdownField from '../../../vue_shared/components/markdown/field.vue';
 
diff --git a/app/assets/javascripts/jobs/job_details_bundle.js b/app/assets/javascripts/jobs/job_details_bundle.js
index f92e669414a..baaf5641200 100644
--- a/app/assets/javascripts/jobs/job_details_bundle.js
+++ b/app/assets/javascripts/jobs/job_details_bundle.js
@@ -1,5 +1,3 @@
-/* global Flash */
-
 import Vue from 'vue';
 import JobMediator from './job_details_mediator';
 import jobHeader from './components/header.vue';
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index c4c63a52358..f3c0aca17ba 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -1,6 +1,4 @@
 <script>
-  /* global Flash */
-  import '~/flash';
   import playIconSvg from 'icons/_icon_play.svg';
   import eventHub from '../event_hub';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index 93b39cff27e..c633f538c1b 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -1,4 +1,3 @@
-/* global Flash */
 import Helper from '../helpers/repo_helper';
 import Service from '../services/repo_service';