Add name and description fields

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

 <script>
-import { s__ } from '~/locale';
+import { GlForm, GlFormGroup, GlFormInput, GlFormTextarea } from '@gitlab/ui';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import { s__, __ } from '~/locale';
 
 export default {
+  components: {
+    GlForm,
+    GlFormGroup,
+    GlFormInput,
+    GlFormTextarea,
+    MarkdownField,
+  },
+  props: {
+    markdownDocsPath: {
+      type: String,
+      required: true,
+    },
+    markdownPreviewPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isSubmitting: false,
+      form: {
+        vulnerabilityName: '',
+        vulnerabilityDesc: '',
+      },
+    };
+  },
   i18n: {
     title: s__('VulnerabilityManagement|Add vulnerability finding'),
     description: s__(
       'VulnerabilityManagement|Manually add a vulnerability entry into the vulnerability report.',
     ),
+    form: {
+      vulnerabilityName: {
+        label: __('Name'),
+        description: s__(
+          'VulnerabilityManagement|Vulnerability name or type. Ex: Cross-site scripting',
+        ),
+      },
+      vulnerabilityDesc: {
+        label: __('Description'),
+        description: s__(
+          'VulnerabilityManagement|Summary, detailed description, steps to reproduce, etc.',
+        ),
+      },
+    },
   },
 };
 </script>
@@ -21,5 +63,49 @@ export default {
         {{ $options.i18n.description }}
       </p>
     </header>
+    <gl-form class="gl-p-4 gl-w-85p" @submit.prevent>
+      <gl-form-group
+        :label="$options.i18n.form.vulnerabilityName.label"
+        :description="$options.i18n.form.vulnerabilityName.description"
+        label-for="form-vulnerability-name"
+        class="gl-mb-6"
+      >
+        <gl-form-input
+          id="form-vulnerability-name"
+          v-model="form.vulnerabilityName"
+          class="gl-mb-2"
+          type="text"
+        />
+      </gl-form-group>
+      <gl-form-group
+        :label="$options.i18n.form.vulnerabilityDesc.label"
+        label-for="form-vulnerability-desc"
+      >
+        <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="form.vulnerabilityDesc"
+            :is-submitting="isSubmitting"
+          >
+            <template #textarea>
+              <gl-form-textarea
+                id="form-vulnerability-desc"
+                v-model="form.vulnerabilityDesc"
+                rows="8"
+                class="gl-shadow-none! gl-px-0! gl-py-4! gl-h-auto!"
+                :aria-label="$options.i18n.form.vulnerabilityDesc.description"
+                :placeholder="$options.i18n.form.vulnerabilityDesc.description"
+              />
+            </template>
+          </markdown-field>
+        </div>
+      </gl-form-group>
+    </gl-form>
   </div>
 </template>

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

@@ -12,7 +12,10 @@ export default (el) => {
     apolloProvider,
     render: (h) =>
       h(App, {
-        props: {},
+        props: {
+          markdownDocsPath: el.dataset.markdownDocsPath,
+          markdownPreviewPath: el.dataset.markdownPreviewPath,
+        },
       }),
   });
 };

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

@@ -4,4 +4,4 @@
 - page_title _("Add vulnerability finding")
 - add_page_specific_style 'page_bundles/security_dashboard'
 
-#js-vulnerability-new
+#js-vulnerability-new{ data: { markdown_docs_path: help_page_path('user/markdown'), markdown_preview_path: preview_markdown_path(@project) } }

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

-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { GlForm } from '@gitlab/ui';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import NewVulnerability from 'ee/vulnerabilities/components/new_vulnerability/new_vulnerability.vue';
 
 describe('New vulnerability component', () => {
   let wrapper;
+  const markdownDocsPath = '/path/to/markdown/docs';
+  const markdownPreviewPath = '/path/to/markdown/preview';
 
   const createWrapper = () => {
-    return shallowMountExtended(NewVulnerability, {});
+    return mountExtended(NewVulnerability, {
+      propsData: {
+        markdownDocsPath,
+        markdownPreviewPath,
+      },
+    });
   };
 
   beforeEach(() => {
@@ -24,4 +33,33 @@ describe('New vulnerability component', () => {
       'Manually add a vulnerability entry into the vulnerability report.',
     );
   });
+
+  it('contains a form', () => {
+    expect(wrapper.findComponent(GlForm).exists()).toBe(true);
+  });
+
+  it('creates markdown editor with correct props', () => {
+    expect(wrapper.findComponent(MarkdownField).props()).toEqual(
+      expect.objectContaining({
+        markdownDocsPath,
+        markdownPreviewPath,
+        textareaValue: '',
+        canAttachFile: false,
+        addSpacingClasses: false,
+        isSubmitting: false,
+      }),
+    );
+  });
+
+  it.each`
+    labelText        | description
+    ${'Name'}        | ${'Vulnerability name or type. Ex: Cross-site scripting'}
+    ${'Description'} | ${''}
+  `('displays the input with the correct label: $labelText', ({ labelText, description }) => {
+    expect(wrapper.findByLabelText(labelText).exists()).toBe(true);
+
+    if (description) {
+      expect(wrapper.findByText(description).exists()).toBe(true);
+    }
+  });
 });

locale/gitlab.pot

@@ -38502,9 +38502,15 @@ msgstr ""
 msgid "VulnerabilityManagement|Something went wrong, could not update vulnerability state."
 msgstr ""
 
+msgid "VulnerabilityManagement|Summary, detailed description, steps to reproduce, etc."
+msgstr ""
+
 msgid "VulnerabilityManagement|Verified as fixed or mitigated"
 msgstr ""
 
+msgid "VulnerabilityManagement|Vulnerability name or type. Ex: Cross-site scripting"
+msgstr ""
+
 msgid "VulnerabilityManagement|Will not fix or a false-positive"
 msgstr ""