Merge branch 'flash-es6-module' into 'master'

Flash is now a ES6 module

See merge request gitlab-org/gitlab-ce!14626

app/assets/javascripts/sidebar/lib/sidebar_move_issue.js

-/* global 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');

app/assets/javascripts/sidebar/sidebar_mediator.js

-/* global Flash */
-
+import Flash from '../flash';
 import Service from './services/sidebar_service';
 import Store from './stores/sidebar_store';

app/assets/javascripts/star.js

 /* 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 {

app/assets/javascripts/task_list.js

-/* global Flash */
-
 import 'deckar01-task_list';
+import Flash from './flash';
 export default class TaskList {
   constructor(options = {}) {

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js

-/* 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';

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js

-/* 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';

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js

-/* 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';

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js

-/* 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';

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js

-/* global 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
         });
     },
   },

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

-/* global Flash */
-
+import Flash from '../flash';
 import {
   WidgetHeader,
   WidgetMergeHelp,

app/assets/javascripts/vue_shared/components/markdown/field.vue

 <script>
-  /* global Flash */
+  import Flash from '../../../flash';
   import markdownHeader from './header.vue';
   import markdownToolbar from './toolbar.vue';

spec/javascripts/flash_spec.js

+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>');
+    });
+
+    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', () => {
+    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('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);
+
+      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 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.trim(),
+        ).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();
+        });
+      });
+    });
+  });
+});

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();
     });
@@ -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', () => {

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();