Merge branch '233017-load-projects-only-once-in-group-security-dashboard' into 'master'

Load project list only during loading the Security Dashboard

See merge request gitlab-org/gitlab!39263

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,13 +79,10 @@ 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);
     });
-    });
 
     it('responds to the filterChange event', () => {
       const filters = { severity: 'critical' };