Merge branch 'make-alert-widget-loading-optional' into 'master'

Make alert widget loading state optional

See merge request gitlab-org/gitlab!28168

ee/app/assets/javascripts/monitoring/components/alert_widget.vue

@@ -25,6 +25,11 @@ export default {
       type: String,
       required: true,
     },
+    showLoadingState: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     // { [alertPath]: { alert_attributes } }. Populated from subsequent API calls.
     // Includes only the metrics/alerts to be managed by this widget.
     alertsToManage: {
@@ -75,6 +80,9 @@ export default {
         firingCount: this.firingAlerts.length,
       };
     },
+    shouldShowLoadingIcon() {
+      return this.showLoadingState && this.isLoading;
+    },
     thresholds() {
       const alertsToManage = Object.keys(this.alertsToManage);
       return alertsToManage.map(this.formatAlertSummary);
@@ -213,7 +221,7 @@ export default {
 
 <template>
   <div class="prometheus-alert-widget dropdown flex-grow-2 overflow-hidden">
-    <gl-loading-icon v-if="isLoading" :inline="true" />
+    <gl-loading-icon v-if="shouldShowLoadingIcon" :inline="true" />
     <span v-else-if="errorMessage" ref="alertErrorMessage" class="alert-error-message">{{
       errorMessage
     }}</span>

ee/spec/frontend/monitoring/alert_widget_spec.js

@@ -123,6 +123,30 @@ describe('AlertWidget', () => {
       });
   });
 
+  it('does not render loading spinner if showLoadingState is false', () => {
+    let resolveReadAlert;
+    mockReadAlert.mockReturnValue(
+      new Promise(resolve => {
+        resolveReadAlert = resolve;
+      }),
+    );
+    createComponent({
+      ...defaultProps,
+      showLoadingState: false,
+    });
+    return wrapper.vm
+      .$nextTick()
+      .then(() => {
+        expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+
+        resolveReadAlert({ operator: '==', threshold: 42 });
+      })
+      .then(() => waitForPromises())
+      .then(() => {
+        expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+      });
+  });
+
   it('displays an error message when fetch fails', () => {
     mockReadAlert.mockRejectedValue();
     createComponent(propsWithAlert);