Add solution section

This is the last part of the new vulnerability form. It allows adding
an optional solution text to the vulnerability.

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

@@ -3,6 +3,7 @@ import { GlForm } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import SectionDetails from './section_details.vue';
 import SectionName from './section_name.vue';
+import SectionSolution from './section_solution.vue';
 
 export default {
   name: 'NewVulnerabilityForm',
@@ -10,6 +11,7 @@ export default {
     GlForm,
     SectionDetails,
     SectionName,
+    SectionSolution,
   },
   data() {
     return {
@@ -49,6 +51,7 @@ export default {
     <gl-form class="gl-p-4 gl-w-85p" @submit.prevent>
       <section-name @change="updateFormValues" />
       <section-details @change="updateFormValues" />
+      <section-solution @change="updateFormValues" />
     </gl-form>
   </div>
 </template>

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

+<script>
+import { GlFormTextarea } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+
+export default {
+  components: {
+    GlFormTextarea,
+    MarkdownField,
+  },
+  inject: ['markdownDocsPath', 'markdownPreviewPath'],
+  props: {
+    isSubmitting: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      solution: '',
+    };
+  },
+  methods: {
+    emitChanges() {
+      this.$emit('change', { solution: this.solution });
+    },
+  },
+  i18n: {
+    title: __('Solution'),
+    description: s__(
+      'VulnerabilityManagement|(optional) Include the solution to the vulnerability if available.',
+    ),
+  },
+};
+</script>
+<template>
+  <div>
+    <header class="gl-pt-4 gl-mt-6 gl-mb-3 gl-border-t-gray-100 gl-border-t-solid gl-border-t-1">
+      <h3 class="gl-mt-0">
+        {{ $options.i18n.title }}
+      </h3>
+    </header>
+    <div
+      class="gl-border-solid gl-border-gray-100 gl-border-1 gl-pt-3 gl-pb-5 gl-px-3 gl-rounded-base"
+    >
+      <markdown-field
+        ref="markdownField"
+        :can-attach-file="false"
+        :add-spacing-classes="false"
+        :markdown-preview-path="markdownPreviewPath"
+        :markdown-docs-path="markdownDocsPath"
+        :textarea-value="solution"
+        :is-submitting="isSubmitting"
+      >
+        <template #textarea>
+          <gl-form-textarea
+            id="form-solution"
+            v-model="solution"
+            rows="8"
+            class="gl-shadow-none! gl-px-0! gl-py-4! gl-h-auto!"
+            :aria-label="$options.i18n.description"
+            :placeholder="$options.i18n.description"
+            @change="emitChanges"
+          />
+        </template>
+      </markdown-field>
+    </div>
+  </div>
+</template>

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

@@ -3,12 +3,14 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import NewVulnerability from 'ee/vulnerabilities/components/new_vulnerability/new_vulnerability.vue';
 import SectionName from 'ee/vulnerabilities/components/new_vulnerability/section_name.vue';
 import SectionDetails from 'ee/vulnerabilities/components/new_vulnerability/section_details.vue';
+import SectionSolution from 'ee/vulnerabilities/components/new_vulnerability/section_solution.vue';
 
 describe('New vulnerability component', () => {
   let wrapper;
 
   const findSectionName = () => wrapper.findComponent(SectionName);
   const findSectionDetails = () => wrapper.findComponent(SectionDetails);
+  const findSectionSolution = () => wrapper.findComponent(SectionSolution);
 
   const createWrapper = () => {
     return shallowMountExtended(NewVulnerability);
@@ -36,9 +38,10 @@ describe('New vulnerability component', () => {
   });
 
   it.each`
-    section                   | selector              | fields
-    ${'Name and Description'} | ${findSectionName}    | ${{ vulnerabilityName: 'CVE 2050', vulnerabilityDesc: 'Password leak' }}
-    ${'Details'}              | ${findSectionDetails} | ${{ severity: 'low', detectionMethod: 2, status: 'confirmed' }}
+    section                   | selector               | fields
+    ${'Name and Description'} | ${findSectionName}     | ${{ vulnerabilityName: 'CVE 2050', vulnerabilityDesc: 'Password leak' }}
+    ${'Details'}              | ${findSectionDetails}  | ${{ severity: 'low', detectionMethod: 2, status: 'confirmed' }}
+    ${'Solution'}             | ${findSectionSolution} | ${{ solution: 'This is the solution of the vulnerability.' }}
   `('mounts the section $section and reacts on the change event', ({ selector, fields }) => {
     const section = selector();
     expect(section.exists()).toBe(true);

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

+import { GlFormTextarea } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import SectionSolution from 'ee/vulnerabilities/components/new_vulnerability/section_solution.vue';
+
+describe('New vulnerability - Section Solution', () => {
+  const markdownDocsPath = '/path/to/markdown/docs';
+  const markdownPreviewPath = '/path/to/markdown/preview';
+
+  let wrapper;
+
+  const createWrapper = () => {
+    return mountExtended(SectionSolution, {
+      provide: {
+        markdownDocsPath,
+        markdownPreviewPath,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('creates markdown editor with correct props', () => {
+    expect(wrapper.findComponent(MarkdownField).props()).toMatchObject({
+      markdownDocsPath,
+      markdownPreviewPath,
+      textareaValue: '',
+      canAttachFile: false,
+      addSpacingClasses: false,
+      isSubmitting: false,
+    });
+  });
+
+  it('emits the changes for the markdown field', () => {
+    const solution = 'The solution of the vulnerability';
+    const component = wrapper.findComponent(GlFormTextarea);
+    component.vm.$emit('input', solution);
+    component.vm.$emit('change', solution);
+    expect(wrapper.emitted('change')[0][0]).toEqual({ solution });
+  });
+});

locale/gitlab.pot

@@ -39209,6 +39209,9 @@ msgstr ""
 msgid "VulnerabilityManagement|%{statusStart}Resolved%{statusEnd} %{timeago} by %{user}"
 msgstr ""
 
+msgid "VulnerabilityManagement|(optional) Include the solution to the vulnerability if available."
+msgstr ""
+
 msgid "VulnerabilityManagement|A removed or remediated vulnerability"
 msgstr ""