Merge branch '338790-rename-not-configured-components' into 'master'

Rename vulnerability report empty state components

See merge request gitlab-org/gitlab!73745

ee/app/assets/javascripts/security_dashboard/components/group/group_security_dashboard.vue

@@ -5,7 +5,7 @@ import vulnerabilityGradesQuery from 'ee/security_dashboard/graphql/queries/grou
 import vulnerabilityHistoryQuery from 'ee/security_dashboard/graphql/queries/group_vulnerability_history.query.graphql';
 import { PROJECT_LOADING_ERROR_MESSAGE } from 'ee/security_dashboard/helpers';
 import createFlash from '~/flash';
-import DashboardNotConfigured from '../shared/empty_states/group_dashboard_not_configured.vue';
+import ReportNotConfigured from '../shared/empty_states/report_not_configured_group.vue';
 import VulnerabilitySeverities from '../shared/project_security_status_chart.vue';
 import SecurityDashboardLayout from '../shared/security_dashboard_layout.vue';
 import VulnerabilitiesOverTimeChart from '../shared/vulnerabilities_over_time_chart.vue';
@@ -13,7 +13,7 @@ import VulnerabilitiesOverTimeChart from '../shared/vulnerabilities_over_time_ch
 export default {
   components: {
     GlLoadingIcon,
-    DashboardNotConfigured,
+    ReportNotConfigured,
     SecurityDashboardLayout,
     VulnerabilitySeverities,
     VulnerabilitiesOverTimeChart,
@@ -57,7 +57,7 @@ export default {
 <template>
   <security-dashboard-layout>
     <template v-if="shouldShowEmptyState" #empty-state>
-      <dashboard-not-configured />
+      <report-not-configured />
     </template>
     <template v-else-if="shouldShowCharts" #default>
       <vulnerabilities-over-time-chart :query="vulnerabilityHistoryQuery" />

ee/app/assets/javascripts/security_dashboard/components/group/vulnerability_report_development.vue

@@ -5,7 +5,8 @@ import countsQuery from 'ee/security_dashboard/graphql/queries/vulnerability_sev
 import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/group_vulnerabilities.query.graphql';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
-import DashboardNotConfiguredGroup from '../shared/empty_states/group_dashboard_not_configured.vue';
+import VulnerabilityReportHeader from '../shared/vulnerability_report/vulnerability_report_header.vue';
+import ReportNotConfiguredGroup from '../shared/empty_states/report_not_configured_group.vue';
 import VulnerabilityCounts from '../shared/vulnerability_report/vulnerability_counts.vue';
 import VulnerabilityList from '../shared/vulnerability_report/vulnerability_list.vue';
 import VulnerabilityFilters from '../shared/vulnerability_report/vulnerability_filters.vue';
@@ -18,7 +19,8 @@ export default {
     VulnerabilityFilters,
     GlIntersectionObserver,
     GlLoadingIcon,
-    DashboardNotConfiguredGroup,
+    ReportNotConfiguredGroup,
+    VulnerabilityReportHeader,
   },
   inject: ['groupFullPath', 'canViewFalsePositive', 'canAdminVulnerability', 'hasProjects'],
   data() {
@@ -141,10 +143,12 @@ export default {
 </script>
 
 <template>
-  <dashboard-not-configured-group v-if="!hasProjects" />
+  <report-not-configured-group v-if="!hasProjects" />
 
-  <div v-else class="gl-mt-5">
-    <vulnerability-counts :counts="counts" :is-loading="isLoadingCounts" />
+  <div v-else>
+    <vulnerability-report-header />
+
+    <vulnerability-counts class="gl-mt-7" :counts="counts" :is-loading="isLoadingCounts" />
 
     <vulnerability-filters
       :filters="$options.filtersToShow"
@@ -153,7 +157,7 @@ export default {
     />
 
     <vulnerability-list
-      class="gl-mt-5"
+      class="gl-mt-6"
       :is-loading="isLoadingInitialVulnerabilities"
       :vulnerabilities="vulnerabilities"
       :fields="fields"

ee/app/assets/javascripts/security_dashboard/components/instance/instance_security_dashboard.vue

@@ -5,7 +5,7 @@ import vulnerabilityGradesQuery from 'ee/security_dashboard/graphql/queries/inst
 import vulnerabilityHistoryQuery from 'ee/security_dashboard/graphql/queries/instance_vulnerability_history.query.graphql';
 import { PROJECT_LOADING_ERROR_MESSAGE } from 'ee/security_dashboard/helpers';
 import createFlash from '~/flash';
-import DashboardNotConfigured from '../shared/empty_states/instance_dashboard_not_configured.vue';
+import ReportNotConfigured from '../shared/empty_states/report_not_configured_instance.vue';
 import VulnerabilitySeverities from '../shared/project_security_status_chart.vue';
 import SecurityDashboardLayout from '../shared/security_dashboard_layout.vue';
 import VulnerabilitiesOverTimeChart from '../shared/vulnerabilities_over_time_chart.vue';
@@ -13,7 +13,7 @@ import VulnerabilitiesOverTimeChart from '../shared/vulnerabilities_over_time_ch
 export default {
   components: {
     GlLoadingIcon,
-    DashboardNotConfigured,
+    ReportNotConfigured,
     SecurityDashboardLayout,
     VulnerabilitySeverities,
     VulnerabilitiesOverTimeChart,
@@ -53,7 +53,7 @@ export default {
 <template>
   <security-dashboard-layout>
     <template v-if="shouldShowEmptyState" #empty-state>
-      <dashboard-not-configured />
+      <report-not-configured />
     </template>
     <template v-else-if="shouldShowCharts" #default>
       <vulnerabilities-over-time-chart :query="vulnerabilityHistoryQuery" />

ee/app/assets/javascripts/security_dashboard/components/project/project_security_dashboard.vue

@@ -7,7 +7,7 @@ import createFlash from '~/flash';
 import { formatDate, getDateInPast } from '~/lib/utils/datetime_utility';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { s__, __ } from '~/locale';
-import DashboardNotConfigured from '../shared/empty_states/reports_not_configured.vue';
+import ReportNotConfigured from '../shared/empty_states/report_not_configured_project.vue';
 import SecurityDashboardLayout from '../shared/security_dashboard_layout.vue';
 
 const CHART_DEFAULT_DAYS = 30;
@@ -24,7 +24,7 @@ const SEVERITIES = [
 
 export default {
   components: {
-    DashboardNotConfigured,
+    ReportNotConfigured,
     SecurityDashboardLayout,
     GlLoadingIcon,
     GlLineChart,
@@ -169,7 +169,7 @@ export default {
 <template>
   <security-dashboard-layout ref="layout">
     <template v-if="shouldShowEmptyState" #empty-state>
-      <dashboard-not-configured />
+      <report-not-configured />
     </template>
     <template v-else-if="shouldShowCharts" #default>
       <gl-line-chart

ee/app/assets/javascripts/security_dashboard/components/shared/empty_states/group_dashboard_not_configured.vue → ee/app/assets/javascripts/security_dashboard/components/shared/empty_states/report_not_configured_group.vue

 <script>
-import { GlEmptyState, GlButton } from '@gitlab/ui';
+import { GlEmptyState } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 
 export default {
   components: {
     GlEmptyState,
-    GlButton,
   },
   inject: ['dashboardDocumentation', 'emptyStateSvgPath'],
   i18n: {
@@ -23,9 +22,7 @@ export default {
     :title="$options.i18n.title"
     :svg-path="emptyStateSvgPath"
     :description="$options.i18n.description"
-  >
-    <template #actions>
-      <gl-button :href="dashboardDocumentation">{{ $options.i18n.secondaryButtonText }}</gl-button>
-    </template>
-  </gl-empty-state>
+    :secondary-button-text="$options.i18n.secondaryButtonText"
+    :secondary-button-link="dashboardDocumentation"
+  />
 </template>

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report.vue

@@ -13,10 +13,10 @@ import PipelineFindings from '../pipeline/pipeline_findings.vue';
 import ProjectVulnerabilities from '../project/project_vulnerabilities.vue';
 import AutoFixUserCallout from './auto_fix_user_callout.vue';
 import CsvExportButton from './csv_export_button.vue';
-import DashboardNotConfiguredGroup from './empty_states/group_dashboard_not_configured.vue';
-import DashboardNotConfiguredInstance from './empty_states/instance_dashboard_not_configured.vue';
-import DashboardNotConfiguredProject from './empty_states/reports_not_configured.vue';
-import OperationalReportNotConfigured from './empty_states/operational_report_not_configured.vue';
+import ReportNotConfiguredGroup from './empty_states/report_not_configured_group.vue';
+import ReportNotConfiguredInstance from './empty_states/report_not_configured_instance.vue';
+import ReportNotConfiguredProject from './empty_states/report_not_configured_project.vue';
+import ReportNotConfiguredOperational from './empty_states/report_not_configured_operational.vue';
 import Filters from './filters/filters_layout.vue';
 import ProjectPipelineStatus from './project_pipeline_status.vue';
 import SurveyRequestBanner from './survey_request_banner.vue';
@@ -34,10 +34,10 @@ export default {
     Filters,
     CsvExportButton,
     SurveyRequestBanner,
-    DashboardNotConfiguredGroup,
-    DashboardNotConfiguredInstance,
-    DashboardNotConfiguredProject,
-    OperationalReportNotConfigured,
+    ReportNotConfiguredGroup,
+    ReportNotConfiguredInstance,
+    ReportNotConfiguredProject,
+    ReportNotConfiguredOperational,
     PortalTarget,
     ProjectPipelineStatus,
     GlLink,
@@ -137,9 +137,9 @@ export default {
     <gl-loading-icon v-if="!projectsWereFetched" size="lg" class="gl-mt-6" />
     <template v-else-if="!isDashboardConfigured">
       <survey-request-banner v-if="shouldShowSurvey" class="gl-mt-5" />
-      <dashboard-not-configured-group v-if="isGroup" />
-      <dashboard-not-configured-instance v-else-if="isInstance" />
-      <dashboard-not-configured-project v-else-if="isProject" />
+      <report-not-configured-group v-if="isGroup" />
+      <report-not-configured-instance v-else-if="isInstance" />
+      <report-not-configured-project v-else-if="isProject" />
     </template>
     <template v-else>
       <portal-target :name="$options.vulnerabilityReportAlertsPortal" multiple />
@@ -178,7 +178,7 @@ export default {
         <pipeline-findings v-else-if="isPipeline" :filters="filters" />
 
         <template #operational-empty-state>
-          <operational-report-not-configured />
+          <report-not-configured-operational />
         </template>
       </vulnerability-report-layout>
     </template>

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_report_header.vue

+<script>
+import { GlSprintf, GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import CsvExportButton from '../csv_export_button.vue';
+
+export default {
+  components: { GlSprintf, GlLink, CsvExportButton },
+  inject: ['dashboardDocumentation'],
+  i18n: {
+    title: s__('SecurityReports|Vulnerability Report'),
+    description: s__(
+      "SecurityReports|The Vulnerability Report shows the results of the latest successful pipeline on your project's default branch, as well as vulnerabilities from your latest container scan. %{linkStart}Learn more.%{linkEnd}",
+    ),
+  },
+};
+</script>
+
+<template>
+  <header>
+    <h2 class="gl-display-flex">
+      {{ $options.i18n.title }}
+      <csv-export-button class="gl-ml-auto" />
+    </h2>
+
+    <gl-sprintf :message="$options.i18n.description">
+      <template #link="{ content }">
+        <gl-link :href="dashboardDocumentation" target="_blank">{{ content }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </header>
+</template>

ee/spec/frontend/security_dashboard/components/group/group_security_dashboard_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import GroupSecurityDashboard from 'ee/security_dashboard/components/group/group_security_dashboard.vue';
-import DashboardNotConfigured from 'ee/security_dashboard/components/shared/empty_states/group_dashboard_not_configured.vue';
+import ReportNotConfiguredGroup from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_group.vue';
 import VulnerabilitySeverities from 'ee/security_dashboard/components/shared/project_security_status_chart.vue';
 import SecurityDashboardLayout from 'ee/security_dashboard/components/shared/security_dashboard_layout.vue';
 import VulnerabilitiesOverTimeChart from 'ee/security_dashboard/components/shared/vulnerabilities_over_time_chart.vue';
@@ -28,7 +28,7 @@ describe('Group Security Dashboard component', () => {
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findVulnerabilitiesOverTimeChart = () => wrapper.find(VulnerabilitiesOverTimeChart);
   const findVulnerabilitySeverities = () => wrapper.find(VulnerabilitySeverities);
-  const findDashboardNotConfigured = () => wrapper.find(DashboardNotConfigured);
+  const findReportNotConfigured = () => wrapper.find(ReportNotConfiguredGroup);
 
   const createWrapper = ({ loading = false } = {}) => {
     wrapper = shallowMount(GroupSecurityDashboard, {
@@ -57,13 +57,13 @@ describe('Group Security Dashboard component', () => {
     createWrapper({ loading: true });
 
     const securityChartsLayout = findSecurityChartsLayoutComponent();
-    const dashboardNotConfigured = findDashboardNotConfigured();
+    const reportNotConfigured = findReportNotConfigured();
     const loadingIcon = findLoadingIcon();
     const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
-    expect(dashboardNotConfigured.exists()).toBe(false);
+    expect(reportNotConfigured.exists()).toBe(false);
     expect(loadingIcon.exists()).toBe(true);
     expect(vulnerabilitiesOverTimeChart.exists()).toBe(false);
     expect(vulnerabilitySeverities.exists()).toBe(false);
@@ -73,13 +73,13 @@ describe('Group Security Dashboard component', () => {
     createWrapper();
 
     const securityChartsLayout = findSecurityChartsLayoutComponent();
-    const dashboardNotConfigured = findDashboardNotConfigured();
+    const reportNotConfigured = findReportNotConfigured();
     const loadingIcon = findLoadingIcon();
     const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
-    expect(dashboardNotConfigured.exists()).toBe(true);
+    expect(reportNotConfigured.exists()).toBe(true);
     expect(loadingIcon.exists()).toBe(false);
     expect(vulnerabilitiesOverTimeChart.exists()).toBe(false);
     expect(vulnerabilitySeverities.exists()).toBe(false);
@@ -91,13 +91,13 @@ describe('Group Security Dashboard component', () => {
     await wrapper.vm.$nextTick();
 
     const securityChartsLayout = findSecurityChartsLayoutComponent();
-    const dashboardNotConfigured = findDashboardNotConfigured();
+    const reportNotConfigured = findReportNotConfigured();
     const loadingIcon = findLoadingIcon();
     const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
-    expect(dashboardNotConfigured.exists()).toBe(false);
+    expect(reportNotConfigured.exists()).toBe(false);
     expect(loadingIcon.exists()).toBe(false);
     expect(vulnerabilitiesOverTimeChart.exists()).toBe(true);
     expect(vulnerabilitiesOverTimeChart.props()).toEqual({ query: vulnerabilityHistoryQuery });

ee/spec/frontend/security_dashboard/components/instance/instance_security_dashboard_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import InstanceSecurityDashboard from 'ee/security_dashboard/components/instance/instance_security_dashboard.vue';
-import DashboardNotConfigured from 'ee/security_dashboard/components/shared/empty_states/instance_dashboard_not_configured.vue';
+import ReportNotConfiguredInstance from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_instance.vue';
 import VulnerabilitySeverities from 'ee/security_dashboard/components/shared/project_security_status_chart.vue';
 import SecurityDashboardLayout from 'ee/security_dashboard/components/shared/security_dashboard_layout.vue';
 import VulnerabilitiesOverTimeChart from 'ee/security_dashboard/components/shared/vulnerabilities_over_time_chart.vue';
@@ -28,7 +28,7 @@ describe('Instance Security Dashboard component', () => {
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findVulnerabilitiesOverTimeChart = () => wrapper.find(VulnerabilitiesOverTimeChart);
   const findVulnerabilitySeverities = () => wrapper.find(VulnerabilitySeverities);
-  const findDashboardNotConfigured = () => wrapper.find(DashboardNotConfigured);
+  const findReportNotConfigured = () => wrapper.find(ReportNotConfiguredInstance);
 
   const createWrapper = ({ loading = false } = {}) => {
     wrapper = shallowMount(InstanceSecurityDashboard, {
@@ -56,13 +56,13 @@ describe('Instance Security Dashboard component', () => {
     createWrapper({ loading: true });
 
     const securityChartsLayout = findSecurityChartsLayoutComponent();
-    const dashboardNotConfigured = findDashboardNotConfigured();
+    const reportNotConfigured = findReportNotConfigured();
     const loadingIcon = findLoadingIcon();
     const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
-    expect(dashboardNotConfigured.exists()).toBe(false);
+    expect(reportNotConfigured.exists()).toBe(false);
     expect(loadingIcon.exists()).toBe(true);
     expect(vulnerabilitiesOverTimeChart.exists()).toBe(false);
     expect(vulnerabilitySeverities.exists()).toBe(false);
@@ -72,13 +72,13 @@ describe('Instance Security Dashboard component', () => {
     createWrapper();
 
     const securityChartsLayout = findSecurityChartsLayoutComponent();
-    const dashboardNotConfigured = findDashboardNotConfigured();
+    const reportNotConfigured = findReportNotConfigured();
     const loadingIcon = findLoadingIcon();
     const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
-    expect(dashboardNotConfigured.exists()).toBe(true);
+    expect(reportNotConfigured.exists()).toBe(true);
     expect(loadingIcon.exists()).toBe(false);
     expect(vulnerabilitiesOverTimeChart.exists()).toBe(false);
     expect(vulnerabilitySeverities.exists()).toBe(false);
@@ -90,13 +90,13 @@ describe('Instance Security Dashboard component', () => {
     await wrapper.vm.$nextTick();
 
     const securityChartsLayout = findSecurityChartsLayoutComponent();
-    const dashboardNotConfigured = findDashboardNotConfigured();
+    const reportNotConfigured = findReportNotConfigured();
     const loadingIcon = findLoadingIcon();
     const vulnerabilitiesOverTimeChart = findVulnerabilitiesOverTimeChart();
     const vulnerabilitySeverities = findVulnerabilitySeverities();
 
     expect(securityChartsLayout.exists()).toBe(true);
-    expect(dashboardNotConfigured.exists()).toBe(false);
+    expect(reportNotConfigured.exists()).toBe(false);
     expect(loadingIcon.exists()).toBe(false);
     expect(vulnerabilitiesOverTimeChart.props()).toEqual({ query: vulnerabilityHistoryQuery });
     expect(vulnerabilitySeverities.exists()).toBe(true);

ee/spec/frontend/security_dashboard/components/project/project_security_dashboard_spec.js

@@ -3,7 +3,7 @@ import { GlLineChart } from '@gitlab/ui/dist/charts';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import ProjectSecurityDashboard from 'ee/security_dashboard/components/project/project_security_dashboard.vue';
-import DashboardNotConfigured from 'ee/security_dashboard/components/shared/empty_states/reports_not_configured.vue';
+import ReportNotConfigured from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_project.vue';
 import SecurityDashboardLayout from 'ee/security_dashboard/components/shared/security_dashboard_layout.vue';
 import projectsHistoryQuery from 'ee/security_dashboard/graphql/queries/project_vulnerabilities_by_day_and_count.query.graphql';
 import { useFakeDate } from 'helpers/fake_date';
@@ -28,7 +28,7 @@ describe('Project Security Dashboard component', () => {
 
   const findLineChart = () => wrapper.find(GlLineChart);
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findEmptyState = () => wrapper.find(DashboardNotConfigured);
+  const findEmptyState = () => wrapper.find(ReportNotConfigured);
 
   const createApolloProvider = (...queries) => {
     return createMockApollo([...queries]);

ee/spec/frontend/security_dashboard/components/shared/empty_states/__snapshots__/group_dashboard_not_configured_spec.js.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Group Security Dashboard Empty State matches snapshot 1`] = `
-"<gl-empty-state-stub title=\\"Monitor vulnerabilities in your group\\" svgpath=\\"/placeholder.svg\\" description=\\"Manage and track vulnerabilities identified in projects within your group. Vulnerabilities in projects are shown here when security testing is configured.\\">
-  <gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" href=\\"/path/to/dashboard/documentation\\">Learn more</gl-button-stub>
-</gl-empty-state-stub>"
-`;

ee/spec/frontend/security_dashboard/components/shared/empty_states/__snapshots__/instance_dashboard_not_configured_spec.js.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Instance Security Dashboard Empty State matches snapshot 1`] = `"<gl-empty-state-stub title=\\"Monitor vulnerabilities in all of your projects\\" svgpath=\\"/placeholder.svg\\" description=\\"Manage and track vulnerabilities identified in your selected projects. Vulnerabilities for selected projects with security testing configured are shown here.\\" primarybuttonlink=\\"/path/to/dashboard/settings\\" primarybuttontext=\\"Add projects\\" secondarybuttonlink=\\"/path/to/dashboard/documentation\\" secondarybuttontext=\\"Learn more\\"></gl-empty-state-stub>"`;

ee/spec/frontend/security_dashboard/components/shared/empty_states/__snapshots__/report_not_configured_group_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Group report not configured component matches snapshot 1`] = `"<gl-empty-state-stub title=\\"Monitor vulnerabilities in your group\\" svgpath=\\"/placeholder.svg\\" description=\\"Manage and track vulnerabilities identified in projects within your group. Vulnerabilities in projects are shown here when security testing is configured.\\" secondarybuttonlink=\\"/path/to/dashboard/documentation\\" secondarybuttontext=\\"Learn more\\"></gl-empty-state-stub>"`;

ee/spec/frontend/security_dashboard/components/shared/empty_states/__snapshots__/report_not_configured_instance_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Instance report not configured component matches snapshot 1`] = `"<gl-empty-state-stub title=\\"Monitor vulnerabilities in all of your projects\\" svgpath=\\"/placeholder.svg\\" description=\\"Manage and track vulnerabilities identified in your selected projects. Vulnerabilities for selected projects with security testing configured are shown here.\\" primarybuttonlink=\\"/path/to/dashboard/settings\\" primarybuttontext=\\"Add projects\\" secondarybuttonlink=\\"/path/to/dashboard/documentation\\" secondarybuttontext=\\"Learn more\\"></gl-empty-state-stub>"`;

ee/spec/frontend/security_dashboard/components/shared/empty_states/__snapshots__/operational_report_not_configured_spec.js.snap → ee/spec/frontend/security_dashboard/components/shared/empty_states/__snapshots__/report_not_configured_operational_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`reports not configured empty state matches the snapshot for groups 1`] = `
+exports[`Operational report not configured component matches the snapshot for groups 1`] = `
 <gl-empty-state-stub
   description="Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in any project in this group."
   primarybuttonlink="/operational-configuration"
@@ -12,7 +12,7 @@ exports[`reports not configured empty state matches the snapshot for groups 1`]
 />
 `;
 
-exports[`reports not configured empty state matches the snapshot for instances 1`] = `
+exports[`Operational report not configured component matches the snapshot for instances 1`] = `
 <gl-empty-state-stub
   description="Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in any project in this instance."
   primarybuttonlink="/operational-configuration"
@@ -24,7 +24,7 @@ exports[`reports not configured empty state matches the snapshot for instances 1
 />
 `;
 
-exports[`reports not configured empty state matches the snapshot for projects 1`] = `
+exports[`Operational report not configured component matches the snapshot for projects 1`] = `
 <gl-empty-state-stub
   description="Manage and track vulnerabilities identified in your Kubernetes clusters. Vulnerabilities appear here after you create a scan execution policy in this project."
   primarybuttonlink="/operational-configuration"

ee/spec/frontend/security_dashboard/components/shared/empty_states/__snapshots__/report_not_configured_project_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Project report not configured component matches snapshot 1`] = `"<gl-empty-state-stub title=\\"Monitor vulnerabilities in your project\\" svgpath=\\"/placeholder.svg\\" description=\\"Manage and track vulnerabilities identified in your project. Vulnerabilities are shown here when security testing is configured.\\" primarybuttonlink=\\"/configuration\\" primarybuttontext=\\"Configure security testing\\" secondarybuttonlink=\\"/help\\" secondarybuttontext=\\"Learn more\\"></gl-empty-state-stub>"`;

ee/spec/frontend/security_dashboard/components/shared/empty_states/__snapshots__/reports_not_configured_spec.js.snap

-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`reports not configured empty state matches snapshot 1`] = `"<gl-empty-state-stub title=\\"Monitor vulnerabilities in your project\\" svgpath=\\"/placeholder.svg\\" description=\\"Manage and track vulnerabilities identified in your project. Vulnerabilities are shown here when security testing is configured.\\" primarybuttonlink=\\"/configuration\\" primarybuttontext=\\"Configure security testing\\" secondarybuttonlink=\\"/help\\" secondarybuttontext=\\"Learn more\\"></gl-empty-state-stub>"`;

ee/spec/frontend/security_dashboard/components/shared/empty_states/group_dashboard_not_configured_spec.js → ee/spec/frontend/security_dashboard/components/shared/empty_states/report_not_configured_group_spec.js

 import { shallowMount } from '@vue/test-utils';
-import DashboardNotConfigured from 'ee/security_dashboard/components/shared/empty_states/group_dashboard_not_configured.vue';
+import ReportNotConfiguredGroup from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_group.vue';
 
-describe('Group Security Dashboard Empty State', () => {
+describe('Group report not configured component', () => {
   let wrapper;
   const dashboardDocumentation = '/path/to/dashboard/documentation';
   const emptyStateSvgPath = '/placeholder.svg';
 
   const createWrapper = () =>
-    shallowMount(DashboardNotConfigured, {
+    shallowMount(ReportNotConfiguredGroup, {
       provide: {
         dashboardDocumentation,
         emptyStateSvgPath,

ee/spec/frontend/security_dashboard/components/shared/empty_states/instance_dashboard_not_configured_spec.js → ee/spec/frontend/security_dashboard/components/shared/empty_states/report_not_configured_instance_spec.js

 import { shallowMount } from '@vue/test-utils';
-import DashboardNotConfigured from 'ee/security_dashboard/components/shared/empty_states/instance_dashboard_not_configured.vue';
+import ReportNotConfiguredInstance from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_instance.vue';
 
-describe('Instance Security Dashboard Empty State', () => {
+describe('Instance report not configured component', () => {
   let wrapper;
   const instanceDashboardSettingsPath = '/path/to/dashboard/settings';
   const dashboardDocumentation = '/path/to/dashboard/documentation';
   const emptyStateSvgPath = '/placeholder.svg';
 
   const createWrapper = () =>
-    shallowMount(DashboardNotConfigured, {
+    shallowMount(ReportNotConfiguredInstance, {
       provide: {
         dashboardDocumentation,
         emptyStateSvgPath,

ee/spec/frontend/security_dashboard/components/shared/empty_states/operational_report_not_configured_spec.js → ee/spec/frontend/security_dashboard/components/shared/empty_states/report_not_configured_operational_spec.js

 import { shallowMount } from '@vue/test-utils';
-import OperationalReportNotConfigured from 'ee/security_dashboard/components/shared/empty_states/operational_report_not_configured.vue';
+import ReportNotConfiguredOperational from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_operational.vue';
 
-describe('reports not configured empty state', () => {
+describe('Operational report not configured component', () => {
   let wrapper;
   const operationalConfigurationPath = '/operational-configuration';
   const operationalEmptyStateSvgPath = '/operational-placeholder.svg';
   const operationalHelpPath = '/operational-help';
 
   const createComponent = (dashboardType = 'project') => {
-    wrapper = shallowMount(OperationalReportNotConfigured, {
+    wrapper = shallowMount(ReportNotConfiguredOperational, {
       provide: {
         dashboardType,
         operationalConfigurationPath,

ee/spec/frontend/security_dashboard/components/shared/empty_states/reports_not_configured_spec.js → ee/spec/frontend/security_dashboard/components/shared/empty_states/report_not_configured_project_spec.js

 import { shallowMount } from '@vue/test-utils';
-import ReportsNotConfigured from 'ee/security_dashboard/components/shared/empty_states/reports_not_configured.vue';
+import ReportNotConfiguredProject from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_project.vue';
 
-describe('reports not configured empty state', () => {
+describe('Project report not configured component', () => {
   let wrapper;
   const emptyStateSvgPath = '/placeholder.svg';
   const securityConfigurationPath = '/configuration';
   const securityDashboardHelpPath = '/help';
 
   const createComponent = () => {
-    wrapper = shallowMount(ReportsNotConfigured, {
+    wrapper = shallowMount(ReportNotConfiguredProject, {
       provide: {
         emptyStateSvgPath,
         securityConfigurationPath,

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_report_header_spec.js

+import { GlLink } from '@gitlab/ui';
+import VulnerabilityReportHeader from 'ee/security_dashboard/components/shared/vulnerability_report/vulnerability_report_header.vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import CsvExportButton from 'ee/security_dashboard/components/shared/csv_export_button.vue';
+
+describe('Vulnerability report header component', () => {
+  let wrapper;
+
+  const createWrapper = ({ dashboardDocumentation } = {}) => {
+    wrapper = mountExtended(VulnerabilityReportHeader, {
+      provide: { dashboardDocumentation },
+      stubs: { CsvExportButton: true },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('shows the CSV export button', () => {
+    createWrapper();
+
+    expect(wrapper.findComponent(CsvExportButton).exists()).toBe(true);
+  });
+
+  it('shows the correct link for the documentation', () => {
+    const dashboardDocumentation = 'http://some/link';
+    createWrapper({ dashboardDocumentation });
+
+    expect(wrapper.findComponent(GlLink).attributes('href')).toBe(dashboardDocumentation);
+  });
+});

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report_spec.js

@@ -9,9 +9,9 @@ import InstanceVulnerabilities from 'ee/security_dashboard/components/instance/i
 import ProjectVulnerabilities from 'ee/security_dashboard/components/project/project_vulnerabilities.vue';
 import AutoFixUserCallout from 'ee/security_dashboard/components/shared/auto_fix_user_callout.vue';
 import CsvExportButton from 'ee/security_dashboard/components/shared/csv_export_button.vue';
-import DashboardNotConfiguredGroup from 'ee/security_dashboard/components/shared/empty_states/group_dashboard_not_configured.vue';
-import DashboardNotConfiguredInstance from 'ee/security_dashboard/components/shared/empty_states/instance_dashboard_not_configured.vue';
-import DashboardNotConfiguredProject from 'ee/security_dashboard/components/shared/empty_states/reports_not_configured.vue';
+import ReportNotConfiguredGroup from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_group.vue';
+import ReportNotConfiguredInstance from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_instance.vue';
+import ReportNotConfiguredProject from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_project.vue';
 import Filters from 'ee/security_dashboard/components/shared/filters/filters_layout.vue';
 import ProjectPipelineStatus from 'ee/security_dashboard/components/shared/project_pipeline_status.vue';
 import SurveyRequestBanner from 'ee/security_dashboard/components/shared/survey_request_banner.vue';
@@ -33,9 +33,9 @@ describe('Vulnerability Report', () => {
   const findGroupVulnerabilities = () => wrapper.findComponent(GroupVulnerabilities);
   const findProjectVulnerabilities = () => wrapper.findComponent(ProjectVulnerabilities);
   const findCsvExportButton = () => wrapper.findComponent(CsvExportButton);
-  const findGroupEmptyState = () => wrapper.findComponent(DashboardNotConfiguredGroup);
-  const findInstanceEmptyState = () => wrapper.findComponent(DashboardNotConfiguredInstance);
-  const findProjectEmptyState = () => wrapper.findComponent(DashboardNotConfiguredProject);
+  const findGroupEmptyState = () => wrapper.findComponent(ReportNotConfiguredGroup);
+  const findInstanceEmptyState = () => wrapper.findComponent(ReportNotConfiguredInstance);
+  const findProjectEmptyState = () => wrapper.findComponent(ReportNotConfiguredProject);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findFilters = () => wrapper.findComponent(Filters);
   const findVulnerabilitiesCountList = () => wrapper.findComponent(VulnerabilitiesCountList);