Pin scanner alert to the top of the Vulnerability Reports page

Problem:

We are presenting the scanner alert within the table of the vulnerability report when they should be surfaced at the page level.

Background:

Coming from the work done in !55188 (merged)

following discussion:

The following discussion from !55188 (merged) should be addressed:

  • @svedova started a discussion: (+1 comment)

    @andyvolpe can you please check whether UX wise this looks good? I had to change the position of the error box and move it inside the card component because otherwise it becomes hard to calculate the sticky positions and there is a margin below the gl-alert component which makes it look a bit weird:

    before after
    Screenshot_2021-02-25_at_15.36.07 fixed-with-error

Proposal

Move the scanner alert to the top of the page. See designs below:

Implementation plan

  • frontend Move the logical location of the alert from the VulnerabilityList component to the ProjectVulnerabilities component, since the data that determines whether to show the alert is fetched by the ProjectVulnerabilities component, and not the VulnerabilityList
  • frontend Render the alert at the top of the page via the portal-vue library, which is already a transitive dependency via @gitlab/ui.
Edited by Mark Florian