Add cancel button

Add a button that leads the user back to the vulnerability report
page when clicked.

ee/app/assets/javascripts/vulnerabilities/components/new_vulnerability/new_vulnerability.vue

 <script>
 import { GlForm, GlButton, GlAlert } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
-import { s__ } from '~/locale';
+import { s__, __ } from '~/locale';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPE_PROJECT } from '~/graphql_shared/constants';
 import { redirectTo } from '~/lib/utils/url_utility';
@@ -22,7 +22,7 @@ export default {
     SectionName,
     SectionSolution,
   },
-  inject: ['projectId'],
+  inject: ['projectId', 'vulnerabilityReportPath'],
   data() {
     return {
       form: {
@@ -181,6 +181,7 @@ export default {
   },
   i18n: {
     title: s__('VulnerabilityManagement|Add vulnerability finding'),
+    cancel: __('Cancel'),
     submitVulnerability: s__('VulnerabilityManagement|Submit vulnerability'),
     submitError: s__('VulnerabilityManagement|Something went wrong while creating vulnerability'),
     description: s__(
@@ -223,10 +224,17 @@ export default {
         <gl-button
           type="submit"
           variant="confirm"
-          class="js-no-auto-disable"
+          class="js-no-auto-disable gl-mr-3"
           :disabled="submitting"
           >{{ $options.i18n.submitVulnerability }}</gl-button
         >
+        <gl-button
+          type="button"
+          class="js-no-auto-disable"
+          :disabled="submitting"
+          :href="vulnerabilityReportPath"
+          >{{ $options.i18n.cancel }}</gl-button
+        >
       </div>
     </gl-form>
   </div>

ee/app/assets/javascripts/vulnerabilities/new_vulnerability_init.js

@@ -13,6 +13,7 @@ export default (el) => {
     provide: {
       markdownDocsPath: el.dataset.markdownDocsPath,
       markdownPreviewPath: el.dataset.markdownPreviewPath,
+      vulnerabilityReportPath: el.dataset.vulnerabilityReportPath,
       projectId: el.dataset.projectId,
     },
     render: (h) => h(App),

ee/app/views/projects/security/vulnerabilities/new.html.haml

@@ -6,4 +6,5 @@
 
 #js-vulnerability-new{ data: { markdown_docs_path: help_page_path('user/markdown'),
                                markdown_preview_path: preview_markdown_path(@project),
+                               vulnerability_report_path: project_security_vulnerability_report_index_path(@project),
                                project_id: @project.id } }

ee/spec/frontend/vulnerabilities/new_vulnerability/new_vulnerability_spec.js

@@ -23,6 +23,8 @@ jest.mock('~/lib/utils/url_utility', () => ({
 
 describe('New vulnerability component', () => {
   const projectId = '22';
+  const vulnerabilityReportPath = '/root/security-reports/-/vulnerability_report';
+
   let wrapper;
 
   const inputs = {
@@ -54,13 +56,15 @@ describe('New vulnerability component', () => {
   const findSectionDetails = () => wrapper.findComponent(SectionDetails);
   const findSectionSolution = () => wrapper.findComponent(SectionSolution);
   const findSectionIdentifiers = () => wrapper.findComponent(SectionIdentifiers);
-  const findSubmitButton = () => wrapper.findComponent(GlButton);
+  const findSubmitButton = () => wrapper.findAllComponents(GlButton).at(0);
+  const findCancelButton = () => wrapper.findAllComponents(GlButton).at(1);
 
   const createWrapper = ({ apolloProvider } = {}) => {
     return shallowMountExtended(NewVulnerability, {
       apolloProvider,
       provide: {
         projectId,
+        vulnerabilityReportPath,
       },
     });
   };
@@ -103,6 +107,13 @@ describe('New vulnerability component', () => {
     it('contains a submit button', () => {
       expect(findSubmitButton().exists()).toBe(true);
     });
+
+    it('contains a cancel button', () => {
+      expect(findCancelButton().attributes()).toMatchObject({
+        href: vulnerabilityReportPath,
+        type: 'button',
+      });
+    });
   });
 
   describe('form submission', () => {