From e3be3fbb772b347aa68431e56021137b0b17611d Mon Sep 17 00:00:00 2001
From: Justin DiRose <justin@justindirose.com>
Date: Tue, 6 Oct 2020 12:08:28 -0500
Subject: [PATCH] FEATURE: Add clear button to search bar

Previously you had to clear the search results out by deleting them.
This introduces a friendlier way to clear the search UX, especially if
you didn't find what you're looking for.
---
 .../components/knowledge-explorer-search.js.es6          | 5 +++++
 .../templates/components/knowledge-explorer-search.hbs   | 7 ++++++-
 assets/stylesheets/common/knowledge-explorer.scss        | 9 +++++++++
 config/locales/client.en.yml                             | 1 +
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/assets/javascripts/discourse/components/knowledge-explorer-search.js.es6 b/assets/javascripts/discourse/components/knowledge-explorer-search.js.es6
index a7592cb..bba68ce 100644
--- a/assets/javascripts/discourse/components/knowledge-explorer-search.js.es6
+++ b/assets/javascripts/discourse/components/knowledge-explorer-search.js.es6
@@ -11,5 +11,10 @@ export default Ember.Component.extend({
     onSearchTermChange(term) {
       this.debouncedSearch(term);
     },
+
+    clearSearch() {
+      this.set("searchTerm", "");
+      this.onSearch("");
+    },
   },
 });
diff --git a/assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs b/assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs
index a986baf..24d9e47 100644
--- a/assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs
+++ b/assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs
@@ -8,5 +8,10 @@
     placeholder=(i18n "knowledge_explorer.search.placeholder")
     autocapitalize="off"
   }}
-  {{d-icon "search"}}
+
+  {{#if searchTerm}}
+    {{d-button action=(action "clearSearch") class="clear-search" label="knowledge_explorer.search.clear"}}
+  {{else}}
+    {{d-icon "search"}}
+  {{/if}}
 </span>
diff --git a/assets/stylesheets/common/knowledge-explorer.scss b/assets/stylesheets/common/knowledge-explorer.scss
index e6081b7..f65ad47 100644
--- a/assets/stylesheets/common/knowledge-explorer.scss
+++ b/assets/stylesheets/common/knowledge-explorer.scss
@@ -13,6 +13,15 @@
       display: none;
     }
   }
+  .btn.clear-search {
+    background-color: var(--secondary);
+    color: var(--tertiary);
+    font-size: .75em;
+    position: absolute;
+    right: 0.80em;
+    text-transform: lowercase;
+    top: 20%;
+  }
 }
 
 .knowledge-explorer-search {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 82b3df7..59f1168 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -13,6 +13,7 @@ en:
           one: "%{count} result found"
           other: "%{count} results found"
         placeholder: "Search for topics"
+        clear: "Clear"
       topic:
         back: "Go back"
         navigate_to_topic: "View the discussion on this topic"