Right now, users of GitLab can access their Usage Quotas in 3 scenarios: 1. **Group** Usage Quotas: `https://gitlab.com/groups/<group-id>/-/usage_quotas` 1. **Project** Usage Quotas: `https://gitlab.com/<group-id>/<project-id>/-/usage_quotas` 1. **Profile**/**User Namespace** Usage Quotas: https://gitlab.com/-/profile/usage_quotas The ~UX of these pages is very similar, so this epic was created to standardize the code behind them. This will reduce code duplication; improve developer experience, by having "a standard way" of creating new quota views; more maintainability, since each tab would follow the same code architecture; and provide a better distinction of what is a Community Edition feature, and what belongs to Enterprise Edition. More details in the [goals section](#goals). In order to achieve this long-term goal, we've divided the work into 3 phases: * [Phase 1 :white_check_mark:](#phase-1-white_check_mark) - Concentrate the code related to `Usage Quotas` in one directory. * [Phase 2 :white_check_mark:](#phase-2-white_check_mark) - Move ~frontend code that's in `HAML` to `Vue`, making all ~frontend code related to `Usage Quotas` Vue Applications. * [Phase 3 :white_check_mark:](#phase-3-white_check_mark) - Create the `Usage Quotas` layout app, which will render each tab depending on the context. <details><summary><strong>Historical context</strong></summary> During the work of creating the Usage Quotas page for projects https://gitlab.com/groups/gitlab-org/-/epics/6264 we've identified an opportunity to have a shared layout for all Usage Quotas pages https://gitlab.com/gitlab-org/gitlab/-/issues/339846. The work has been promoted to this epic. The goal is to have a `layout` app that would be shared used by these pages, and we'd hook each tab and its app based on which quota we'd be presenting: Group, Project, Profile. </details> ## Goals 1. Have all ~frontend code related to Usage Quotas in a single place :white_check_mark: Subgoals: - Reduce code duplication - Improve developer experience by having all the code of the page in one directory - Mitigate future code duplication - Reuse components between apps and pages whenever we can - :chart_with_upwards_trend: We can see that the completion of this phase has already paid some dividends, by noticing that [new tabs have been developed](https://gitlab.com/gitlab-org/gitlab/-/blob/b44b5613/ee/app/views/groups/usage_quotas/index.html.haml#L26) and their ~frontend code is [concentrated in the `usage_quotas` directory](https://gitlab.com/gitlab-org/gitlab/-/tree/b44b5613/ee/app/assets/javascripts/usage_quotas) 1. Have all ~frontend code related to Usage Quotas written in Vue :white_check_mark: Subgoals: - Reduce code duplication - Improve developer experience by relying less on `ruby` knowledge to develop UI - Pave the way to other improvements, such as https://gitlab.com/gitlab-org/gitlab/-/merge_requests/121878 1. Create a shared layout for Usage Quotas to be shared between Project, Group and Profile/User Usage Quotas :white_check_mark: Subgoals: - All the above subgoals - Make developer experience smoother, by having "a standard way" of creating new quota views/tabs - Have less Vue Apps by making each tab a component under the Layout App tree - With a centralized approach (one Vue App) we'll have more control of: - Events to be fired when a given tab is active (e.g.: GraphQL calls) - Reduce duplication of data requested to the ~backend if this data is used amongst other tabs - By creating this `layout app` in the `CE` directory, we enable `Usage Quotas` for all editions, making it easier to develop features that belongs to both `EE` and `CE`, and features that are `EE` only. ## Phase 1 :white_check_mark: The initial work is to concentrate all code related to `Usage Quotas` in one directory. At the time of completion of this phase we've migrated the following: * Seats: * `ee/app/assets/javascripts/seat_usage` -> `ee/app/assets/javascripts/usage_quotas/seats` * Pipeline: * `ee/app/views/namespaces/pipelines_quota/_list.haml` -> `ee/app/assets/javascripts/usage_quotas/pipeline` * Storage: * `ee/app/assets/javascripts/storage_counter` -> `ee/app/assets/javascripts/usage_quotas/storage` * `app/assets/javascripts/projects/storage_counter` -> `ee/app/assets/javascripts/usage_quotas/storage` We can see that the completion of this phase has already paid some dividends, by noticing that [new tabs have been developed](https://gitlab.com/gitlab-org/gitlab/-/blob/b44b5613/ee/app/views/groups/usage_quotas/index.html.haml#L26) and their ~frontend code is [concentrated in the `usage_quotas` directory](https://gitlab.com/gitlab-org/gitlab/-/tree/b44b5613/ee/app/assets/javascripts/usage_quotas) <details><summary><h4>Issue Breakdown</h4></summary> | Description | Issue | | ------ | ------ | | Create common folder under `ee/assets/javascripts/usage_quotas`, move shared components there | https://gitlab.com/gitlab-org/gitlab/-/issues/346506 | | Move whatever is related to `storage_counter` to `ee/assets/javascripts/usage_quotas/storage` and reuse the most we can | https://gitlab.com/gitlab-org/gitlab/-/issues/346530 | | Add help links to group storage quotas | https://gitlab.com/gitlab-org/gitlab/-/issues/346531 | | Move `vue_shared/components/storage_counter` to `assets/javascripts/usage_quotas/storage` | https://gitlab.com/gitlab-org/gitlab/-/issues/346532 | | Move `seat usage` to `ee/assets/javascripts/usage_quotas/seats` | https://gitlab.com/gitlab-org/gitlab/-/issues/346533 | | Move pipeline from HAML to vue -> `ee/assets/javascripts/usage_quotas/pipeline` | https://gitlab.com/gitlab-org/gitlab/-/issues/345373 | </details> ## Phase 2 :white_check_mark: We have the code for the whole UI in one directory except for the `pipelines` tab, which was implemented in `HAML`. This phase entails the convertion this piece of UI to Vue so we can successfully implement a Shared Layout App. This work was under `usage_quotas_pipelines_vue` Feature Flag. The completion of this phase has paved the way to other improvements, such as https://gitlab.com/gitlab-org/gitlab/-/merge_requests/121878 <details><summary><h4>Issue Breakdown</h4></summary> | Description | Issue | | ------ | ------ | | Refactor 'pipeline usage quota' into Vue | https://gitlab.com/gitlab-org/gitlab/-/issues/345373 | | Update pipelines vue app to have feature parity with current haml view | https://gitlab.com/gitlab-org/gitlab/-/issues/370020 | | [Feature flag] Enable Usage Quotas Pipelines in Vue | https://gitlab.com/gitlab-org/gitlab/-/issues/360785 | | [Feature flag] Cleanup `usage_quotas_pipelines_vue` | https://gitlab.com/gitlab-org/gitlab/-/issues/360784 | </details> There's a retrospective of this effort in https://gitlab.com/gitlab-org/gitlab/-/issues/360784#note_1210289174 if you want to check it out. ## Phase 3 :white_check_mark: Now that finally we have everything related to `Usage Quotas` in `Vue` it's time to move the relevant code to the `/app` directory so we can enable this feature for all GitLab editions. This work is under `usage_quotas_for_all_editions` Feature Flag. ### Goals 1. Have a Layout Vue app in `/app` directory (a.k.a. `Core`) so all GitLab Editions can benefit from viewing their Usage Quotas. 1. Render each tab depending on the GitLab Edition: * Today only the **Storage** tab is relevant for both `EE` and `CE`. We need to split `EE` features (e.g. purchase storage) to be rendered according to the GitLab Edition/Offering. This has been done in https://gitlab.com/gitlab-org/gitlab/-/issues/371824 and https://gitlab.com/gitlab-org/gitlab/-/issues/352624 1. Render each tab depending on `context`, for example: * We have **storage** tab available in `Group`, `UserNamespace`, and `Project` Usage Quotas pages * **Pipelines** tab is only relevant for `Group` and `UserNamespace` Usage Quotas pages * The **seats** tab, and [some other tabs](https://gitlab.com/gitlab-org/gitlab/-/blob/a5d687b0/ee/app/views/groups/usage_quotas/index.html.haml#L25) are only relevant for `Group` <details><summary><h4>Issue Breakdown</h4></summary> #### Preparation for the migration | Description | Issue | | ------ | ------ | | Create Feature Flag | https://gitlab.com/gitlab-org/gitlab/-/issues/371606 | | Add read_usage_quotas ability to GroupPolicy | https://gitlab.com/gitlab-org/gitlab/-/issues/357000 | #### Place `CE` code in `/app` | Description | Group Issue | Project Issue | Profile Issue | | ------ | ------ | ------ | ------ | | Create Usage Quotas view in CE | https://gitlab.com/gitlab-org/gitlab/-/issues/371820 / https://gitlab.com/gitlab-org/gitlab/-/issues/385896 | created in https://gitlab.com/groups/gitlab-org/-/epics/6264 | https://gitlab.com/gitlab-org/gitlab/-/issues/385653 | | Create Vue app in CE | https://gitlab.com/gitlab-org/gitlab/-/issues/371821 | https://gitlab.com/gitlab-org/gitlab/-/issues/440191 | https://gitlab.com/gitlab-org/gitlab/-/issues/440192 | | Move storage app to CE | https://gitlab.com/gitlab-org/gitlab/-/issues/371824 | https://gitlab.com/gitlab-org/gitlab/-/issues/352624 | N/A (Uses the same Group Vue App) | #### Integrate each tab into the new [Usage Quotas Layout App](https://gitlab.com/gitlab-org/gitlab/-/blob/f4ae910d/app/assets/javascripts/usage_quotas/components/usage_quotas_app.vue) | Description | Issue | | ------ | ------ | | Add Storage tab to render both in CE and EE | https://gitlab.com/gitlab-org/gitlab/-/issues/440195 | | Add Pipelines app to conditionally render in CE | https://gitlab.com/gitlab-org/gitlab/-/issues/371823 | | Add Seats app to conditionally render in CE | https://gitlab.com/gitlab-org/gitlab/-/issues/371822 | | Add Transfer tab/app to conditionally render in CE | https://gitlab.com/gitlab-org/gitlab/-/issues/393443 | | Add Code Suggestions Tab (Duo Pro) to conditionally render in CE | https://gitlab.com/gitlab-org/gitlab/-/issues/440193 | | Add Product analytics Tab to conditionally render in CE | https://gitlab.com/gitlab-org/gitlab/-/issues/440194 | #### Final pieces of work and rollout | Description | Issue | | ------ | ------ | | Make Usage Quotas Layout App render tab based on URL hash | https://gitlab.com/gitlab-org/gitlab/-/issues/441171 | | Rename `usage_quotas` feature to `licenced_usage_quotas` | https://gitlab.com/gitlab-org/gitlab/-/issues/384893 | | [Feature flag] Rollout of `usage_quotas_for_all_editions` | https://gitlab.com/gitlab-org/gitlab/-/issues/371639 | | [Feature flag] Cleanup usage_quotas_for_all_editions | https://gitlab.com/gitlab-org/gitlab/-/issues/347125 | </details> ## Follow-up Once we've finished with this refactoring, other opportunities for improvement might surface. They'll be documented in https://gitlab.com/groups/gitlab-org/-/epics/13389+