Commit aae32351 authored by Tristan Read's avatar Tristan Read Committed by Kushal Pandya

Add error state for Alert Detail view

parent d9145389
<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"
......
......@@ -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 ""
......
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);
});
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment