Auto-Remediation - Show available solutions in Project Security Dashboard - Add remediation MRs information to the activity column [parent issue]

• Main issue: #258800 (closed)

Summary

In this second iteration, we'll show detailed information about available solutions in the Project Security Dashboard's activity column. At this stage, we'll want to add a MR icon next to vulnerabilities that have open remediation MRs. Hovering the icon should open a popover containing links to the MRs as well as a visual distinction between manually opened MRs and ones that were opened by the security bot.

Designs

Refer to the design issue: #235126 (closed)

Implementation plan

backend issue	frontend issue
#258810 (closed)	#258811 (closed)

Decisions

GraphQL

Query for fetching vulnerabilities with merge requests and auto-fix status

{
  vulnerability(id: "gid://gitlab/Vulnerability/113" )  {
    title
    hasSolutions
    mergeRequest {
      webUrl
      state
      securityAutoFix
      iid
    }
  }
}

Output

{
  "data": {
    "vulnerability": {
      "title": "Modification of Assumed-Immutable Data (MAID) in lodash",
      "hasSolutions": true,
      "mergeRequest": 
      {
        webUrl: "https://gitlab.com/gitlab-org/gitlab/-/merge_requests/48820",
        state: "opened",
        securityAutoFix: true,
        iid: 48820
      }
    }
  }
}

possible responses for the State field (MergeRequestState)

• closed
• locked
• merged
• opened

Updates of schema

• 2020/12/14 Removed MergeRequestLinks in favor of simple MergeRequest cause we have only one MR associated with vulnerability
• 20202/12/15 Changed MR fields: url -> webUrl, status -> state, id -> iid, autoFix -> securityAutoFix

PM Notes

An OKR is to make sure everything is pajamas, can we make sure to use pajamas and if pajamas doesn't have a pattern for what we are adding, contribute one? this may make this a heavier weight but as an OKR it's a high priority.