From a257f48946d9d002d829e116cc4acb6349240318 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Tue, 8 Nov 2016 12:47:53 -0600
Subject: [PATCH] Add clear search button

---
 .../filtered_search_manager.js.es6            | 21 ++++++++++++++++++
 app/assets/stylesheets/framework/filters.scss | 22 +++++++++++++++++--
 .../shared/issuable/_search_bar.html.haml     |  2 ++
 3 files changed, 43 insertions(+), 2 deletions(-)

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 7acdabe3ef2..ad988fe2072 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/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;
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index a565642ba38..b192455f5f0 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/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;
+    }
+  }
 }
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index db9011d5d57..5e759301a04 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/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