From 67b5773afb6d146f1de8e2dca3392fea6ab50707 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Tue, 9 Sep 2025 13:04:36 +0200
Subject: [PATCH 1/3] Rename errors to messages

---
 .../components/errors_alert.stories.js        |  4 ++--
 .../vue_shared/components/errors_alert.vue    | 24 +++++++++----------
 .../components/ai_catalog_agent_form.vue      |  2 +-
 .../components/ai_catalog_flow_form.vue       |  2 +-
 .../ai/catalog/pages/ai_catalog_agents.vue    |  2 +-
 .../catalog/pages/ai_catalog_agents_run.vue   |  2 +-
 .../ai/catalog/pages/ai_catalog_flows.vue     |  2 +-
 .../pages/flows/ai_flows.vue                  |  2 +-
 .../components/ai_catalog_agent_form_spec.js  |  4 ++--
 .../components/ai_catalog_flow_form_spec.js   |  4 ++--
 .../pages/ai_catalog_agents_run_spec.js       |  4 ++--
 .../catalog/pages/ai_catalog_agents_spec.js   | 10 ++++----
 .../ai/catalog/pages/ai_catalog_flows_spec.js | 12 +++++-----
 .../pages/flows/ai_flows_spec.js              |  4 ++--
 .../components/errors_alert_spec.js           | 18 +++++++-------
 15 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/errors_alert.stories.js b/app/assets/javascripts/vue_shared/components/errors_alert.stories.js
index e23ce665f17144..b6ceb76f06ba09 100644
--- a/app/assets/javascripts/vue_shared/components/errors_alert.stories.js
+++ b/app/assets/javascripts/vue_shared/components/errors_alert.stories.js
@@ -6,7 +6,7 @@ export default {
 };
 
 const defaultArgs = {
-  errors: ['The item could not be created.'],
+  messages: ['The item could not be created.'],
 };
 
 const Template = (args, { argTypes }) => ({
@@ -23,7 +23,7 @@ Default.args = {
 export const ErrorsList = Template.bind({});
 ErrorsList.args = {
   ...defaultArgs,
-  errors: ['The item could not be created.', 'The item could not be updated.'],
+  messages: ['The item could not be created.', 'The item could not be updated.'],
 };
 
 export const WithTitle = Template.bind({});
diff --git a/app/assets/javascripts/vue_shared/components/errors_alert.vue b/app/assets/javascripts/vue_shared/components/errors_alert.vue
index b5dd8a219cfff3..c9f359362f0c6b 100644
--- a/app/assets/javascripts/vue_shared/components/errors_alert.vue
+++ b/app/assets/javascripts/vue_shared/components/errors_alert.vue
@@ -12,12 +12,12 @@ export default {
       required: false,
       default: '',
     },
-    errors: {
+    messages: {
       type: Array,
       required: false,
       default: () => [],
     },
-    scrollOnError: {
+    scrollOnMessage: {
       type: Boolean,
       required: false,
       default: true,
@@ -29,14 +29,14 @@ export default {
     },
   },
   computed: {
-    hasErrors() {
-      return this.errors.length > 0;
+    hasMessages() {
+      return this.messages.length > 0;
     },
   },
   watch: {
-    errors() {
-      // Watch for changes in errors and scroll into focus when errors are present
-      if (this.scrollOnError && this.hasErrors) {
+    messages() {
+      // Watch for changes in messages and scroll into focus when messages are present
+      if (this.scrollOnMessage && this.hasMessages) {
         this.scrollToAlert();
       }
     },
@@ -56,19 +56,19 @@ export default {
 
 <template>
   <gl-alert
-    v-if="hasErrors"
+    v-if="hasMessages"
     ref="alertRef"
     :title="title"
     :class="alertClass"
     variant="danger"
     @dismiss="$emit('dismiss')"
   >
-    <span v-if="errors.length === 1">
-      {{ errors[0] }}
+    <span v-if="messages.length === 1">
+      {{ messages[0] }}
     </span>
     <ul v-else class="!gl-mb-0 gl-pl-5">
-      <li v-for="(error, index) in errors" :key="index">
-        {{ error }}
+      <li v-for="(message, index) in messages" :key="index">
+        {{ message }}
       </li>
     </ul>
   </gl-alert>
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
index 50c2d73cad00f7..b8847e97f5838a 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
@@ -254,7 +254,7 @@ export default {
 
 <template>
   <div>
-    <errors-alert :errors="allErrors" @dismiss="dismissErrors" />
+    <errors-alert :messages="allErrors" @dismiss="dismissErrors" />
     <gl-form :id="formId" @submit.prevent="">
       <gl-form-fields
         v-model="formValues"
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_form.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_form.vue
index c73faa3a485938..3790c3027b454e 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_form.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_form.vue
@@ -198,7 +198,7 @@ export default {
 </script>
 <template>
   <div>
-    <errors-alert :errors="allErrors" @dismiss="dismissErrors" />
+    <errors-alert :messages="allErrors" @dismiss="dismissErrors" />
     <div class="gl-flex gl-items-stretch gl-gap-8">
       <gl-form :id="formId" class="gl-max-w-lg" @submit.prevent>
         <gl-form-fields
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents.vue
index c7471b4dd18e49..2de19864d70542 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents.vue
@@ -346,7 +346,7 @@ export default {
 <template>
   <div>
     <ai-catalog-list-header />
-    <errors-alert class="gl-mt-5" :errors="errors" @dismiss="errors = []" />
+    <errors-alert class="gl-mt-5" :messages="errors" @dismiss="errors = []" />
     <ai-catalog-list
       :is-loading="isLoading"
       :items="aiCatalogAgents"
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
index 80e3dd4dba4b77..16ce76e06e879b 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
@@ -98,7 +98,7 @@ export default {
       </template>
     </page-heading>
 
-    <errors-alert :errors="errors" @dismiss="dismissErrors" />
+    <errors-alert :messages="errors" @dismiss="dismissErrors" />
 
     <ai-catalog-agent-run-form
       :is-submitting="isSubmitting"
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows.vue
index 44b6ba50862be8..f2967a4eaa21f8 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows.vue
@@ -295,7 +295,7 @@ export default {
 <template>
   <div>
     <ai-catalog-list-header />
-    <errors-alert class="gl-mt-5" :errors="errors" @dismiss="errors = []" />
+    <errors-alert class="gl-mt-5" :messages="errors" @dismiss="errors = []" />
     <ai-catalog-list
       :is-loading="isLoading"
       :items="aiCatalogFlows"
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/flows/ai_flows.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/flows/ai_flows.vue
index 5ec86bf647abac..9b9e3686d91e91 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/flows/ai_flows.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/flows/ai_flows.vue
@@ -207,7 +207,7 @@ export default {
   <div>
     <page-heading :heading="s__('AICatalog|Flows')" />
 
-    <errors-alert class="gl-mt-5" :errors="errors" @dismiss="errors = []" />
+    <errors-alert class="gl-mt-5" :messages="errors" @dismiss="errors = []" />
     <ai-catalog-list
       :is-loading="isLoading"
       :items="items"
diff --git a/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_form_spec.js b/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_form_spec.js
index 3f8e0a17465458..ba094b48f0cd6b 100644
--- a/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_form_spec.js
+++ b/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_form_spec.js
@@ -189,7 +189,7 @@ describe('AiCatalogAgentForm', () => {
     });
 
     it('passes error alert', () => {
-      expect(findErrorAlert().props('errors')).toEqual([mockErrorMessage]);
+      expect(findErrorAlert().props('messages')).toEqual([mockErrorMessage]);
     });
 
     it('renders errors with form errors', async () => {
@@ -197,7 +197,7 @@ describe('AiCatalogAgentForm', () => {
 
       await findProjectDropdown().vm.$emit('error', formError);
 
-      expect(findErrorAlert().props('errors')).toEqual([mockErrorMessage, formError]);
+      expect(findErrorAlert().props('messages')).toEqual([mockErrorMessage, formError]);
     });
 
     it('emits dismiss-errors event', () => {
diff --git a/ee/spec/frontend/ai/catalog/components/ai_catalog_flow_form_spec.js b/ee/spec/frontend/ai/catalog/components/ai_catalog_flow_form_spec.js
index 5b3394172d4c9e..85e09b1a7d987b 100644
--- a/ee/spec/frontend/ai/catalog/components/ai_catalog_flow_form_spec.js
+++ b/ee/spec/frontend/ai/catalog/components/ai_catalog_flow_form_spec.js
@@ -161,7 +161,7 @@ describe('AiCatalogFlowForm', () => {
     });
 
     it('passes error alert', () => {
-      expect(findErrorAlert().props('errors')).toEqual([mockError]);
+      expect(findErrorAlert().props('messages')).toEqual([mockError]);
     });
 
     it('renders errors with form errors', async () => {
@@ -169,7 +169,7 @@ describe('AiCatalogFlowForm', () => {
 
       await findProjectDropdown().vm.$emit('error', formError);
 
-      expect(findErrorAlert().props('errors')).toEqual([mockError, formError]);
+      expect(findErrorAlert().props('messages')).toEqual([mockError, formError]);
     });
 
     it('emits dismiss-errors event', () => {
diff --git a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
index 6969e89d0e8f56..bf83f0fdac23ec 100644
--- a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
+++ b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
@@ -106,7 +106,7 @@ describe('AiCatalogAgentsRun', () => {
       });
 
       it('shows an alert', () => {
-        expect(findErrorsAlert().props('errors')).toEqual(['Could not find agent ID']);
+        expect(findErrorsAlert().props('messages')).toEqual(['Could not find agent ID']);
       });
     });
 
@@ -119,7 +119,7 @@ describe('AiCatalogAgentsRun', () => {
       });
 
       it('shows the error alert', () => {
-        expect(findErrorsAlert().props('errors')).toEqual(['The test run failed. Error']);
+        expect(findErrorsAlert().props('messages')).toEqual(['The test run failed. Error']);
       });
     });
   });
diff --git a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js
index 16fb62f5f39066..23ee4da01a64f6 100644
--- a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js
+++ b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js
@@ -277,7 +277,7 @@ describe('AiCatalogAgents', () => {
       });
 
       it('displays permission error message', () => {
-        expect(findErrorsAlert().props('errors')).toStrictEqual([agentNotFoundErrorMessage]);
+        expect(findErrorsAlert().props('messages')).toStrictEqual([agentNotFoundErrorMessage]);
       });
 
       it('does not log to Sentry for permission issues', () => {
@@ -304,7 +304,7 @@ describe('AiCatalogAgents', () => {
       });
 
       it('displays error message', () => {
-        expect(findErrorsAlert().props('errors')).toStrictEqual(['Network error']);
+        expect(findErrorsAlert().props('messages')).toStrictEqual(['Network error']);
       });
 
       it('logs error to Sentry', () => {
@@ -434,7 +434,7 @@ describe('AiCatalogAgents', () => {
         deleteAgent();
 
         await waitForPromises();
-        expect(findErrorsAlert().props('errors')).toStrictEqual([
+        expect(findErrorsAlert().props('messages')).toStrictEqual([
           'Failed to delete agent. You do not have permission to delete this AI agent.',
         ]);
       });
@@ -447,7 +447,7 @@ describe('AiCatalogAgents', () => {
         deleteAgent();
 
         await waitForPromises();
-        expect(findErrorsAlert().props('errors')).toStrictEqual([
+        expect(findErrorsAlert().props('messages')).toStrictEqual([
           'Failed to delete agent. Error: Request failed',
         ]);
         expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
@@ -501,7 +501,7 @@ describe('AiCatalogAgents', () => {
       it('shows error message and logs to Sentry', async () => {
         await duplicateAgent(3);
 
-        expect(findErrorsAlert().props('errors')).toStrictEqual([agentNotFoundErrorMessage]);
+        expect(findErrorsAlert().props('messages')).toStrictEqual([agentNotFoundErrorMessage]);
         expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
       });
     });
diff --git a/ee/spec/frontend/ai/catalog/pages/ai_catalog_flows_spec.js b/ee/spec/frontend/ai/catalog/pages/ai_catalog_flows_spec.js
index f83eb9ba4f7f9e..3b4d89a57eee52 100644
--- a/ee/spec/frontend/ai/catalog/pages/ai_catalog_flows_spec.js
+++ b/ee/spec/frontend/ai/catalog/pages/ai_catalog_flows_spec.js
@@ -238,7 +238,7 @@ describe('AiCatalogFlows', () => {
       });
 
       it('displays permission error message', () => {
-        expect(findErrorsAlert().props('errors')).toEqual(['Flow not found.']);
+        expect(findErrorsAlert().props('messages')).toEqual(['Flow not found.']);
       });
 
       it('does not log to Sentry for permission issues', () => {
@@ -265,7 +265,7 @@ describe('AiCatalogFlows', () => {
       });
 
       it('displays error message', () => {
-        expect(findErrorsAlert().props('errors')).toEqual(['Network error']);
+        expect(findErrorsAlert().props('messages')).toEqual(['Network error']);
       });
 
       it('logs error to Sentry', () => {
@@ -309,7 +309,7 @@ describe('AiCatalogFlows', () => {
         deleteFlow();
 
         await waitForPromises();
-        expect(findErrorsAlert().props('errors')).toEqual([
+        expect(findErrorsAlert().props('messages')).toEqual([
           'Failed to delete flow. You do not have permission to delete this AI flow.',
         ]);
       });
@@ -322,7 +322,7 @@ describe('AiCatalogFlows', () => {
         deleteFlow();
 
         await waitForPromises();
-        expect(findErrorsAlert().props('errors')).toEqual([
+        expect(findErrorsAlert().props('messages')).toEqual([
           'Failed to delete flow. Error: Request failed',
         ]);
         expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
@@ -423,7 +423,7 @@ describe('AiCatalogFlows', () => {
             createConsumer();
             await waitForPromises();
 
-            expect(findErrorsAlert().props('errors')).toEqual([
+            expect(findErrorsAlert().props('messages')).toEqual([
               `Flow could not be added: ${mockFlow.name}`,
               'Item already configured.',
             ]);
@@ -437,7 +437,7 @@ describe('AiCatalogFlows', () => {
             createConsumer();
             await waitForPromises();
 
-            expect(findErrorsAlert().props('errors')).toEqual([
+            expect(findErrorsAlert().props('messages')).toEqual([
               'The flow could not be added to the project. Try again. Error: Request failed',
             ]);
             expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
diff --git a/ee/spec/frontend/ai/duo_agents_platform/pages/flows/ai_flows_spec.js b/ee/spec/frontend/ai/duo_agents_platform/pages/flows/ai_flows_spec.js
index 2432b8e1f81a99..00c7ae5b499a10 100644
--- a/ee/spec/frontend/ai/duo_agents_platform/pages/flows/ai_flows_spec.js
+++ b/ee/spec/frontend/ai/duo_agents_platform/pages/flows/ai_flows_spec.js
@@ -158,7 +158,7 @@ describe('AiFlows', () => {
           deleteFlow();
 
           await waitForPromises();
-          expect(findErrorsAlert().props('errors')).toStrictEqual([
+          expect(findErrorsAlert().props('messages')).toStrictEqual([
             'Failed to remove flow. You do not have permission to delete this AI flow.',
           ]);
         });
@@ -171,7 +171,7 @@ describe('AiFlows', () => {
           deleteFlow();
 
           await waitForPromises();
-          expect(findErrorsAlert().props('errors')).toStrictEqual([
+          expect(findErrorsAlert().props('messages')).toStrictEqual([
             'Failed to remove flow. Error: Request failed',
           ]);
           expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
diff --git a/spec/frontend/vue_shared/components/errors_alert_spec.js b/spec/frontend/vue_shared/components/errors_alert_spec.js
index 79cd8e782dd950..73108cf437bf87 100644
--- a/spec/frontend/vue_shared/components/errors_alert_spec.js
+++ b/spec/frontend/vue_shared/components/errors_alert_spec.js
@@ -26,25 +26,25 @@ describe('ErrorsAlert', () => {
     });
 
     it('renders error alert when there is one error', () => {
-      createWrapper({ errors: [mockError1] });
+      createWrapper({ messages: [mockError1] });
 
       expect(findErrorAlert().text()).toBe(mockError1);
     });
 
     it('renders error alert with list for multiple errors', () => {
-      createWrapper({ errors: [mockError1, mockError2] });
+      createWrapper({ messages: [mockError1, mockError2] });
 
       expect(findErrorAlert().findAll('li')).toHaveLength(2);
     });
 
     it('renders the default CSS class', () => {
-      createWrapper({ errors: [mockError1] });
+      createWrapper({ messages: [mockError1] });
 
       expect(findErrorAlert().attributes('class')).toBe('gl-mb-5');
     });
 
     it('does not render the default CSS class when overridden', () => {
-      createWrapper({ errors: [mockError1], alertClass: 'gl-mb-4' });
+      createWrapper({ messages: [mockError1], alertClass: 'gl-mb-4' });
 
       expect(findErrorAlert().attributes('class')).toBe('gl-mb-4');
     });
@@ -64,7 +64,7 @@ describe('ErrorsAlert', () => {
 
     it('scrolls to error alert when errors are set', async () => {
       createWrapper();
-      await wrapper.setProps({ errors: ['Error occurred'] });
+      await wrapper.setProps({ messages: ['Error occurred'] });
       await nextTick();
 
       expect(scrollIntoViewMock).toHaveBeenCalledWith({
@@ -73,10 +73,10 @@ describe('ErrorsAlert', () => {
       });
     });
 
-    describe('but the property to scrollOnError is false', () => {
+    describe('but the property to scrollOnUpdate is false', () => {
       it('does not to error alert when errors are set', async () => {
-        createWrapper({ scrollOnError: false });
-        await wrapper.setProps({ errors: ['Error occurred'] });
+        createWrapper({ scrollOnUpdate: false });
+        await wrapper.setProps({ messages: ['Error occurred'] });
         await nextTick();
 
         expect(scrollIntoViewMock).not.toHaveBeenCalledWith({
@@ -90,7 +90,7 @@ describe('ErrorsAlert', () => {
   describe('Interactions', () => {
     describe('when dismissing the alert', () => {
       beforeEach(() => {
-        createWrapper({ errors: [mockError1] });
+        createWrapper({ messages: [mockError1] });
       });
 
       it('emits dismiss event when clicked on dismiss icon', () => {
-- 
GitLab


From 5b771558a576f5d8f360a43200bfd9107fda3314 Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Tue, 9 Sep 2025 14:45:22 +0200
Subject: [PATCH 2/3] Rename ErrorsAlert to StatusAlert, accepting all alert
 variant options

---
 ..._alert.stories.js => status_alert.stories.js} | 10 +++++-----
 .../{errors_alert.vue => status_alert.vue}       | 11 +++++++++--
 .../catalog/components/ai_catalog_agent_form.vue |  6 +++---
 .../catalog/components/ai_catalog_flow_form.vue  |  6 +++---
 .../ai/catalog/pages/ai_catalog_agents.vue       |  6 +++---
 .../ai/catalog/pages/ai_catalog_agents_run.vue   |  6 +++---
 .../ai/catalog/pages/ai_catalog_flows.vue        |  6 +++---
 .../duo_agents_platform/pages/flows/ai_flows.vue |  6 +++---
 .../components/ai_catalog_agent_form_spec.js     | 10 +++++-----
 .../components/ai_catalog_flow_form_spec.js      | 10 +++++-----
 .../catalog/pages/ai_catalog_agents_run_spec.js  |  8 ++++----
 .../ai/catalog/pages/ai_catalog_agents_spec.js   | 14 +++++++-------
 .../ai/catalog/pages/ai_catalog_flows_spec.js    | 16 ++++++++--------
 .../pages/flows/ai_flows_spec.js                 |  8 ++++----
 ...errors_alert_spec.js => status_alert_spec.js} |  6 +++---
 15 files changed, 68 insertions(+), 61 deletions(-)
 rename app/assets/javascripts/vue_shared/components/{errors_alert.stories.js => status_alert.stories.js} (74%)
 rename app/assets/javascripts/vue_shared/components/{errors_alert.vue => status_alert.vue} (82%)
 rename spec/frontend/vue_shared/components/{errors_alert_spec.js => status_alert_spec.js} (95%)

diff --git a/app/assets/javascripts/vue_shared/components/errors_alert.stories.js b/app/assets/javascripts/vue_shared/components/status_alert.stories.js
similarity index 74%
rename from app/assets/javascripts/vue_shared/components/errors_alert.stories.js
rename to app/assets/javascripts/vue_shared/components/status_alert.stories.js
index b6ceb76f06ba09..a92a4d3671ad24 100644
--- a/app/assets/javascripts/vue_shared/components/errors_alert.stories.js
+++ b/app/assets/javascripts/vue_shared/components/status_alert.stories.js
@@ -1,8 +1,8 @@
-import ErrorsAlert from './errors_alert.vue';
+import StatusAlert from './status_alert.vue';
 
 export default {
-  component: ErrorsAlert,
-  title: 'vue_shared/errors_alert',
+  component: StatusAlert,
+  title: 'vue_shared/status_alert',
 };
 
 const defaultArgs = {
@@ -10,9 +10,9 @@ const defaultArgs = {
 };
 
 const Template = (args, { argTypes }) => ({
-  components: { ErrorsAlert },
+  components: { StatusAlert },
   props: Object.keys(argTypes),
-  template: `<errors-alert v-bind="$props" />`,
+  template: `<status-alert v-bind="$props" />`,
 });
 
 export const Default = Template.bind({});
diff --git a/app/assets/javascripts/vue_shared/components/errors_alert.vue b/app/assets/javascripts/vue_shared/components/status_alert.vue
similarity index 82%
rename from app/assets/javascripts/vue_shared/components/errors_alert.vue
rename to app/assets/javascripts/vue_shared/components/status_alert.vue
index c9f359362f0c6b..ca96a8e638a028 100644
--- a/app/assets/javascripts/vue_shared/components/errors_alert.vue
+++ b/app/assets/javascripts/vue_shared/components/status_alert.vue
@@ -1,8 +1,9 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
+import { alertVariantOptions } from '@gitlab/ui/src/utils/constants';
 
 export default {
-  name: 'ErrorsAlert',
+  name: 'StatusAlert',
   components: {
     GlAlert,
   },
@@ -27,6 +28,12 @@ export default {
       required: false,
       default: 'gl-mb-5',
     },
+    variant: {
+      type: String,
+      required: false,
+      default: alertVariantOptions.danger,
+      validator: (value) => Object.keys(alertVariantOptions).includes(value),
+    },
   },
   computed: {
     hasMessages() {
@@ -60,7 +67,7 @@ export default {
     ref="alertRef"
     :title="title"
     :class="alertClass"
-    variant="danger"
+    :variant="variant"
     @dismiss="$emit('dismiss')"
   >
     <span v-if="messages.length === 1">
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
index b8847e97f5838a..9bdf7a47b84051 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_agent_form.vue
@@ -14,7 +14,7 @@ import {
   AGENT_VISIBILITY_LEVEL_DESCRIPTIONS,
 } from 'ee/ai/catalog/constants';
 import { __, s__ } from '~/locale';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { AI_CATALOG_AGENTS_ROUTE } from '../router/constants';
 import { createFieldValidators } from '../utils';
@@ -25,7 +25,6 @@ import VisibilityLevelRadioGroup from './visibility_level_radio_group.vue';
 
 export default {
   components: {
-    ErrorsAlert,
     AiCatalogFormButtons,
     FormProjectDropdown,
     GlButton,
@@ -33,6 +32,7 @@ export default {
     GlFormFields,
     GlFormTextarea,
     GlTokenSelector,
+    StatusAlert,
     VisibilityLevelRadioGroup,
   },
   mixins: [glFeatureFlagsMixin()],
@@ -254,7 +254,7 @@ export default {
 
 <template>
   <div>
-    <errors-alert :messages="allErrors" @dismiss="dismissErrors" />
+    <status-alert :messages="allErrors" @dismiss="dismissErrors" />
     <gl-form :id="formId" @submit.prevent="">
       <gl-form-fields
         v-model="formValues"
diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_form.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_form.vue
index 3790c3027b454e..8773408b18692c 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_form.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_flow_form.vue
@@ -13,7 +13,7 @@ import {
   FLOW_VISIBILITY_LEVEL_DESCRIPTIONS,
 } from 'ee/ai/catalog/constants';
 import { __, s__ } from '~/locale';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import { AI_CATALOG_FLOWS_ROUTE } from '../router/constants';
 import { createFieldValidators } from '../utils';
 import AiCatalogFormButtons from './ai_catalog_form_buttons.vue';
@@ -24,7 +24,6 @@ import VisibilityLevelRadioGroup from './visibility_level_radio_group.vue';
 
 export default {
   components: {
-    ErrorsAlert,
     AiCatalogFormButtons,
     AiCatalogStepsEditor,
     AiCatalogFormSidePanel,
@@ -33,6 +32,7 @@ export default {
     GlForm,
     GlFormFields,
     GlFormTextarea,
+    StatusAlert,
     VisibilityLevelRadioGroup,
   },
   props: {
@@ -198,7 +198,7 @@ export default {
 </script>
 <template>
   <div>
-    <errors-alert :messages="allErrors" @dismiss="dismissErrors" />
+    <status-alert :messages="allErrors" @dismiss="dismissErrors" />
     <div class="gl-flex gl-items-stretch gl-gap-8">
       <gl-form :id="formId" class="gl-max-w-lg" @submit.prevent>
         <gl-form-fields
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents.vue
index 2de19864d70542..d9aadf16df6d5d 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents.vue
@@ -8,7 +8,7 @@ import {
   VISIBILITY_LEVEL_PUBLIC_STRING,
   VISIBILITY_LEVEL_PRIVATE_STRING,
 } from '~/visibility_level/constants';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
 import aiCatalogAgentsQuery from '../graphql/queries/ai_catalog_agents.query.graphql';
 import aiCatalogAgentQuery from '../graphql/queries/ai_catalog_agent.query.graphql';
@@ -41,7 +41,7 @@ export default {
     AiCatalogList,
     AiCatalogItemDrawer,
     AiCatalogItemConsumerModal,
-    ErrorsAlert,
+    StatusAlert,
   },
   mixins: [InternalEvents.mixin()],
   apollo: {
@@ -346,7 +346,7 @@ export default {
 <template>
   <div>
     <ai-catalog-list-header />
-    <errors-alert class="gl-mt-5" :messages="errors" @dismiss="errors = []" />
+    <status-alert class="gl-mt-5" :messages="errors" @dismiss="errors = []" />
     <ai-catalog-list
       :is-loading="isLoading"
       :items="aiCatalogAgents"
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
index 16ce76e06e879b..77f4d10d7d0c35 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
@@ -3,7 +3,7 @@ import { sprintf, s__ } from '~/locale';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { createAlert } from '~/alert';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import AiCatalogAgentRunForm from '../components/ai_catalog_agent_run_form.vue';
 import executeAiCatalogAgent from '../graphql/mutations/execute_ai_catalog_agent.mutation.graphql';
@@ -12,8 +12,8 @@ export default {
   name: 'AiCatalogAgentsRun',
   components: {
     AiCatalogAgentRunForm,
-    ErrorsAlert,
     PageHeading,
+    StatusAlert,
   },
   props: {
     aiCatalogAgent: {
@@ -98,7 +98,7 @@ export default {
       </template>
     </page-heading>
 
-    <errors-alert :messages="errors" @dismiss="dismissErrors" />
+    <status-alert :messages="errors" @dismiss="dismissErrors" />
 
     <ai-catalog-agent-run-form
       :is-submitting="isSubmitting"
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows.vue
index f2967a4eaa21f8..970818e166df53 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_flows.vue
@@ -8,7 +8,7 @@ import {
 } from '~/visibility_level/constants';
 import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import { InternalEvents } from '~/tracking';
 import aiCatalogFlowsQuery from '../graphql/queries/ai_catalog_flows.query.graphql';
 import aiCatalogFlowQuery from '../graphql/queries/ai_catalog_flow.query.graphql';
@@ -34,7 +34,7 @@ export default {
     AiCatalogList,
     AiCatalogListHeader,
     AiCatalogItemConsumerModal,
-    ErrorsAlert,
+    StatusAlert,
   },
   mixins: [InternalEvents.mixin()],
   apollo: {
@@ -295,7 +295,7 @@ export default {
 <template>
   <div>
     <ai-catalog-list-header />
-    <errors-alert class="gl-mt-5" :messages="errors" @dismiss="errors = []" />
+    <status-alert class="gl-mt-5" :messages="errors" @dismiss="errors = []" />
     <ai-catalog-list
       :is-loading="isLoading"
       :items="aiCatalogFlows"
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/flows/ai_flows.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/flows/ai_flows.vue
index 9b9e3686d91e91..4f023cdfdd7a79 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/flows/ai_flows.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/flows/ai_flows.vue
@@ -5,7 +5,7 @@ import { __, s__, sprintf } from '~/locale';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { fetchPolicies } from '~/lib/graphql';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 
 import PageHeading from '~/vue_shared/components/page_heading.vue';
 import ResourceListsEmptyState from '~/vue_shared/components/resource_lists/empty_state.vue';
@@ -29,7 +29,7 @@ export default {
     GlButton,
     PageHeading,
     ResourceListsEmptyState,
-    ErrorsAlert,
+    StatusAlert,
     AiCatalogList,
     AiCatalogItemDrawer,
   },
@@ -207,7 +207,7 @@ export default {
   <div>
     <page-heading :heading="s__('AICatalog|Flows')" />
 
-    <errors-alert class="gl-mt-5" :messages="errors" @dismiss="errors = []" />
+    <status-alert class="gl-mt-5" :messages="errors" @dismiss="errors = []" />
     <ai-catalog-list
       :is-loading="isLoading"
       :items="items"
diff --git a/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_form_spec.js b/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_form_spec.js
index ba094b48f0cd6b..069a8a82833204 100644
--- a/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_form_spec.js
+++ b/ee/spec/frontend/ai/catalog/components/ai_catalog_agent_form_spec.js
@@ -1,7 +1,7 @@
 import VueApollo from 'vue-apollo';
 import Vue, { nextTick } from 'vue';
 import { GlFormFields } from '@gitlab/ui';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -18,7 +18,7 @@ describe('AiCatalogAgentForm', () => {
   let wrapper;
   let mockApollo;
 
-  const findErrorAlert = () => wrapper.findComponent(ErrorsAlert);
+  const findStatusAlert = () => wrapper.findComponent(StatusAlert);
   const findFormFields = () => wrapper.findComponent(GlFormFields);
   const findProjectDropdown = () => wrapper.findComponent(FormProjectDropdown);
   const findVisibilityLevelRadioGroup = () => wrapper.findComponent(VisibilityLevelRadioGroup);
@@ -189,7 +189,7 @@ describe('AiCatalogAgentForm', () => {
     });
 
     it('passes error alert', () => {
-      expect(findErrorAlert().props('messages')).toEqual([mockErrorMessage]);
+      expect(findStatusAlert().props('messages')).toEqual([mockErrorMessage]);
     });
 
     it('renders errors with form errors', async () => {
@@ -197,11 +197,11 @@ describe('AiCatalogAgentForm', () => {
 
       await findProjectDropdown().vm.$emit('error', formError);
 
-      expect(findErrorAlert().props('messages')).toEqual([mockErrorMessage, formError]);
+      expect(findStatusAlert().props('messages')).toEqual([mockErrorMessage, formError]);
     });
 
     it('emits dismiss-errors event', () => {
-      findErrorAlert().vm.$emit('dismiss');
+      findStatusAlert().vm.$emit('dismiss');
 
       expect(wrapper.emitted('dismiss-errors')).toHaveLength(1);
     });
diff --git a/ee/spec/frontend/ai/catalog/components/ai_catalog_flow_form_spec.js b/ee/spec/frontend/ai/catalog/components/ai_catalog_flow_form_spec.js
index 85e09b1a7d987b..a91934d28b7321 100644
--- a/ee/spec/frontend/ai/catalog/components/ai_catalog_flow_form_spec.js
+++ b/ee/spec/frontend/ai/catalog/components/ai_catalog_flow_form_spec.js
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { GlFormFields } from '@gitlab/ui';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import AiCatalogFlowForm from 'ee/ai/catalog/components/ai_catalog_flow_form.vue';
 import AiCatalogStepsEditor from 'ee/ai/catalog/components/ai_catalog_steps_editor.vue';
@@ -12,7 +12,7 @@ import { VISIBILITY_LEVEL_PRIVATE, VISIBILITY_LEVEL_PUBLIC } from 'ee/ai/catalog
 describe('AiCatalogFlowForm', () => {
   let wrapper;
 
-  const findErrorAlert = () => wrapper.findComponent(ErrorsAlert);
+  const findStatusAlert = () => wrapper.findComponent(StatusAlert);
   const findFormFields = () => wrapper.findComponent(GlFormFields);
   const findProjectDropdown = () => wrapper.findComponent(FormProjectDropdown);
   const findVisibilityLevelRadioGroup = () => wrapper.findComponent(VisibilityLevelRadioGroup);
@@ -161,7 +161,7 @@ describe('AiCatalogFlowForm', () => {
     });
 
     it('passes error alert', () => {
-      expect(findErrorAlert().props('messages')).toEqual([mockError]);
+      expect(findStatusAlert().props('messages')).toEqual([mockError]);
     });
 
     it('renders errors with form errors', async () => {
@@ -169,11 +169,11 @@ describe('AiCatalogFlowForm', () => {
 
       await findProjectDropdown().vm.$emit('error', formError);
 
-      expect(findErrorAlert().props('messages')).toEqual([mockError, formError]);
+      expect(findStatusAlert().props('messages')).toEqual([mockError, formError]);
     });
 
     it('emits dismiss-errors event', () => {
-      findErrorAlert().vm.$emit('dismiss');
+      findStatusAlert().vm.$emit('dismiss');
 
       expect(wrapper.emitted('dismiss-errors')).toHaveLength(1);
     });
diff --git a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
index bf83f0fdac23ec..84f78ff3b81be8 100644
--- a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
+++ b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
 import { createAlert } from '~/alert';
 import AiCatalogAgentsRun from 'ee/ai/catalog/pages/ai_catalog_agents_run.vue';
@@ -51,7 +51,7 @@ describe('AiCatalogAgentsRun', () => {
 
   const findPageHeading = () => wrapper.findComponent(PageHeading);
   const findRunForm = () => wrapper.findComponent(AiCatalogAgentRunForm);
-  const findErrorsAlert = () => wrapper.findComponent(ErrorsAlert);
+  const findStatusAlert = () => wrapper.findComponent(StatusAlert);
 
   const userPrompt = 'prompt';
 
@@ -106,7 +106,7 @@ describe('AiCatalogAgentsRun', () => {
       });
 
       it('shows an alert', () => {
-        expect(findErrorsAlert().props('messages')).toEqual(['Could not find agent ID']);
+        expect(findStatusAlert().props('messages')).toEqual(['Could not find agent ID']);
       });
     });
 
@@ -119,7 +119,7 @@ describe('AiCatalogAgentsRun', () => {
       });
 
       it('shows the error alert', () => {
-        expect(findErrorsAlert().props('messages')).toEqual(['The test run failed. Error']);
+        expect(findStatusAlert().props('messages')).toEqual(['The test run failed. Error']);
       });
     });
   });
diff --git a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js
index 23ee4da01a64f6..b710589435b952 100644
--- a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js
+++ b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js
@@ -1,6 +1,6 @@
 import VueApollo from 'vue-apollo';
 import Vue, { nextTick } from 'vue';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -90,7 +90,7 @@ describe('AiCatalogAgents', () => {
     });
   };
 
-  const findErrorsAlert = () => wrapper.findComponent(ErrorsAlert);
+  const findStatusAlert = () => wrapper.findComponent(StatusAlert);
   const findAiCatalogList = () => wrapper.findComponent(AiCatalogList);
   const findAiCatalogItemDrawer = () => wrapper.findComponent(AiCatalogItemDrawer);
   const findAiCatalogItemConsumerModal = () => wrapper.findComponent(AiCatalogItemConsumerModal);
@@ -277,7 +277,7 @@ describe('AiCatalogAgents', () => {
       });
 
       it('displays permission error message', () => {
-        expect(findErrorsAlert().props('messages')).toStrictEqual([agentNotFoundErrorMessage]);
+        expect(findStatusAlert().props('messages')).toStrictEqual([agentNotFoundErrorMessage]);
       });
 
       it('does not log to Sentry for permission issues', () => {
@@ -304,7 +304,7 @@ describe('AiCatalogAgents', () => {
       });
 
       it('displays error message', () => {
-        expect(findErrorsAlert().props('messages')).toStrictEqual(['Network error']);
+        expect(findStatusAlert().props('messages')).toStrictEqual(['Network error']);
       });
 
       it('logs error to Sentry', () => {
@@ -434,7 +434,7 @@ describe('AiCatalogAgents', () => {
         deleteAgent();
 
         await waitForPromises();
-        expect(findErrorsAlert().props('messages')).toStrictEqual([
+        expect(findStatusAlert().props('messages')).toStrictEqual([
           'Failed to delete agent. You do not have permission to delete this AI agent.',
         ]);
       });
@@ -447,7 +447,7 @@ describe('AiCatalogAgents', () => {
         deleteAgent();
 
         await waitForPromises();
-        expect(findErrorsAlert().props('messages')).toStrictEqual([
+        expect(findStatusAlert().props('messages')).toStrictEqual([
           'Failed to delete agent. Error: Request failed',
         ]);
         expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
@@ -501,7 +501,7 @@ describe('AiCatalogAgents', () => {
       it('shows error message and logs to Sentry', async () => {
         await duplicateAgent(3);
 
-        expect(findErrorsAlert().props('messages')).toStrictEqual([agentNotFoundErrorMessage]);
+        expect(findStatusAlert().props('messages')).toStrictEqual([agentNotFoundErrorMessage]);
         expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
       });
     });
diff --git a/ee/spec/frontend/ai/catalog/pages/ai_catalog_flows_spec.js b/ee/spec/frontend/ai/catalog/pages/ai_catalog_flows_spec.js
index 3b4d89a57eee52..03578f936a8473 100644
--- a/ee/spec/frontend/ai/catalog/pages/ai_catalog_flows_spec.js
+++ b/ee/spec/frontend/ai/catalog/pages/ai_catalog_flows_spec.js
@@ -2,7 +2,7 @@ import VueApollo from 'vue-apollo';
 import Vue, { nextTick } from 'vue';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -80,7 +80,7 @@ describe('AiCatalogFlows', () => {
     });
   };
 
-  const findErrorsAlert = () => wrapper.findComponent(ErrorsAlert);
+  const findStatusAlert = () => wrapper.findComponent(StatusAlert);
   const findAiCatalogList = () => wrapper.findComponent(AiCatalogList);
   const findAiCatalogItemDrawer = () => wrapper.findComponent(AiCatalogItemDrawer);
   const findAiCatalogItemConsumerModal = () => wrapper.findComponent(AiCatalogItemConsumerModal);
@@ -238,7 +238,7 @@ describe('AiCatalogFlows', () => {
       });
 
       it('displays permission error message', () => {
-        expect(findErrorsAlert().props('messages')).toEqual(['Flow not found.']);
+        expect(findStatusAlert().props('messages')).toEqual(['Flow not found.']);
       });
 
       it('does not log to Sentry for permission issues', () => {
@@ -265,7 +265,7 @@ describe('AiCatalogFlows', () => {
       });
 
       it('displays error message', () => {
-        expect(findErrorsAlert().props('messages')).toEqual(['Network error']);
+        expect(findStatusAlert().props('messages')).toEqual(['Network error']);
       });
 
       it('logs error to Sentry', () => {
@@ -309,7 +309,7 @@ describe('AiCatalogFlows', () => {
         deleteFlow();
 
         await waitForPromises();
-        expect(findErrorsAlert().props('messages')).toEqual([
+        expect(findStatusAlert().props('messages')).toEqual([
           'Failed to delete flow. You do not have permission to delete this AI flow.',
         ]);
       });
@@ -322,7 +322,7 @@ describe('AiCatalogFlows', () => {
         deleteFlow();
 
         await waitForPromises();
-        expect(findErrorsAlert().props('messages')).toEqual([
+        expect(findStatusAlert().props('messages')).toEqual([
           'Failed to delete flow. Error: Request failed',
         ]);
         expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
@@ -423,7 +423,7 @@ describe('AiCatalogFlows', () => {
             createConsumer();
             await waitForPromises();
 
-            expect(findErrorsAlert().props('messages')).toEqual([
+            expect(findStatusAlert().props('messages')).toEqual([
               `Flow could not be added: ${mockFlow.name}`,
               'Item already configured.',
             ]);
@@ -437,7 +437,7 @@ describe('AiCatalogFlows', () => {
             createConsumer();
             await waitForPromises();
 
-            expect(findErrorsAlert().props('messages')).toEqual([
+            expect(findStatusAlert().props('messages')).toEqual([
               'The flow could not be added to the project. Try again. Error: Request failed',
             ]);
             expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
diff --git a/ee/spec/frontend/ai/duo_agents_platform/pages/flows/ai_flows_spec.js b/ee/spec/frontend/ai/duo_agents_platform/pages/flows/ai_flows_spec.js
index 00c7ae5b499a10..cd0ce41f499164 100644
--- a/ee/spec/frontend/ai/duo_agents_platform/pages/flows/ai_flows_spec.js
+++ b/ee/spec/frontend/ai/duo_agents_platform/pages/flows/ai_flows_spec.js
@@ -7,7 +7,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import AiFlows from 'ee/ai/duo_agents_platform/pages/flows/ai_flows.vue';
 import AiCatalogList from 'ee/ai/catalog/components/ai_catalog_list.vue';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
 import ResourceListsEmptyState from '~/vue_shared/components/resource_lists/empty_state.vue';
 import aiCatalogConfiguredItemsQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_configured_items.query.graphql';
@@ -66,7 +66,7 @@ describe('AiFlows', () => {
     });
   };
 
-  const findErrorsAlert = () => wrapper.findComponent(ErrorsAlert);
+  const findStatusAlert = () => wrapper.findComponent(StatusAlert);
   const findAiCatalogList = () => wrapper.findComponent(AiCatalogList);
   const findEmptyState = () => wrapper.findComponent(ResourceListsEmptyState);
 
@@ -158,7 +158,7 @@ describe('AiFlows', () => {
           deleteFlow();
 
           await waitForPromises();
-          expect(findErrorsAlert().props('messages')).toStrictEqual([
+          expect(findStatusAlert().props('messages')).toStrictEqual([
             'Failed to remove flow. You do not have permission to delete this AI flow.',
           ]);
         });
@@ -171,7 +171,7 @@ describe('AiFlows', () => {
           deleteFlow();
 
           await waitForPromises();
-          expect(findErrorsAlert().props('messages')).toStrictEqual([
+          expect(findStatusAlert().props('messages')).toStrictEqual([
             'Failed to remove flow. Error: Request failed',
           ]);
           expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
diff --git a/spec/frontend/vue_shared/components/errors_alert_spec.js b/spec/frontend/vue_shared/components/status_alert_spec.js
similarity index 95%
rename from spec/frontend/vue_shared/components/errors_alert_spec.js
rename to spec/frontend/vue_shared/components/status_alert_spec.js
index 73108cf437bf87..a23f5e2b21785e 100644
--- a/spec/frontend/vue_shared/components/errors_alert_spec.js
+++ b/spec/frontend/vue_shared/components/status_alert_spec.js
@@ -1,9 +1,9 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { GlAlert } from '@gitlab/ui';
-import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import StatusAlert from '~/vue_shared/components/status_alert.vue';
 
-describe('ErrorsAlert', () => {
+describe('StatusAlert', () => {
   let wrapper;
   const mockError1 = 'The item could not be created';
   const mockError2 = 'The item could not be updated';
@@ -11,7 +11,7 @@ describe('ErrorsAlert', () => {
   const findErrorAlert = () => wrapper.findComponent(GlAlert);
 
   const createWrapper = (props = {}) => {
-    wrapper = shallowMount(ErrorsAlert, {
+    wrapper = shallowMount(StatusAlert, {
       propsData: {
         ...props,
       },
-- 
GitLab


From 56710aef72116590c0daf59c3394f2333d934f2c Mon Sep 17 00:00:00 2001
From: Vanessa Otto <votto@gitlab.com>
Date: Tue, 9 Sep 2025 16:08:08 +0200
Subject: [PATCH 3/3] Add StatusAlert for success and error state

Allowing slots in StatusAlert to pass text with links
---
 .../components/status_alert.stories.js        | 25 ++++++-
 .../vue_shared/components/status_alert.vue    | 35 +++++----
 .../catalog/pages/ai_catalog_agents_run.vue   | 62 +++++++++++-----
 .../pages/ai_catalog_agents_run_spec.js       | 43 +++++++----
 .../catalog/pages/ai_catalog_agents_spec.js   |  4 +-
 locale/gitlab.pot                             |  2 +-
 .../components/status_alert_spec.js           | 73 ++++++++++++++++---
 7 files changed, 182 insertions(+), 62 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/status_alert.stories.js b/app/assets/javascripts/vue_shared/components/status_alert.stories.js
index a92a4d3671ad24..1c0765d7b4a4b1 100644
--- a/app/assets/javascripts/vue_shared/components/status_alert.stories.js
+++ b/app/assets/javascripts/vue_shared/components/status_alert.stories.js
@@ -15,6 +15,16 @@ const Template = (args, { argTypes }) => ({
   template: `<status-alert v-bind="$props" />`,
 });
 
+const SlotTemplate = (args, { argTypes }) => ({
+  components: { StatusAlert },
+  props: Object.keys(argTypes),
+  template: `
+    <status-alert v-bind="$props">
+      ${args.slotContent || ''}
+    </status-alert>
+  `,
+});
+
 export const Default = Template.bind({});
 Default.args = {
   ...defaultArgs,
@@ -29,5 +39,18 @@ ErrorsList.args = {
 export const WithTitle = Template.bind({});
 WithTitle.args = {
   ...defaultArgs,
-  title: 'Following errors occured:',
+  variant: 'success',
+  title: 'Item created successfully',
+  messages: ['All is well.', "A little more and we're there."],
+};
+
+export const WithCustomSlotContent = SlotTemplate.bind({});
+WithCustomSlotContent.args = {
+  title: 'Custom Content Alert using the default Slot',
+  variant: 'info',
+  slotContent: `
+    <div>
+      <p>You can add any HTML content here through the slot <a href='#'>including links</a>.</p>
+    </div>
+  `,
 };
diff --git a/app/assets/javascripts/vue_shared/components/status_alert.vue b/app/assets/javascripts/vue_shared/components/status_alert.vue
index ca96a8e638a028..d4d2b157b22c62 100644
--- a/app/assets/javascripts/vue_shared/components/status_alert.vue
+++ b/app/assets/javascripts/vue_shared/components/status_alert.vue
@@ -32,20 +32,23 @@ export default {
       type: String,
       required: false,
       default: alertVariantOptions.danger,
-      validator: (value) => Object.keys(alertVariantOptions).includes(value),
+      validator: (value) => Object.values(alertVariantOptions).includes(value),
     },
   },
   computed: {
     hasMessages() {
-      return this.messages.length > 0;
+      return this.messages.length > 0 || this.$scopedSlots.default;
     },
   },
   watch: {
-    messages() {
-      // Watch for changes in messages and scroll into focus when messages are present
-      if (this.scrollOnMessage && this.hasMessages) {
-        this.scrollToAlert();
-      }
+    messages: {
+      handler() {
+        // Watch for changes in messages and scroll into focus when messages are present
+        if (this.scrollOnMessage && this.hasMessages) {
+          this.scrollToAlert();
+        }
+      },
+      immediate: true,
     },
   },
   methods: {
@@ -70,13 +73,15 @@ export default {
     :variant="variant"
     @dismiss="$emit('dismiss')"
   >
-    <span v-if="messages.length === 1">
-      {{ messages[0] }}
-    </span>
-    <ul v-else class="!gl-mb-0 gl-pl-5">
-      <li v-for="(message, index) in messages" :key="index">
-        {{ message }}
-      </li>
-    </ul>
+    <slot>
+      <span v-if="messages.length === 1">
+        {{ messages[0] }}
+      </span>
+      <ul v-else class="!gl-mb-0 gl-pl-5">
+        <li v-for="(message, index) in messages" :key="index">
+          {{ message }}
+        </li>
+      </ul>
+    </slot>
   </gl-alert>
 </template>
diff --git a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
index 77f4d10d7d0c35..9acd08ccc59b5b 100644
--- a/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
+++ b/ee/app/assets/javascripts/ai/catalog/pages/ai_catalog_agents_run.vue
@@ -1,8 +1,8 @@
 <script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import { createAlert } from '~/alert';
 import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import AiCatalogAgentRunForm from '../components/ai_catalog_agent_run_form.vue';
@@ -12,6 +12,8 @@ export default {
   name: 'AiCatalogAgentsRun',
   components: {
     AiCatalogAgentRunForm,
+    GlLink,
+    GlSprintf,
     PageHeading,
     StatusAlert,
   },
@@ -24,6 +26,7 @@ export default {
   data() {
     return {
       errors: [],
+      workflow: null,
       isSubmitting: false,
     };
   },
@@ -31,32 +34,26 @@ export default {
     pageTitle() {
       return `${s__('AICatalog|Run agent')}: ${this.aiCatalogAgent.name}`;
     },
+    sessionId() {
+      return this.workflow ? getIdFromGraphQLId(this.workflow.id) : null;
+    },
+    link() {
+      return this.workflow
+        ? `/${this.workflow.project.fullPath}/-/automate/agent-sessions/${this.sessionId}`
+        : '';
+    },
   },
   methods: {
     dismissErrors() {
       this.errors = [];
     },
-    successAlert({ id, project }) {
-      const formattedId = getIdFromGraphQLId(id);
-
-      // Hardcoded for an easier integration with any page at GitLab.
-      // https://gitlab.com/gitlab-org/gitlab/-/blob/b50c9e5ad666bab0e45365b2c6994d99407a68d1/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js#L61
-      const link = `/${project.fullPath}/-/automate/agent-sessions/${formattedId}`;
-
-      return {
-        message: sprintf(
-          s__(
-            `AICatalog|Test run executed successfully, see %{linkStart}Session %{formattedId}%{linkEnd}.`,
-          ),
-          { formattedId },
-        ),
-        variant: 'success',
-        messageLinks: { link },
-      };
+    resetWorkflow() {
+      this.workflow = null;
     },
     async onSubmit({ userPrompt }) {
       try {
         this.dismissErrors();
+        this.resetWorkflow();
         this.isSubmitting = true;
 
         const { data } = await this.$apollo.mutate({
@@ -71,7 +68,7 @@ export default {
             this.errors = errors;
             return;
           }
-          createAlert(this.successAlert(workflow));
+          this.workflow = workflow;
         }
       } catch (error) {
         this.errors = [
@@ -98,7 +95,32 @@ export default {
       </template>
     </page-heading>
 
-    <status-alert :messages="errors" @dismiss="dismissErrors" />
+    <status-alert :messages="errors" data-testid="error-alert" @dismiss="dismissErrors" />
+
+    <status-alert
+      v-if="workflow"
+      :key="workflow.id"
+      data-testid="success-alert"
+      variant="success"
+      @dismiss="resetWorkflow"
+    >
+      <gl-sprintf
+        :message="
+          s__(
+            `AICatalog|Test run executed successfully, see %{linkStart}Session %{sessionId}%{linkEnd}.`,
+          )
+        "
+      >
+        <template #sessionId>{{ sessionId }}</template>
+        <template #link="{ content }">
+          <gl-link :href="link">
+            <gl-sprintf :message="content">
+              <template #sessionId>{{ sessionId }}</template>
+            </gl-sprintf>
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </status-alert>
 
     <ai-catalog-agent-run-form
       :is-submitting="isSubmitting"
diff --git a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
index 84f78ff3b81be8..318f697974754a 100644
--- a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
+++ b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_run_spec.js
@@ -1,9 +1,8 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import StatusAlert from '~/vue_shared/components/status_alert.vue';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
-import { createAlert } from '~/alert';
 import AiCatalogAgentsRun from 'ee/ai/catalog/pages/ai_catalog_agents_run.vue';
 import AiCatalogAgentRunForm from 'ee/ai/catalog/components/ai_catalog_agent_run_form.vue';
 import executeAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/execute_ai_catalog_agent.mutation.graphql';
@@ -46,12 +45,16 @@ describe('AiCatalogAgentsRun', () => {
       propsData: {
         ...defaultProps,
       },
+      stubs: {
+        GlSprintf,
+      },
     });
   };
 
   const findPageHeading = () => wrapper.findComponent(PageHeading);
   const findRunForm = () => wrapper.findComponent(AiCatalogAgentRunForm);
-  const findStatusAlert = () => wrapper.findComponent(StatusAlert);
+  const findErrorAlert = () => wrapper.findByTestId('error-alert');
+  const findSuccessAlert = () => wrapper.findByTestId('success-alert');
 
   const userPrompt = 'prompt';
 
@@ -85,14 +88,18 @@ describe('AiCatalogAgentsRun', () => {
       });
     });
 
-    it('shows success alert', async () => {
-      await submitForm();
-      await waitForPromises();
+    describe('when request succeeds', () => {
+      beforeEach(async () => {
+        await submitForm();
+        await waitForPromises();
+      });
 
-      expect(createAlert).toHaveBeenCalledWith({
-        message: 'Test run executed successfully, see %{linkStart}Session 1%{linkEnd}.',
-        messageLinks: { link: '/gitlab-duo/test/-/automate/agent-sessions/1' },
-        variant: 'success',
+      it('shows success alert with appropriate text', () => {
+        expect(findSuccessAlert().text()).toBe('Test run executed successfully, see Session 1.');
+      });
+
+      it('does not pass messages to the error alert', () => {
+        expect(findErrorAlert().props('messages')).toStrictEqual([]);
       });
     });
 
@@ -105,8 +112,12 @@ describe('AiCatalogAgentsRun', () => {
         await waitForPromises();
       });
 
-      it('shows an alert', () => {
-        expect(findStatusAlert().props('messages')).toEqual(['Could not find agent ID']);
+      it('shows the error alert with appropriate message', () => {
+        expect(findErrorAlert().props('messages')).toStrictEqual(['Could not find agent ID']);
+      });
+
+      it('does not show the success alert', () => {
+        expect(findSuccessAlert().exists()).toBe(false);
       });
     });
 
@@ -118,8 +129,12 @@ describe('AiCatalogAgentsRun', () => {
         await submitForm();
       });
 
-      it('shows the error alert', () => {
-        expect(findStatusAlert().props('messages')).toEqual(['The test run failed. Error']);
+      it('shows the error alert with appropriate message', () => {
+        expect(findErrorAlert().props('messages')).toStrictEqual(['The test run failed. Error']);
+      });
+
+      it('does not show the success alert', () => {
+        expect(findSuccessAlert().exists()).toBe(false);
       });
     });
   });
diff --git a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js
index b710589435b952..06a9f5170454d0 100644
--- a/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js
+++ b/ee/spec/frontend/ai/catalog/pages/ai_catalog_agents_spec.js
@@ -375,7 +375,7 @@ describe('AiCatalogAgents', () => {
             createConsumer();
             await waitForPromises();
 
-            expect(findErrorsAlert().props('errors')).toEqual([
+            expect(findStatusAlert().props('messages')).toEqual([
               `Agent could not be added: ${mockAgent.name}`,
               'Item already configured.',
             ]);
@@ -389,7 +389,7 @@ describe('AiCatalogAgents', () => {
             createConsumer();
             await waitForPromises();
 
-            expect(findErrorsAlert().props('errors')).toEqual([
+            expect(findStatusAlert().props('messages')).toEqual([
               'The agent could not be added to the project. Try again. Error: Request failed',
             ]);
             expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index acebe4296602a4..a9c7ae99af561c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2707,7 +2707,7 @@ msgstr ""
 msgid "AICatalog|Test run agents to see how they respond."
 msgstr ""
 
-msgid "AICatalog|Test run executed successfully, see %{linkStart}Session %{formattedId}%{linkEnd}."
+msgid "AICatalog|Test run executed successfully, see %{linkStart}Session %{sessionId}%{linkEnd}."
 msgstr ""
 
 msgid "AICatalog|The agent could not be added to the project. Try again. %{error}"
diff --git a/spec/frontend/vue_shared/components/status_alert_spec.js b/spec/frontend/vue_shared/components/status_alert_spec.js
index a23f5e2b21785e..c77d19f08b294e 100644
--- a/spec/frontend/vue_shared/components/status_alert_spec.js
+++ b/spec/frontend/vue_shared/components/status_alert_spec.js
@@ -8,7 +8,7 @@ describe('StatusAlert', () => {
   const mockError1 = 'The item could not be created';
   const mockError2 = 'The item could not be updated';
 
-  const findErrorAlert = () => wrapper.findComponent(GlAlert);
+  const findAlert = () => wrapper.findComponent(GlAlert);
 
   const createWrapper = (props = {}) => {
     wrapper = shallowMount(StatusAlert, {
@@ -22,31 +22,86 @@ describe('StatusAlert', () => {
     it('does not render error alert', () => {
       createWrapper();
 
-      expect(findErrorAlert().exists()).toBe(false);
+      expect(findAlert().exists()).toBe(false);
     });
 
     it('renders error alert when there is one error', () => {
       createWrapper({ messages: [mockError1] });
 
-      expect(findErrorAlert().text()).toBe(mockError1);
+      expect(findAlert().text()).toBe(mockError1);
     });
 
     it('renders error alert with list for multiple errors', () => {
       createWrapper({ messages: [mockError1, mockError2] });
 
-      expect(findErrorAlert().findAll('li')).toHaveLength(2);
+      expect(findAlert().findAll('li')).toHaveLength(2);
     });
 
     it('renders the default CSS class', () => {
       createWrapper({ messages: [mockError1] });
 
-      expect(findErrorAlert().attributes('class')).toBe('gl-mb-5');
+      expect(findAlert().attributes('class')).toBe('gl-mb-5');
     });
 
     it('does not render the default CSS class when overridden', () => {
       createWrapper({ messages: [mockError1], alertClass: 'gl-mb-4' });
 
-      expect(findErrorAlert().attributes('class')).toBe('gl-mb-4');
+      expect(findAlert().attributes('class')).toBe('gl-mb-4');
+    });
+
+    describe('Slot functionality', () => {
+      const originalScrollIntoView = HTMLElement.prototype.scrollIntoView;
+      const scrollIntoViewMock = jest.fn();
+
+      beforeEach(() => {
+        HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+      });
+
+      afterEach(() => {
+        HTMLElement.prototype.scrollIntoView = originalScrollIntoView;
+      });
+
+      it('renders alert when slot content is provided', () => {
+        wrapper = shallowMount(StatusAlert, {
+          slots: {
+            default: '<div class="custom-content">Custom slot content</div>',
+          },
+        });
+
+        expect(findAlert().exists()).toBe(true);
+        expect(wrapper.find('.custom-content').exists()).toBe(true);
+        expect(wrapper.find('.custom-content').text()).toBe('Custom slot content');
+      });
+
+      it('scrolls to alert when slot content triggers rendering', async () => {
+        wrapper = shallowMount(StatusAlert, {
+          slots: {
+            default: '<div>Slot content that should trigger scroll</div>',
+          },
+        });
+
+        await nextTick();
+
+        expect(scrollIntoViewMock).toHaveBeenCalledWith({
+          behavior: 'smooth',
+          block: 'center',
+        });
+      });
+
+      it('does not scroll when slot content is present but scrollOnMessage is false', async () => {
+        wrapper = shallowMount(StatusAlert, {
+          propsData: {
+            scrollOnMessage: false,
+          },
+          slots: {
+            default: '<div>Slot content without scroll</div>',
+          },
+        });
+
+        await nextTick();
+
+        expect(scrollIntoViewMock).not.toHaveBeenCalled();
+      });
     });
   });
 
@@ -73,9 +128,9 @@ describe('StatusAlert', () => {
       });
     });
 
-    describe('but the property to scrollOnUpdate is false', () => {
+    describe('but the property to scrollOnMessage is false', () => {
       it('does not to error alert when errors are set', async () => {
-        createWrapper({ scrollOnUpdate: false });
+        createWrapper({ scrollOnMessage: false });
         await wrapper.setProps({ messages: ['Error occurred'] });
         await nextTick();
 
@@ -94,7 +149,7 @@ describe('StatusAlert', () => {
       });
 
       it('emits dismiss event when clicked on dismiss icon', () => {
-        findErrorAlert().vm.$emit('dismiss');
+        findAlert().vm.$emit('dismiss');
 
         expect(wrapper.emitted('dismiss')).toHaveLength(1);
       });
-- 
GitLab