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.

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("");
+    },
   },
 });

assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs

@@ -8,5 +8,10 @@
     placeholder=(i18n "knowledge_explorer.search.placeholder")
     autocapitalize="off"
   }}
+
+  {{#if searchTerm}}
+    {{d-button action=(action "clearSearch") class="clear-search" label="knowledge_explorer.search.clear"}}
+  {{else}}
     {{d-icon "search"}}
+  {{/if}}
 </span>

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 {

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"