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

app/assets/javascripts/flash.js

@@ -60,7 +60,9 @@ const createFlashEl = (message, type) => `
 `;
 
 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));
 };
 
 /*

spec/frontend/flash_spec.js

@@ -357,27 +357,46 @@ describe('Flash', () => {
   });
 
   describe('removeFlashClickListener', () => {
-    beforeEach(() => {
-      document.body.innerHTML += `
-        <div class="flash-container">
-          <div class="flash">
-            <div class="close-icon js-close-icon"></div>
+    let el;
+
+    describe('with close icon', () => {
+      beforeEach(() => {
+        el = document.createElement('div');
+        el.innerHTML = `
+          <div class="flash-container">
+            <div class="flash">
+              <div class="close-icon js-close-icon"></div>
+            </div>
           </div>
-        </div>
-      `;
-    });
+        `;
+      });
 
-    it('removes global flash on click', (done) => {
-      const flashEl = document.querySelector('.flash');
+      it('removes global flash on click', (done) => {
+        removeFlashClickListener(el, false);
 
-      removeFlashClickListener(flashEl, false);
+        el.querySelector('.js-close-icon').click();
 
-      flashEl.querySelector('.js-close-icon').click();
+        setImmediate(() => {
+          expect(document.querySelector('.flash')).toBeNull();
 
-      setImmediate(() => {
-        expect(document.querySelector('.flash')).toBeNull();
+          done();
+        });
+      });
+    });
+
+    describe('without close icon', () => {
+      beforeEach(() => {
+        el = document.createElement('div');
+        el.innerHTML = `
+          <div class="flash-container">
+            <div class="flash">
+            </div>
+          </div>
+        `;
+      });
 
-        done();
+      it('does not throw', () => {
+        expect(() => removeFlashClickListener(el, false)).not.toThrow();
       });
     });
   });