Load project list only during loading the Security Dashboard

This change improves the performance of loading next pages of
Vulnerabilities in Group Security Dashboard by loading list of projects
only once at the page load instead of reloading them every time user
fetches new page.

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

@@ -4,6 +4,7 @@ import SecurityDashboardLayout from 'ee/security_dashboard/components/security_d
 import GroupSecurityVulnerabilities from 'ee/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue';
 import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
 import CsvExportButton from './csv_export_button.vue';
+import vulnerableProjectsQuery from '../graphql/vulnerable_projects.query.graphql';
 import DashboardNotConfigured from './empty_states/group_dashboard_not_configured.vue';
 
 export default {
@@ -25,6 +26,23 @@ export default {
       required: true,
     },
   },
+  apollo: {
+    projects: {
+      query: vulnerableProjectsQuery,
+      variables() {
+        return { fullPath: this.groupFullPath };
+      },
+      update(data) {
+        return data.group.projects.nodes;
+      },
+      result() {
+        this.projectsWereFetched = true;
+      },
+      error() {
+        this.projectsWereFetched = false;
+      },
+    },
+  },
   data() {
     return {
       filters: {},
@@ -41,10 +59,6 @@ export default {
     handleFilterChange(filters) {
       this.filters = filters;
     },
-    handleProjectsFetch(projects) {
-      this.projects = projects;
-      this.projectsWereFetched = true;
-    },
   },
 };
 </script>
@@ -65,11 +79,7 @@ export default {
       <template #sticky>
         <filters :projects="projects" @filterChange="handleFilterChange" />
       </template>
-      <group-security-vulnerabilities
-        :group-full-path="groupFullPath"
-        :filters="filters"
-        @projectFetch="handleProjectsFetch"
-      />
+      <group-security-vulnerabilities :group-full-path="groupFullPath" :filters="filters" />
     </security-dashboard-layout>
   </div>
 </template>

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

@@ -41,7 +41,6 @@ export default {
       },
       update: ({ group }) => group.vulnerabilities.nodes,
       result({ data }) {
-        this.$emit('projectFetch', data.group.projects.nodes);
         this.pageInfo = data.group.vulnerabilities.pageInfo;
       },
       error() {

ee/app/assets/javascripts/security_dashboard/graphql/group_vulnerabilities.graphql

 #import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
 #import "./vulnerability.fragment.graphql"
-#import "./project.fragment.graphql"
 
 query group(
   $fullPath: ID!
@@ -13,11 +12,6 @@ query group(
   $state: [VulnerabilityState!]
 ) {
   group(fullPath: $fullPath) {
-    projects(includeSubgroups: true, hasVulnerabilities: true) {
-      nodes {
-        ...Project
-      }
-    }
     vulnerabilities(
       after: $after
       first: $first

ee/app/assets/javascripts/security_dashboard/graphql/vulnerable_projects.query.graphql

+#import "./project.fragment.graphql"
+
+query group($fullPath: ID!) {
+  group(fullPath: $fullPath) {
+    projects(includeSubgroups: true, hasVulnerabilities: true) {
+      nodes {
+        ...Project
+      }
+    }
+  }
+}

ee/changelogs/unreleased/233017-load-projects-only-once-in-group-security-dashboard.yml

+---
+title: Load project list only during loading the Security Dashboard
+merge_request: 39263
+author:
+type: performance

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

@@ -64,7 +64,7 @@ describe('First Class Group Dashboard Component', () => {
   describe('when has projects', () => {
     beforeEach(() => {
       wrapper = createWrapper({
-        data: () => ({ projects: [{ id: 1 }], projectsWereFetched: true }),
+        data: () => ({ projects: [{ id: 1, name: 'GitLab Org' }], projectsWereFetched: true }),
       });
     });
 
@@ -79,12 +79,9 @@ describe('First Class Group Dashboard Component', () => {
       expect(findFilters().exists()).toBe(true);
     });
 
-    it('responds to the projectFetch event', () => {
+    it('loads projects from data', () => {
       const projects = [{ id: 1, name: 'GitLab Org' }];
-      findGroupVulnerabilities().vm.$listeners.projectFetch(projects);
-      return wrapper.vm.$nextTick(() => {
-        expect(findFilters().props('projects')).toEqual(projects);
-      });
+      expect(findFilters().props('projects')).toEqual(projects);
     });
 
     it('responds to the filterChange event', () => {