Client count namespace filter (#13881)

* setup

* add forward slash

* fix icon issue

* add to current view

* fixes

* change

* final cleanup

* remove todo

ui/app/components/clients/current.js

@@ -1,10 +1,14 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 export default class Current extends Component {
   chartLegend = [
     { key: 'entity_clients', label: 'entity clients' },
     { key: 'non_entity_clients', label: 'non-entity clients' },
   ];
+  @tracked namespaceArray = this.args.model.monthly?.byNamespace.map((namespace) => {
+    return { name: namespace['label'], id: namespace['label'] };
+  });
   @tracked selectedNamespace = null;
 
   // TODO CMB get from model
@@ -46,4 +50,11 @@ export default class Current extends Component {
   filterByNamespace(namespace) {
     return this.byNamespaceCurrent.find((ns) => ns.label === namespace);
   }
+
+  // ACTIONS
+  @action
+  selectNamespace([value]) {
+    // value comes in as [namespace0]
+    this.selectedNamespace = value;
+  }
 }

ui/app/components/clients/dashboard.js

@@ -45,7 +45,9 @@ export default class Dashboard extends Component {
   @tracked startYear = null;
   @tracked selectedNamespace = null;
   @tracked noActivityDate = '';
-  // @tracked selectedNamespace = 'namespace18anotherlong/'; // for testing namespace selection view with mirage
+  @tracked namespaceArray = this.args.model.activity?.byNamespace.map((namespace) => {
+    return { name: namespace['label'], id: namespace['label'] };
+  });
 
   get startTimeDisplay() {
     if (!this.startTimeFromResponse) {
@@ -173,16 +175,9 @@ export default class Dashboard extends Component {
   }
 
   @action
-  selectNamespace(value) {
-    // 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);
-      this.barChartSelection = true;
-    }
+  selectNamespace([value]) {
+    // value comes in as [namespace0]
+    this.selectedNamespace = value;
   }
 
   @action

ui/app/styles/components/icon.scss

@@ -47,6 +47,7 @@
 .flight-icon {
   &.flight-icon-display-inline {
     vertical-align: middle;
-    margin: 0px 4px;
+    margin-left: 4px;
+    margin-right: 4px;
   }
 }

ui/app/styles/components/search-select.scss

@@ -125,3 +125,11 @@ div > .ember-power-select-options {
   width: 20px;
   top: 5px;
 }
+
+.search-icon {
+  margin-top: 4px;
+}
+
+.search-select.display-inherit {
+  display: inherit;
+}

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

@@ -19,7 +19,16 @@
         FILTERS
         <Toolbar>
           <ToolbarFilters>
-            {{! ARG TODO more filters for namespace here }}
+            <SearchSelect
+              @id="namespace-search-select-monthly"
+              @options={{this.namespaceArray}}
+              @selectLimit="1"
+              @disallowNewItems={{true}}
+              @fallbackComponent="input-search"
+              @onChange={{this.selectNamespace}}
+              @placeholder={{"Filter by namespace"}}
+              @displayInherit={{true}}
+            />
           </ToolbarFilters>
         </Toolbar>
       </div>

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

@@ -61,8 +61,17 @@
               @handleCurrentBillingPeriod={{this.handleCurrentBillingPeriod}}
               @startTimeDisplay={{this.startTimeDisplay}}
             />
-            {{#if this.totalClientsData}}
-              {{! ARG TODO more filters for namespace here }}
+            {{#if this.namespaceArray}}
+              <SearchSelect
+                @id="namespace-search-select"
+                @options={{this.namespaceArray}}
+                @selectLimit="1"
+                @disallowNewItems={{true}}
+                @fallbackComponent="input-search"
+                @onChange={{this.selectNamespace}}
+                @placeholder={{"Filter by namespace"}}
+                @displayInherit={{true}}
+              />
             {{/if}}
           </ToolbarFilters>
         </Toolbar>

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

@@ -26,10 +26,12 @@ import layout from '../templates/components/search-select';
  * @param {string} [subText] - Text to be displayed below the label
  * @param {string} [subLabel] - a smaller label below the main Label
  * @param {string} [wildcardLabel] - when you want the searchSelect component to return a count on the model for options returned when using a wildcard you must provide a label of the count e.g. role.  Should be singular.
+ * @param {string} [placeholder] - text you wish to replace the default "search" with
+ * @param {boolean} [displayInherit] - if you need the search select component to display inherit instead of box.
  *
  * @param {Array} options - *Advanced usage* - `options` can be passed directly from the outside to the
  * power-select component. If doing this, `models` should not also be passed as that will overwrite the
- * passed value.
+ * passed value. ex: [{ name: 'namespace45', id: 'displayedName' }];
  * @param {function} search - *Advanced usage* - Customizes how the power-select component searches for matches -
  * see the power-select docs for more information.
  *
@@ -37,6 +39,7 @@ import layout from '../templates/components/search-select';
 export default Component.extend({
   layout,
   'data-test-component': 'search-select',
+  classNameBindings: ['displayInherit:display-inherit'],
   classNames: ['field', 'search-select'],
   store: service(),
 

ui/lib/core/addon/templates/components/search-select-placeholder.hbs

@@ -1,6 +1,6 @@
 <div class="field">
   <p class="control has-icons-left has-icons-right">
-    <span class="input has-text-grey-light">Search</span>
+    <span class="input has-text-grey-light">{{or this.placeholder "Search"}}</span>
     <Icon @name="search" class="search-icon has-text-grey-light" />
   </p>
 </div>

ui/lib/core/addon/templates/components/search-select.hbs

@@ -24,6 +24,7 @@
   {{#unless (gte this.selectedOptions.length this.selectLimit)}}
     <PowerSelect
       @eventType="click"
+      @placeholder={{this.placeholder}}
       @searchEnabled={{true}}
       @search={{action "searchAndSuggest"}}
       @options={{this.options}}