Fixed server rendered flash not being removed on click

This commit is contained in:
Phil Hughes 2017-10-13 10:35:40 +01:00
parent fe3ec2d921
commit fc828b401c
No known key found for this signature in database
GPG key ID: 32245528C52E0F9F
3 changed files with 34 additions and 2 deletions

View file

@ -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;

View file

@ -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]);
}
});

View file

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