Add snowplow events for clicking search suggestions

This MR adds the required data-track events as described in
https://docs.gitlab.com/ee/development/telemetry/snowplow.html#tracking-in-haml-or-vue-templates
in order to allow us to measure usage of the search autocomplete
feature.

These search autocomplete links are rendered by the
deprecated_jquery_dropdown so we needed to extend this class to pass the
relevant attributes down to where the link is created.

app/assets/javascripts/deprecated_jquery_dropdown/render.js

+import { slugify } from '~/lib/utils/text_utility';
+
 const renderersByType = {
   divider(element) {
     element.classList.add('divider');
@@ -95,15 +97,22 @@ function checkSelected(data, options) {
   return options.parent.querySelector(`input[name='${options.fieldName}']`) == null;
 }
 
-function createLink(url, selected, options) {
+function createLink(data, selected, options, index) {
   const link = document.createElement('a');
 
-  link.href = url;
+  link.href = getPropertyWithDefault(data, options, 'url', '#');
 
   if (options.icon) {
     link.classList.add('d-flex', 'align-items-center');
   }
 
+  if (options.trackSuggestionClickedLabel) {
+    link.setAttribute('data-track-event', 'click_text');
+    link.setAttribute('data-track-label', options.trackSuggestionClickedLabel);
+    link.setAttribute('data-track-value', index);
+    link.setAttribute('data-track-property', slugify(data.category || 'no-category'));
+  }
+
   link.classList.toggle('is-active', selected);
 
   return link;
@@ -123,8 +132,7 @@ function assignTextToLink(el, data, options) {
 
 function renderLink(row, data, { options, group, index }) {
   const selected = checkSelected(data, options);
-  const url = getPropertyWithDefault(data, options, 'url', '#');
-  const link = createLink(url, selected, options);
+  const link = createLink(data, selected, options, index);
 
   assignTextToLink(link, data, options);
 

app/assets/javascripts/search_autocomplete.js

@@ -135,6 +135,7 @@ export class SearchAutocomplete {
       data: this.getData.bind(this),
       selectable: true,
       clicked: this.onClick.bind(this),
+      trackSuggestionClickedLabel: 'search_autocomplete_suggestion',
     });
   }
 

spec/frontend/deprecated_jquery_dropdown_spec.js

@@ -313,6 +313,42 @@ describe('deprecatedJQueryDropdown', () => {
       expect(li.childNodes.length).toEqual(1);
       expect(li.textContent).toEqual(text);
     });
+
+    describe('with a trackSuggestionsClickedLabel', () => {
+      it('it includes data-track attributes', () => {
+        const dropdown = dropdownWithOptions({
+          trackSuggestionClickedLabel: 'some_value_for_label',
+        });
+        const item = {
+          id: 'some-element-id',
+          text: 'the link text',
+          url: 'http://example.com',
+          category: 'Suggestion category',
+        };
+        const li = dropdown.renderItem(item, null, 3);
+        const link = li.querySelector('a');
+
+        expect(link).toHaveAttr('data-track-event', 'click_text');
+        expect(link).toHaveAttr('data-track-label', 'some_value_for_label');
+        expect(link).toHaveAttr('data-track-value', '3');
+        expect(link).toHaveAttr('data-track-property', 'suggestion-category');
+      });
+
+      it('it defaults property to no_category when category not provided', () => {
+        const dropdown = dropdownWithOptions({
+          trackSuggestionClickedLabel: 'some_value_for_label',
+        });
+        const item = {
+          id: 'some-element-id',
+          text: 'the link text',
+          url: 'http://example.com',
+        };
+        const li = dropdown.renderItem(item);
+        const link = li.querySelector('a');
+
+        expect(link).toHaveAttr('data-track-property', 'no-category');
+      });
+    });
   });
 
   it('should keep selected item after selecting a second time', () => {