Merge branch 'mrincon-createAlert-clear-previous-alerts' into 'master'

Make createAlert clears all previous alerts See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/104483 Merged-by: Jannik Lehmann <jlehmann@gitlab.com> Approved-by: Eduardo Sanz García <esanz-garcia@gitlab.com> Approved-by: Philip Joyce <pjoyce@gitlab.com> Approved-by: Jannik Lehmann <jlehmann@gitlab.com> Co-authored-by: Miguel Rincon <mrincon@gitlab.com>

Merge branch 'mrincon-createAlert-clear-previous-alerts' into 'master'
Make createAlert clears all previous alerts See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/104483 Merged-by: Jannik Lehmann <jlehmann@gitlab.com> Approved-by: Eduardo Sanz García <esanz-garcia@gitlab.com> Approved-by: Philip Joyce <pjoyce@gitlab.com> Approved-by: Jannik Lehmann <jlehmann@gitlab.com> Co-authored-by: Miguel Rincon <mrincon@gitlab.com>
647c156b · Jannik Lehmann · 609b169c · adcf22cf · 647c156b · 647c156b
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -114,6 +114,7 @@ const addDismissFlashClickListener = (flashEl, fadeTransition) => {
 * @param {object} [options.parent] - Reference to parent element under which alert needs to appear. Defaults to `document`.
 * @param {Function} [options.onDismiss] - Handler to call when this alert is dismissed.
 * @param {string} [options.containerSelector] - Selector for the container of the alert
+ * @param {boolean} [options.preservePrevious] - Set to `true` to preserve previous alerts. Defaults to `false`.
 * @param {object} [options.primaryButton] - Object describing primary button of alert
 * @param {string} [options.primaryButton.link] - Href of primary button
 * @param {string} [options.primaryButton.text] - Text of primary button
@@ -131,6 +132,7 @@ const createAlert = function createAlert({
  variant = VARIANT_DANGER,
  parent = document,
  containerSelector = '.flash-container',
+  preservePrevious = false,
  primaryButton = null,
  secondaryButton = null,
  onDismiss = null,
@@ -143,7 +145,11 @@ const createAlert = function createAlert({
  if (!alertContainer) return null;

  const el = document.createElement('div');
-  alertContainer.appendChild(el);
+  if (preservePrevious) {
+    alertContainer.appendChild(el);
+  } else {
+    alertContainer.replaceChildren(el);
+  }

  return new Vue({
    el,

--- a/spec/frontend/flash_spec.js
+++ b/spec/frontend/flash_spec.js
@@ -12,6 +12,9 @@ import createFlash, {
 jest.mock('@sentry/browser');

 describe('Flash', () => {
+  const findTextContent = (containerSelector = '.flash-container') =>
+    document.querySelector(containerSelector).textContent.replace(/\s+/g, ' ').trim();
+
  describe('hideFlash', () => {
    let el;

@@ -99,7 +102,7 @@ describe('Flash', () => {
      it('adds alert element into the document by default', () => {
        alert = createAlert({ message: mockMessage });

-        expect(document.querySelector('.flash-container').textContent.trim()).toBe(mockMessage);
+        expect(findTextContent()).toBe(mockMessage);
        expect(document.querySelector('.flash-container .gl-alert')).not.toBeNull();
      });

@@ -202,8 +205,7 @@ describe('Flash', () => {
            message: mockMessage,
          });

-          const text = document.querySelector('.flash-container').textContent.trim();
-          expect(text).toBe(`${mockTitle} ${mockMessage}`);
+          expect(findTextContent()).toBe(`${mockTitle} ${mockMessage}`);
        });
      });

@@ -319,6 +321,22 @@ describe('Flash', () => {
          });
        });
      });
+
+      describe('when called multiple times', () => {
+        it('clears previous alerts', () => {
+          createAlert({ message: 'message 1' });
+          createAlert({ message: 'message 2' });
+
+          expect(findTextContent()).toBe('message 2');
+        });
+
+        it('preserves alerts when `preservePrevious` is true', () => {
+          createAlert({ message: 'message 1' });
+          createAlert({ message: 'message 2', preservePrevious: true });
+
+          expect(findTextContent()).toBe('message 1 message 2');
+        });
+      });
    });
  });