Design: Project Quality Summary iterations

MVC Proposal

🎨 Designs: Screens 1 and 2 in design management below

🖌 Figma file: https://www.figma.com/file/RAA4AmQIY4aHhP8NvunbBj/Testing---Project-Quality-Summary?node-id=325%3A11381

This is the design issue for the Project Quality Summary MVC UI implementation issue. Based on feedback in solution validation and from UX designers, we should focus on following the criteria below:

Acceptance criteria

Applies to all cards

• Show all metrics based on the latest pipeline results
• Add question-circle icons to each card header with more information in a popover on what each means (see #337307[Popover.png] for content that lives within it)

Test runs

• Test runs include percentage of successful tests, failed tests and skipped tests
• See full report links to https://gitlab.com/gitlab-org/gitlab/-/pipelines/396801566/test_report for the latest pipeline

Test coverage

• Test coverage includes percentage of test coverage
• See project Code Coverage Statistics links to https://gitlab.com/gitlab-org/gitlab/-/graphs/master/charts
• The addition of the badge should only be added if #344231 (closed) is completed beforehand. We will only show the percentage if that is not completed.
• If test coverage is not set up, show the empty state

Saved for later iterations

Adding Code Quality

• Limiting the Code Quality violations to Critical and High and reflecting that in the UI is much more actionable for users so let's make that change.

Links to explore other features

• Add different versions of empty states to set up testing features OR explore them:
  • See #344322 (closed) for more details