Add Submit Vulnerability button to empty page

When the user has the necessary permissions, display a button
to create a vulnerability manually.

ee/app/assets/javascripts/security_dashboard/components/shared/empty_states/report_not_configured_project.vue

 <script>
-import { GlEmptyState } from '@gitlab/ui';
+import { GlEmptyState, GlButton } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { s__, __ } from '~/locale';
 
 export default {
   components: {
     GlEmptyState,
+    GlButton,
+  },
+  mixins: [glFeatureFlagsMixin()],
+  inject: [
+    'emptyStateSvgPath',
+    'securityConfigurationPath',
+    'securityDashboardHelpPath',
+    'newVulnerabilityPath',
+    'canAdminVulnerability',
+  ],
+  computed: {
+    shouldShowNewVulnerabilityButton() {
+      return (
+        this.glFeatures.newVulnerabilityForm &&
+        Boolean(this.newVulnerabilityPath) &&
+        this.canAdminVulnerability
+      );
+    },
   },
-  inject: ['emptyStateSvgPath', 'securityConfigurationPath', 'securityDashboardHelpPath'],
   i18n: {
     title: s__('SecurityReports|Monitor vulnerabilities in your project'),
+    submitVulnerability: s__('SecurityReports|Submit vulnerability'),
     description: s__(
       'SecurityReports|Manage and track vulnerabilities identified in your project. Vulnerabilities are shown here when security testing is configured.',
     ),
@@ -19,13 +38,20 @@ export default {
 </script>
 
 <template>
-  <gl-empty-state
-    :title="$options.i18n.title"
-    :svg-path="emptyStateSvgPath"
-    :description="$options.i18n.description"
-    :primary-button-text="$options.i18n.primaryButtonText"
-    :primary-button-link="securityConfigurationPath"
-    :secondary-button-text="$options.i18n.secondaryButtonText"
-    :secondary-button-link="securityDashboardHelpPath"
-  />
+  <div>
+    <div v-if="shouldShowNewVulnerabilityButton" class="gl-my-4 gl-text-right">
+      <gl-button :href="newVulnerabilityPath" class="gl-ml-auto" icon="plus">
+        {{ $options.i18n.submitVulnerability }}
+      </gl-button>
+    </div>
+    <gl-empty-state
+      :title="$options.i18n.title"
+      :svg-path="emptyStateSvgPath"
+      :description="$options.i18n.description"
+      :primary-button-text="$options.i18n.primaryButtonText"
+      :primary-button-link="securityConfigurationPath"
+      :secondary-button-text="$options.i18n.secondaryButtonText"
+      :secondary-button-link="securityDashboardHelpPath"
+    />
+  </div>
 </template>

ee/app/helpers/ee/projects_helper.rb

@@ -181,7 +181,9 @@ def project_security_dashboard_config(project)
           no_vulnerabilities_svg_path: image_path('illustrations/issues.svg'),
           dashboard_documentation: help_page_path('user/application_security/security_dashboard/index'),
           project_full_path: project.full_path,
-          security_configuration_path: project_security_configuration_path(@project)
+          security_configuration_path: project_security_configuration_path(@project),
+          can_admin_vulnerability: can?(current_user, :admin_vulnerability, project).to_s,
+          new_vulnerability_path: new_project_security_vulnerability_path(@project)
         }.merge!(security_dashboard_pipeline_data(project))
       else
         {

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\\" invertindarkmode=\\"true\\"></gl-empty-state-stub>"`;
+exports[`Project report not configured component when button is shown matches the snapshot 1`] = `
+"<div>
+  <div class=\\"gl-my-4 gl-text-right\\">
+    <gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"plus\\" buttontextclasses=\\"\\" href=\\"/vulnerability/new\\" class=\\"gl-ml-auto\\">
+      Submit vulnerability
+    </gl-button-stub>
+  </div>
+  <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\\" invertindarkmode=\\"true\\"></gl-empty-state-stub>
+</div>"
+`;

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

+import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import ReportNotConfiguredProject from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_project.vue';
 
@@ -6,22 +7,50 @@ describe('Project report not configured component', () => {
   const emptyStateSvgPath = '/placeholder.svg';
   const securityConfigurationPath = '/configuration';
   const securityDashboardHelpPath = '/help';
+  const newVulnerabilityPath = '/vulnerability/new';
 
-  const createComponent = () => {
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  const createComponent = ({ provide } = {}) => {
     wrapper = shallowMount(ReportNotConfiguredProject, {
       provide: {
         emptyStateSvgPath,
         securityConfigurationPath,
         securityDashboardHelpPath,
+        newVulnerabilityPath,
+        ...provide,
       },
     });
   };
 
-  beforeEach(() => {
-    createComponent();
+  describe.each`
+    provide                                                                                                  | expectedShow
+    ${{ newVulnerabilityPath: '', canAdminVulnerability: true, glFeatures: { newVulnerabilityForm: true } }} | ${false}
+    ${{ newVulnerabilityPath, canAdminVulnerability: false, glFeatures: { newVulnerabilityForm: true } }}    | ${false}
+    ${{ newVulnerabilityPath, canAdminVulnerability: true, glFeatures: { newVulnerabilityForm: false } }}    | ${false}
+    ${{ newVulnerabilityPath, canAdminVulnerability: true, glFeatures: { newVulnerabilityForm: true } }}     | ${true}
+  `('should display or hide the button based on the condition', ({ provide, expectedShow }) => {
+    beforeEach(() => {
+      createComponent({ provide });
+    });
+
+    it(`shows the button: ${expectedShow}`, () => {
+      expect(findButton().exists()).toBe(expectedShow);
+    });
   });
 
-  it('matches snapshot', () => {
-    expect(wrapper.html()).toMatchSnapshot();
+  describe('when button is shown', () => {
+    beforeEach(() => {
+      createComponent({
+        provide: {
+          canAdminVulnerability: true,
+          glFeatures: { newVulnerabilityForm: true },
+        },
+      });
+    });
+
+    it('matches the snapshot', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
   });
 });

ee/spec/helpers/projects_helper_spec.rb

@@ -197,7 +197,9 @@
           project_full_path: project.full_path,
           no_vulnerabilities_svg_path: start_with('/assets/illustrations/issues-'),
           dashboard_documentation: '/help/user/application_security/security_dashboard/index',
-          security_configuration_path: end_with('/configuration')
+          security_configuration_path: end_with('/configuration'),
+          can_admin_vulnerability: 'true',
+          new_vulnerability_path: end_with('/security/vulnerabilities/new')
         }
       end