Skip to content

Move Storage App to Core: namespace vue app

Sheldon Led requested to merge led/371824-move-storage-app-core-namespace into led/371824-move-storage-app-core-backend

What does this MR do and why?

This implements Move storage app to CE (#371824 - closed)

This is the second MR moves the storage app in the Usage Quotas page to the Core codebase, so we can make it available for all editions.

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 !107359 (merged)
Reorganize Backend code for storage tab !109806 (merged)
Move Storage App to Core: initial frontend !108332 (closed)
Move storage app to Core: namespace vue app 👈 you're here

What's being changed here

The diff tab looks overwhelming but most of if are directory moves:

Before After
CE Directory: /app usage_quotas_ce_dir_before CE Directory: /app usage_quotas_ce_dir_after
EE Directory: /ee/app usage_quotas_ee_dir_before EE Directory: /ee/app usage_quotas_ee_dir_after

Most files were just moved but a few had changes in their content. Here I'll try to summarize the diff:

  • ~/usage_quotas/components/usage_quotas_app.vue: The new View is now rendering the NamespaceStorageApp
  • ~/usage_quotas/storage/components/namespace_storage_app.vue: changed to conditionally render ee features
  • ~/usage_quotas/storage/components/project_list.vue: updated import path
  • ~/usage_quotas/storage/components/storage_statistics_card.vue: updated import path
  • ~/usage_quotas/storage/components/storage_usage_statistics.vue: This is the CE version of this component. We basically removed all references to purchase/limits (SaaS-only feature) and only show the stats. We use ee_else_ce strategy to determine which version of this component to import
  • ~/usage_quotas/storage/queries/namespace_storage.query.graphql: Same as above, we removed any SaaS-only attribute and use ee_else_ce strategy to determine which version of this component to import
  • ~/usage_quotas/storage/constants.js: moved the remaining constants that are used in CE
  • ~/usage_quotas/storage/utils.js: moved the remaining constants that are used in CE
  • ~/usage_quotas/index.js: removed not used flag and reorganize provide data to similar order as the backend helper method
  • ee/usage_quotas/seats/components/subscription_seats.vue: updated import now that search_and_sort_bar has been moved to CE
  • ee/usage_quotas/storage/components/storage_inline_alert.vue: updated import
  • ee/usage_quotas/storage/components/storage_usage_statistics.vue: updated imports
  • ee/usage_quotas/storage/queries/namespace_storage.query.graphql: Since the query names have to be unique I'm giving this one a different name
  • ee/usage_quotas/storage/constants.js: Moving all constants to CE except the EE-only ones
  • ee/usage_quotas/storage/init_namespace_storage.js: this is the legacy app loader. Updated import
  • ee/usage_quotas/storage/utils.js: Moving all constants to CE except the EE-only ones
  • ee/spec/frontend/usage_quotas/**_spec.js: Updated imports. I tried moving the specs to CE (you can check out the code here or locally by pulling led/371824-move-storage-app-core-namespace-with-tests) but failed miserably 😅 The tests are heavily EE specific. For now we can leave the tests as is, because it is testing the CE code, however we need to add tests for the CE scenario. I've created #390951 to cater this piece of work

Screenshots or screen recordings

More details on each screenshot in the issue #371824 (closed)

Enterprise Edition SaaS EE Unlicensed Community Edition
ee_usage_quotas saas_usage_quotas eeu_usage_quotas ce_usage_quotas

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.

Edited by Sheldon Led

Merge request reports