[FE] Spike on "security" for group dashboard

What does this MR do and why?

There is no chart data for this, so no SVG required. Here's all the information needed to create the PDF.

JSON Payload Proposal

The data will be dynamic and reflect the current UI selection. Example:

{
  "title": "Project security status",
  "groups": [
    {
      "grade": "F",
      "projectCount": 6,
      "projects": []
    },
    {
      "grade": "D",
      "projectCount": 1,
      "projects": []
    },
    {
      "grade": "C",
      "projectCount": 1,
      "projects": [
        {
          "name": "Gitlab Terraform Eks",
          "href": "/secure-ex/gitlab-terraform-eks/-/security/dashboard",
          "mostSevereVulnerability": "2 medium"
        }
      ]
    },
    {
      "grade": "B",
      "projectCount": 0,
      "projects": []
    },
    {
      "grade": "A",
      "projectCount": 1,
      "projects": []
    }
  ]
}

❓ Question

Similar to this other spike, I am worried that the FE is sending too many redundant data which could hurt request speed. Since the BE is able to retrieve all the necessary data, perhaps what is really needed is the active expanded severity?

{
   "title": "Project security status", // Static data: We can discuss what's a better identifier name
   "isExpanded": "C" // Dynamic data, reflects what the user has expanded
}

Related to #541937 (closed)