Skip to content

[FE] Render generic report data on pipeline security report modal

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 modal launched from the Pipeline Security Report 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

  • ...
Edited by Lindsay Kerr