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

1. Apply this patch to inject PipelinesUsageApp in the Usage Quotas page: pipelines-vue-patch.patch
   1. Download the file then git apply ~/path/to/file/pipelines-vue-patch.patch
2. Navigate to the Usage Quotas page, e.g.: http://gdk.test:3000/groups/flightjs/-/usage_quotas#pipelines-quota-tab
3. Check that the button is working fine
   1. It should appear if you restart gdk with export GITLAB_SIMULATE_SAAS=1
   2. It should NOT appear if your GDK is behaving as Self-Managed

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)

1. Tracking in vue (new version)
   1. Keep the patch mentioned above, perform the steps below and make sure all is fine
2. Tracking in haml (current version)
   1. Remove the patch mentioned above, perform the steps below and make sure all is fine
3. Testing Google Tag Manager

   1. Follow the steps here to create a new GTM account if you don't have one

   2. In gitlab.yml, add a your GTM ID in the extra block for both the google_tag_manager_id and google_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'

   3. Enable the following feature flags

      Feature.enable(:gitlab_gtm_datalayer)
      Feature.enable(:ecomm_instrumentation)
      Feature.enable(:gtm_nonce)

   4. Open the Google Tag Assistant and point it to http://gdk.test:3000/-/profile/usage_quotas#pipelines-quota-tab 1. Click Buy Additional Minutes

   5. Check the dataLayer tab in the tag assistant and verify the ecommerce event is firing

   6. 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.