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 | ![]() |
![]() |
Self Managed | ![]() |
![]() |
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
to1
for SaaS, and to0
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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Kos Palchyk