[FE] Generic Report Schema: Render 'code' type on vulnerability details page

Why are we doing this work

Allows scan results to add new labels and values to a vulnerability, where the label is any string they want and the value is one of the following types: named-list, list, table, url, int, text, diff, markdown (GFM), code, commit, file-location, and module-location.

This issue is specific to the code type

Designs

component design
code image

Sample Data

Schema: https://gitlab.com/gitlab-org/security-products/security-report-schemas/-/blob/master/src/vulnerability-details-format.json

code

"code_snippet": {
  "type": "code",
  "value": "<h1>Hi Daniel!</h1>",
  "lang": "HTML"
}

Relevant links

Information that the developer might need to refer to when implementing the issue.

Non-functional requirements

  • Documentation:
  • Feature flag:
  • Performance:
  • Testing:

Implementation plan

  • frontend Add code component
    • Use the shared app/assets/javascripts/vue_shared/components/code_block.vue component for rendering
  • Add specs
Edited by David Pisek