Merge branch '284056-fix-vulnerabilities-is-undefined-error-on-vulnerability-list' into 'master'

Fix console-error on vulnerabilities report

See merge request gitlab-org/gitlab!56076

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

@@ -65,6 +65,7 @@ export default {
     filters() {
       // Clear out the existing vulnerabilities so that the skeleton loader is shown.
       this.vulnerabilities = [];
+      this.pageInfo = {};
     },
     sort() {
       // Clear out the existing vulnerabilities so that the skeleton loader is shown.

ee/changelogs/unreleased/284056-fix-vulnerabilities-is-undefined-error-on-vulnerability-list.yml

+---
+title: Fix console-error on vulnerabilities report
+merge_request: 56076
+author:
+type: fixed

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

@@ -142,6 +142,14 @@ describe('First Class Instance Dashboard Vulnerabilities Component', () => {
     it('should render the observer component', () => {
       expect(findIntersectionObserver().exists()).toBe(true);
     });
+
+    describe('when the filter is changed', () => {
+      it('it should not render the observer component', async () => {
+        await wrapper.setProps({ filters: {} });
+
+        expect(findIntersectionObserver().exists()).toBe(false);
+      });
+    });
   });
 
   describe('when the query is loading and there is another page', () => {
@@ -171,8 +179,8 @@ describe('First Class Instance Dashboard Vulnerabilities Component', () => {
       wrapper = createWrapper({ loading: true });
     });
 
-    it('should show the initial loading state when the filter is changed', () => {
-      wrapper.setProps({ filter: {} });
+    it('should show the initial loading state when the filter is changed', async () => {
+      await wrapper.setProps({ filter: {} });
 
       expectLoadingState({ initial: true });
     });