Skip to content

Fix loading indicator layout on usage quotas storage

What does this MR do and why?

  • Sets Usage Quotas > Storage cards to be strictly 50% - 50% in size.
  • Fixes the loading indicator card being shrunk on SaaS with project limits view.
  • Adds several stories to Usage Quotas Storage app.

Screenshots or screen recordings

Before After
SaaS With Project Limits Loading image image
Self Managed image image

NOTE: there's a UI change for SM, switching from 100% card view to 50% width card.

How to set up and validate locally

Open a group Usage Quotas page, switch to Storage tab. And check the loading state for SaaS with project limits and an SM instance loaded view.

You can use storybook npm run storybook:start to switch between the states (first commit in this MR adds needed stories) and check relevant stories in http://localhost:9002/?path=/story/ee-usage-quotas-storage-namespace-storage-app--saas-with-namespace-limits

Or you could set the environment on an actual instance:

  • To change SM/SaaS — change env variable GITLAB_SIMULATE_SAAS to 1 for SaaS, and to 0 for SM
  • To add repo limits — go to instance settings (http://localhost:3000/admin/application_settings/general) and set the Size limit per repository (MiB) to something other greater than 0.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Kos Palchyk

Merge request reports