Add basic click-tracking to widget & buttons

- Make use of the data-track-… attributes

ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue

@@ -9,6 +9,11 @@ import Tracking from '~/tracking';
 const RESIZE_EVENT_DEBOUNCE_MS = 150;
 
 export default {
+  tracking: {
+    event: 'click_button',
+    labels: { upgrade: 'upgrade_to_ultimate', compare: 'compare_all_plans' },
+    property: 'experiment:show_trial_status_in_sidebar',
+  },
   components: {
     GlButton,
     GlPopover,
@@ -123,6 +128,10 @@ export default {
         size="small"
         class="gl-mb-0"
         block
+        data-testid="upgradeBtn"
+        :data-track-event="$options.tracking.event"
+        :data-track-label="$options.tracking.labels.upgrade"
+        :data-track-property="$options.tracking.property"
       >
         <span class="gl-font-sm">
           <gl-sprintf :message="$options.i18n.upgradeButtonTitle">
@@ -138,7 +147,11 @@ export default {
         size="small"
         class="gl-mb-0"
         block
+        data-testid="compareBtn"
         :title="$options.i18n.compareAllButtonTitle"
+        :data-track-event="$options.tracking.event"
+        :data-track-label="$options.tracking.labels.compare"
+        :data-track-property="$options.tracking.property"
       >
         <span class="gl-font-sm">{{ $options.i18n.compareAllButtonTitle }}</span>
       </gl-button>

ee/app/assets/javascripts/contextual_sidebar/components/trial_status_widget.vue

@@ -3,6 +3,11 @@ import { GlLink, GlProgressBar } from '@gitlab/ui';
 import { n__, sprintf } from '~/locale';
 
 export default {
+  tracking: {
+    event: 'click_link',
+    label: 'trial_status_widget',
+    property: 'experiment:show_trial_status_in_sidebar',
+  },
   components: {
     GlLink,
     GlProgressBar,
@@ -53,7 +58,14 @@ export default {
 </script>
 
 <template>
-  <gl-link :id="containerId" :title="widgetTitle" :href="plansHref">
+  <gl-link
+    :id="containerId"
+    :title="widgetTitle"
+    :href="plansHref"
+    :data-track-event="$options.tracking.event"
+    :data-track-label="$options.tracking.label"
+    :data-track-property="$options.tracking.property"
+  >
     <div class="gl-display-flex gl-flex-direction-column gl-align-items-stretch gl-w-full">
       <span class="gl-display-flex gl-align-items-center">
         <span class="nav-icon-container svg-container">

ee/spec/frontend/contextual_sidebar/__snapshots__/group_trial_status_popover_spec.js.snap

@@ -22,6 +22,10 @@ exports[`TrialStatusPopover component matches the snapshot 1`] = `
       buttontextclasses=""
       category="primary"
       class="gl-mb-0"
+      data-testid="upgradeBtn"
+      data-track-event="click_button"
+      data-track-label="upgrade_to_ultimate"
+      data-track-property="experiment:show_trial_status_in_sidebar"
       href="transactions/new"
       icon=""
       size="small"
@@ -41,6 +45,10 @@ exports[`TrialStatusPopover component matches the snapshot 1`] = `
       buttontextclasses=""
       category="secondary"
       class="gl-mb-0"
+      data-testid="compareBtn"
+      data-track-event="click_button"
+      data-track-label="compare_all_plans"
+      data-track-property="experiment:show_trial_status_in_sidebar"
       href="billing/path-for/group"
       icon=""
       size="small"

ee/spec/frontend/contextual_sidebar/__snapshots__/group_trial_status_widget_spec.js.snap

@@ -2,6 +2,9 @@
 
 exports[`TrialStatusWidget component without the optional containerId prop matches the snapshot 1`] = `
 <gl-link-stub
+  data-track-event="click_link"
+  data-track-label="trial_status_widget"
+  data-track-property="experiment:show_trial_status_in_sidebar"
   href="billing/path-for/group"
   title="Ultimate Trial – 20 days left"
 >

ee/spec/frontend/contextual_sidebar/group_trial_status_popover_spec.js

@@ -7,6 +7,8 @@ import TrialStatusPopover from 'ee/contextual_sidebar/components/trial_status_po
 describe('TrialStatusPopover component', () => {
   let wrapper;
 
+  const getGlButton = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+
   const createComponent = () => {
     return shallowMount(TrialStatusPopover, {
       propsData: {
@@ -33,6 +35,20 @@ describe('TrialStatusPopover component', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
+  it('renders the upgrade button with correct tracking data attrs', () => {
+    const attrs = getGlButton('upgradeBtn').attributes();
+    expect(attrs['data-track-event']).toBe('click_button');
+    expect(attrs['data-track-label']).toBe('upgrade_to_ultimate');
+    expect(attrs['data-track-property']).toBe('experiment:show_trial_status_in_sidebar');
+  });
+
+  it('renders the compare plans button with correct tracking data attrs', () => {
+    const attrs = getGlButton('compareBtn').attributes();
+    expect(attrs['data-track-event']).toBe('click_button');
+    expect(attrs['data-track-label']).toBe('compare_all_plans');
+    expect(attrs['data-track-property']).toBe('experiment:show_trial_status_in_sidebar');
+  });
+
   describe('methods', () => {
     describe('onResize', () => {
       const getGlPopover = () => wrapper.findComponent(GlPopover);

ee/spec/frontend/contextual_sidebar/group_trial_status_widget_spec.js

@@ -38,6 +38,13 @@ describe('TrialStatusWidget component', () => {
     it('renders without an id', () => {
       expect(getGlLink().attributes('id')).toBe(undefined);
     });
+
+    it('renders with the correct tracking data attributes', () => {
+      const attrs = getGlLink().attributes();
+      expect(attrs['data-track-event']).toBe('click_link');
+      expect(attrs['data-track-label']).toBe('trial_status_widget');
+      expect(attrs['data-track-property']).toBe('experiment:show_trial_status_in_sidebar');
+    });
   });
 
   describe('with the optional containerId prop', () => {