Refactor filtered_search_dropdown

app/assets/javascripts/filtered_search/dropdown_non_user.js.es6

@@ -6,6 +6,7 @@
     constructor(droplab, dropdown, input, endpoint, symbol) {
       super(droplab, dropdown, input);
       this.listId = dropdown.id;
+      this.symbol = symbol;
       this.config = {
         droplabAjax: {
           endpoint: endpoint,
@@ -13,7 +14,7 @@
           loadingTemplate: this.loadingTemplate,
         },
         droplabFilter: {
-          filterFunction: this.filterWithSymbol.bind(this, symbol),
+          filterFunction: this.filterWithSymbol.bind(this, this.symbol),
         }
       };
     }
@@ -23,13 +24,47 @@
 
       if (!dataValueSet) {
         const title = e.detail.selected.querySelector('.js-data-value').innerText.trim();
-        const name = `%${this.getEscapedText(title)}`;
+        const name = `${this.symbol}${this.getEscapedText(title)}`;
         gl.FilteredSearchManager.addWordToInput(this.getSelectedText(name));
       }
 
       this.dismissDropdown(!dataValueSet);
     }
 
+    getEscapedText(text) {
+      let escapedText = text;
+
+      // Encapsulate value with quotes if it has spaces
+      if (text.indexOf(' ') !== -1) {
+        if (text.indexOf('"') !== -1) {
+          // Use single quotes if value contains double quotes
+          escapedText = `'${text}'`;
+        } else {
+          // Known side effect: values's with both single and double quotes
+          // won't escape properly
+          escapedText = `"${text}"`;
+        }
+      }
+
+      return escapedText;
+    }
+
+    filterWithSymbol(filterSymbol, item, query) {
+      const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
+      const valueWithoutColon = value.slice(1).toLowerCase();
+      const prefix = valueWithoutColon[0];
+      const valueWithoutPrefix = valueWithoutColon.slice(1);
+
+      const title = item.title.toLowerCase();
+
+      // Eg. filterSymbol = ~ for labels
+      const matchWithoutPrefix = prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1;
+      const match = title.indexOf(valueWithoutColon) !== -1;
+
+      item.droplab_hidden = !match && !matchWithoutPrefix;
+      return item;
+    }
+
     renderContent(forceShowList = false) {
       this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config);
       super.renderContent(forceShowList);

app/assets/javascripts/filtered_search/dropdown_user.js.es6

@@ -38,6 +38,10 @@
       super.renderContent(forceShowList);
     }
 
+    getProjectId() {
+      return this.input.getAttribute('data-project-id');
+    }
+
     getSearchInput() {
       const query = document.querySelector('.filtered-search').value;
       const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);

app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6

@@ -4,7 +4,6 @@
 
   class FilteredSearchDropdown {
     constructor(droplab, dropdown, input) {
-      console.log('constructor');
       this.droplab = droplab;
       this.hookId = 'filtered-search';
       this.input = input;
@@ -24,32 +23,10 @@
       this.dropdown.removeEventListener('click.dl', this.itemClickedWrapper);
     }
 
-    getProjectId() {
-      return this.input.getAttribute('data-project-id');
-    }
-
     getCurrentHook() {
       return this.droplab.hooks.filter(h => h.id === this.hookId)[0];
     }
 
-    getEscapedText(text) {
-      let escapedText = text;
-
-      // Encapsulate value with quotes if it has spaces
-      if (text.indexOf(' ') !== -1) {
-        if (text.indexOf('"') !== -1) {
-          // Use single quotes if value contains double quotes
-          escapedText = `'${text}'`;
-        } else {
-          // Known side effect: values's with both single and double quotes
-          // won't escape properly
-          escapedText = `"${text}"`;
-        }
-      }
-
-      return escapedText;
-    }
-
     getSelectedText(selectedToken) {
       // TODO: Get last word from FilteredSearchTokenizer
       const lastWord = this.input.value.split(' ').last();
@@ -109,22 +86,6 @@
       }
     }
 
-    filterWithSymbol(filterSymbol, item, query) {
-      const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
-      const valueWithoutColon = value.slice(1).toLowerCase();
-      const prefix = valueWithoutColon[0];
-      const valueWithoutPrefix = valueWithoutColon.slice(1);
-
-      const title = item.title.toLowerCase();
-
-      // Eg. filterSymbol = ~ for labels
-      const matchWithoutPrefix = prefix === filterSymbol && title.indexOf(valueWithoutPrefix) !== -1;
-      const match = title.indexOf(valueWithoutColon) !== -1;
-
-      item.droplab_hidden = !match && !matchWithoutPrefix;
-      return item;
-    }
-
     hideDropdown() {
       this.getCurrentHook().list.hide();
     }