Merge branch '409474-track-vsd-metric-clicks' into 'master'

Add Snowplow tracking to VSD metric drill-down links

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/125047



Merged-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Artur Fedorov <afedorov@gitlab.com>
Approved-by: Piotr Skorupa <pskorupa@gitlab.com>
Reviewed-by: Piotr Skorupa <pskorupa@gitlab.com>
Co-authored-by: Piotr Skorupa <pskorupa@gitlab.com>
Co-authored-by: Rudy Crespo <rcrespo@gitlab.com>

ee/app/assets/javascripts/analytics/dashboards/components/metric_table_cell.vue

@@ -3,7 +3,7 @@ import { GlIcon, GlLink, GlPopover } from '@gitlab/ui';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { METRIC_TOOLTIPS } from '~/analytics/shared/constants';
 import { s__ } from '~/locale';
-import { TABLE_METRICS } from '../constants';
+import { TABLE_METRICS, CLICK_METRIC_DRILLDOWN_LINK_ACTION } from '../constants';
 
 export default {
   name: 'MetricTableCell',
@@ -45,6 +45,19 @@ export default {
     popoverTarget() {
       return `${this.requestPath}__${this.identifier}`.replace('/', '_');
     },
+    trackingProps() {
+      return {
+        'data-track-action': CLICK_METRIC_DRILLDOWN_LINK_ACTION,
+        'data-track-label': `${this.identifier}_drilldown`,
+      };
+    },
+    linkProps() {
+      return {
+        href: this.link,
+        'data-testid': 'metric_label',
+        ...this.trackingProps,
+      };
+    },
   },
   i18n: {
     docsLabel: s__('DORA4Metrics|Go to docs'),
@@ -53,7 +66,7 @@ export default {
 </script>
 <template>
   <div>
-    <gl-link :href="link" data-testid="metric_label">{{ metric.label }}</gl-link>
+    <gl-link v-bind="linkProps">{{ metric.label }}</gl-link>
     <gl-icon
       :id="popoverTarget"
       data-testid="info_icon"

ee/app/assets/javascripts/analytics/dashboards/constants.js

@@ -113,3 +113,5 @@ export const YAML_CONFIG_PATH = '.gitlab/analytics/dashboards/value_streams/valu
 export const YAML_CONFIG_LOAD_ERROR = s__(
   'DORA4Metrics|Failed to load YAML config from Project: %{fullPath}',
 );
+
+export const CLICK_METRIC_DRILLDOWN_LINK_ACTION = 'click_link';

ee/config/events/20230627202806_value_stream_dashboard_click_metrics_drilldown.yml

+---
+description: "Click Value Stream Dashboard metric drill-down link in comparison table"
+category: default
+action: click_link
+label_description: "`[metric_identifier]_drilldown`"
+property_description:
+value_description:
+extra_properties:
+identifiers:
+- project
+- user
+- namespace
+product_section: dev
+product_stage: plan
+product_group: group::optimize
+milestone: "16.2"
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/125047
+distributions:
+- ee
+tiers:
+#- premium
+- ultimate
+

ee/spec/frontend/analytics/dashboards/components/metric_table_cell_spec.js

 import { GlPopover, GlLink } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import MetricTableCell from 'ee/analytics/dashboards/components/metric_table_cell.vue';
+import { CLICK_METRIC_DRILLDOWN_LINK_ACTION } from 'ee/analytics/dashboards/constants';
 
 describe('Metric table cell', () => {
   let wrapper;
@@ -60,4 +61,13 @@ describe('Metric table cell', () => {
     );
     expect(findPopoverLink().text()).toBe(MetricTableCell.i18n.docsLabel);
   });
+
+  it('adds tracking data attributes to drilldown link', () => {
+    createWrapper();
+
+    expect(findMetricLabel().attributes('data-track-action')).toBe(
+      CLICK_METRIC_DRILLDOWN_LINK_ACTION,
+    );
+    expect(findMetricLabel().attributes('data-track-label')).toBe(`${identifier}_drilldown`);
+  });
 });