Merge branch '354367-add-page-description-to-pipeline-security-tab' into 'master'

Add page description to pipeline security tab

See merge request !86300

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"

ee/app/assets/javascripts/security_dashboard/components/pipeline/pipeline_security_dashboard.vue

 <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"

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" />

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"

ee/spec/frontend/security_dashboard/components/pipeline/pipeline_security_dashboard_spec.js

-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', () => {

locale/gitlab.pot

@@ -33912,6 +33912,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 ""