Merge branch 'support-gfm-description-finding-modal' into 'master'

Support GitLab flavored markdown in finding modal description

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/150008



Merged-by: David Pisek <dpisek@gitlab.com>
Approved-by: Jay Montal <jmontal@gitlab.com>
Approved-by: David Pisek <dpisek@gitlab.com>
Co-authored-by: lorenzvanherwaarden <lvanherwaarden@gitlab.com>

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_details_graphql/index.vue

@@ -2,6 +2,7 @@
 <script>
 import { GlLink, GlSprintf, GlFriendlyWrap } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import StatusBadge from 'ee/vue_shared/security_reports/components/status_badge.vue';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
 import FalsePositiveAlert from 'ee/vulnerabilities/components/false_positive_alert.vue';
@@ -260,6 +261,9 @@ export default {
       return itemsWithContent;
     },
   },
+  mounted() {
+    renderGFM(this.$refs.description);
+  },
   methods: {
     handleShowTraining(showVulnerabilityTraining) {
       this.showTraining = showVulnerabilityTraining;
@@ -277,7 +281,12 @@ export default {
       :heading="$options.i18n.descriptionSectionHeading"
       data-testid="description-section"
     >
-      <div v-if="descriptionHtml" v-safe-html="descriptionHtml"></div>
+      <div
+        v-if="descriptionHtml"
+        ref="description"
+        v-safe-html="descriptionHtml"
+        data-testid="description-html"
+      ></div>
       <p v-else>{{ description }}</p>
     </details-section>
 

ee/spec/frontend/security_dashboard/components/shared/vulnerability_details_graphql/index_spec.js

 import { GlSprintf, GlLink, GlFriendlyWrap } from '@gitlab/ui';
 import { trimText } from 'helpers/text_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { renderGFM } from '~/behaviors/markdown/render_gfm';
 import { REPORT_TYPES_TO_HUMAN_READABLE } from 'ee/security_dashboard/components/shared/vulnerability_details_graphql/constants';
 import Details from 'ee/security_dashboard/components/shared/vulnerability_details_graphql/index.vue';
 import DetailsSection from 'ee/security_dashboard/components/shared/vulnerability_details_graphql/details_section.vue';
@@ -31,6 +32,8 @@ const TEST_VULNERABILITY = {
   state: 'DETECTED',
 };
 
+jest.mock('~/behaviors/markdown/render_gfm');
+
 describe('ee/security_dashboard/components/shared/vulnerability_details_graphql/index.vue', () => {
   let wrapper;
 
@@ -84,6 +87,7 @@ describe('ee/security_dashboard/components/shared/vulnerability_details_graphql/
     beforeEach(createComponent);
 
     const findDescriptionSection = () => wrapper.findByTestId('description-section');
+    const findDescriptionHtml = () => wrapper.findByTestId('description-html');
 
     it('is a details section with the correct heading', () => {
       expectToBeDetailsSection(findDescriptionSection(), { heading: 'Description' });
@@ -93,14 +97,23 @@ describe('ee/security_dashboard/components/shared/vulnerability_details_graphql/
       expect(findDescriptionSection().html()).toContain(TEST_VULNERABILITY.descriptionHtml);
     });
 
-    it(`contains the vulnerability's plaintext description when descriptionHtml is not available`, () => {
-      createComponent({
-        propsData: {
-          ...TEST_VULNERABILITY,
-          descriptionHtml: '',
-        },
+    it('renders gfm', () => {
+      expect(renderGFM).toHaveBeenCalledWith(findDescriptionHtml().element);
+    });
+
+    describe('when descriptionHtml is not available', () => {
+      beforeEach(() => {
+        createComponent({
+          propsData: {
+            ...TEST_VULNERABILITY,
+            descriptionHtml: '',
+          },
+        });
+      });
+
+      it(`contains the vulnerability's plaintext description`, () => {
+        expect(findDescriptionSection().text()).toContain(TEST_VULNERABILITY.description);
       });
-      expect(findDescriptionSection().text()).toContain(TEST_VULNERABILITY.description);
     });
   });