Add security-training promo banner to vuln report

This commit adds a banner to the vulnerability report page. This
is to promote the upcoming security training feature.

Note: This is currently behind a feature flag and the logic for
dismissing the banner, etc. will be added in separate MRs.

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

@@ -5,6 +5,7 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { translateScannerNames } from '~/security_configuration/utils';
+import SecurityTrainingPromo from 'ee/security_dashboard/components/shared/security_training_promo.vue';
 import ReportNotConfiguredProject from '../shared/empty_states/report_not_configured_project.vue';
 import VulnerabilityReportTabs from '../shared/vulnerability_report/vulnerability_report_tabs.vue';
 import projectVulnerabilitiesQuery from '../../graphql/queries/project_vulnerabilities.query.graphql';
@@ -21,6 +22,7 @@ export default {
     AutoFixUserCallout,
     ProjectPipelineStatus,
     VulnerabilityReportTabs,
+    SecurityTrainingPromo,
   },
   mixins: [glFeatureFlagsMixin()],
   inject: ['fullPath', 'pipeline', 'autoFixDocumentation'],
@@ -106,6 +108,8 @@ export default {
       @close="closeAutoFixUserCallout"
     />
 
+    <security-training-promo v-if="glFeatures.secureVulnerabilityTraining" class="gl-mt-5" />
+
     <vulnerability-report-tabs :query="$options.projectVulnerabilitiesQuery">
       <template #header-development>
         <project-pipeline-status :pipeline="pipeline" />

ee/app/controllers/projects/security/vulnerability_report_controller.rb

@@ -8,6 +8,7 @@ module Projects
 
       before_action do
         push_frontend_feature_flag(:vulnerability_management_survey, type: :ops, default_enabled: :yaml)
+        push_frontend_feature_flag(:secure_vulnerability_training, @project, default_enabled: :yaml)
       end
 
       feature_category :vulnerability_management

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

@@ -9,6 +9,7 @@ import VulnerabilityReportTabs from 'ee/security_dashboard/components/shared/vul
 import ProjectPipelineStatus from 'ee/security_dashboard/components/shared/project_pipeline_status.vue';
 import SecurityScannerAlert from 'ee/security_dashboard/components/project/security_scanner_alert.vue';
 import securityScannersQuery from 'ee/security_dashboard/graphql/queries/project_security_scanners.query.graphql';
+import SecurityTrainingPromo from 'ee/security_dashboard/components/shared/security_training_promo.vue';
 import AutoFixUserCallout from 'ee/security_dashboard/components/shared/auto_fix_user_callout.vue';
 import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
@@ -41,6 +42,7 @@ describe('Project vulnerability report app component', () => {
     pipeline = { id: 1 },
     securityScanners,
     securityAutoFix = false,
+    secureVulnerabilityTraining = true,
   } = {}) => {
     wrapper = shallowMount(ProjectVulnerabilityReport, {
       localVue,
@@ -53,7 +55,7 @@ describe('Project vulnerability report app component', () => {
         autoFixDocumentation: '#',
         pipeline,
         dashboardType: DASHBOARD_TYPES.PROJECT,
-        glFeatures: { securityAutoFix },
+        glFeatures: { securityAutoFix, secureVulnerabilityTraining },
       },
       stubs: {
         VulnerabilityReportTabs,
@@ -198,4 +200,20 @@ describe('Project vulnerability report app component', () => {
       expect(findAutoFixUserCallout().exists()).toBe(false);
     });
   });
+
+  describe('security training promotion', () => {
+    it('shows user callout', () => {
+      createWrapper();
+
+      expect(wrapper.findComponent(SecurityTrainingPromo).exists()).toBe(true);
+    });
+
+    describe('with the "secureVulnerabilityTraining" feature flag disabled', () => {
+      it('does not show a user callout', () => {
+        createWrapper({ secureVulnerabilityTraining: false });
+
+        expect(wrapper.findComponent(SecurityTrainingPromo).exists()).toBe(false);
+      });
+    });
+  });
 });