UI/fix client count partial (#13396)

* Initial fix

* Add fallback zero values

* Add changelog

* Fix client count current test

changelog/13396.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix client count current month data not showing unless monthly history data exists
+```

ui/app/components/clients/history.js

@@ -10,11 +10,11 @@ export default class HistoryComponent extends Component {
 
   @tracked barChartSelection = false;
 
-  // Determine if we have client count data based on the current tab,
+  // 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() {
     if (this.args.tab === 'current') {
-      return this.args.model.activity && this.args.model.activity.clients;
+      // Show the current numbers as long as config is on
+      return this.args.model.config?.enabled !== 'Off';
     }
     return this.args.model.activity && this.args.model.activity.total;
   }

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

@@ -1,4 +1,4 @@
-{{#if (eq @model.config.queriesAvailable false)}}
+{{#if (and (eq @tab 'history') (eq @model.config.queriesAvailable false))}}
   {{#if (eq @model.config.enabled 'On')}}
     <EmptyState
       @title="No monthly history"
@@ -105,7 +105,7 @@
               <div class="column" data-test-client-count-stats>
                 <StatText
                   @label="Total active clients"
-                  @value={{or @model.activity.clients @model.activity.total.clients}}
+                  @value={{or @model.activity.clients @model.activity.total.clients "0"}}
                   @size="l"
                   @subText="The sum of unique entities and non-entity tokens; Vault's primary billing metric."
                 />
@@ -114,7 +114,7 @@
                 <StatText
                   class="column"
                   @label="Unique entities"
-                  @value={{or @model.activity.distinct_entities @model.activity.total.distinct_entities}}
+                  @value={{or @model.activity.distinct_entities @model.activity.total.distinct_entities "0"}}
                   @size="l"
                   @subText="Representation of a particular user, client or application that created a token via login."
                 />
@@ -123,7 +123,7 @@
                 <StatText
                   class="column"
                   @label="Non-entity tokens"
-                  @value={{or @model.activity.non_entity_tokens @model.activity.total.non_entity_tokens}}
+                  @value={{or @model.activity.non_entity_tokens @model.activity.total.non_entity_tokens "0"}}
                   @size="l"
                   @subText="Tokens created via a method that is not associated with an entity."
                 />

ui/tests/integration/components/clients-current-test.js

@@ -20,23 +20,28 @@ module('Integration | Component | client count current', function(hooks) {
     await render(hbs`<Clients::History @tab={{tab}} @model={{model}} />`);
 
     assert.dom('[data-test-component="empty-state"]').exists('Empty state exists');
-    assert.dom('[data-test-empty-state-title]').hasText('Data tracking is disabled');
+    assert.dom('[data-test-empty-state-title]').hasText('Tracking is disabled');
   });
 
-  test('it shows empty state when enabled and no data available', async function(assert) {
+  test('it shows zeroes when enabled and no data', async function(assert) {
     Object.assign(this.model.config, { enabled: 'On', queriesAvailable: false });
+    Object.assign(this.model.activity, {
+      clients: 0,
+      distinct_entities: 0,
+      non_entity_tokens: 0,
+    });
     await render(hbs`<Clients::History @tab={{tab}} @model={{model}} />`);
-
+    assert.dom('[data-test-component="empty-state"]').doesNotExist('Empty state does not exist');
-    assert.dom('[data-test-component="empty-state"]').exists('Empty state exists');
+    assert.dom('[data-test-client-count-stats]').exists('Client count data exists');
-    assert.dom('[data-test-empty-state-title]').hasText('No monthly history');
   });
 
-  test('it shows empty state when data available but not returned', async function(assert) {
+  test('it shows zeroed data when enabled but no counts', async function(assert) {
     Object.assign(this.model.config, { queriesAvailable: true, enabled: 'On' });
     await render(hbs`<Clients::History @tab={{tab}} @model={{model}} />`);
     assert.dom('[data-test-pricing-metrics-form]').doesNotExist('Date range component should not exists');
-    assert.dom('[data-test-component="empty-state"]').exists('Empty state exists');
+    assert.dom('[data-test-component="empty-state"]').doesNotExist('Empty state does not exist');
-    assert.dom('[data-test-empty-state-title]').hasText('No data received');
+    assert.dom('[data-test-client-count-stats]').exists('Client count data exists');
+    assert.dom('[data-test-stat-text-container]').includesText('0');
   });
 
   test('it shows data when available from query', async function(assert) {