Merge branch 'tr-alert-detail-error-state' into 'master'

Add error state for Alert Detail view

See merge request gitlab-org/gitlab!31702

app/assets/javascripts/alert_management/components/alert_details.vue

 <script>
+import * as Sentry from '@sentry/browser';
 import {
+  GlAlert,
   GlLoadingIcon,
   GlNewDropdown,
   GlNewDropdownItem,
@@ -19,10 +21,14 @@ export default {
     resolved: s__('AlertManagement|Resolved'),
   },
   i18n: {
+    errorMsg: s__(
+      'AlertManagement|There was an error displaying the alert. Please refresh the page to try again.',
+    ),
     fullAlertDetailsTitle: s__('AlertManagement|Full Alert Details'),
     overviewTitle: s__('AlertManagement|Overview'),
   },
   components: {
+    GlAlert,
     GlLoadingIcon,
     GlNewDropdown,
     GlNewDropdownItem,
@@ -58,20 +64,35 @@ export default {
       update(data) {
         return data?.project?.alertManagementAlerts?.nodes?.[0] ?? null;
       },
+      error(error) {
+        this.errored = true;
+        Sentry.captureException(error);
+      },
     },
   },
   data() {
-    return { alert: null };
+    return { alert: null, errored: false, isErrorDismissed: false };
   },
   computed: {
     loading() {
       return this.$apollo.queries.alert.loading;
     },
+    showErrorMsg() {
+      return this.errored && !this.isErrorDismissed;
+    },
+  },
+  methods: {
+    dismissError() {
+      this.isErrorDismissed = true;
+    },
   },
 };
 </script>
 <template>
   <div>
+    <gl-alert v-if="showErrorMsg" variant="danger" @dismiss="dismissError">
+      {{ $options.i18n.errorMsg }}
+    </gl-alert>
     <div v-if="loading"><gl-loading-icon size="lg" class="mt-3" /></div>
     <div
       v-if="alert"

locale/gitlab.pot

@@ -1792,6 +1792,9 @@ msgstr ""
 msgid "AlertManagement|Surface alerts in GitLab"
 msgstr ""
 
+msgid "AlertManagement|There was an error displaying the alert. Please refresh the page to try again."
+msgstr ""
+
 msgid "AlertManagement|There was an error displaying the alerts. Confirm your endpoint's configuration details to ensure alerts appear."
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_detail_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import AlertDetails from '~/alert_management/components/alert_details.vue';
 
 describe('AlertDetails', () => {
@@ -7,7 +7,7 @@ describe('AlertDetails', () => {
   const newIssuePath = 'root/alerts/-/issues/new';
 
   function mountComponent({
-    alert = {},
+    data = { alert: {} },
     createIssueFromAlertEnabled = false,
     loading = false,
   } = {}) {
@@ -18,7 +18,7 @@ describe('AlertDetails', () => {
         newIssuePath,
       },
       data() {
-        return { alert };
+        return data;
       },
       provide: {
         glFeatures: { createIssueFromAlertEnabled },
@@ -46,7 +46,7 @@ describe('AlertDetails', () => {
   describe('Alert details', () => {
     describe('when alert is null', () => {
       beforeEach(() => {
-        mountComponent({ alert: null });
+        mountComponent({ data: { alert: null } });
       });
 
       it('shows an empty state', () => {
@@ -102,5 +102,17 @@ describe('AlertDetails', () => {
         expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
       });
     });
+
+    describe('error state', () => {
+      it('displays a error state correctly', () => {
+        mountComponent({ data: { errored: true } });
+        expect(wrapper.find(GlAlert).exists()).toBe(true);
+      });
+
+      it('does not display an error when dismissed', () => {
+        mountComponent({ data: { errored: true, isErrorDismissed: true } });
+        expect(wrapper.find(GlAlert).exists()).toBe(false);
+      });
+    });
   });
 });