Merge branch 'nd/usage-quota-track-explore-plans' into 'master'

Track click on explore plans

See merge request gitlab-org/gitlab!87812

ee/app/assets/javascripts/usage_quotas/seats/components/subscription_upgrade_info_card.vue

 <script>
 import { GlLink, GlButton, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import Tracking from '~/tracking';
+import { EXPLORE_PAID_PLANS_CLICKED } from '../constants';
 
 export default {
   name: 'SubscriptionUpgradeInfoCard',
   components: { GlLink, GlButton, GlSprintf },
+  mixins: [Tracking.mixin()],
   props: {
     maxNamespaceSeats: {
       type: Number,
@@ -23,6 +26,11 @@ export default {
     cta: s__('Billing|Explore all plans'),
   },
   overLimitLink: 'https://about.gitlab.com/blog/2022/03/24/efficient-free-tier/',
+  methods: {
+    trackClick() {
+      this.track('click_button', { label: EXPLORE_PAID_PLANS_CLICKED });
+    },
+  },
 };
 </script>
 
@@ -45,7 +53,12 @@ export default {
         </p>
       </div>
       <div>
-        <gl-button :href="explorePlansPath" category="primary" variant="confirm">
+        <gl-button
+          :href="explorePlansPath"
+          category="primary"
+          variant="confirm"
+          @click="trackClick"
+        >
           {{ $options.i18n.cta }}
         </gl-button>
       </div>

ee/app/assets/javascripts/usage_quotas/seats/constants.js

@@ -86,3 +86,4 @@ export const DISMISS_SEATS_ALERT_COOKIE_NAME = 'dismiss_seats_alert_usage_quotas
 export const RENDER_SEATS_PAGE_TRACK_LABEL = 'usage_quotas_page_viewed';
 export const RENDER_SEATS_ALERT_TRACK_LABEL = 'over_limit_alert_viewed';
 export const DISMISS_SEATS_ALERT_TRACK_LABEL = 'over_limit_alert_dismissed';
+export const EXPLORE_PAID_PLANS_CLICKED = 'explore_paid_plans_clicked';

ee/spec/frontend/usage_quotas/seats/components/subscription_upgrade_info_card_spec.js

 import { GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { mockTracking } from 'helpers/tracking_helper';
 import SubscriptionUpgradeInfoCard from 'ee/usage_quotas/seats/components/subscription_upgrade_info_card.vue';
+import { EXPLORE_PAID_PLANS_CLICKED } from 'ee/usage_quotas/seats/constants';
 
 describe('SubscriptionUpgradeInfoCard', () => {
+  let trackingSpy;
   let wrapper;
 
   const defaultProps = {
@@ -22,6 +25,7 @@ describe('SubscriptionUpgradeInfoCard', () => {
 
   beforeEach(() => {
     createComponent();
+    trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
   });
 
   it('renders help link if description and helpLink props are passed', () => {
@@ -35,4 +39,14 @@ describe('SubscriptionUpgradeInfoCard', () => {
   it('renders description message with max number of seats', () => {
     expect(findDescription().text()).toContain('has over 5 members');
   });
+
+  it('tracks on click', () => {
+    const link = findExplorePlansLink();
+
+    link.vm.$emit('click');
+
+    expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_button', {
+      label: EXPLORE_PAID_PLANS_CLICKED,
+    });
+  });
 });