Merge branch '213014-add-csv-export-button' into 'master'

Export vulnerabilities report in the instance level dashboard

See merge request gitlab-org/gitlab!30079

doc/user/application_security/security_dashboard/index.md

@@ -67,7 +67,7 @@ NOTE: **Note:**
 It may take several minutes for the download to start if your project consists
 of thousands of vulnerabilities. Do not close the page until the download finishes.
 
-![CSV Export Button](img/project_security_dashboard_export_csv_v12.10.png)
+![CSV Export Button](img/project_security_dashboard_export_csv_v12_10.png)
 
 ## Group Security Dashboard
 
@@ -152,6 +152,22 @@ projects.
 
 ![Instance Security Dashboard with projects](img/instance_security_dashboard_with_projects_v12_8.png)
 
+### Export vulnerabilities
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/213014) in [GitLab Ultimate](https://about.gitlab.com/pricing/) 13.0.
+
+You can export all your vulnerabilities as CSV by clicking the **{upload}** **Export**
+button located at top right of the **Instance Security Dashboard**. After the report
+is built, the CSV report downloads to your local machine. The report contains all
+vulnerabilities for the projects defined in the **Instance Security Dashboard**,
+as filters don't apply to the export function.
+
+NOTE: **Note:**
+It may take several minutes for the download to start if your project contains
+thousands of vulnerabilities. Do not close the page until the download finishes.
+
+![CSV Export Button](img/instance_security_dashboard_export_csv_v13_0.png)
+
 ## Keeping the dashboards up to date
 
 The Security Dashboard displays information from the results of the most recent

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

@@ -7,10 +7,12 @@ import InstanceSecurityVulnerabilities from './first_class_instance_security_das
 import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
 import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
 import ProjectManager from './project_manager.vue';
+import CsvExportButton from './csv_export_button.vue';
 
 export default {
   components: {
     ProjectManager,
+    CsvExportButton,
     SecurityDashboardLayout,
     InstanceSecurityVulnerabilities,
     VulnerabilitySeverity,
@@ -41,6 +43,11 @@ export default {
       type: String,
       required: true,
     },
+
+    vulnerabilitiesExportEndpoint: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -95,9 +102,10 @@ export default {
   <security-dashboard-layout>
     <template #header>
       <header class="page-title-holder flex-fill d-flex align-items-center">
-        <h2 class="page-title">{{ s__('SecurityReports|Security Dashboard') }}</h2>
+        <h2 class="page-title flex-grow">{{ s__('SecurityReports|Security Dashboard') }}</h2>
+        <csv-export-button :vulnerabilities-export-endpoint="vulnerabilitiesExportEndpoint" />
         <gl-button
-          class="page-title-controls js-project-selector-toggle"
+          class="page-title-controls ml-2"
           :variant="toggleButtonProps.variant"
           @click="toggleProjectSelector"
           >{{ toggleButtonProps.text }}</gl-button

ee/app/assets/javascripts/security_dashboard/first_class_init.js

@@ -57,6 +57,7 @@ export default (
   } else if (dashboardType === DASHBOARD_TYPES.INSTANCE) {
     component = FirstClassInstanceSecurityDashboard;
     props.vulnerableProjectsEndpoint = el.dataset.vulnerableProjectsEndpoint;
+    props.vulnerabilitiesExportEndpoint = el.dataset.vulnerabilitiesExportEndpoint;
   }
 
   const router = createRouter();

ee/changelogs/unreleased/213014-add-csv-export-button.yml

+---
+title: Export an instance-level vulnerabilities report
+merge_request: 30079
+author:
+type: added

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

@@ -5,6 +5,7 @@ import SecurityDashboardLayout from 'ee/security_dashboard/components/security_d
 import FirstClassInstanceDashboard from 'ee/security_dashboard/components/first_class_instance_security_dashboard.vue';
 import FirstClassInstanceVulnerabilities from 'ee/security_dashboard/components/first_class_instance_security_dashboard_vulnerabilities.vue';
 import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
+import CsvExportButton from 'ee/security_dashboard/components/csv_export_button.vue';
 import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
 import ProjectManager from 'ee/security_dashboard/components/project_manager.vue';
 
@@ -18,11 +19,13 @@ describe('First Class Instance Dashboard Component', () => {
   const dashboardDocumentation = 'dashboard-documentation';
   const emptyStateSvgPath = 'empty-state-path';
   const vulnerableProjectsEndpoint = '/vulnerable/projects';
+  const vulnerabilitiesExportEndpoint = '/vulnerabilities/exports';
   const projectAddEndpoint = 'projectAddEndpoint';
   const projectListEndpoint = 'projectListEndpoint';
 
   const findInstanceVulnerabilities = () => wrapper.find(FirstClassInstanceVulnerabilities);
   const findVulnerabilitySeverity = () => wrapper.find(VulnerabilitySeverity);
+  const findCsvExportButton = () => wrapper.find(CsvExportButton);
   const findProjectManager = () => wrapper.find(ProjectManager);
   const findEmptyState = () => wrapper.find(GlEmptyState);
   const findFilters = () => wrapper.find(Filters);
@@ -55,6 +58,7 @@ describe('First Class Instance Dashboard Component', () => {
         projectAddEndpoint,
         projectListEndpoint,
         vulnerableProjectsEndpoint,
+        vulnerabilitiesExportEndpoint,
       },
       stubs: {
         ...stubs,
@@ -100,6 +104,12 @@ describe('First Class Instance Dashboard Component', () => {
     it('displays the vulnerability severity in an aside', () => {
       expect(findVulnerabilitySeverity().exists()).toBe(true);
     });
+
+    it('displays the csv export button', () => {
+      expect(findCsvExportButton().props('vulnerabilitiesExportEndpoint')).toBe(
+        vulnerabilitiesExportEndpoint,
+      );
+    });
   });
 
   describe('when uninitialized', () => {