1 files changed, 11 insertions, 5 deletions
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 75ea9beb5cf..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
@@ -1,6 +1,5 @@
 <script>
 import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
-import { snakeCase } from 'lodash';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
@@ -61,10 +60,17 @@ export default {
       return highlight(this.itemName, this.matcher);
     },
     itemTrackingLabel() {
-      return `${this.dropdownType}_dropdown_frequent_items_list_item_${snakeCase(this.itemName)}`;
+      return `${this.dropdownType}_dropdown_frequent_items_list_item`;
     },
   },
   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']),
   },
 };
@@ -78,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
@@ -116,9 +122,9 @@ export default {
       category="tertiary"
       :aria-label="__('Remove')"
       :title="__('Remove')"
-      class="gl-align-self-center gl-p-1! gl-absolute! gl-w-auto! gl-top-4 gl-right-4"
+      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>