Refetch count list when vulnerabilities are updated

- Introduce an event hub
- Add changelog

ee/app/assets/javascripts/security_dashboard/components/selection_summary.vue

@@ -3,6 +3,7 @@ import { GlButton, GlAlert } from '@gitlab/ui';
 import vulnerabilityStateMutations from 'ee/security_dashboard/graphql/mutate_vulnerability_state';
 import { __, s__, n__ } from '~/locale';
 import toast from '~/vue_shared/plugins/global_toast';
+import eventHub from '../utils/event_hub';
 import StatusDropdown from './status_dropdown.vue';
 
 export default {
@@ -72,6 +73,7 @@ export default {
       return Promise.all(promises).then(() => {
         if (fulfilledCount > 0) {
           toast(this.$options.i18n.vulnerabilitiesUpdated(fulfilledCount));
+          eventHub.$emit('vulnerabilities-updated', this);
         }
 
         if (rejected.length > 0) {

ee/app/assets/javascripts/security_dashboard/components/vulnerability_count_list.vue

 <script>
 import { vulnerabilitiesSeverityCountScopes } from '../constants';
 import vulnerabilitySeveritiesCountQuery from '../graphql/queries/vulnerability_severities_count.query.graphql';
+import eventHub from '../utils/event_hub';
 import VulnerabilityCountListLayout from './vulnerability_count_list_layout.vue';
 
 export default {
@@ -35,6 +36,11 @@ export default {
       return this.$apollo.queries.vulnerabilitiesCount.loading;
     },
   },
+  created() {
+    eventHub.$on('vulnerabilities-updated', () =>
+      this.$apollo.queries.vulnerabilitiesCount.refetch(),
+    );
+  },
   apollo: {
     vulnerabilitiesCount: {
       query: vulnerabilitySeveritiesCountQuery,

ee/app/assets/javascripts/security_dashboard/utils/event_hub.js

+import createEventHub from '~/helpers/event_hub_factory';
+
+export default createEventHub();

ee/changelogs/unreleased/263819-update-severity-counts-after-bulk-update.yml

+---
+title: Refetch count list when vulnerabilities are updated
+merge_request: 56116
+author:
+type: fixed

ee/spec/frontend/security_dashboard/components/selection_summary_spec.js

@@ -4,6 +4,7 @@ import VueApollo from 'vue-apollo';
 import SelectionSummary from 'ee/security_dashboard/components/selection_summary.vue';
 import StatusDropdown from 'ee/security_dashboard/components/status_dropdown.vue';
 import vulnerabilityStateMutations from 'ee/security_dashboard/graphql/mutate_vulnerability_state';
+import eventHub from 'ee/security_dashboard/utils/event_hub';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import toast from '~/vue_shared/plugins/global_toast';
@@ -184,6 +185,14 @@ describe('Selection Summary component', () => {
         await submitForm();
         expect(toast).toHaveBeenLastCalledWith('3 vulnerabilities updated');
       });
+
+      it(`emits an event for the event hub - ${action}`, async () => {
+        const spy = jest.fn();
+        eventHub.$on('vulnerabilities-updated', spy);
+
+        await submitForm();
+        expect(spy).toHaveBeenCalled();
+      });
     });
   });
 });

ee/spec/frontend/security_dashboard/components/vulnerability_count_list_spec.js

 import { shallowMount } from '@vue/test-utils';
 import VulnerabilityCountList from 'ee/security_dashboard/components/vulnerability_count_list.vue';
 import VulnerabilityCountListLayout from 'ee/security_dashboard/components/vulnerability_count_list_layout.vue';
+import eventHub from 'ee/security_dashboard/utils/event_hub';
 
 describe('Vulnerabilities count list component', () => {
   let wrapper;
+  let refetchSpy;
 
   const findVulnerabilityLayout = () => wrapper.find(VulnerabilityCountListLayout);
 
   const createWrapper = ({ query = { isLoading: false }, props = { scope: 'project' } } = {}) => {
+    refetchSpy = jest.fn();
+
     return shallowMount(VulnerabilityCountList, {
       propsData: props,
       mocks: {
-        $apollo: { queries: { vulnerabilitiesCount: query } },
+        $apollo: { queries: { vulnerabilitiesCount: { ...query, refetch: refetchSpy } } },
       },
     });
   };
@@ -56,6 +60,11 @@ describe('Vulnerabilities count list component', () => {
         unknown: 4,
       });
     });
+
+    it('refetches the query when vulnerabilities-updated event is triggered', () => {
+      eventHub.$emit('vulnerabilities-updated', wrapper.vm);
+      expect(refetchSpy).toHaveBeenCalled();
+    });
   });
 
   describe.each`