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)

1. Enable project_storage_ui feature flag. Go to rails console and execute the following:

   Feature.enable(:project_storage_ui)

2. Visit /<namespace>/<project>/-/usage_quotas on a project you have maintainer 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.

assigned to @sheldonled

restored source branch led/initial-project-storage-ui

changed title from Led/initial project storage ui to Add initial project storage ui

changed target branch from master to led/334884-fetch-project-capacity-usage

changed the description

added frontend label

	3 Warnings
	This merge request is quite big (781 lines changed), please consider splitting it into multiple merge requests.
	af4d71b5: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	featureaddition and featureenhancement merge requests normally have a documentation change. Consider adding a documentation update or confirming the documentation plan with the Technical Writer counterpart. For more information, see: The Handbook page on merge request types. The definition of done documentation.

	1 Message
	CHANGELOG missing: If you want to create a changelog entry for GitLab FOSS, add the Changelog trailer to the commit message you want to add to the changelog. If you want to create a changelog entry for GitLab EE, also add the EE: true trailer to your commit message. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

Reviewer roulette

Changes that require review have been detected!

Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:

Category	Reviewer	Maintainer
backend	Ross Fuhrman (@rossfuhrman) (UTC-5, 6 hours behind @sheldonled)	Heinrich Lee Yu (@engwan) (UTC+8, 7 hours ahead of @sheldonled)
frontend	Samantha Ming (@sming-gitlab) (UTC-7, 8 hours behind @sheldonled)	Vitaly Slobodin (@vitallium) (UTC+3, 2 hours ahead of @sheldonled)

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 2653948a and af4d71b5

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.15 MB	3.15 MB	-1.04 KB	-0.0 %
mainChunk	1.91 MB	1.91 MB	-	-0.0 %

Significant Growth: 1

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.projects.usage_quotas	807.66 KB	947.93 KB	+140.27 KB	17.4 %

Significant Reduction: 3

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.projects.jobs.index	1.16 MB	1.02 MB	-150.54 KB	-12.6 %
pages.groups.wikis	1.29 MB	1.24 MB	-48.82 KB	-3.7 %
pages.projects.compare.show	267.59 KB	258.86 KB	-8.73 KB	-3.3 %

---

Your MR has at least one entrypoint growing significantly (more > 1 KB or 2%). If you write new or extend existing features, this is expected and there is nothing to worry about.

Please consider pinging someone from the FE Foundations (@dmishunov, @justin_ho, @mikegreiling or @nmezzopera) for review, if you are unsure about the size increase.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

Allure report

allure-report-publisher generated test report for af4d71b5!

review-qa-smoke: test report

changed the description

added featureaddition typefeature labels

changed milestone to %14.3

added 110 commits

• 97d60343...8bf70117 - 108 commits from branch led/334884-fetch-project-capacity-usage
• 84764d89 - Address initial suggestions from MR review
• 575478c2 - Add initial project storage UI

Compare with previous version

added 1 commit

• 8b0be2fe - Add initial project storage UI

Compare with previous version

changed the description

changed the description

added 126 commits

• 8b0be2fe...52dab4f6 - 125 commits from branch led/334884-fetch-project-capacity-usage
• 26e98b18 - Add initial project storage UI

Compare with previous version

added backend label

changed the description