Skip to content

[FE] Render generic report data on vulnerability details page

Why are we doing this work

James Johnson created a proof-of-concept MR (!41783 (closed)) that allows a user to add their own 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. The type is used to format the data in a certain way, so for example if the data is:

"diff": {
  "name": [ { "lang": "en", "value": "Modified data" } ],
  "description": [ { "lang": "en", "value": "How the data was modified" } ],
  "type": "diff",
  "before": "Hello there\nHello world\nhello again",
  "after": "Hello there\nHello Wooorld\nanew line\nhello again\nhello again"
}

the frontend will render it as:
ksnip_20210216-222428

Another example:

"code_block": {
  "name": [ { "lang": "en", "value": "Code Block" } ],
  "type": "code",
  "value": "Here\nis\ncode"
}
ksnip_20210216-222638

This generic report data will be added to the vulnerability data as its details property:

https://gitlab.com/-/snippets/2078235/raw/master/gl-sast-report.json

Task

Modify the vulnerability details page so that it will show the generic report data with the proper formatting.
Example data https://gitlab.com/-/snippets/2078235/raw/master/gl-sast-report.json
Example screenshots See screenshots in MR description: !41783 (closed)
Design mock-ups #267193 (closed)

NOTE - please consider this discussion about the hover state of the expandable/collapsible sections during refinement/implementation.

The caret and header are clickable. It's very likely that the hover state on this will highlight the entire background of the line where the caret and header are. If it doesn't then it should!

Implementation plan

Most of the code can be copy-pasted from James Johnson's MR: !41783 (diffs), but needs to be modified to work with our current code and to match the design mock-ups.

  • Modify vulnerability_details.vue to render the generic report data

Rendering of the following types has been moved into #324891 (closed)

  • list.vue
  • named_list.vue
  • url.vue

Rendering of these remaining types has been moved into #324892 (closed)

  • code.vue
  • commit.vue
  • diff.vue
  • file_location.vue
  • int.vue
  • markdown.vue
  • module_location.vue
  • table.vue
  • text.vue
  • label.vue
  • details.vue
Edited by Lindsay Kerr