diff options
author | Phil Hughes <me@iamphill.com> | 2017-10-13 10:35:40 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-10-13 10:35:40 +0100 |
commit | fc828b401c7783fb8fd61494082993ca01b20bfa (patch) | |
tree | 583a2e5487d777ca5aebdb8d01828f9102e176e8 | |
parent | fe3ec2d92149d999f379e9a49885c738b6fe41dd (diff) | |
download | gitlab-ce-server-flash-click-remove.tar.gz |
Fixed server rendered flash not being removed on clickserver-flash-click-remove
-rw-r--r-- | app/assets/javascripts/flash.js | 7 | ||||
-rw-r--r-- | app/assets/javascripts/main.js | 8 | ||||
-rw-r--r-- | spec/javascripts/flash_spec.js | 21 |
3 files changed, 34 insertions, 2 deletions
diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js index bc5cd818e1c..67261c1c9b4 100644 --- a/app/assets/javascripts/flash.js +++ b/app/assets/javascripts/flash.js @@ -40,6 +40,10 @@ const createFlashEl = (message, type, isInContentWrapper = false) => ` </div> `; +const removeFlashClickListener = (flashEl, fadeTransition) => { + flashEl.parentNode.addEventListener('click', () => hideFlash(flashEl, fadeTransition)); +}; + /* * Flash banner supports different types of Flash configurations * along with ability to provide actionConfig which can be used to show @@ -70,7 +74,7 @@ const createFlash = function createFlash( flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper); const flashEl = flashContainer.querySelector(`.flash-${type}`); - flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition)); + removeFlashClickListener(flashEl, fadeTransition); if (actionConfig) { flashEl.innerHTML += createAction(actionConfig); @@ -90,5 +94,6 @@ export { createFlashEl, createAction, hideFlash, + removeFlashClickListener, }; window.Flash = createFlash; diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 8d7608ce0f4..35982ff413d 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -64,7 +64,7 @@ import './diff'; import './dropzone_input'; import './due_date_select'; import './files_comment_button'; -import Flash from './flash'; +import Flash, { removeFlashClickListener } from './flash'; import './gl_dropdown'; import './gl_field_error'; import './gl_field_errors'; @@ -339,4 +339,10 @@ $(function () { event.preventDefault(); gl.utils.visitUrl(`${action}${$(this).serialize()}`); }); + + const flashContainer = document.querySelector('.flash-container'); + + if (flashContainer && flashContainer.children.length) { + removeFlashClickListener(flashContainer.children[0]); + } }); diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js index 060ffaa339b..b669aabcee4 100644 --- a/spec/javascripts/flash_spec.js +++ b/spec/javascripts/flash_spec.js @@ -2,6 +2,7 @@ import flash, { createFlashEl, createAction, hideFlash, + removeFlashClickListener, } from '~/flash'; describe('Flash', () => { @@ -266,4 +267,24 @@ describe('Flash', () => { }); }); }); + + describe('removeFlashClickListener', () => { + beforeEach(() => { + document.body.innerHTML += '<div class="flash-container"><div class="flash"></div></div>'; + }); + + it('removes global flash on click', (done) => { + const flashEl = document.querySelector('.flash'); + + removeFlashClickListener(flashEl, false); + + flashEl.parentNode.click(); + + setTimeout(() => { + expect(document.querySelector('.flash')).toBeNull(); + + done(); + }); + }); + }); }); |