Add tracking for epic boards

Add tracking for epic boards

Changelog: other

app/assets/javascripts/boards/components/board_add_new_column_trigger.vue

 <script>
 import { GlButton } from '@gitlab/ui';
 import { mapActions } from 'vuex';
+import Tracking from '~/tracking';
 
 export default {
   components: {
     GlButton,
   },
+  mixins: [Tracking.mixin()],
   methods: {
     ...mapActions(['setAddColumnFormVisibility']),
+    handleClick() {
+      this.setAddColumnFormVisibility(true);
+      this.track('click_button', { label: 'create_list' });
+    },
   },
 };
 </script>
 
 <template>
   <div class="gl-ml-3 gl-display-flex gl-align-items-center" data-testid="boards-create-list">
-    <gl-button variant="confirm" @click="setAddColumnFormVisibility(true)"
-      >{{ __('Create list') }}
-    </gl-button>
+    <gl-button variant="confirm" @click="handleClick">{{ __('Create list') }} </gl-button>
   </div>
 </template>

app/assets/javascripts/boards/components/board_card.vue

 <script>
 import { mapActions, mapState } from 'vuex';
+import Tracking from '~/tracking';
 import BoardCardInner from './board_card_inner.vue';
 
 export default {
@@ -7,6 +8,7 @@ export default {
   components: {
     BoardCardInner,
   },
+  mixins: [Tracking.mixin()],
   props: {
     list: {
       type: Object,
@@ -58,6 +60,7 @@ export default {
         this.toggleBoardItemMultiSelection(this.item);
       } else {
         this.toggleBoardItem({ boardItem: this.item });
+        this.track('click_card', { label: 'right_sidebar' });
       }
     },
   },

app/assets/javascripts/boards/components/board_list.vue

@@ -5,6 +5,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import { sortableStart, sortableEnd } from '~/boards/mixins/sortable_default_options';
 import { sprintf, __ } from '~/locale';
 import defaultSortableConfig from '~/sortable/sortable_config';
+import Tracking from '~/tracking';
 import eventHub from '../eventhub';
 import BoardCard from './board_card.vue';
 import BoardNewIssue from './board_new_issue.vue';
@@ -23,6 +24,7 @@ export default {
     GlLoadingIcon,
     GlIntersectionObserver,
   },
+  mixins: [Tracking.mixin()],
   inject: {
     canAdminList: {
       default: false,
@@ -155,6 +157,7 @@ export default {
     },
     handleDragOnStart() {
       sortableStart();
+      this.track('drag_card', { label: 'board' });
     },
     handleDragOnEnd(params) {
       sortableEnd();

app/assets/javascripts/boards/components/board_list_header.vue

@@ -14,6 +14,7 @@ import { isScopedLabel, parseBoolean } from '~/lib/utils/common_utils';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import { n__, s__, __ } from '~/locale';
 import sidebarEventHub from '~/sidebar/event_hub';
+import Tracking from '~/tracking';
 import AccessorUtilities from '../../lib/utils/accessor';
 import { inactiveId, LIST, ListType } from '../constants';
 import eventHub from '../eventhub';
@@ -38,6 +39,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [Tracking.mixin()],
   inject: {
     boardId: {
       default: '',
@@ -155,6 +157,8 @@ export default {
       }
 
       this.setActiveId({ id: this.list.id, sidebarType: LIST });
+
+      this.track('click_button', { label: 'list_settings' });
     },
     showScopedLabels(label) {
       return this.scopedLabelsAvailable && isScopedLabel(label);
@@ -176,6 +180,11 @@ export default {
       // When expanding/collapsing, the tooltip on the caret button sometimes stays open.
       // Close all tooltips manually to prevent dangling tooltips.
       this.$root.$emit(BV_HIDE_TOOLTIP);
+
+      this.track('click_toggle_button', {
+        label: 'toggle_list',
+        property: collapsed ? 'closed' : 'open',
+      });
     },
     addToLocalStorage() {
       if (AccessorUtilities.isLocalStorageAccessSafe()) {

app/assets/javascripts/boards/components/board_settings_sidebar.vue

@@ -6,6 +6,7 @@ import boardsStore from '~/boards/stores/boards_store';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import eventHub from '~/sidebar/event_hub';
+import Tracking from '~/tracking';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 // NOTE: need to revisit how we handle headerHeight, because we have so many different header and footer options.
@@ -21,7 +22,7 @@ export default {
     BoardSettingsListTypes: () =>
       import('ee_component/boards/components/board_settings_list_types.vue'),
   },
-  mixins: [glFeatureFlagMixin()],
+  mixins: [glFeatureFlagMixin(), Tracking.mixin()],
   inject: ['canAdminList'],
   data() {
     return {
@@ -72,6 +73,7 @@ export default {
       // eslint-disable-next-line no-alert
       if (window.confirm(__('Are you sure you want to remove this list?'))) {
         if (this.shouldUseGraphQL || this.isEpicBoard) {
+          this.track('click_button', { label: 'remove_list' });
           this.removeList(this.activeId);
         } else {
           this.activeList.destroy();

app/assets/javascripts/boards/components/config_toggle.vue

@@ -3,6 +3,7 @@ import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
 import { formType } from '~/boards/constants';
 import eventHub from '~/boards/eventhub';
 import { s__, __ } from '~/locale';
+import Tracking from '~/tracking';
 
 export default {
   components: {
@@ -12,6 +13,7 @@ export default {
     GlTooltip: GlTooltipDirective,
     GlModalDirective,
   },
+  mixins: [Tracking.mixin()],
   props: {
     boardsStore: {
       type: Object,
@@ -37,6 +39,7 @@ export default {
   },
   methods: {
     showPage() {
+      this.track('click_button', { label: 'edit_board' });
       eventHub.$emit('showBoardModal', formType.edit);
       if (this.boardsStore) {
         this.boardsStore.showPage(formType.edit);

ee/app/assets/javascripts/boards/components/boards_selector.vue

@@ -5,10 +5,12 @@
 import { mapGetters } from 'vuex';
 import BoardsSelectorFoss from '~/boards/components/boards_selector.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import Tracking from '~/tracking';
 import epicBoardsQuery from '../graphql/epic_boards.query.graphql';
 
 export default {
   extends: BoardsSelectorFoss,
+  mixins: [Tracking.mixin()],
   computed: {
     ...mapGetters(['isEpicBoard']),
     showCreate() {
@@ -32,6 +34,10 @@ export default {
       return epicBoardsQuery;
     },
     loadBoards(toggleDropdown = true) {
+      if (this.isEpicBoard) {
+        this.track('click_dropdown', { label: 'board_switcher' });
+      }
+
       if (toggleDropdown && this.boards.length > 0) {
         return;
       }