Add initial project storage ui
What does this MR do?
Relates to #334885, #334886, #334887
This MR adds the initial UI for the Project Storage, being it the headline (#334885) and table (#334886, #334887)
There were a lot of discussions in the initial design and in the epic, and some decisions were made that don't reflect what you see in the design, so I'll summarize them here
- In this first iteration, we will simplify the design to condense the storage by category into one bar and one table of data, because Repository Storage is just 1 item in the storage statistics and cannot be broken down into subitems as the design suggests
- GraphQL field reference: ProjectStatistics
- Since we have 1 table and 1 bar now, we haven't decided on what to put in the headline (title + subtitle + learn more link + total storage used). So in this implementation I just copied what we have in the
Group usage quotas
. This decision was based on the epic description which states "We should re-use the view as-is for the first iteration and then build on that to improve the storage view in both the group level and the project level." - Icons or not: "Let's keep it minimal since there isn't a clear direction yet and proceed without icons. We can add them as a follow-on iteration shortly after." https://gitlab.com/gitlab-org/gitlab/-/issues/321429/designs/initial.png#note_599268344
- Description for storage type: https://gitlab.com/groups/gitlab-org/-/epics/6264#note_615221560
- Where should the link for the storage type go: We haven't decided yet (https://gitlab.com/gitlab-org/gitlab/-/issues/321429/designs/initial.png#note_609925769) And we don't know that we have a "how to reduce the size" topic for each of these storage types (https://gitlab.com/groups/gitlab-org/-/epics/6264#note_615221549) "So in the design, I think these can probably just be question marks next to each storage type."
Screenshots or Screencasts (strongly suggested)
Group Usage Quotas (inspiration page) | Project Usage Quotas |
---|---|
How to setup and validate locally (strongly suggested)
- Enable
project_storage_ui
feature flag. Go torails console
and execute the following:Feature.enable(:project_storage_ui)
- Visit
/<namespace>/<project>/-/usage_quotas
on a project you havemaintainer
permission
Does this MR meet the acceptance criteria?
Conformity
-
I have included changelog trailers, or none are needed. (Does this MR need a changelog?) -
I have added/updated documentation, or it's not needed. (Is documentation required?) -
I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?) -
I have added information for database reviewers in the MR description, or it's not needed. (Does this MR have database related changes?) -
I have self-reviewed this MR per code review guidelines. -
This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines) -
I have followed the style guides. -
This change is backwards compatible across updates, or this does not apply.
Availability and Testing
-
I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.) -
I have tested this MR in all supported browsers, or it's not needed. -
I have informed the Infrastructure department of a default or new setting change per definition of done, or it's not needed.
Edited by Ammar Alakkad