Display button to access vulnerability form

Create a new button which links the user to the new vulnerability
form. This button is only visible when the :new_vulnerability_form
is enabled and user is on the project vulnerability page.

config/feature_flags/development/new_vulnerability_form.yml

+---
+name: new_vulnerability_form
+introduced_by_url:
+rollout_issue_url:
+milestone: '14.9'
+type: development
+group: group::threat insights
+default_enabled: false

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

 <script>
-import { GlSprintf, GlLink } from '@gitlab/ui';
+import { GlSprintf, GlLink, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import CsvExportButton from '../csv_export_button.vue';
 
 export default {
-  components: { GlSprintf, GlLink, CsvExportButton },
-  inject: ['dashboardDocumentation'],
+  components: {
+    GlSprintf,
+    GlLink,
+    GlButton,
+    CsvExportButton,
+  },
+  mixins: [glFeatureFlagsMixin()],
+  inject: {
+    dashboardDocumentation: {
+      default: '',
+    },
+    newVulnerabilityPath: {
+      default: '',
+    },
+  },
+  computed: {
+    shouldShowNewVulnerabilityButton() {
+      return this.glFeatures.newVulnerabilityForm && Boolean(this.newVulnerabilityPath);
+    },
+  },
   i18n: {
     title: s__('SecurityReports|Vulnerability Report'),
+    submitVulnerability: s__('SecurityReports|Submit vulnerability'),
     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}",
     ),
@@ -19,7 +39,16 @@ export default {
   <header>
     <h2 class="gl-display-flex">
       {{ $options.i18n.title }}
-      <csv-export-button class="gl-ml-auto" />
+      <gl-button
+        v-if="shouldShowNewVulnerabilityButton"
+        :href="newVulnerabilityPath"
+        class="gl-ml-auto"
+        icon="plus"
+      >
+        {{ $options.i18n.submitVulnerability }}
+      </gl-button>
+      <csv-export-button :class="shouldShowNewVulnerabilityButton ? 'gl-ml-4' : 'gl-ml-auto'" />
+      />
     </h2>
 
     <gl-sprintf :message="$options.i18n.description">

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

@@ -58,6 +58,7 @@ export default (el, dashboardType) => {
     canAdminVulnerability,
     falsePositiveDocUrl,
     canViewFalsePositive,
+    newVulnerabilityPath,
   } = el.dataset;
 
   if (isUnavailable) {
@@ -103,6 +104,7 @@ export default (el, dashboardType) => {
     ),
     falsePositiveDocUrl,
     canViewFalsePositive: parseBoolean(canViewFalsePositive),
+    newVulnerabilityPath,
   };
 
   if (dashboardType === DASHBOARD_TYPES.PROJECT) {

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

@@ -10,6 +10,7 @@ module Projects
         push_frontend_feature_flag(:vulnerability_management_survey, type: :ops, default_enabled: :yaml)
         push_frontend_feature_flag(:secure_vulnerability_training, @project, default_enabled: :yaml)
         push_frontend_feature_flag(:vulnerability_report_pagination, current_user, default_enabled: :yaml)
+        push_frontend_feature_flag(:new_vulnerability_form, @project, default_enabled: :yaml)
       end
 
       feature_category :vulnerability_management

ee/app/helpers/ee/projects_helper.rb

@@ -207,7 +207,8 @@ module EE
           can_admin_vulnerability: can?(current_user, :admin_vulnerability, project).to_s,
           false_positive_doc_url: help_page_path('user/application_security/vulnerabilities/index'),
           can_view_false_positive: can_view_false_positive?,
-          security_configuration_path: project_security_configuration_path(@project)
+          security_configuration_path: project_security_configuration_path(@project),
+          new_vulnerability_path: new_project_security_vulnerability_path(@project)
         }.merge!(security_dashboard_pipeline_data(project))
       end
     end

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

@@ -6,10 +6,10 @@ import CsvExportButton from 'ee/security_dashboard/components/shared/csv_export_
 describe('Vulnerability report header component', () => {
   let wrapper;
 
-  const createWrapper = ({ dashboardDocumentation } = {}) => {
+  const createWrapper = ({ provide } = {}) => {
     wrapper = mountExtended(VulnerabilityReportHeader, {
-      provide: { dashboardDocumentation },
-      stubs: { CsvExportButton: true },
+      provide,
+      stubs: { CsvExportButton: true, GlButton: true },
     });
   };
 
@@ -17,6 +17,39 @@ describe('Vulnerability report header component', () => {
     wrapper.destroy();
   });
 
+  it('shows the submit vulnerability button when new vulnerability path is defined', () => {
+    createWrapper({
+      provide: {
+        newVulnerabilityPath: '/vulnerabilities/new',
+        glFeatures: { newVulnerabilityForm: true },
+      },
+    });
+
+    expect(wrapper.findByText('Submit vulnerability').attributes('href')).toBe(
+      '/vulnerabilities/new',
+    );
+  });
+
+  it('does not show the submit vulnerability button when new vulnerability path is not defined', () => {
+    createWrapper({
+      provide: {
+        glFeatures: { newVulnerabilityForm: true },
+      },
+    });
+
+    expect(wrapper.findByText('Submit vulnerability').exists()).toBe(false);
+  });
+
+  it('does not show the submit vulnerability button when the feature flag is not enabled', () => {
+    createWrapper({
+      provide: {
+        newVulnerabilityPath: '/vulnerabilities/new',
+      },
+    });
+
+    expect(wrapper.findByText('Submit vulnerability').exists()).toBe(false);
+  });
+
   it('shows the CSV export button', () => {
     createWrapper();
 
@@ -25,7 +58,7 @@ describe('Vulnerability report header component', () => {
 
   it('shows the correct link for the documentation', () => {
     const dashboardDocumentation = 'http://some/link';
-    createWrapper({ dashboardDocumentation });
+    createWrapper({ provide: { dashboardDocumentation } });
 
     expect(wrapper.findComponent(GlLink).attributes('href')).toBe(dashboardDocumentation);
   });

ee/spec/helpers/projects_helper_spec.rb

@@ -229,7 +229,8 @@ RSpec.describe ProjectsHelper do
           scanners: '[{"id":123,"vendor":"Security Vendor","report_type":"SAST"}]',
           can_admin_vulnerability: 'true',
           can_view_false_positive: 'false',
-          security_configuration_path: kind_of(String)
+          security_configuration_path: kind_of(String),
+          new_vulnerability_path: end_with('/security/vulnerabilities/new')
         }
       end
 

locale/gitlab.pot

@@ -33022,6 +33022,9 @@ msgstr ""
 msgid "SecurityReports|Status"
 msgstr ""
 
+msgid "SecurityReports|Submit vulnerability"
+msgstr ""
+
 msgid "SecurityReports|Take survey"
 msgstr ""