Update no agent installed alert implementation

- account for scenario where an alert was added, but
  an agent was removed
- add tests

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_alert_picker.vue

@@ -31,7 +31,7 @@ export default {
     policyAlert: { type: Boolean, required: true },
   },
   apollo: {
-    isAgentInstalled: {
+    agentCount: {
       query: getAgentCount,
       variables() {
         return {
@@ -39,29 +39,31 @@ export default {
         };
       },
       update(data) {
-        return Boolean(data?.project?.clusterAgents?.count);
+        return data?.project?.clusterAgents?.count || 0;
       },
     },
   },
   data() {
     return {
-      isAgentInstalled: false,
+      agentCount: 0,
     };
   },
+  computed: {
+    agentLoading() {
+      return this.$apollo.queries.agentCount.loading;
+    },
+    isAgentInstalled() {
+      return Boolean(this.agentCount) && !this.agentLoading;
+    },
+    spacingClass() {
+      return { 'gl-mt-5': !this.policyAlert && this.isAgentInstalled };
+    },
+  },
 };
 </script>
 
 <template>
   <div>
-    <gl-alert
-      v-if="policyAlert"
-      variant="warning"
-      :dismissible="false"
-      class="gl-mt-5"
-      data-testid="policy-alert-high-volume"
-    >
-      {{ $options.i18n.HIGH_VOLUME_WARNING }}
-    </gl-alert>
     <gl-alert
       v-if="!isAgentInstalled"
       variant="danger"
@@ -82,9 +84,18 @@ export default {
         </template>
       </gl-sprintf>
     </gl-alert>
+    <gl-alert
+      v-else-if="policyAlert"
+      variant="warning"
+      :dismissible="false"
+      class="gl-mt-5"
+      data-testid="policy-alert-high-volume"
+    >
+      {{ $options.i18n.HIGH_VOLUME_WARNING }}
+    </gl-alert>
     <div
       class="gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base gl-p-5"
-      :class="{ 'gl-mt-5': !policyAlert && isAgentInstalled }"
+      :class="spacingClass"
     >
       <gl-button
         v-if="!policyAlert"

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_alert_picker_spec.js

@@ -21,11 +21,11 @@ describe('PolicyAlertPicker component', () => {
 
   const defaultProps = { policyAlert: false };
 
-  const findAddAlertButton = () => wrapper.find("[data-testid='add-alert']");
+  const findAddAlertButton = () => wrapper.findByTestId('add-alert');
   const findAlertMessage = () => wrapper.findByTestId('policy-alert-message');
   const findHighVolumeAlert = () => wrapper.findByTestId('policy-alert-high-volume');
   const findNoAgentAlert = () => wrapper.findByTestId('policy-alert-no-agent');
-  const findRemoveAlertButton = () => wrapper.find("[data-testid='remove-alert']");
+  const findRemoveAlertButton = () => wrapper.findByTestId('remove-alert');
 
   const createWrapper = async ({ propsData = defaultProps, agentCount = 1 } = {}) => {
     const apolloProvider = createMockApolloProvider({ agentCount });
@@ -52,16 +52,49 @@ describe('PolicyAlertPicker component', () => {
     wrapper = null;
   });
 
+  describe('loading', () => {
     describe('default state', () => {
+      beforeEach(async () => {
+        createWrapper();
+      });
+
+      it('does render the enabled add alert button ', () => {
+        expect(findAddAlertButton().exists()).toBe(true);
+        expect(findAddAlertButton().props('disabled')).toBe(false);
+      });
+
+      it('does not render the "no agent" alert', () => {
+        expect(findNoAgentAlert().exists()).toBe(false);
+      });
+    });
+
+    describe('alert enabled', () => {
+      beforeEach(async () => {
+        createWrapper({ propsData: { policyAlert: true } });
+      });
+
+      it('does render the "high volume" alert', () => {
+        expect(findHighVolumeAlert().exists()).toBe(true);
+      });
+
+      it('does not render the "no agent" alert', () => {
+        expect(findNoAgentAlert().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('default state', () => {
+    describe('agent installed', () => {
       beforeEach(async () => {
         await createWrapper();
       });
 
-    it('does render the add alert button', () => {
+      it('does render the enabled add alert button ', () => {
         expect(findAddAlertButton().exists()).toBe(true);
+        expect(findAddAlertButton().props('disabled')).toBe(false);
       });
 
-    it('does not render the high volume warning', () => {
+      it('does not render the "high volume" alert', () => {
         expect(findHighVolumeAlert().exists()).toBe(false);
       });
 
@@ -73,7 +106,7 @@ describe('PolicyAlertPicker component', () => {
         expect(findRemoveAlertButton().exists()).toBe(false);
       });
 
-    it('does not show the "no agent" alert when there is an agent, ', () => {
+      it('does not render the "no agent" alert when there is an agent, ', () => {
         expect(findNoAgentAlert().exists()).toBe(false);
       });
 
@@ -83,7 +116,24 @@ describe('PolicyAlertPicker component', () => {
       });
     });
 
+    describe('no agent installed', () => {
+      beforeEach(async () => {
+        await createWrapper({ agentCount: 0 });
+      });
+
+      it('does render the "no agent" alert', () => {
+        expect(findNoAgentAlert().exists()).toBe(true);
+      });
+
+      it('does render the disabled add alert button ', async () => {
+        expect(findAddAlertButton().exists()).toBe(true);
+        expect(findAddAlertButton().props('disabled')).toBe(true);
+      });
+    });
+  });
+
   describe('alert enabled', () => {
+    describe('agent installed', () => {
       beforeEach(async () => {
         await createWrapper({ propsData: { policyAlert: true } });
       });
@@ -92,7 +142,7 @@ describe('PolicyAlertPicker component', () => {
         expect(findAddAlertButton().exists()).toBe(false);
       });
 
-    it('does render the high volume warning', () => {
+      it('does render the "high volume" alert', () => {
         expect(findHighVolumeAlert().exists()).toBe(true);
       });
 
@@ -104,7 +154,7 @@ describe('PolicyAlertPicker component', () => {
         expect(findRemoveAlertButton().exists()).toBe(true);
       });
 
-    it('does not show the "no agent" alert when there is an agent, ', () => {
+      it('does not render the "no agent" alert', () => {
         expect(findNoAgentAlert().exists()).toBe(false);
       });
 
@@ -115,14 +165,16 @@ describe('PolicyAlertPicker component', () => {
     });
 
     describe('no agent installed', () => {
-    it('add alert button is there and there is NOT an agent', async () => {
-      await createWrapper({ agentCount: 0 });
+      beforeEach(async () => {
+        await createWrapper({ propsData: { policyAlert: true }, agentCount: 0 });
+      });
+      it('does render the "no agent" alert', () => {
         expect(findNoAgentAlert().exists()).toBe(true);
       });
 
-    it('add alert button is NOT there and there is NOT an agent', async () => {
-      await createWrapper({ propsData: { policyAlert: true }, agentCount: 0 });
-      expect(findNoAgentAlert().exists()).toBe(true);
+      it('does not render the "high volume" alert', async () => {
+        expect(findHighVolumeAlert().exists()).toBe(false);
+      });
     });
   });
 });