Commit 738e5695 authored by Kushal Pandya's avatar Kushal Pandya

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

Add Alert Detail view loading state

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