Add clear search button

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

@@ -29,9 +29,23 @@
 
     bindEvents() {
       const input = document.querySelector('.filtered-search');
+      const clearSearch = document.querySelector('.clear-search');
 
       input.addEventListener('input', this.tokenize.bind(this));
       input.addEventListener('keydown', this.checkForEnter.bind(this));
+
+      clearSearch.addEventListener('click', this.clearSearch.bind(this));
+    }
+
+    clearSearch(event) {
+      event.stopPropagation();
+      event.preventDefault();
+
+      this.clearTokens();
+      const input = document.querySelector('.filtered-search');
+      input.value = '';
+
+      event.target.classList.add('hidden');
     }
 
     clearTokens() {
@@ -64,12 +78,19 @@
 
       // Trim the last space value
       document.querySelector('.filtered-search').value = inputValue.trim();
+
+      if (inputValue.trim()) {
+        document.querySelector('.clear-search').classList.remove('hidden');
+      }
     }
 
     tokenize(event) {
       // Re-calculate tokens
       this.clearTokens();
 
+      // Enable clear button
+      document.querySelector('.clear-search').classList.remove('hidden');
+
       // TODO: Current implementation does not support token values that have valid spaces in them
       // Example/ label:community contribution
       const input = event.target.value;

app/assets/stylesheets/framework/filters.scss

@@ -39,11 +39,29 @@
       color: #444;
     }
   }
-
   .fa-filter {
     position: absolute;
-    left: 10px;
     top: 10px;
+    left: 10px;
     color: $gray-darkest;
   }
+
+  .fa-times {
+    right: 10px;
+    color: $gray-darkest;
+  }
+
+  .clear-search {
+    width: 35px;
+    background-color: transparent;
+    border: none;
+    position: absolute;
+    right: 0px;
+    height: 100%;
+    outline: none;
+
+    &:hover .fa-times {
+      color: #444;
+    }
+  }
 }

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

@@ -14,6 +14,8 @@
         .filtered-search-input-container
           %input.form-control.filtered-search{ placeholder: 'Search or filter results...' }
           = icon('filter')
+          %button.clear-search.hidden
+            = icon('times')
         .pull-right
           - if boards_page
             #js-boards-seach.issue-boards-search