On bar chart selection replace search component with HTML (#12964)

* Sync selected namespace between bar chart and search component

- When user selects the namespace from chart, update the selected
  value in search select component
- Clear out the namespace selection when new date is queried

* On bar chart selection, replace search select with custom html

ui/app/components/clients/history.js

@@ -8,6 +8,8 @@ export default class HistoryComponent extends Component {
 
   @tracked selectedNamespace = null;
 
+  @tracked barChartSelection = false;
+
   // Determine if we have client count data based on the current tab,
   // since model is slightly different for current month vs history api
   get hasClientData() {
@@ -106,11 +108,17 @@ export default class HistoryComponent extends Component {
     // In case of search select component, value returned is an array
     if (Array.isArray(value)) {
       this.selectedNamespace = this.getNamespace(value[0]);
+      this.barChartSelection = false;
     } else if (typeof value === 'object') {
       // While D3 bar selection returns an object
       this.selectedNamespace = this.getNamespace(value.label);
-    } else {
+      this.barChartSelection = true;
+    }
+  }
+
+  @action
+  resetData() {
+    this.barChartSelection = false;
     this.selectedNamespace = null;
   }
-  }
 }

ui/app/templates/components/clients/history.hbs

@@ -132,7 +132,7 @@
           </div>
         </div>
         {{#if this.showGraphs}}
-          <div class="columns has-bottom-margin-m">
+          <div class="columns has-bottom-margin-m" {{did-update this.resetData}} {{did-insert this.resetData}}>
             <div class="column is-two-thirds" data-test-client-count-graph>
               <BarChart
                 @title="Top 10 Namespaces"
@@ -151,6 +151,21 @@
             <div class="column">
               <div class="card">
                   <div class="card-content">
+                    {{#if (and this.barChartSelection this.selectedNamespace)}}
+                      <label class="title is-5 has-bottom-margin-m">Single namespace</label>
+                      <ul class="has-bottom-margin-l search-select-list">
+                        <li class="search-select-list-item">
+                          <div>
+                            {{or this.selectedNamespace.namespace_path 'root'}}
+                          </div>
+                          <div class="control">
+                            <button type="button" class="button is-ghost" {{action "resetData"}}>
+                            <Icon @glyph="trash" class="has-text-grey" />
+                          </button>
+                          </div>
+                        </li>
+                      </ul>
+                    {{else}}
                       <SearchSelect
                         @id="namespaces"
                         @labelClass="title is-5"
@@ -161,6 +176,7 @@
                         @searchField="namespace_path"
                         @selectLimit={{1}}
                         />
+                    {{/if}}
                     {{#if this.selectedNamespace}}
                       <div class="columns">
                           <div class="column">

ui/lib/core/addon/components/search-select.js

@@ -71,7 +71,6 @@ export default Component.extend({
       return option.id;
     });
     this.set('allOptions', allOptions); // used by filter-wildcard helper
-
     let formattedOptions = this.selectedOptions.map(option => {
       let matchingOption = options.findBy('id', option);
       options.removeObject(matchingOption);