PipelinesUsageApp: Buy Additional Minutes button
What does this MR do and why?
Relates to: https://gitlab.com/gitlab-org/gitlab/-/issues/345373
As part of the bigger effort to have a common layout for Usage Quotas we need to migrate the pipelines tab to vue
.
For this MR we create the Vue app and add the button to Buy Additional Minutes
Screenshots or screen recordings
Before | After |
---|---|
How to set up and validate locally
- Apply this patch to inject
PipelinesUsageApp
in the Usage Quotas page: pipelines-vue-patch.patch- Download the file then
git apply ~/path/to/file/pipelines-vue-patch.patch
- Download the file then
- Navigate to the Usage Quotas page, e.g.: http://gdk.test:3000/groups/flightjs/-/usage_quotas#pipelines-quota-tab
- Check that the button is working fine
- It should appear if you restart gdk with
export GITLAB_SIMULATE_SAAS=1
- It should NOT appear if your GDK is behaving as Self-Managed
- It should appear if you restart gdk with
Tag Manager Functionality
There is a tracking event added to this button in !80691 (merged) and we want to make sure it's working fine. This only works in the Profile Usage Quotas (http://gdk.test:3000/-/profile/usage_quotas#pipelines-quota-tab)
- Tracking in vue (new version)
- Keep the patch mentioned above, perform the steps below and make sure all is fine
- Tracking in haml (current version)
- Remove the patch mentioned above, perform the steps below and make sure all is fine
- Testing Google Tag Manager
-
Follow the steps here to create a new GTM account if you don't have one
-
In
gitlab.yml
, add a your GTM ID in theextra
block for both thegoogle_tag_manager_id
andgoogle_tag_manager_nonce_id
values. Make sure to restart GDK (or do this step prior to starting GDK) for settings to take effect.extra: google_tag_manager_id: 'GTM-YOURIDHERE' google_tag_manager_nonce_id: 'GTM-YOURIDHERE'
-
Enable the following feature flags
Feature.enable(:gitlab_gtm_datalayer) Feature.enable(:ecomm_instrumentation) Feature.enable(:gtm_nonce)
-
Open the Google Tag Assistant and point it to http://gdk.test:3000/-/profile/usage_quotas#pipelines-quota-tab 1. Click
Buy Additional Minutes
-
Check the
dataLayer
tab in the tag assistant and verify theecommerce
event is firing -
Repeat steps 4 and 5 with http://gdk.test:3000/groups/flightjs/-/usage_quotas#pipelines-quota-tab to make sure we don't fire this event in the Group's Usage Quotas
-
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.