1 files changed, 62 insertions, 65 deletions

diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index 98dcb697af9..5d92d29c399 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -1,83 +1,80 @@
-require('./filtered_search_dropdown');
+import Filter from '~/droplab/plugins/filter';
+import './filtered_search_dropdown';
 
-/* global droplabFilter */
-
-(() => {
-  class DropdownHint extends gl.FilteredSearchDropdown {
-    constructor(droplab, dropdown, input, filter) {
-      super(droplab, dropdown, input, filter);
-      this.config = {
-        droplabFilter: {
-          template: 'hint',
-          filterFunction: gl.DropdownUtils.filterHint.bind(null, input),
-        },
-      };
-    }
-
-    itemClicked(e) {
-      const { selected } = e.detail;
+class DropdownHint extends gl.FilteredSearchDropdown {
+  constructor(droplab, dropdown, input, filter) {
+    super(droplab, dropdown, input, filter);
+    this.config = {
+      Filter: {
+        template: 'hint',
+        filterFunction: gl.DropdownUtils.filterHint.bind(null, input),
+      },
+    };
+  }
 
-      if (selected.tagName === 'LI') {
-        if (selected.hasAttribute('data-value')) {
-          this.dismissDropdown();
-        } else if (selected.getAttribute('data-action') === 'submit') {
-          this.dismissDropdown();
-          this.dispatchFormSubmitEvent();
-        } else {
-          const token = selected.querySelector('.js-filter-hint').innerText.trim();
-          const tag = selected.querySelector('.js-filter-tag').innerText.trim();
+  itemClicked(e) {
+    const { selected } = e.detail;
 
-          if (tag.length) {
-            // Get previous input values in the input field and convert them into visual tokens
-            const previousInputValues = this.input.value.split(' ');
-            const searchTerms = [];
+    if (selected.tagName === 'LI') {
+      if (selected.hasAttribute('data-value')) {
+        this.dismissDropdown();
+      } else if (selected.getAttribute('data-action') === 'submit') {
+        this.dismissDropdown();
+        this.dispatchFormSubmitEvent();
+      } else {
+        const token = selected.querySelector('.js-filter-hint').innerText.trim();
+        const tag = selected.querySelector('.js-filter-tag').innerText.trim();
 
-            previousInputValues.forEach((value, index) => {
-              searchTerms.push(value);
+        if (tag.length) {
+          // Get previous input values in the input field and convert them into visual tokens
+          const previousInputValues = this.input.value.split(' ');
+          const searchTerms = [];
 
-              if (index === previousInputValues.length - 1
-                && token.indexOf(value.toLowerCase()) !== -1) {
-                searchTerms.pop();
-              }
-            });
+          previousInputValues.forEach((value, index) => {
+            searchTerms.push(value);
 
-            if (searchTerms.length > 0) {
-              gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms.join(' '));
+            if (index === previousInputValues.length - 1
+              && token.indexOf(value.toLowerCase()) !== -1) {
+              searchTerms.pop();
             }
+          });
 
-            gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''), '', false, this.container);
+          if (searchTerms.length > 0) {
+            gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms.join(' '));
           }
-          this.dismissDropdown();
-          this.dispatchInputEvent();
+
+          gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''), '', false, this.container);
         }
+        this.dismissDropdown();
+        this.dispatchInputEvent();
       }
     }
+  }
 
-    renderContent() {
-      const dropdownData = [];
+  renderContent() {
+    const dropdownData = [];
 
-      [].forEach.call(this.input.closest('.filtered-search-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
-        const { icon, hint, tag, type } = dropdownMenu.dataset;
-        if (icon && hint && tag) {
-          dropdownData.push(
-            Object.assign({
-              icon: `fa-${icon}`,
-              hint,
-              tag: `<${tag}>`,
-            }, type && { type }),
-          );
-        }
-      });
+    [].forEach.call(this.input.closest('.filtered-search-box-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
+      const { icon, hint, tag, type } = dropdownMenu.dataset;
+      if (icon && hint && tag) {
+        dropdownData.push(
+          Object.assign({
+            icon: `fa-${icon}`,
+            hint,
+            tag: `<${tag}>`,
+          }, type && { type }),
+        );
+      }
+    });
 
-      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
-      this.droplab.setData(this.hookId, dropdownData);
-    }
+    this.droplab.changeHookList(this.hookId, this.dropdown, [Filter], this.config);
+    this.droplab.setData(this.hookId, dropdownData);
+  }
 
-    init() {
-      this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init();
-    }
+  init() {
+    this.droplab.addHook(this.input, this.dropdown, [Filter], this.config).init();
   }
+}
 
-  window.gl = window.gl || {};
-  gl.DropdownHint = DropdownHint;
-})();
+window.gl = window.gl || {};
+gl.DropdownHint = DropdownHint;