Add ability to click on none as an option

7 files changed, 46 insertions, 14 deletions

diff --git a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6 b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6
index e3cbb4cb3a0..fcaacac1b50 100644
--- a/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_assignee.js.es6
@@ -9,7 +9,13 @@
     }
 
     itemClicked(e) {
-      console.log('assignee clicked');
+      const dataValueSet = this.setDataValueIfSelected(e.detail.selected);
+
+      if (!dataValueSet) {
+        console.log('set value');
+      }
+
+      this.dismissDropdown();
     }
 
     renderContent() {
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6 b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
index 0593561c8a1..b7161d00eb9 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js.es6
@@ -39,12 +39,7 @@
         gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token));
       }
 
-      this.input.focus();
       this.dismissDropdown();
-
-      // Propogate input change to FilteredSearchManager
-      // so that it can determine which dropdowns to open
-      this.input.dispatchEvent(new Event('input'));
     }
 
     renderContent() {
diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6
index 9225dca13b0..ef92ecd3bd1 100644
--- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6
@@ -9,7 +9,14 @@
     }
 
     itemClicked(e) {
-      console.log('label clicked');
+      const dataValueSet = this.setDataValueIfSelected(e.detail.selected);
+
+      if (!dataValueSet) {
+        const labelName = `~${e.detail.selected.querySelector('.label-title').innerText.trim()}`;
+        gl.FilteredSearchManager.addWordToInput(this.getSelectedText(labelName));
+      }
+
+      this.dismissDropdown();
     }
 
     renderContent() {
diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
index ab97d709886..00df89ff063 100644
--- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
@@ -9,7 +9,13 @@
     }
 
     itemClicked(e) {
-      console.log('milestone clicked');
+      const dataValueSet = this.setDataValueIfSelected(e.detail.selected);
+
+      if (!dataValueSet) {
+        console.log('set value');
+      }
+
+      this.dismissDropdown();
     }
 
     renderContent() {
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
index 0a406bef985..a345b368238 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6
@@ -41,13 +41,20 @@
       return config;
     }
 
-    dismissDropdown() {
+    destroy() {
       this.input.setAttribute(DATA_DROPDOWN_TRIGGER, '');
       droplab.setConfig(this.getFilterConfig());
       droplab.setData(this.hookId, []);
       this.unbindEvents();
     }
 
+    dismissDropdown() {
+      this.input.focus();
+      // Propogate input change to FilteredSearchManager
+      // so that it can determine which dropdowns to open
+      this.input.dispatchEvent(new Event('input'));
+    }
+
     setAsDropdown() {
       this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.listId}`);
     }
@@ -56,6 +63,16 @@
       this.dropdown.style.left = `${offset}px`;
     }
 
+    setDataValueIfSelected(selected) {
+      const dataValue = selected.getAttribute('data-value');
+
+      if (dataValue) {
+        gl.FilteredSearchManager.addWordToInput(dataValue);
+      }
+
+      return dataValue !== null;
+    }
+
     getCurrentHook() {
       return droplab.hooks.filter(h => h.id === this.hookId)[0];
     }
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
index c80c60d6d6e..53ab2135a09 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -160,7 +160,7 @@
 
     dismissCurrentDropdown() {
       if (this.currentDropdown === 'hint') {
-        dropdownHint.dismissDropdown();
+        dropdownHint.destroy();
       }
     }
 
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 8dda6e99d2d..39af0c2c288 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -36,7 +36,7 @@
                       @{{username}}
           #js-dropdown-assignee.dropdown-menu{ 'data-dropdown' => true }
             %ul
-              %li.filter-dropdown-item
+              %li.filter-dropdown-item{ 'data-value': 'none' }
                 %button.btn.btn-link
                   No assignee
               %li.divider
@@ -51,7 +51,7 @@
                       @{{username}}
           #js-dropdown-milestone.dropdown-menu{ 'data-dropdown' => true }
             %ul
-              %li.filter-dropdown-item
+              %li.filter-dropdown-item{ 'data-value': 'none' }
                 %button.btn.btn-link
                   No milestone
               %li.divider
@@ -61,7 +61,7 @@
                   {{title}}
           #js-dropdown-label.dropdown-menu{ 'data-dropdown' => true }
             %ul
-              %li.filter-dropdown-item
+              %li.filter-dropdown-item{ 'data-value': 'none' }
                 %button.btn.btn-link
                   No label
               %li.divider
@@ -69,7 +69,8 @@
               %li.filter-dropdown-item
                 %button.btn.btn-link
                   %span.dropdown-label-box{ 'style': 'background: {{color}}'}
-                  {{title}}
+                  %span.label-title
+                    {{title}}
         .pull-right
           - if boards_page
             #js-boards-seach.issue-boards-search