Add dropdowns for assignee

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

+/* eslint-disable no-param-reassign */
+/*= require filtered_search/filtered_search_dropdown */
+
+((global) => {
+  class DropdownAssignee extends gl.FilteredSearchDropdown {
+    constructor(dropdown, input) {
+      super(dropdown, input);
+      this.listId = 'js-dropdown-assignee';
+    }
+
+    itemClicked(e) {
+      console.log('assignee clicked');
+    }
+
+    renderContent() {
+      droplab.addData(this.hookId, '/autocomplete/users.json?search=&per_page=20&active=true&project_id=2&group_id=&skip_ldap=&todo_filter=&todo_state_filter=&current_user=true&push_code_to_protected_branches=&author_id=&skip_users=');
+    }
+  }
+
+  global.DropdownAssignee = DropdownAssignee;
+})(window.gl || (window.gl = {}));

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

 /* eslint-disable no-param-reassign */
+/*= require filtered_search/filtered_search_dropdown */
+
 ((global) => {
   const dropdownData = [{
     icon: 'fa-search',
@@ -22,34 +24,11 @@
     tag: '<label>',
   }];
 
-  class DropdownHint {
-    constructor(dropdown, input) {
-      this.input = input;
-      this.dropdown = dropdown;
-      this.bindEvents();
-    }
-
-    bindEvents() {
-      this.dropdown.addEventListener('click.dl', this.itemClicked.bind(this));
-    }
-
-    unbindEvents() {
-      this.dropdown.removeEventListener('click.dl', this.itemClicked.bind(this));
-    }
-
-    // cleanup() {
-    //   this.unbindEvents();
-    //   droplab.setConfig({'filtered-search': {}});
-    //   droplab.setData('filtered-search', []);
-    //   this.dropdown.style.display = 'hidden';
-    // }
-
-    getSelectedText(selectedToken) {
-      // TODO: Get last word from FilteredSearchTokenizer
-      const lastWord = this.input.value.split(' ').last();
-      const lastWordIndex = selectedToken.indexOf(lastWord);
-
-      return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length);
+  class DropdownHint extends gl.FilteredSearchDropdown {
+    constructor(dropdown, input, filterKeyword) {
+      super(dropdown, input);
+      this.listId = 'js-dropdown-hint';
+      this.filterKeyword = filterKeyword;
     }
 
     itemClicked(e) {
@@ -68,37 +47,9 @@
       this.input.dispatchEvent(new Event('input'));
     }
 
-    dismissDropdown() {
-      this.input.removeAttribute('data-dropdown-trigger');
-      droplab.setConfig({'filtered-search': {}});
-      droplab.setData('filtered-search', []);
-      this.unbindEvents();
-    }
-
-    setAsDropdown() {
-      this.input.setAttribute('data-dropdown-trigger', '#js-dropdown-hint');
-      // const hookId = 'filtered-search';
-      // const listId = 'js-dropdown-hint';
-      // const hook = droplab.hooks.filter((h) => {
-      //   return h.id === hookId;
-      // })[0];
-
-      // if (hook.list.list.id !== listId) {
-      //   droplab.changeHookList(hookId, `#${listId}`);
-      // }
-    }
-
-    render() {
-      console.log('render dropdown hint');
-      this.setAsDropdown();
-
-      droplab.setConfig({
-        'filtered-search': {
-          text: 'hint'
-        }
-      });
-
-      droplab.setData('filtered-search', dropdownData);
+    renderContent() {
+      super.renderContent();
+      droplab.setData(this.hookId, dropdownData);
     }
   }
 

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

+/* eslint-disable no-param-reassign */
+((global) => {
+  const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
+
+  class FilteredSearchDropdown {
+    constructor(dropdown, input) {
+      this.hookId = 'filtered-search';
+      this.input = input;
+      this.dropdown = dropdown;
+      this.bindEvents();
+    }
+
+    bindEvents() {
+      this.dropdown.addEventListener('click.dl', this.itemClicked.bind(this));
+    }
+
+    unbindEvents() {
+      this.dropdown.removeEventListener('click.dl', this.itemClicked.bind(this));
+    }
+
+    getSelectedText(selectedToken) {
+      // TODO: Get last word from FilteredSearchTokenizer
+      const lastWord = this.input.value.split(' ').last();
+      const lastWordIndex = selectedToken.indexOf(lastWord);
+
+      return lastWordIndex === -1 ? selectedToken : selectedToken.slice(lastWord.length);
+    }
+
+    itemClicked(e) {
+      // Overridden by dropdown sub class
+    }
+
+    getFilterConfig(filterKeyword) {
+      const config = {};
+      const filterConfig = {
+        text: filterKeyword,
+      };
+
+      config[this.hookId] = filterKeyword ? filterConfig : {};
+
+      return config;
+    }
+
+    dismissDropdown() {
+      this.input.removeAttribute(DATA_DROPDOWN_TRIGGER);
+      droplab.setConfig(this.getFilterConfig());
+      droplab.setData(this.hookId, []);
+      this.unbindEvents();
+    }
+
+    setAsDropdown() {
+      this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.listId}`);
+    }
+
+    getCurrentHook() {
+      return droplab.hooks.filter(h => h.id === this.hookId)[0];
+    }
+
+    renderContent() {
+      droplab.setConfig(this.getFilterConfig(this.filterKeyword));
+    }
+
+    render() {
+      this.setAsDropdown();
+
+      const firstTimeInitialized = this.getCurrentHook() === undefined;
+
+      if (firstTimeInitialized) {
+        this.renderContent();
+      } else if(this.getCurrentHook().list.list.id !== this.listId) {
+        droplab.changeHookList(this.hookId, `#${this.listId}`);
+        this.renderContent();
+      }
+    }
+  }
+
+  global.FilteredSearchDropdown = FilteredSearchDropdown;
+})(window.gl || (window.gl = {}));

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

@@ -78,6 +78,7 @@
   }
 
   let dropdownHint;
+  let dropdownAssignee;
 
   class FilteredSearchManager {
     constructor() {
@@ -99,19 +100,38 @@
 
       if (match && this.currentDropdown !== match.key) {
         console.log(`🦄 load ${match.key} dropdown`);
+        this.dismissCurrentDropdown();
         this.currentDropdown = match.key;
+
+        if (match.key === 'assignee') {
+          if (!dropdownAssignee) {
+
+            // document.querySelector('.filtered-search').setAttribute('data-dropdown-trigger', '#js-dropdown-assignee');
+            dropdownAssignee = new gl.DropdownAssignee(document.querySelector('#js-dropdown-assignee'), document.querySelector('.filtered-search'));
+          }
+
+          dropdownAssignee.render();
+        }
+
       } else if (!match && this.currentDropdown !== 'hint') {
         console.log('🦄 load hint dropdown');
+        this.dismissCurrentDropdown();
         this.currentDropdown = 'hint';
 
         if (!dropdownHint) {
-          dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search'))
+          dropdownHint = new gl.DropdownHint(document.querySelector('#js-dropdown-hint'), document.querySelector('.filtered-search'), 'hint');
         }
 
         dropdownHint.render();
       }
     }
 
+    dismissCurrentDropdown() {
+      if (this.currentDropdown === 'hint') {
+        dropdownHint.dismissDropdown();
+      }
+    }
+
     setDropdown() {
       const { lastToken } = this.tokenizer.processTokens(document.querySelector('.filtered-search').value);
 

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

@@ -16,6 +16,23 @@
           = icon('filter')
           %button.clear-search.hidden{ type: 'button' }
             = icon('times')
+          %ul#js-dropdown-hint.dropdown-menu{ 'data-dynamic' => true }
+            %li
+              %button.btn.btn-link
+                %i.fa{ 'class': '{{icon}}'}
+                %span.js-filter-hint
+                  {{hint}}
+                %span.js-filter-tag
+                  {{tag}}
+          #js-dropdown-assignee.dropdown-menu{ 'data-dropdown' => true }
+            %ul{ 'data-dynamic' => true }
+              %li
+                %button.btn.btn-link
+                  %img.avatar.avatar-inline{ 'src': '{{avatar_url}}', width: '30' }
+                  %strong
+                    {{name}}
+                  %span
+                    {{username}}
         .pull-right
           - if boards_page
             #js-boards-seach.issue-boards-search