CC-5556: update filter bar results text (#52)

* Update filter bar results text

* Remove duplicate test

* Add optional name type to Cut::FilterBar

.changeset/ten-pianos-drum.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/consul-ui-toolkit': minor
+---
+
+Add @name argument to Cut::FilterBar and update default result text

documentation/app/templates/components/filter-bar.hbs

@@ -16,6 +16,7 @@
 
 <Cut::FilterBar
   @config={{this.filters}}
+  @name="service"
   @count={{this.count}}
   @onChange={{this.handleFilterChange}}
   as |FB|
@@ -221,7 +222,6 @@
 
 <Cut::FilterBar
   @config={{this.filters}}
-  @count={{this.count}}
   @onChange={{this.handleFilterChange}}
   as |FB|
 >

documentation/tests/integration/components/filter-bar-test.js

@@ -15,7 +15,13 @@ import {
 import { hbs } from 'ember-cli-htmlbars';
 import sinon from 'sinon';
 
-async function setupTest(config) {
+async function setupTest({ config, name, count, totalCount } = {}) {
+  this.set('name', name);
+
+  this.set('count', count);
+
+  this.set('totalCount', totalCount);
+
   this.set(
     'config',
     config || {
@@ -44,7 +50,7 @@ async function setupTest(config) {
   this.onChange = onChange;
 
   await render(hbs`
-    <Cut::FilterBar @config={{this.config}} @onChange={{this.onChange}} as |FB|>
+    <Cut::FilterBar @config={{this.config}} @name={{this.name}} @count={{this.count}} @totalCount={{this.totalCount}} @onChange={{this.onChange}} as |FB|>
       <FB.Search placeholder="Search for services" data-test-search />
       <FB.FilterGroup as |Filters|>
         <Filters.Filter
@@ -159,19 +165,21 @@ module('Integration | Component | cut/filter-bar', function (hooks) {
 
   test("clear filters doesn't show when there are only required filters", async function (assert) {
     await setupTest.call(this, {
-      search: {
-        value: '',
-      },
-      filters: {
-        juice: {
-          text: 'Orange',
-          value: 'oj',
-          isRequired: true,
+      config: {
+        search: {
+          value: '',
+        },
+        filters: {
+          juice: {
+            text: 'Orange',
+            value: 'oj',
+            isRequired: true,
+          },
+        },
+        sort: {
+          text: 'critical to healthy',
+          value: 'health',
         },
-      },
-      sort: {
-        text: 'critical to healthy',
-        value: 'health',
       },
     });
 
@@ -319,6 +327,38 @@ module('Integration | Component | cut/filter-bar', function (hooks) {
     );
   });
 
+  test('shows a default results text if no count is passed in', async function (assert) {
+    await setupTest.call(this);
+
+    assert.dom('[data-test-filter-bar-results]').hasText('Showing all results');
+  });
+
+  test('shows a default results text with the name if the name is passed in with no count', async function (assert) {
+    await setupTest.call(this, { name: 'nacho' });
+
+    assert.dom('[data-test-filter-bar-results]').hasText('Showing all nachos');
+  });
+
+  test('shows a result count with a default text for the name if you pass in a count but no name', async function (assert) {
+    await setupTest.call(this, { count: 3 });
+
+    assert.dom('[data-test-filter-bar-results]').hasText('Showing 3 results');
+  });
+
+  test('shows a result count with a name if you pass in a count and a name', async function (assert) {
+    await setupTest.call(this, { count: 1, name: 'song' });
+
+    assert.dom('[data-test-filter-bar-results]').hasText('Showing 1 song');
+  });
+
+  test('shows a result count with a total if you pass in a total and a count', async function (assert) {
+    await setupTest.call(this, { count: 5, totalCount: 10, name: 'song' });
+
+    assert
+      .dom('[data-test-filter-bar-results]')
+      .hasText('Showing 5 songs of 10');
+  });
+
   test('search updates the search values', async function (assert) {
     const { onChange } = await setupTest.call(this);
 

toolkit/src/components/cut/filter-bar/index.hbs

@@ -74,13 +74,18 @@
   </div>
 
   <div class='cut-filter-bar-results'>
-    {{#let (if @count @count 0) as |count|}}
-      <p class='cut-filter-bar-results-count'>Showing
-        {{pluralize count 'result'}}{{if
+    <p class='cut-filter-bar-results-count' data-test-filter-bar-results>
+      {{#if this.hasCount}}
+        Showing
+        {{pluralize @count (if @name @name 'result')}}{{if
           @totalCount
           (concat ' of ' @totalCount)
-        }}</p>
-    {{/let}}
+        }}
+      {{else}}
+        Showing all
+        {{if @name (pluralize @name) 'results'}}
+      {{/if}}
+    </p>
 
     {{#each this.appliedFilters as |filter|}}
       <p class='cut-filter-bar-applied-filter-label'>{{titlecase

toolkit/src/components/cut/filter-bar/index.ts

@@ -105,6 +105,10 @@ export default class FilterBarComponent extends Component<FilterBarSignature> {
     );
   }
 
+  get hasCount(): boolean {
+    return typeof this.args.count === 'number';
+  }
+
   isChecked(localConfig: FilterConfig, filter: string, value: unknown) {
     if (Array.isArray(localConfig?.filters?.[filter])) {
       return !!(localConfig?.filters?.[filter] as Filter[]).find(

toolkit/src/components/cut/filter-bar/types.ts

@@ -5,6 +5,7 @@
 export interface FilterBarSignature {
   Args: {
     config: FilterConfig;
+    name?: string;
     count?: number;
     totalCount?: number;
     onChange: (config: FilterConfig) => void;