Add latest changes from gitlab-org/gitlab@master

3 files changed, 36 insertions, 4 deletions

diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
index a4e883c96b5..947d3053094 100644
--- a/app/assets/javascripts/frequent_items/components/app.vue
+++ b/app/assets/javascripts/frequent_items/components/app.vue
@@ -6,6 +6,7 @@ import {
   mapVuexModuleActions,
   mapVuexModuleGetters,
 } from '~/lib/utils/vuex_module_mappers';
+import Tracking from '~/tracking';
 import { FREQUENT_ITEMS, STORAGE_KEY } from '../constants';
 import eventHub from '../event_hub';
 import { isMobile, updateExistingFrequentItem, sanitizeItem } from '../utils';
@@ -13,6 +14,8 @@ import FrequentItemsList from './frequent_items_list.vue';
 import frequentItemsMixin from './frequent_items_mixin';
 import FrequentItemsSearchInput from './frequent_items_search_input.vue';
 
+const trackingMixin = Tracking.mixin();
+
 export default {
   components: {
     FrequentItemsSearchInput,
@@ -24,7 +27,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [frequentItemsMixin],
+  mixins: [frequentItemsMixin, trackingMixin],
   inject: ['vuexModule'],
   props: {
     currentUserName: {
@@ -84,6 +87,13 @@ export default {
       'toggleItemsListEditablity',
       'fetchFrequentItems',
     ]),
+    toggleItemsListEditablityTracked() {
+      this.track('click_button', {
+        label: 'toggle_edit_frequent_items',
+        property: 'navigation_top',
+      });
+      this.toggleItemsListEditablity();
+    },
     dropdownOpenHandler() {
       if (this.searchQuery === '' || isMobile()) {
         this.fetchFrequentItems();
@@ -155,7 +165,7 @@ export default {
         :title="translations.headerEditToggle"
         :class="{ 'gl-bg-gray-100!': isItemsListEditable }"
         class="gl-p-2!"
-        @click="toggleItemsListEditablity"
+        @click="toggleItemsListEditablityTracked"
       >
         <gl-icon name="pencil" :class="{ 'gl-text-gray-900!': isItemsListEditable }" />
       </gl-button>
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
index 430498e7194..056dedf8757 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue
@@ -64,6 +64,13 @@ export default {
     },
   },
   methods: {
+    removeFrequentItemTracked(item) {
+      this.track('click_button', {
+        label: `${this.dropdownType}_dropdown_remove_frequent_item`,
+        property: 'navigation_top',
+      });
+      this.removeFrequentItem(item);
+    },
     ...mapVuexModuleActions((vm) => vm.vuexModule, ['removeFrequentItem']),
   },
 };
@@ -77,7 +84,7 @@ export default {
       class="gl-text-left gl-w-full"
       button-text-classes="gl-display-flex gl-w-full"
       data-testid="frequent-item-link"
-      @click="track('click_link', { label: itemTrackingLabel })"
+      @click="track('click_link', { label: itemTrackingLabel, property: 'navigation_top' })"
     >
       <div class="gl-flex-grow-1">
         <project-avatar
@@ -117,7 +124,7 @@ export default {
       :title="__('Remove')"
       class="gl-align-self-center gl-p-1! gl-absolute! gl-w-auto! gl-right-4 gl-top-half gl-translate-y-n50"
       data-testid="item-remove"
-      @click.stop.prevent="removeFrequentItem(itemId)"
+      @click.stop.prevent="removeFrequentItemTracked(itemId)"
     >
       <gl-icon name="close" />
     </gl-button>
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
index 4a1b7e57749..023245f050b 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
@@ -28,12 +28,25 @@ export default {
     searchQuery: debounce(function debounceSearchQuery() {
       this.track('type_search_query', {
         label: `${this.dropdownType}_dropdown_frequent_items_search_input`,
+        property: 'navigation_top',
       });
       this.setSearchQuery(this.searchQuery);
     }, 500),
   },
   methods: {
     ...mapVuexModuleActions((vm) => vm.vuexModule, ['setSearchQuery']),
+    trackFocus() {
+      this.track('focus_input', {
+        label: `${this.dropdownType}_dropdown_frequent_items_search_input`,
+        property: 'navigation_top',
+      });
+    },
+    trackBlur() {
+      this.track('blur_input', {
+        label: `${this.dropdownType}_dropdown_frequent_items_search_input`,
+        property: 'navigation_top',
+      });
+    },
   },
 };
 </script>
@@ -43,6 +56,8 @@ export default {
     <gl-search-box-by-type
       v-model="searchQuery"
       :placeholder="translations.searchInputPlaceholder"
+      @focus="trackFocus"
+      @blur="trackBlur"
     />
   </div>
 </template>