Commit 6cf3049f authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'server-flash-click-remove' into 'master'

Fixed server rendered flash not being removed on click

See merge request gitlab-org/gitlab-ce!14864
parents c08fea6f fc828b40
...@@ -40,6 +40,10 @@ const createFlashEl = (message, type, isInContentWrapper = false) => ` ...@@ -40,6 +40,10 @@ const createFlashEl = (message, type, isInContentWrapper = false) => `
</div> </div>
`; `;
const removeFlashClickListener = (flashEl, fadeTransition) => {
flashEl.parentNode.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
};
/* /*
* Flash banner supports different types of Flash configurations * Flash banner supports different types of Flash configurations
* along with ability to provide actionConfig which can be used to show * along with ability to provide actionConfig which can be used to show
...@@ -70,7 +74,7 @@ const createFlash = function createFlash( ...@@ -70,7 +74,7 @@ const createFlash = function createFlash(
flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper); flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper);
const flashEl = flashContainer.querySelector(`.flash-${type}`); const flashEl = flashContainer.querySelector(`.flash-${type}`);
flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition)); removeFlashClickListener(flashEl, fadeTransition);
if (actionConfig) { if (actionConfig) {
flashEl.innerHTML += createAction(actionConfig); flashEl.innerHTML += createAction(actionConfig);
...@@ -90,5 +94,6 @@ export { ...@@ -90,5 +94,6 @@ export {
createFlashEl, createFlashEl,
createAction, createAction,
hideFlash, hideFlash,
removeFlashClickListener,
}; };
window.Flash = createFlash; window.Flash = createFlash;
...@@ -63,7 +63,7 @@ import './diff'; ...@@ -63,7 +63,7 @@ import './diff';
import './dropzone_input'; import './dropzone_input';
import './due_date_select'; import './due_date_select';
import './files_comment_button'; import './files_comment_button';
import Flash from './flash'; import Flash, { removeFlashClickListener } from './flash';
import './gl_dropdown'; import './gl_dropdown';
import './gl_field_error'; import './gl_field_error';
import './gl_field_errors'; import './gl_field_errors';
...@@ -336,4 +336,10 @@ $(function () { ...@@ -336,4 +336,10 @@ $(function () {
event.preventDefault(); event.preventDefault();
gl.utils.visitUrl(`${action}${$(this).serialize()}`); gl.utils.visitUrl(`${action}${$(this).serialize()}`);
}); });
const flashContainer = document.querySelector('.flash-container');
if (flashContainer && flashContainer.children.length) {
removeFlashClickListener(flashContainer.children[0]);
}
}); });
...@@ -2,6 +2,7 @@ import flash, { ...@@ -2,6 +2,7 @@ import flash, {
createFlashEl, createFlashEl,
createAction, createAction,
hideFlash, hideFlash,
removeFlashClickListener,
} from '~/flash'; } from '~/flash';
describe('Flash', () => { describe('Flash', () => {
...@@ -266,4 +267,24 @@ 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();
});
});
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment