Bring the cards design on Usage Quotas Pipelines to currently used in other tabs

Kos Palchykrequested to merge
350787-fe-use-shared-component-for-designs into master

What does this MR do and why?

Migrates Usage Quotas overview cards to a shared component, that has shared style across Usage Quotas.

Resolves #350787 (closed), addresses #503378 (closed)

(hopefully) Addresses failing specs in https://gitlab.com/gitlab-org/customers-gitlab-com/-/issues/11191#note_2206238359

References

Please include cross links to any resources that are relevant to this MR This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
default image image
unused units image image
unlimited units image.png image
shared runners are disabled image.png image
with purchased units image.png image
with purchased units unused image.png image
loading (no change) image.png image
error (no change) image.png image

Mobile view:

Cards stack on the mobile view:

image.png

How to set up and validate locally

Easy mode: Storybook

This MR contains two commits: first adds more stories to test the functionality (HEAD~1), and the second is the refactoring.

  1. start Storybook via npm run storybook:start
  2. open http://localhost:9002/?path=/story/ee-usage-quotas-pipelines-app--default
  3. try comparing this version to git checkout HEAD~1 to see that there are no changes

Real mode:

  1. simulate SaaS
  2. open Usage Quotas view at the pipelines tab (e.g. http://localhost:3000/groups/gitlab-org/-/usage_quotas#pipelines-quota-tab)
  3. verify that the tab looks similarly to the master branch
Edited by Kos Palchyk

Merge request reports