Merge branch 'alert-handler' into 'master'

Adds an alert handler for bootstrap migration

See merge request gitlab-org/gitlab!41323

app/assets/javascripts/alert_handler.js

+// This allows us to dismiss alerts that we've migrated from bootstrap
+// Note: This ONLY works on alerts that are created on page load
+// You can follow this effort in the following epic
+// https://gitlab.com/groups/gitlab-org/-/epics/4070
+
+export default function initAlertHandler() {
+  const ALERT_SELECTOR = '.gl-alert';
+  const CLOSE_SELECTOR = '.gl-alert-dismiss';
+
+  const dismissAlert = ({ target }) => target.closest(ALERT_SELECTOR).remove();
+  const closeButtons = document.querySelectorAll(`${ALERT_SELECTOR} ${CLOSE_SELECTOR}`);
+  closeButtons.forEach(alert => alert.addEventListener('click', dismissAlert));
+}

app/assets/javascripts/main.js

@@ -24,6 +24,7 @@ import { deprecatedCreateFlash as Flash, removeFlashClickListener } from './flas
 import initTodoToggle from './header';
 import initImporterStatus from './importer_status';
 import initLayoutNav from './layout_nav';
+import initAlertHandler from './alert_handler';
 import './feature_highlight/feature_highlight_options';
 import LazyLoader from './lazy_loader';
 import initLogoAnimation from './logo';
@@ -167,6 +168,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   initUserTracking();
   initLayoutNav();
+  initAlertHandler();
 
   // Set the default path for all cookies to GitLab's root directory
   Cookies.defaults.path = gon.relative_url_root || '/';

changelogs/unreleased/alert-handler.yml

+---
+title: Adds an alert handler for bootstrap migration
+merge_request: 41323
+author:
+type: other

spec/frontend/alert_handler_spec.js

+import { setHTMLFixture } from 'helpers/fixtures';
+import initAlertHandler from '~/alert_handler';
+
+describe('Alert Handler', () => {
+  const ALERT_SELECTOR = 'gl-alert';
+  const CLOSE_SELECTOR = 'gl-alert-dismiss';
+  const ALERT_HTML = `<div class="${ALERT_SELECTOR}"><button class="${CLOSE_SELECTOR}">Dismiss</button></div>`;
+
+  const findFirstAlert = () => document.querySelector(`.${ALERT_SELECTOR}`);
+  const findAllAlerts = () => document.querySelectorAll(`.${ALERT_SELECTOR}`);
+  const findFirstCloseButton = () => document.querySelector(`.${CLOSE_SELECTOR}`);
+
+  describe('initAlertHandler', () => {
+    describe('with one alert', () => {
+      beforeEach(() => {
+        setHTMLFixture(ALERT_HTML);
+        initAlertHandler();
+      });
+
+      it('should render the alert', () => {
+        expect(findFirstAlert()).toExist();
+      });
+
+      it('should dismiss the alert on click', () => {
+        findFirstCloseButton().click();
+        expect(findFirstAlert()).not.toExist();
+      });
+    });
+
+    describe('with two alerts', () => {
+      beforeEach(() => {
+        setHTMLFixture(ALERT_HTML + ALERT_HTML);
+        initAlertHandler();
+      });
+
+      it('should render two alerts', () => {
+        expect(findAllAlerts()).toHaveLength(2);
+      });
+
+      it('should dismiss only one alert on click', () => {
+        findFirstCloseButton().click();
+        expect(findAllAlerts()).toHaveLength(1);
+      });
+    });
+  });
+});