Add markdown support for Vulnerability Description

This change would start rendering markdown content
for vulnerability page when description_html field
value is present. It should render markdown as plain
text otherwise, which is the current behavior.

Changelog: added
EE: true

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

 <script>
-import { GlLink, GlSprintf } from '@gitlab/ui';
+import { GlLink, GlSprintf, GlSafeHtmlDirective } from '@gitlab/ui';
 import { bodyWithFallBack } from 'ee/vue_shared/security_reports/components/helpers';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import convertReportType from 'ee/vue_shared/security_reports/store/utils/convert_report_type';
@@ -19,6 +19,9 @@ export default {
     GlSprintf,
     VulnerabilityDetailSection,
   },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   props: {
     vulnerability: {
       type: Object,
@@ -192,7 +195,13 @@ export default {
       {{ vulnerability.title }}
     </h1>
     <h3 class="mt-0">{{ __('Description') }}</h3>
-    <p data-testid="description" data-qa-selector="vulnerability_description">
+    <p
+      v-if="vulnerability.descriptionHtml"
+      v-safe-html="vulnerability.descriptionHtml"
+      data-testid="description"
+      data-qa-selector="vulnerability_description"
+    ></p>
+    <p v-else data-testid="description" data-qa-selector="vulnerability_description">
       {{ vulnerability.description }}
     </p>
 

ee/app/helpers/vulnerabilities_helper.rb

@@ -73,6 +73,7 @@ module VulnerabilitiesHelper
   def vulnerability_finding_data(vulnerability)
     data = Vulnerabilities::FindingSerializer.new(current_user: current_user).represent(vulnerability.finding, only: FINDING_FIELDS)
     data[:location].merge!('blob_path' => vulnerability.blob_path).compact!
+    data[:description_html] = markdown_field(vulnerability, :description)
     data
   end
 

ee/spec/frontend/vulnerabilities/vulnerability_details_spec.js

@@ -13,13 +13,13 @@ describe('Vulnerability Details', () => {
     confidence: 'high confidence',
     reportType: 'Some report type',
     description: 'vulnerability description',
+    descriptionHtml: 'vulnerability description <code>sample</code>',
   };
 
   const createWrapper = (vulnerabilityOverrides) => {
     const propsData = {
       vulnerability: { ...vulnerability, ...vulnerabilityOverrides },
     };
-
     wrapper = mount(VulnerabilityDetails, { propsData });
   };
 
@@ -33,7 +33,7 @@ describe('Vulnerability Details', () => {
 
   it('shows the properties that should always be shown', () => {
     createWrapper();
-    expect(getText('description')).toBe(vulnerability.description);
+    expect(getById('description').html()).toContain(vulnerability.descriptionHtml);
     expect(wrapper.find(SeverityBadge).props('severity')).toBe(vulnerability.severity);
     expect(getText('reportType')).toBe(`Tool: ${vulnerability.reportType}`);
 
@@ -49,6 +49,14 @@ describe('Vulnerability Details', () => {
     expect(getAllById('identifier')).toHaveLength(0);
   });
 
+  it('renders description when descriptionHtml is not present', () => {
+    createWrapper({
+      descriptionHtml: null,
+    });
+    expect(getById('description').html()).not.toContain(vulnerability.descriptionHtml);
+    expect(getText('description')).toBe(vulnerability.description);
+  });
+
   it.each`
     reportType                  | expectedOutput
     ${'SAST'}                   | ${'SAST'}

ee/spec/frontend_integration/vulnerabilities/mock_data.js

@@ -2,6 +2,7 @@ export const mockVulnerability = {
   id: 1,
   title: 'Vulnerability Title',
   description: 'Vulnerability Description',
+  descriptionHtml: 'Vulnerability Description <code>sample</code>',
   created_at: new Date(2020, 0, 1).toISOString(),
   severity: 'medium',
   state: 'detected',

ee/spec/frontend_integration/vulnerabilities/vulnerabilities_init_integration_spec.js

@@ -60,7 +60,10 @@ describe('Vulnerability Report', () => {
   });
 
   it("displays the vulnerability's description", () => {
-    expect(screen.getByText(mockVulnerability.description)).toBeInstanceOf(HTMLElement);
+    const section = screen.getByTestId('description');
+
+    expect(section).toBeInstanceOf(HTMLElement);
+    expect(section.innerHTML).toBe(mockVulnerability.descriptionHtml);
   });
 
   it('displays related issues', async () => {

ee/spec/helpers/vulnerabilities_helper_spec.rb

@@ -306,6 +306,7 @@ RSpec.describe VulnerabilitiesHelper do
     it 'returns finding information' do
       expect(subject.to_h).to match(
         description: finding.description,
+        description_html: anything,
         identifiers: kind_of(Array),
         issue_feedback: anything,
         links: finding.links,