Make createAlert clears all previous alerts

What does this MR do and why?

This change modifies the behavior of createAlert so it removes previous alerts, so only one alert is present at a time.

It also allows createAlert users to provide a preservePrevious flag in case they prefer to keep alerts previously shown.

Changelog: changed

Why?

We have reports of usages of making our UI confusing/unsuable: #381151 (closed).

Ideally, in follow ups, we will build clever ways to display multiple alerts, mute repeating ones, show them in order of priority, grouping them, etc... The issue reported is marked as priority1, so it's preferable to address this in a simple and quick way.

Screenshots or screen recordings

Given two errors being reported:

    createAlert({ message: 'First error!' });
    createAlert({ message: 'Second error!' });

We get the following behavior:

before	after

How to set up and validate locally

1. Pick your favorite vue or js file and add two successive errors.

I picked admin runners (http://gdk.test:3000/admin/runners) because I have it handy:

diff --git a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
index 2915e4600855..5a44527cedda 100644
--- a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
@@ -117,6 +117,10 @@ export default {
       return isSearchFiltered(this.search);
     },
   },
+  mounted() {
+    createAlert({ message: 'First error!' });
+    createAlert({ message: 'Second error!' });
+  },
   watch: {
     search: {
       deep: true,

1. Verify that only the second error is shown.

2. Add the option to preservePrevious: true, so you can render multiple errors:

diff --git a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
index 2915e4600855..d507da27a2f3 100644
--- a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
@@ -117,6 +117,10 @@ export default {
       return isSearchFiltered(this.search);
     },
   },
+  mounted() {
+    createAlert({ message: 'First error!' });
+    createAlert({ message: 'Second error!', preservePrevious: true });
+  },
   watch: {
     search: {
       deep: true,

1. Verify you can see two errors.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.