Update project CI badges to be Pajamas compliant

Release notes

Our project overview pages include badges that provide a summary of various CI aspects, such as code coverage, most recent pipeline status, or last release. These badges are not up-to-date with Pajamas standards and are not always clear. They are also not accessible at the moment because of the color contrast. We are updating these to Pajamas badges and adding more helpful information to make them consistent with the ways we present that information elsewhere in the UI.

Problem to solve

Our project overview pages include badges that provide a summary of various CI aspects, such as code coverage, most recent pipeline status, or last release. These badges are not up-to-date with Pajamas standards and are not always clear. They are also not accessible at the moment because of the color contrast.

We use the following hex values to represent different test coverage percentage intervals (see documentation). Users can configure these if they'd like:

STATUS_COLOR = {
          good: '#4c1',
          acceptable: '#a3c51c',
          medium: '#dfb317',
          low: '#e05d44',
          unknown: '#9f9f9f'

And for pipeline statuses:

STATUS_COLOR = {
          success: '#4c1',
          failed: '#e05d44',
          running: '#dfb317',
          pending: '#dfb317',
          preparing: '#a7a7a7',
          canceled: '#9f9f9f',
          skipped: '#9f9f9f',
          unknown: '#9f9f9f'

And release status:

STATUS_COLOR = {
          latest: '#3076af',
          none: '#e05d44'

None of these pass WCAG AA accessibility for color contrast as a background color with #FFFFFF as the foreground color.

Intended users

All personas can see and access these. The following personas will most likely interact with them more often than others:

• Sasha (Software Developer)
• Devon (DevOps Engineer)
• Delaney (Development Team Lead)

User experience goal

Migrating old components over to Pajamas and improving accessibility and consistency.

Proposal

• Convert the current "badges" to use Pajamas badges
• Update scoped badges to match #344231[Project_test_coverage.png], such as Pipeline: failed, Coverage: unknown
• Include icons to indicate the coverage status, as shown in #344231[Code-coverage-badges.png]
• Include icons to indicate the pipeline status, as shown in #344231[Pipeline-badges.png]

🎨 Designs: Design management screens 1-4

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

Further details

Permissions and Security

Documentation

Availability & Testing

Available Tier

Feature Usage Metrics

What does success look like, and how can we measure that?

What is the type of buyer?

Is this a cross-stage feature?

Links / references

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.