From fe718e99d476d8cb48ed0f70792b85f2ab100a6e Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
Date: Fri, 10 Dec 2021 16:14:57 -0600
Subject: [PATCH] UI/fix client count partial (#13396)

* Initial fix

* Add fallback zero values

* Add changelog

* Fix client count current test
---
 changelog/13396.txt                           |  3 +++
 ui/app/components/clients/history.js          |  6 +++---
 .../templates/components/clients/history.hbs  |  8 +++----
 .../components/clients-current-test.js        | 21 ++++++++++++-------
 4 files changed, 23 insertions(+), 15 deletions(-)
 create mode 100644 changelog/13396.txt

diff --git a/changelog/13396.txt b/changelog/13396.txt
new file mode 100644
index 000000000..6600abedf
--- /dev/null
+++ b/changelog/13396.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix client count current month data not showing unless monthly history data exists
+```
diff --git a/ui/app/components/clients/history.js b/ui/app/components/clients/history.js
index 0d543913b..b1ce2536d 100644
--- a/ui/app/components/clients/history.js
+++ b/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,
-  // since model is slightly different for current month vs history api
+  // Determine if we have client count data based on the current tab
   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;
   }
diff --git a/ui/app/templates/components/clients/history.hbs b/ui/app/templates/components/clients/history.hbs
index dfbfda7d4..35cc4973e 100644
--- a/ui/app/templates/components/clients/history.hbs
+++ b/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."
                 />
diff --git a/ui/tests/integration/components/clients-current-test.js b/ui/tests/integration/components/clients-current-test.js
index ace20b389..efd9790f2 100644
--- a/ui/tests/integration/components/clients-current-test.js
+++ b/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"]').exists('Empty state exists');
-    assert.dom('[data-test-empty-state-title]').hasText('No monthly history');
+    assert.dom('[data-test-component="empty-state"]').doesNotExist('Empty state does not exist');
+    assert.dom('[data-test-client-count-stats]').exists('Client count data exists');
   });
 
-  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-empty-state-title]').hasText('No data received');
+    assert.dom('[data-test-component="empty-state"]').doesNotExist('Empty state does not exist');
+    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) {