Update policy list on security project update

- refetch the scan execution policies when
  the security policy project gets update
- update tests

ee/app/assets/javascripts/threat_monitoring/components/policies/policies_app.vue

@@ -18,6 +18,7 @@ export default {
       // environments, therefore infrastructure cannot be set up. A valid default
       // environment id only means that infrastructure *might* be set up.
       shouldFetchEnvironment: this.isValidEnvironmentId(this.defaultEnvironmentId),
+      shouldUpdatePolicyList: false,
     };
   },
   created() {
@@ -32,13 +33,20 @@ export default {
     isValidEnvironmentId(id) {
       return Number.isInteger(id) && id >= 0;
     },
+    handleUpdatePolicyList(val) {
+      this.shouldUpdatePolicyList = val;
+    },
   },
 };
 </script>
 <template>
   <div>
-    <policies-header />
+    <policies-header @update-policy-list="handleUpdatePolicyList" />
     <no-environment-empty-state v-if="!shouldFetchEnvironment" />
-    <policies-list v-else />
+    <policies-list
+      v-else
+      :should-update-policy-list="shouldUpdatePolicyList"
+      @update-policy-list="handleUpdatePolicyList"
+    />
   </div>
 </template>

ee/app/assets/javascripts/threat_monitoring/components/policies/policies_header.vue

@@ -47,6 +47,7 @@ export default {
         this.alertVariant = variant;
         this.alertText = text;
       }
+      this.$emit('update-policy-list', true);
     },
     isUpdatingProject() {
       this.projectIsBeingLinked = true;

ee/app/assets/javascripts/threat_monitoring/components/policies/policies_list.vue

@@ -56,6 +56,13 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   inject: ['projectPath', 'documentationPath', 'newPolicyPath'],
+  props: {
+    shouldUpdatePolicyList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
   apollo: {
     networkPolicies: {
       query: networkPoliciesQuery,
@@ -194,6 +201,14 @@ export default {
       return fields;
     },
   },
+  watch: {
+    shouldUpdatePolicyList(newShouldUpdatePolicyList) {
+      if (newShouldUpdatePolicyList) {
+        this.$apollo.queries.scanExecutionPolicies.refetch();
+        this.$emit('update-policy-list', false);
+      }
+    },
+  },
   methods: {
     getTimeAgoString(updatedAt) {
       if (!updatedAt) return '';

ee/spec/frontend/threat_monitoring/components/policies/policies_app_spec.js

@@ -60,6 +60,20 @@ describe('Policies App', () => {
       expect(setCurrentEnvironmentIdSpy).toHaveBeenCalled();
       expect(fetchEnvironmentsSpy).toHaveBeenCalled();
     });
+
+    it.each`
+      component         | findFn
+      ${'PolicyHeader'} | ${findPoliciesHeader}
+      ${'PolicyList'}   | ${findPoliciesList}
+    `(
+      'sets the `shouldUpdatePolicyList` variable from the $component component',
+      async ({ findFn }) => {
+        expect(findPoliciesList().props('shouldUpdatePolicyList')).toBe(false);
+        findFn().vm.$emit('update-policy-list', true);
+        await wrapper.vm.$nextTick();
+        expect(findPoliciesList().props('shouldUpdatePolicyList')).toBe(true);
+      },
+    );
   });
 
   describe('when does not have an environment enabled', () => {

ee/spec/frontend/threat_monitoring/components/policies/policies_header_spec.js

@@ -92,6 +92,7 @@ describe('Policies Header Component', () => {
 
       it('displays the alert component when scan new modal policy emits event', async () => {
         expect(findAlert().text()).toBe(projectLinkSuccessText);
+        expect(wrapper.emitted('update-policy-list')).toStrictEqual([[true]]);
       });
 
       it('hides the previous alert when scan new modal policy is processing a new link', async () => {

ee/spec/frontend/threat_monitoring/components/policies/policies_list_spec.js

@@ -28,9 +28,10 @@ const environments = [
     global_id: 'gid://gitlab/Environment/2',
   },
 ];
+const scanExecutionPoliciesSpy = scanExecutionPolicies(mockScanExecutionPoliciesResponse);
 const defaultRequestHandlers = {
   networkPolicies: networkPolicies(mockNetworkPoliciesResponse),
-  scanExecutionPolicies: scanExecutionPolicies(mockScanExecutionPoliciesResponse),
+  scanExecutionPolicies: scanExecutionPoliciesSpy,
 };
 const pendingHandler = jest.fn(() => new Promise(() => {}));
 
@@ -201,6 +202,24 @@ describe('PoliciesList component', () => {
         expect(findPoliciesTable().text()).not.toContain(hiddenType.text);
       });
     });
+
+    it('does emit `update-policy-list` and refetch scan execution policies on `shouldUpdatePolicyList` change to `false`', async () => {
+      expect(scanExecutionPoliciesSpy).toHaveBeenCalledTimes(1);
+      expect(wrapper.emitted('update-policy-list')).toBeUndefined();
+      wrapper.setProps({ shouldUpdatePolicyList: true });
+      await wrapper.vm.$nextTick();
+      expect(scanExecutionPoliciesSpy).toHaveBeenCalledTimes(2);
+      expect(wrapper.emitted('update-policy-list')).toStrictEqual([[false]]);
+    });
+
+    it('does not emit `update-policy-list` or refetch scan execution policies on `shouldUpdatePolicyList` change to `false`', async () => {
+      wrapper.setProps({ shouldUpdatePolicyList: true });
+      await wrapper.vm.$nextTick();
+      wrapper.setProps({ shouldUpdatePolicyList: false });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('update-policy-list')).toHaveLength(1);
+      expect(scanExecutionPoliciesSpy).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe('status column', () => {