Commit cf425a12 authored by Paul Slaughter's avatar Paul Slaughter Committed by David O'Regan

Fix JavaScript initialization in readonly mode

- There are some flash banners which do not
  have a close el ([example][1]) but our
  function expected `getCloseEl` to exist.
- This MR fixes a bug that'll prevent a lot of
  JavaScript from working since we try to
  set up flashes in our critical application path
  ([see comment][2]).

[1]: ee/app/views/layouts/header/_read_only_banner.html.haml
[2]: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/61831#note_583912822

Changelog: fixed
parent b473026f
...@@ -60,7 +60,9 @@ const createFlashEl = (message, type) => ` ...@@ -60,7 +60,9 @@ const createFlashEl = (message, type) => `
`; `;
const removeFlashClickListener = (flashEl, fadeTransition) => { const removeFlashClickListener = (flashEl, fadeTransition) => {
getCloseEl(flashEl).addEventListener('click', () => hideFlash(flashEl, fadeTransition)); // There are some flash elements which do not have a closeEl.
// https://gitlab.com/gitlab-org/gitlab/blob/763426ef344488972eb63ea5be8744e0f8459e6b/ee/app/views/layouts/header/_read_only_banner.html.haml
getCloseEl(flashEl)?.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
}; };
/* /*
......
...@@ -357,8 +357,12 @@ describe('Flash', () => { ...@@ -357,8 +357,12 @@ describe('Flash', () => {
}); });
describe('removeFlashClickListener', () => { describe('removeFlashClickListener', () => {
let el;
describe('with close icon', () => {
beforeEach(() => { beforeEach(() => {
document.body.innerHTML += ` el = document.createElement('div');
el.innerHTML = `
<div class="flash-container"> <div class="flash-container">
<div class="flash"> <div class="flash">
<div class="close-icon js-close-icon"></div> <div class="close-icon js-close-icon"></div>
...@@ -368,11 +372,9 @@ describe('Flash', () => { ...@@ -368,11 +372,9 @@ describe('Flash', () => {
}); });
it('removes global flash on click', (done) => { it('removes global flash on click', (done) => {
const flashEl = document.querySelector('.flash'); removeFlashClickListener(el, false);
removeFlashClickListener(flashEl, false); el.querySelector('.js-close-icon').click();
flashEl.querySelector('.js-close-icon').click();
setImmediate(() => { setImmediate(() => {
expect(document.querySelector('.flash')).toBeNull(); expect(document.querySelector('.flash')).toBeNull();
...@@ -381,4 +383,21 @@ describe('Flash', () => { ...@@ -381,4 +383,21 @@ describe('Flash', () => {
}); });
}); });
}); });
describe('without close icon', () => {
beforeEach(() => {
el = document.createElement('div');
el.innerHTML = `
<div class="flash-container">
<div class="flash">
</div>
</div>
`;
});
it('does not throw', () => {
expect(() => removeFlashClickListener(el, false)).not.toThrow();
});
});
});
}); });
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