Add Pipelines app to conditionally render in CE

What does this MR do and why?

After we finish with #440195 (closed), i.e. after we merge !143633 (merged) and !143637 (merged), we're now able to migrate other tabs. The migration here is simpler because we just need to conditionally render this tab. In other words: This tab will be hooked to an App that is in CE but will only render in EE.

This implements Add Pipelines app to conditionally render in CE (#371823 - closed):

• Adds PipelineUsageApp to the EE array usageQuotasTabsMetadata
• Adds #js-pipeline-usage-app element under #js-usage-quotas-view only in the EE haml file
• Standardize DOM queries with querySelector method and PIPELINES_TAB_METADATA_EL_SELECTOR constant

Screenshots or screen recordings

The View currently in .com	After ( FF on )

How to set up and validate locally

We need to validate this in 4 scenarios:

1. GitLab EE Unlicensed: this is probably how your GDK is right now. If you have a license in your GDK, remove it in https://gdk.test:3443/admin/subscription
2. GitLab EE: by having a test license in your GDK.
3. GitLab SaaS: setup a license like the above and simulate SaaS
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: https://gdk.test:3443/groups/flightjs/-/usage_quotas and check if your local setup matches the expected behavior.

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

Expected behavior:

GitLab Distribution	Expected behavior FF off	Expected behavior FF on
GitLab EE Unlicensed	Renders a 404 page	Renders the pipeline and storage tab
GitLab EE	Loads the page normally, hiding SaaS UI (e.g. the right hand side card in Namespace overview)	Renders the pipeline and storage tab
GitLab SaaS	Page loads normally, like it is on master/GitLab.com	Renders the pipeline and storage tab
GitLab CE	Renders a 404 page	Renders only the storage tab

Generate mock data

To generate mock data, you can inspire in the script below, that uses a group (id 76) and 2 projects (ids 21 and 23):

mock data

# ------- Namespace's data ------------

Ci::Minutes::NamespaceMonthlyUsage.new(namespace_id: 76, date: Date.new(2021, 8, 01), amount_used: 20, shared_runners_duration: 30).save
Ci::Minutes::NamespaceMonthlyUsage.new(namespace_id: 76, date: Date.new(2021, 9, 01), amount_used: 40, shared_runners_duration: 30).save

Ci::Minutes::NamespaceMonthlyUsage.new(namespace_id: 76, date: Date.new(2022, 9, 01), amount_used: 40, shared_runners_duration: 30).save
Ci::Minutes::NamespaceMonthlyUsage.new(namespace_id: 76, date: Date.new(2022, 12, 01), amount_used: 80, shared_runners_duration: 30).save

Ci::Minutes::NamespaceMonthlyUsage.new(namespace_id: 76, date: Date.new(2023, 2, 01), amount_used: 100, shared_runners_duration: 30).save
Ci::Minutes::NamespaceMonthlyUsage.new(namespace_id: 76, date: Date.new(2023, 6, 01), amount_used: 180, shared_runners_duration: 30).save
Ci::Minutes::NamespaceMonthlyUsage.new(namespace_id: 76, date: Date.new(2023, 8, 01), amount_used: 200, shared_runners_duration: 80).save



# ------- Projects' data ------------


Ci::Minutes::ProjectMonthlyUsage.new(project_id: 21, date: Date.new(2021, 8, 01), amount_used: 10, shared_runners_duration: 10).save
Ci::Minutes::ProjectMonthlyUsage.new(project_id: 23, date: Date.new(2021, 8, 01), amount_used: 10, shared_runners_duration: 20).save

Ci::Minutes::ProjectMonthlyUsage.new(project_id: 21, date: Date.new(2021, 9, 01), amount_used: 10, shared_runners_duration: 10).save
Ci::Minutes::ProjectMonthlyUsage.new(project_id: 23, date: Date.new(2021, 9, 01), amount_used: 30, shared_runners_duration: 20).save



Ci::Minutes::ProjectMonthlyUsage.new(project_id: 21, date: Date.new(2022, 9, 01), amount_used: 20, shared_runners_duration: 20).save
Ci::Minutes::ProjectMonthlyUsage.new(project_id: 23, date: Date.new(2022, 9, 01), amount_used: 20, shared_runners_duration: 10).save

Ci::Minutes::ProjectMonthlyUsage.new(project_id: 21, date: Date.new(2022, 12, 01), amount_used: 20, shared_runners_duration: 10).save
Ci::Minutes::ProjectMonthlyUsage.new(project_id: 23, date: Date.new(2022, 12, 01), amount_used: 60, shared_runners_duration: 20).save



Ci::Minutes::ProjectMonthlyUsage.new(project_id: 21, date: Date.new(2023, 2, 01), amount_used: 20, shared_runners_duration: 10).save
Ci::Minutes::ProjectMonthlyUsage.new(project_id: 23, date: Date.new(2023, 2, 01), amount_used: 80, shared_runners_duration: 20).save

Ci::Minutes::ProjectMonthlyUsage.new(project_id: 21, date: Date.new(2023, 6, 01), amount_used: 80, shared_runners_duration: 20).save
Ci::Minutes::ProjectMonthlyUsage.new(project_id: 23, date: Date.new(2023, 6, 01), amount_used: 100, shared_runners_duration: 10).save

Ci::Minutes::ProjectMonthlyUsage.new(project_id: 21, date: Date.new(2023, 8, 01), amount_used: 100, shared_runners_duration: 20).save
Ci::Minutes::ProjectMonthlyUsage.new(project_id: 23, date: Date.new(2023, 8, 01), amount_used: 100, shared_runners_duration: 60).save

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.

app/assets/javascripts/usage_quotas/group_view_metadata.js

@@ -10,6 +10,7 @@ export const usageQuotasViewProvideData = {
 export const storageTabMetadata = {
   title: __('Storage'),
   component: NamespaceStorageApp,
+  shouldRender: () => document.querySelector(STORAGE_TAB_METADATA_EL_SELECTOR),
 };
 
 export const usageQuotasTabsMetadata = [storageTabMetadata];