diff --git a/ee/app/assets/javascripts/security_dashboard/components/agent/agent_vulnerability_report.vue b/ee/app/assets/javascripts/security_dashboard/components/agent/agent_vulnerability_report.vue
index bf025b69ebc24cd63e4b47c12c585901504fd4ef..3ed2e652380b5eb29e8ac86dd661b69a946c60fe 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/agent/agent_vulnerability_report.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/agent/agent_vulnerability_report.vue
@@ -105,6 +105,7 @@ export default {
<gl-alert
v-if="!alertDismissed"
variant="info"
+ class="gl-mb-3"
:title="alertTitleComputed"
@dismiss="handleAlertDismiss"
>
@@ -119,7 +120,6 @@ export default {
</gl-alert>
<vulnerability-report
- :class="{ 'gl-mt-3': !alertDismissed }"
:fields="$options.fieldsToShow"
:filter-dropdowns="$options.filtersToShow"
:filter-fn="transformFilters"
diff --git a/ee/app/assets/javascripts/security_dashboard/components/pipeline/pipeline_security_dashboard.vue b/ee/app/assets/javascripts/security_dashboard/components/pipeline/pipeline_security_dashboard.vue
index af9cb73b400462e88c90404f00848bb38f9740f4..ec0cf5b0234a65c1b42f08742d94d8d66fa43d80 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/pipeline/pipeline_security_dashboard.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/pipeline/pipeline_security_dashboard.vue
@@ -1,11 +1,12 @@
<script>
-import { GlEmptyState } from '@gitlab/ui';
+import { GlEmptyState, GlButton } from '@gitlab/ui';
import { mapActions } from 'vuex';
import pipelineSecurityReportSummaryQuery from 'ee/security_dashboard/graphql/queries/pipeline_security_report_summary.query.graphql';
import { reportTypeToSecurityReportTypeEnum } from 'ee/vue_shared/security_reports/constants';
import { fetchPolicies } from '~/lib/graphql';
import { s__ } from '~/locale';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { helpPagePath } from '~/helpers/help_page_helper';
import ScanAlerts, { TYPE_ERRORS, TYPE_WARNINGS } from './scan_alerts.vue';
import ReportStatusAlert, { STATUS_PURGED } from './report_status_alert.vue';
import SecurityDashboard from './security_dashboard_vuex.vue';
@@ -24,6 +25,7 @@ export default {
SecurityReportsSummary,
SecurityDashboard,
PipelineVulnerabilityReport,
+ GlButton,
},
mixins: [glFeatureFlagMixin()],
inject: [
@@ -131,13 +133,31 @@ export default {
parsingWarningAlertDescription: s__(
'SecurityReports|Check the messages generated while parsing the following security reports, as they may prevent the results from being ingested by GitLab. Ensure the security report conforms to a supported %{helpPageLinkStart}JSON schema%{helpPageLinkEnd}.',
),
+ pageDescription: s__(
+ `SecurityReports|Results show vulnerabilities introduced by the merge request, in addition to existing vulnerabilities from the latest successful pipeline in your project's default branch.`,
+ ),
+ pageDescriptionHelpLink: helpPagePath(
+ 'user/application_security/security_dashboard/index.html',
+ { anchor: 'view-vulnerabilities-in-a-pipeline' },
+ ),
},
};
</script>
<template>
- <div>
- <div v-if="reportSummary" class="gl-my-5">
+ <div class="gl-mt-5">
+ <p>
+ {{ $options.i18n.pageDescription }}
+ <gl-button
+ class="gl-ml-2 vertical-align-text-top"
+ icon="question-o"
+ variant="link"
+ target="_blank"
+ :href="$options.i18n.pageDescriptionHelpLink"
+ />
+ </p>
+
+ <div v-if="reportSummary" class="gl-mb-5">
<scan-alerts
v-if="showScanErrors"
:type="$options.errorsAlertType"
@@ -154,9 +174,11 @@ export default {
:description="$options.i18n.parsingWarningAlertDescription"
class="gl-mb-5"
/>
+
<report-status-alert v-if="hasPurgedScans" class="gl-mb-5" />
<security-reports-summary :summary="reportSummary" :jobs="jobs" />
</div>
+
<security-dashboard
v-if="!shouldShowGraphqlVulnerabilityReport"
:vulnerabilities-endpoint="vulnerabilitiesEndpoint"
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_report.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_report.vue
index 4105f4c8f919134e22144ca53c0eeff2d60521fd..0eedc8d3bfcdcaddf1fcf4679e72332f5af9fb19 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_report.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_report.vue
@@ -74,12 +74,12 @@ export default {
<div>
<vulnerability-counts
v-if="showCounts"
- class="gl-mt-7"
+ class="gl-mb-7"
:filters="graphqlFilters"
@counts-changed="emitCountsChanged"
/>
- <div ref="vulnerabilityListTop" class="gl-mt-7" data-testid="vulnerability-list-top"></div>
+ <div ref="vulnerabilityListTop" data-testid="vulnerability-list-top"></div>
<div class="security-dashboard-filters">
<vulnerability-filters :filters="filterDropdowns" @filters-changed="updateGraphqlFilters" />
diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_report_tab.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_report_tab.vue
index a28369d28dd7986fd1a48205147c04a00e741f3d..c04492af0b1a836ab9b18b68d1aa588a836aece4 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_report_tab.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_report_tab.vue
@@ -56,6 +56,7 @@ export default {
<slot name="header"></slot>
<vulnerability-report
+ class="gl-mt-7"
:is-visible="isActiveTab"
:filter-dropdowns="filterDropdowns"
:fields="fields"
diff --git a/ee/spec/frontend/security_dashboard/components/pipeline/pipeline_security_dashboard_spec.js b/ee/spec/frontend/security_dashboard/components/pipeline/pipeline_security_dashboard_spec.js
index d7d64a8ce64c74f232c83c80024f16e096d47b63..d2107c54b96daf2818f3fff9aa9208c6b59a249b 100644
--- a/ee/spec/frontend/security_dashboard/components/pipeline/pipeline_security_dashboard_spec.js
+++ b/ee/spec/frontend/security_dashboard/components/pipeline/pipeline_security_dashboard_spec.js
@@ -1,4 +1,4 @@
-import { GlEmptyState } from '@gitlab/ui';
+import { GlEmptyState, GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vuex from 'vuex';
@@ -265,6 +265,20 @@ describe('Pipeline Security Dashboard component', () => {
});
});
+ describe('page description', () => {
+ it('shows page description and help link', () => {
+ factory();
+
+ expect(wrapper.html()).toContain(PipelineSecurityDashboard.i18n.pageDescription);
+ expect(wrapper.find(GlButton).attributes()).toMatchObject({
+ variant: 'link',
+ icon: 'question-o',
+ target: '_blank',
+ href: PipelineSecurityDashboard.i18n.pageDescriptionHelpLink,
+ });
+ });
+ });
+
describe('scan warnings', () => {
describe('with warnings', () => {
describe('with purged scans', () => {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 5311e9edbdcbb7ee6e2499c47105c5a788bdf5f5..77a9daca219a184a65983a062d414193e6c3378c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -34293,6 +34293,9 @@ msgstr ""
msgid "SecurityReports|Report has expired"
msgstr ""
+msgid "SecurityReports|Results show vulnerabilities introduced by the merge request, in addition to existing vulnerabilities from the latest successful pipeline in your project's default branch."
+msgstr ""
+
msgid "SecurityReports|Scan details"
msgstr ""