Merge branch 'fe-design0view-usage-ping' into 'master'

FE: Add design_action usage ping to view tracking

See merge request gitlab-org/gitlab!46751

app/assets/javascripts/design_management/pages/design/index.vue

@@ -4,6 +4,7 @@ import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
 import createFlash from '~/flash';
 import { fetchPolicies } from '~/lib/graphql';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import allVersionsMixin from '../../mixins/all_versions';
 import Toolbar from '../../components/toolbar/index.vue';
 import DesignDestroyer from '../../components/design_destroyer.vue';
@@ -37,7 +38,7 @@ import {
   TOGGLE_TODO_ERROR,
   designDeletionError,
 } from '../../utils/error_messages';
-import { trackDesignDetailView } from '../../utils/tracking';
+import { trackDesignDetailView, usagePingDesignDetailView } from '../../utils/tracking';
 import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 import { ACTIVE_DISCUSSION_SOURCE_TYPES, DESIGN_DETAIL_LAYOUT_CLASSLIST } from '../../constants';
 
@@ -55,7 +56,7 @@ export default {
     GlAlert,
     DesignSidebar,
   },
-  mixins: [allVersionsMixin],
+  mixins: [allVersionsMixin, glFeatureFlagsMixin()],
   props: {
     id: {
       type: String,
@@ -150,7 +151,7 @@ export default {
   },
   mounted() {
     Mousetrap.bind('esc', this.closeDesign);
-    this.trackEvent();
+    this.trackPageViewEvent();
 
     // Set active discussion immediately.
     // This will ensure that, if a note is specified in the URL hash,
@@ -274,7 +275,7 @@ export default {
         query: this.$route.query,
       });
     },
-    trackEvent() {
+    trackPageViewEvent() {
       // TODO: This needs to be made aware of referers, or if it's rendered in a different context than a Issue
       trackDesignDetailView(
         'issue-design-collection',
@@ -282,6 +283,10 @@ export default {
         this.$route.query.version || this.latestVersionId,
         this.isLatestVersion,
       );
+
+      if (this.glFeatures.usageDataDesignAction) {
+        usagePingDesignDetailView();
+      }
     },
     updateActiveDiscussion(id, source = ACTIVE_DISCUSSION_SOURCE_TYPES.discussion) {
       this.$apollo.mutate({

app/assets/javascripts/design_management/utils/tracking.js

 import Tracking from '~/tracking';
+import api from '~/api';
 
-// Tracking Constants
+// Snowplow tracking constants
 const DESIGN_TRACKING_CONTEXT_SCHEMAS = {
   VIEW_DESIGN_SCHEMA: 'iglu:com.gitlab/design_management_context/jsonschema/1-0-0',
 };
@@ -10,8 +11,14 @@ const DESIGN_TRACKING_EVENTS = {
   UPDATE_DESIGN: 'update_design',
 };
 
+// Usage ping tracking constants
+const DESIGN_ACTION = 'design_action';
+
 export const DESIGN_TRACKING_PAGE_NAME = 'projects:issues:design';
 
+/**
+ * Track "design detail" view in Snowplow
+ */
 export function trackDesignDetailView(
   referer = '',
   owner = '',
@@ -19,6 +26,7 @@ export function trackDesignDetailView(
   latestVersion = false,
 ) {
   const eventName = DESIGN_TRACKING_EVENTS.VIEW_DESIGN;
+
   Tracking.event(DESIGN_TRACKING_PAGE_NAME, eventName, {
     label: eventName,
     context: {
@@ -40,3 +48,10 @@ export function trackDesignCreate() {
 export function trackDesignUpdate() {
   return Tracking.event(DESIGN_TRACKING_PAGE_NAME, DESIGN_TRACKING_EVENTS.UPDATE_DESIGN);
 }
+
+/**
+ * Track "design detail" view via usage ping
+ */
+export function usagePingDesignDetailView() {
+  api.trackRedisHllUserEvent(DESIGN_ACTION);
+}

app/controllers/projects/issues_controller.rb

@@ -44,6 +44,7 @@ class Projects::IssuesController < Projects::ApplicationController
     push_frontend_feature_flag(:vue_issuable_sidebar, project.group)
     push_frontend_feature_flag(:tribute_autocomplete, @project)
     push_frontend_feature_flag(:vue_issuables_list, project)
+    push_frontend_feature_flag(:usage_data_design_action, project, default_enabled: true)
   end
 
   before_action only: :show do

changelogs/unreleased/fe-design0view-usage-ping.yml

+---
+title: Capture design detail views via usage ping
+merge_request: 46751
+author:
+type: added

config/feature_flags/development/usage_data_design_action.yml

+---
+name: usage_data_design_action
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/46626
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/287630
+milestone: '13.7'
+type: development
+group: group::knowledge
+default_enabled: true

lib/gitlab/usage_data_counters/known_events/common.yml

@@ -151,6 +151,7 @@
 - name: design_action
   category: source_code
   aggregation: daily
+  feature_flag: usage_data_design_action
 - name: project_action
   category: source_code
   aggregation: daily