From 1484f71665e86defcd7e73b064ca99491aece67f Mon Sep 17 00:00:00 2001
From: Vault Automation <github-team-secure-vault-core@hashicorp.com>
Date: Mon, 12 Jan 2026 08:54:28 -0800
Subject: [PATCH] VAULT-17006 - Replaced EmptyState component with HDS
 ApplicationState for "clients" directory (#11648) (#11709)

* VAULT-17006 - Replaced EmptyState component with HDS ApplicationState for "clients" directory

* added missing data-test values to HDS:ApplicationState header and body

* reverted top margin spacing to use top padding instead

* updated class for consistent spacing and added icon & errorCode args

* fixed failing test

* fixed vertical alignment for Hds Application State error

* VAULT-17006 - Replaced EmptyState component with HDS ApplicationState for "clients" directory

* added missing data-test values to HDS:ApplicationState header and body

* reverted top margin spacing to use top padding instead

* updated class for consistent spacing and added icon & errorCode args

* fixed failing test

* fixed vertical alignment for Hds Application State error

* fixed failing test case

Co-authored-by: mohit-hashicorp <mohit.ojha@hashicorp.com>
---
 ui/app/components/clients/counts/error.hbs    |  4 +-
 ui/app/components/clients/no-data.hbs         | 51 +++++++++--------
 ui/app/components/clients/page/counts.hbs     | 30 ++++++----
 .../templates/vault/cluster/clients/error.hbs | 55 +++++++++++--------
 ui/tests/acceptance/clients/counts-test.js    |  2 +-
 .../components/clients/page/counts-test.js    |  2 +-
 6 files changed, 83 insertions(+), 61 deletions(-)

diff --git a/ui/app/components/clients/counts/error.hbs b/ui/app/components/clients/counts/error.hbs
index 16cf9758ce..f93f952bfd 100644
--- a/ui/app/components/clients/counts/error.hbs
+++ b/ui/app/components/clients/counts/error.hbs
@@ -3,8 +3,10 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<Hds::ApplicationState class="has-top-margin-xxl" ...attributes as |A|>
+<Hds::ApplicationState class="top-padding-32" ...attributes as |A|>
   <A.Header
+    @icon="skip"
+    @errorCode={{@error.httpStatus}}
     @title={{or @title (if (eq @error.httpStatus 403) "You are not authorized" "Error")}}
     data-test-empty-state-title
   />
diff --git a/ui/app/components/clients/no-data.hbs b/ui/app/components/clients/no-data.hbs
index 29311bb5db..d787980234 100644
--- a/ui/app/components/clients/no-data.hbs
+++ b/ui/app/components/clients/no-data.hbs
@@ -4,30 +4,37 @@
 }}
 
 {{#if (or @config.reportingEnabled (eq @config.enabled "On"))}}
-  <EmptyState
-    @title="No data received"
-    @message="Tracking is turned on and Vault is gathering data. It should appear here within 30 minutes."
-    class="is-shadowless"
-  />
+  <Hds::ApplicationState class="top-padding-32" as |A|>
+    <A.Header data-test-empty-state-title @title="No data received" />
+    <A.Body
+      data-test-empty-state-message
+      @text="Tracking is turned on and Vault is gathering data. It should appear here within 30 minutes."
+    />
+  </Hds::ApplicationState>
 {{else if @config}}
-  <EmptyState
-    @title="Data tracking is disabled"
-    @message="Tracking is disabled, and no data is being collected. To turn it on, edit the configuration."
-    class="is-shadowless"
-  >
+  <Hds::ApplicationState class="top-padding-32" as |A|>
+    <A.Header data-test-empty-state-title @title="Data tracking is disabled" />
+    <A.Body
+      data-test-empty-state-message
+      @text="Tracking is disabled, and no data is being collected. To turn it on, edit the configuration."
+    />
     {{#if @config.canEdit}}
-      <Hds::Link::Standalone
-        @icon="chevron-right"
-        @iconPosition="trailing"
-        @text="Go to configuration"
-        @route="vault.cluster.clients.config"
-      />
+      <A.Footer as |F|>
+        <F.LinkStandalone
+          @icon="chevron-right"
+          @iconPosition="trailing"
+          @text="Go to configuration"
+          @route="vault.cluster.clients.config"
+        />
+      </A.Footer>
     {{/if}}
-  </EmptyState>
+  </Hds::ApplicationState>
 {{else}}
-  <EmptyState
-    @title="Activity configuration data is unavailable"
-    @message="Reporting status is unknown and could be enabled or disabled. Check the Vault logs for more information."
-    class="is-shadowless"
-  />
+  <Hds::ApplicationState class="top-padding-32" as |A|>
+    <A.Header data-test-empty-state-title @title="Activity configuration data is unavailable" />
+    <A.Body
+      data-test-empty-state-message
+      @text="Reporting status is unknown and could be enabled or disabled. Check the Vault logs for more information."
+    />
+  </Hds::ApplicationState>
 {{/if}}
\ No newline at end of file
diff --git a/ui/app/components/clients/page/counts.hbs b/ui/app/components/clients/page/counts.hbs
index 57f7bf1fc2..7fcc10bc6f 100644
--- a/ui/app/components/clients/page/counts.hbs
+++ b/ui/app/components/clients/page/counts.hbs
@@ -82,19 +82,25 @@
       {{yield}}
     {{else if (and this.version.isCommunity (or (not @startTimestamp) (not @endTimestamp)))}}
       {{! Empty state for community without start or end query param }}
-      <EmptyState
-        @title="Input the start and end dates to view client attribution by path."
-        @message="Only historical data may be queried. No data is available for the current month."
-      />
+      <Hds::ApplicationState class="top-padding-32" as |A|>
+        <A.Header data-test-empty-state-title @title="Input the start and end dates to view client attribution by path." />
+        <A.Body
+          data-test-empty-state-message
+          @text="Only historical data may be queried. No data is available for the current month."
+        />
+      </Hds::ApplicationState>
     {{else}}
-      <EmptyState
-        @title="No data received"
-        @message={{if
-          this.version.isCommunity
-          "Select a start and end date above to query client count data."
-          "Select a different date range to view client count data."
-        }}
-      />
+      <Hds::ApplicationState class="top-padding-32" as |A|>
+        <A.Header data-test-empty-state-title @title="No data received" />
+        <A.Body
+          data-test-empty-state-message
+          @text={{if
+            this.version.isCommunity
+            "Select a start and end date above to query client count data."
+            "Select a different date range to view client count data."
+          }}
+        />
+      </Hds::ApplicationState>
     {{/if}}
   {{/if}}
 </div>
\ No newline at end of file
diff --git a/ui/app/templates/vault/cluster/clients/error.hbs b/ui/app/templates/vault/cluster/clients/error.hbs
index 443a9b42cd..cf5a6acda8 100644
--- a/ui/app/templates/vault/cluster/clients/error.hbs
+++ b/ui/app/templates/vault/cluster/clients/error.hbs
@@ -6,29 +6,36 @@
 {{#if (eq @model.httpStatus 404)}}
   <NotFound @model={{this.model}} />
 {{else}}
-  <EmptyState
-    @title={{if (eq @model.httpStatus 403) "You are not authorized" "Error"}}
-    @subTitle="Error {{@model.httpStatus}}"
-    @icon="skip"
-  >
-    {{#if (eq @model.httpStatus 403)}}
-      <p>
-        You must be granted permissions to view this page. Ask your administrator if you think you should have access to the
-        <code>{{@model.path}}</code>
-        endpoint.
-      </p>
-    {{else}}
-      <ul>
-        {{#if @model.message}}
-          <li>{{@model.message}}</li>
-          <hr />
+  <div class="is-flex is-flex-grow-1">
+    <Hds::ApplicationState class="align-self-center" as |A|>
+      <A.Header
+        data-test-empty-state-title
+        @title={{if (eq @model.httpStatus 403) "You are not authorized" "Error"}}
+        @icon="skip"
+        @errorCode={{@model.httpStatus}}
+      />
+      <A.Body data-test-empty-state-message>
+        {{#if (eq @model.httpStatus 403)}}
+          <p>
+            You must be granted permissions to view this page. Ask your administrator if you think you should have access to
+            the
+            <code>{{@model.path}}</code>
+            endpoint.
+          </p>
+        {{else}}
+          <ul>
+            {{#if @model.message}}
+              <li>{{@model.message}}</li>
+              <hr />
+            {{/if}}
+            {{#each @model.errors as |error|}}
+              <li>
+                {{error}}
+              </li>
+            {{/each}}
+          </ul>
         {{/if}}
-        {{#each @model.errors as |error|}}
-          <li>
-            {{error}}
-          </li>
-        {{/each}}
-      </ul>
-    {{/if}}
-  </EmptyState>
+      </A.Body>
+    </Hds::ApplicationState>
+  </div>
 {{/if}}
\ No newline at end of file
diff --git a/ui/tests/acceptance/clients/counts-test.js b/ui/tests/acceptance/clients/counts-test.js
index 52529b4059..2895ecf652 100644
--- a/ui/tests/acceptance/clients/counts-test.js
+++ b/ui/tests/acceptance/clients/counts-test.js
@@ -62,7 +62,7 @@ module('Acceptance | clients | counts', function (hooks) {
       return overrideResponse(403);
     });
     await visit('/vault/clients/counts/overview');
-    assert.dom(GENERAL.emptyStateTitle).hasText('You are not authorized');
+    assert.dom(GENERAL.emptyStateTitle).hasText('ERROR 403 You are not authorized');
     assert
       .dom(GENERAL.emptyStateMessage)
       .hasText(
diff --git a/ui/tests/integration/components/clients/page/counts-test.js b/ui/tests/integration/components/clients/page/counts-test.js
index cd04ab8cfe..ed139f1407 100644
--- a/ui/tests/integration/components/clients/page/counts-test.js
+++ b/ui/tests/integration/components/clients/page/counts-test.js
@@ -81,7 +81,7 @@ module('Integration | Component | clients | Page::Counts', function (hooks) {
 
     assert
       .dom(GENERAL.emptyStateTitle)
-      .hasText('You are not authorized', 'Activity error empty state renders');
+      .hasText('ERROR 403 You are not authorized', 'Activity error empty state renders');
   });
 
   test('it should render config disabled alert', async function (assert) {