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

Add Alert Detail view loading state

See merge request gitlab-org/gitlab!31701

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

 <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"

spec/frontend/alert_management/components/alert_management_detail_spec.js

 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,17 +46,11 @@ describe('AlertDetails', () => {
   describe('Alert details', () => {
     describe('when alert is null', () => {
       beforeEach(() => {
-        mountComponent(null);
+        mountComponent({ alert: null });
       });
 
-      describe('when alert is null', () => {
-        beforeEach(() => {
-          mountComponent(null);
-        });
-
-        it('shows an empty state', () => {
-          expect(wrapper.find('[data-testid="alertDetailsTabs"]').exists()).toBe(false);
-        });
+      it('shows an empty state', () => {
+        expect(wrapper.find('[data-testid="alertDetailsTabs"]').exists()).toBe(false);
       });
     });
 
@@ -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);
+      });
+    });
   });
 });