Refactor dropdown filters

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

-/* eslint-disable no-param-reassign */
-/*= require filtered_search/filtered_search_dropdown */
-
-((global) => {
-  class DropdownAuthor extends gl.FilteredSearchDropdown {
-    constructor(droplab, dropdown, input) {
-      super(droplab, dropdown, input);
-      this.listId = 'js-dropdown-author';
-      this.config = {
-        droplabAjaxFilter: {
-          endpoint: '/autocomplete/users.json',
-          searchKey: 'search',
-          params: {
-            per_page: 20,
-            active: true,
-            project_id: this.getProjectId(),
-            current_user: true,
-          },
-          searchValueFunction: this.getSearchInput,
-          loadingTemplate: this.loadingTemplate,
-        }
-      };
-    }
-
-    itemClicked(e) {
-      const username = e.detail.selected.querySelector('.dropdown-light-content').innerText.trim();
-      gl.FilteredSearchManager.addWordToInput(this.getSelectedText(username));
-
-      this.dismissDropdown();
-    }
-
-    renderContent(forceShowList) {
-      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config);
-      super.renderContent(forceShowList);
-    }
-
-    getSearchInput() {
-      const query = document.querySelector('.filtered-search').value;
-      const { value } = gl.FilteredSearchTokenizer.getLastTokenObject(query);
-      const valueWithoutColon = value.slice(1);
-      const hasPrefix = valueWithoutColon[0] === '@';
-      const valueWithoutPrefix = valueWithoutColon.slice(1);
-
-      if (hasPrefix) {
-        return valueWithoutPrefix;
-      } else {
-        return valueWithoutColon;
-      }
-    }
-
-    configure() {
-      this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init();
-    }
-  }
-
-  global.DropdownAuthor = DropdownAuthor;
-})(window.gl || (window.gl = {}));

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

@@ -23,7 +23,7 @@
   class DropdownHint extends gl.FilteredSearchDropdown {
     constructor(droplab, dropdown, input) {
       super(droplab, dropdown, input);
-      this.listId = 'js-dropdown-hint';
+      this.listId = dropdown.id;
       this.config = {
         droplabFilter: {
           template: 'hint',

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

-/* eslint-disable no-param-reassign */
-/*= require filtered_search/filtered_search_dropdown */
-
-((global) => {
-  class DropdownLabel extends gl.FilteredSearchDropdown {
-    constructor(droplab, dropdown, input) {
-      super(droplab, dropdown, input);
-      this.listId = 'js-dropdown-label';
-      this.config = {
-        droplabAjax: {
-          endpoint: 'labels.json',
-          method: 'setData',
-          loadingTemplate: this.loadingTemplate,
-        },
-        droplabFilter: {
-          filterFunction: this.filterWithSymbol.bind(this, '~'),
-        }
-      };
-    }
-
-    itemClicked(e) {
-      const dataValueSet = this.setDataValueIfSelected(e.detail.selected);
-
-      if (!dataValueSet) {
-        const labelTitle = e.detail.selected.querySelector('.label-title').innerText.trim();
-        const labelName = `~${this.getEscapedText(labelTitle)}`;
-        gl.FilteredSearchManager.addWordToInput(labelName);
-      }
-
-      // debugger
-      this.dismissDropdown(!dataValueSet);
-    }
-
-    renderContent(forceShowList) {
-      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config);
-      super.renderContent(forceShowList);
-    }
-
-    configure() {
-      this.droplab.addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init();
-    }
-  }
-
-  global.DropdownLabel = DropdownLabel;
-})(window.gl || (window.gl = {}));

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

@@ -2,18 +2,18 @@
 /*= require filtered_search/filtered_search_dropdown */
 
 ((global) => {
-  class DropdownMilestone extends gl.FilteredSearchDropdown {
-    constructor(droplab, dropdown, input) {
+  class DropdownNonUser extends gl.FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, endpoint, symbol) {
       super(droplab, dropdown, input);
-      this.listId = 'js-dropdown-milestone';
+      this.listId = dropdown.id;
       this.config = {
         droplabAjax: {
-          endpoint: 'milestones.json',
+          endpoint: endpoint,
           method: 'setData',
           loadingTemplate: this.loadingTemplate,
         },
         droplabFilter: {
-          filterFunction: this.filterWithSymbol.bind(this, '%'),
+          filterFunction: this.filterWithSymbol.bind(this, symbol),
         }
       };
     }
@@ -22,9 +22,9 @@
       const dataValueSet = this.setDataValueIfSelected(e.detail.selected);
 
       if (!dataValueSet) {
-        const milestoneTitle = e.detail.selected.querySelector('.btn-link').innerText.trim();
-        const milestoneName = `%${this.getEscapedText(milestoneTitle)}`;
-        gl.FilteredSearchManager.addWordToInput(this.getSelectedText(milestoneName));
+        const title = e.detail.selected.querySelector('.js-data-value').innerText.trim();
+        const name = `%${this.getEscapedText(title)}`;
+        gl.FilteredSearchManager.addWordToInput(this.getSelectedText(name));
       }
 
       this.dismissDropdown(!dataValueSet);
@@ -40,5 +40,5 @@
     }
   }
 
-  global.DropdownMilestone = DropdownMilestone;
+  global.DropdownNonUser = DropdownNonUser;
 })(window.gl || (window.gl = {}));

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

@@ -2,10 +2,10 @@
 /*= require filtered_search/filtered_search_dropdown */
 
 ((global) => {
-  class DropdownAssignee extends gl.FilteredSearchDropdown {
+  class DropdownUser extends gl.FilteredSearchDropdown {
     constructor(droplab, dropdown, input) {
       super(droplab, dropdown, input);
-      this.listId = 'js-dropdown-assignee';
+      this.listId = dropdown.id;
       this.config = {
         droplabAjaxFilter: {
           endpoint: '/autocomplete/users.json',
@@ -18,7 +18,7 @@
           },
           searchValueFunction: this.getSearchInput,
           loadingTemplate: this.loadingTemplate,
-        }
+        },
       };
     }
 
@@ -45,11 +45,7 @@
       const hasPrefix = valueWithoutColon[0] === '@';
       const valueWithoutPrefix = valueWithoutColon.slice(1);
 
-      if (hasPrefix) {
-        return valueWithoutPrefix;
-      } else {
-        return valueWithoutColon;
-      }
+      return hasPrefix ? valueWithoutPrefix : valueWithoutColon;
     }
 
     configure() {
@@ -57,5 +53,5 @@
     }
   }
 
-  global.DropdownAssignee = DropdownAssignee;
+  global.DropdownUser = DropdownUser;
 })(window.gl || (window.gl = {}));

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

@@ -103,22 +103,24 @@
       this.mapping = {
         author: {
           reference: null,
-          gl: 'DropdownAuthor',
+          gl: 'DropdownUser',
           element: document.querySelector('#js-dropdown-author'),
         },
         assignee: {
           reference: null,
-          gl: 'DropdownAssignee',
+          gl: 'DropdownUser',
           element: document.querySelector('#js-dropdown-assignee'),
         },
         milestone: {
           reference: null,
-          gl: 'DropdownMilestone',
+          gl: 'DropdownNonUser',
+          extraArguments: ['milestones.json', '%'],
           element: document.querySelector('#js-dropdown-milestone'),
         },
         label: {
           reference: null,
-          gl: 'DropdownLabel',
+          gl: 'DropdownNonUser',
+          extraArguments: ['labels.json', '~'],
           element: document.querySelector('#js-dropdown-label'),
         },
         hint: {
@@ -160,7 +162,11 @@
       let forceShowList = false;
 
       if (!this.mapping[key].reference) {
-        this.mapping[key].reference = new gl[glClass](this.droplab, element, this.filteredSearchInput);
+        var dl = this.droplab;
+        const defaultArguments = [null, dl, element, this.filteredSearchInput];
+        const glArguments = defaultArguments.concat(this.mapping[key].extraArguments || []);
+
+        this.mapping[key].reference = new (Function.prototype.bind.apply(gl[glClass], glArguments));
       }
 
       if (firstLoad) {

app/views/shared/issuable/_search_bar.html.haml

@@ -67,7 +67,7 @@
               %li.divider
             %ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
               %li.filter-dropdown-item
-                %button.btn.btn-link
+                %button.btn.btn-link.js-data-value
                   {{title}}
           #js-dropdown-label.dropdown-menu{ 'data-dropdown' => true }
             %ul{ 'data-dropdown' => true }
@@ -79,7 +79,7 @@
               %li.filter-dropdown-item
                 %button.btn.btn-link
                   %span.dropdown-label-box{ 'style': 'background: {{color}}'}
-                  %span.label-title
+                  %span.label-title.js-data-value
                     {{title}}
         .pull-right
           - if boards_page