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

Add Alert Detail view loading state

parent 911c4841
<script>
import { GlNewDropdown, GlNewDropdownItem, GlTabs, GlTab, GlButton } from '@gitlab/ui';
import {
GlLoadingIcon,
GlNewDropdown,
GlNewDropdownItem,
GlTabs,
GlTab,
GlButton,
} from '@gitlab/ui';
import { s__ } from '~/locale';
import query from '../graphql/queries/details.query.graphql';
import { fetchPolicies } from '~/lib/graphql';
......@@ -16,6 +23,7 @@ export default {
overviewTitle: s__('AlertManagement|Overview'),
},
components: {
GlLoadingIcon,
GlNewDropdown,
GlNewDropdownItem,
GlTab,
......@@ -55,10 +63,16 @@ export default {
data() {
return { alert: null };
},
computed: {
loading() {
return this.$apollo.queries.alert.loading;
},
},
};
</script>
<template>
<div>
<div v-if="loading"><gl-loading-icon size="lg" class="mt-3" /></div>
<div
v-if="alert"
class="gl-display-flex justify-content-end gl-border-b-1 gl-border-b-gray-200 gl-border-b-solid gl-p-4"
......@@ -73,7 +87,7 @@ export default {
{{ s__('AlertManagement|Create issue') }}
</gl-button>
</div>
<div class="gl-display-flex justify-content-end">
<div v-if="alert" class="gl-display-flex justify-content-end">
<gl-new-dropdown right>
<gl-new-dropdown-item
v-for="(label, field) in $options.statuses"
......
import { shallowMount } from '@vue/test-utils';
import { GlLoadingIcon } from '@gitlab/ui';
import AlertDetails from '~/alert_management/components/alert_details.vue';
describe('AlertDetails', () => {
let wrapper;
const newIssuePath = 'root/alerts/-/issues/new';
function mountComponent(alert = {}, createIssueFromAlertEnabled = false) {
function mountComponent({
alert = {},
createIssueFromAlertEnabled = false,
loading = false,
} = {}) {
wrapper = shallowMount(AlertDetails, {
propsData: {
alertId: 'alertId',
......@@ -18,6 +23,15 @@ describe('AlertDetails', () => {
provide: {
glFeatures: { createIssueFromAlertEnabled },
},
mocks: {
$apollo: {
queries: {
alert: {
loading,
},
},
},
},
});
}
......@@ -32,19 +46,13 @@ describe('AlertDetails', () => {
describe('Alert details', () => {
describe('when alert is null', () => {
beforeEach(() => {
mountComponent(null);
});
describe('when alert is null', () => {
beforeEach(() => {
mountComponent(null);
mountComponent({ alert: null });
});
it('shows an empty state', () => {
expect(wrapper.find('[data-testid="alertDetailsTabs"]').exists()).toBe(false);
});
});
});
describe('when alert is present', () => {
beforeEach(() => {
......@@ -71,7 +79,7 @@ describe('AlertDetails', () => {
describe('Create issue from alert', () => {
describe('createIssueFromAlertEnabled feature flag enabled', () => {
it('should display a button that links to new issue page', () => {
mountComponent({}, true);
mountComponent({ createIssueFromAlertEnabled: true });
expect(findCreatedIssueBtn().exists()).toBe(true);
expect(findCreatedIssueBtn().attributes('href')).toBe(newIssuePath);
});
......@@ -79,10 +87,20 @@ describe('AlertDetails', () => {
describe('createIssueFromAlertEnabled feature flag disabled', () => {
it('should display a button that links to a new issue page', () => {
mountComponent({}, false);
mountComponent({ createIssueFromAlertEnabled: false });
expect(findCreatedIssueBtn().exists()).toBe(false);
});
});
});
describe('loading state', () => {
beforeEach(() => {
mountComponent({ loading: true });
});
it('displays a loading state when loading', () => {
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
});
});
});
});
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