Design: Project Quality Summary Empty state

🧩 Problem

Based on #337307 (closed), we will be adding a new project quality summary feature to the Analytics --> CI/CD page with metrics around different testing features.

We are delivering #341972 (closed), which places the tab with an empty page.

For this case, and for future cases where the testing features may not be set up and therefore contain no metrics, we should come up with an empty state pattern to bring more awareness to the testing features and provide users with instructions of how to set up the features.

💡 Proposal

🎨 Designs: Screens 1, 2 and 3 in design management below

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

Scenarios / Use cases

Scenario 1: My project has no tests set up nor any testing features, when I come to the project quality page, I want to be prompted to set them up so I can see the project metrics.

  • Design: #344322 (closed)Project_quality_stats_-full_empty-_limited_features.png

Scenario 2: My project has tests, but no other testing features, when I come to the project quality page, I want to see the metrics for my test executions, but also want to be prompted to set other features up that exist.

Scenario 3: My project has no tests set up nor any testing features, when I come to the project quality page, I want to be prompted to set up testing features that are available as well as learn about testing features and how they can help me.

Acceptance criteria

Illustrations

Set up / Learn more links

Edited by Gina Doyle