Create usage quotas Vue app

What does this MR do and why?

This implements Create Vue app in CE (#371821 - closed) for Group Usage Quotas

Here we create a Vue app that will (in future MRs) render/render-if-exists the tabs (storage, pipelines, seats).

MR Cadence

Description	MR
Move :read_usage_quotas policy to Core app	!103021 (merged)
Create Usage Quotas route/controller/view in Core	!102906 (merged)
Add menu entry on sidebar	!106083 (merged)
Create usage quotas Vue app	👈 you're here
Move Storage App to Core: Backend and initial frontend	!108332 (closed)
Move storage app to Core: namespace vue app	!108333 (closed)

Screenshots or screen recordings

EE and SaaS

FF off	FF on

EE unlicensed

• Removing your license in: http://gdk.test:3000/admin/subscription

FF off	FF on

CE

export FOSS_ONLY=1 && gdk restart

FF off	FF on

How to set up and validate locally

We need to validate this in 4 scenarios:

1. GitLab EE: by having a test license in your GDK.
2. GitLab SaaS: setup a license like the above and simulate SaaS
3. GitLab EE Unlicensed: by removing your license in http://gdk.test:3000/admin/subscription
4. GitLab CE: by executing
   1. export FOSS_ONLY=1
   2. gdk restart
   3. Tanuki gdk website icon (the one in the browser tab) should be blue, then you're in CE

Now go to any Group Usage Quotas: http://gdk.test:3000/groups/flightjs/-/usage_quotas and check if your local setup matches the screenshots.

• To enable the FF: Feature.enable(:usage_quotas_for_all_editions)
• To disable the FF: Feature.enable(:usage_quotas_for_all_editions)

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.