From b5c6e83db135b64eea22abe21f2ba598bb9373a1 Mon Sep 17 00:00:00 2001
From: Vault Automation <github-team-secure-vault-core@hashicorp.com>
Date: Fri, 13 Mar 2026 23:14:55 -0400
Subject: [PATCH] VAULT-42410 - Refactored empty state component for kmip
 directory (#12806) (#13020)

* VAULT-42410 - refactored empty state component for kmip directory

* added data-test attributes

* fixed failing tests

Co-authored-by: mohit-hashicorp <mohit.ojha@hashicorp.com>
---
 .../addon/components/page/configuration.hbs   |  8 +++----
 .../addon/components/page/credentials.hbs     | 24 +++++++++++++------
 .../addon/components/page/scope/roles.hbs     | 24 +++++++++++++------
 ui/lib/kmip/addon/components/page/scopes.hbs  | 24 +++++++++++++------
 ui/tests/pages/components/list-view.js        |  3 ++-
 5 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/ui/lib/kmip/addon/components/page/configuration.hbs b/ui/lib/kmip/addon/components/page/configuration.hbs
index 87ce6b75d8..0b6a12e318 100644
--- a/ui/lib/kmip/addon/components/page/configuration.hbs
+++ b/ui/lib/kmip/addon/components/page/configuration.hbs
@@ -50,8 +50,8 @@
     <MaskedInput @value={{@config.ca_pem}} @displayOnly={{true}} @allowCopy={{true}} />
   </InfoTableRow>
 {{else}}
-  <EmptyState
-    @title="No configuration for this secrets engine"
-    @message="We'll need to configure a few things before getting started."
-  />
+  <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
+    <A.Header @title="No configuration for this secrets engine" @titleTag="h2" data-test-empty-state-title />
+    <A.Body @text="We'll need to configure a few things before getting started." data-test-empty-state-message />
+  </Hds::ApplicationState>
 {{/if}}
\ No newline at end of file
diff --git a/ui/lib/kmip/addon/components/page/credentials.hbs b/ui/lib/kmip/addon/components/page/credentials.hbs
index 892196341b..f9a19536c8 100644
--- a/ui/lib/kmip/addon/components/page/credentials.hbs
+++ b/ui/lib/kmip/addon/components/page/credentials.hbs
@@ -95,13 +95,23 @@
   </div>
 {{else}}
   {{#if @filterValue}}
-    <EmptyState @title="There are no credentials matching &quot;{{@filterValue}}&quot;" />
+    <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
+      <A.Header
+        @title="There are no credentials matching &quot;{{@filterValue}}&quot;"
+        @titleTag="h2"
+        data-test-empty-state-title
+      />
+    </Hds::ApplicationState>
   {{else}}
-    <EmptyState
-      @title="No credentials yet for this role"
-      @message="You can generate new credentials that will be limited to this role's allowed operations, then you can distribute them to your KMIP clients."
-    >
-      <Hds::Link::Standalone @icon="plus" @text="Generate credentials" @route="credentials.generate" />
-    </EmptyState>
+    <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
+      <A.Header @title="No credentials yet for this role" @titleTag="h2" data-test-empty-state-title />
+      <A.Body
+        @text="You can generate new credentials that will be limited to this role's allowed operations, then you can distribute them to your KMIP clients."
+        data-test-empty-state-message
+      />
+      <A.Footer data-test-empty-state-actions as |F|>
+        <F.LinkStandalone @icon="plus" @text="Generate credentials" @route="credentials.generate" />
+      </A.Footer>
+    </Hds::ApplicationState>
   {{/if}}
 {{/if}}
\ No newline at end of file
diff --git a/ui/lib/kmip/addon/components/page/scope/roles.hbs b/ui/lib/kmip/addon/components/page/scope/roles.hbs
index f1a80b6253..7a09fc1614 100644
--- a/ui/lib/kmip/addon/components/page/scope/roles.hbs
+++ b/ui/lib/kmip/addon/components/page/scope/roles.hbs
@@ -106,13 +106,23 @@
   </div>
 {{else}}
   {{#if @filterValue}}
-    <EmptyState @title="There are no roles matching &quot;{{@filterValue}}&quot;" />
+    <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
+      <A.Header
+        @title="There are no roles matching &quot;{{@filterValue}}&quot;"
+        @titleTag="h2"
+        data-test-empty-state-title
+      />
+    </Hds::ApplicationState>
   {{else}}
-    <EmptyState
-      @title="No roles in this scope yet"
-      @message="Roles let you generate credentials with a specified set of KMIP operations permissions that clients are allowed to perform."
-    >
-      <Hds::Link::Standalone @icon="plus" @text="Create a role" @route="scope.roles.create" />
-    </EmptyState>
+    <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
+      <A.Header @title="No roles in this scope yet" @titleTag="h2" data-test-empty-state-title />
+      <A.Body
+        @text="Roles let you generate credentials with a specified set of KMIP operations permissions that clients are allowed to perform."
+        data-test-empty-state-message
+      />
+      <A.Footer data-test-empty-state-actions as |F|>
+        <F.LinkStandalone @icon="plus" @text="Create a role" @route="scope.roles.create" />
+      </A.Footer>
+    </Hds::ApplicationState>
   {{/if}}
 {{/if}}
\ No newline at end of file
diff --git a/ui/lib/kmip/addon/components/page/scopes.hbs b/ui/lib/kmip/addon/components/page/scopes.hbs
index ea9ec1de51..c6a6b95d14 100644
--- a/ui/lib/kmip/addon/components/page/scopes.hbs
+++ b/ui/lib/kmip/addon/components/page/scopes.hbs
@@ -94,13 +94,23 @@
   </div>
 {{else}}
   {{#if @filterValue}}
-    <EmptyState @title="There are no scopes matching &quot;{{@filterValue}}&quot;" />
+    <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
+      <A.Header
+        @title="There are no scopes matching &quot;{{@filterValue}}&quot;"
+        @titleTag="h2"
+        data-test-empty-state-title
+      />
+    </Hds::ApplicationState>
   {{else}}
-    <EmptyState
-      @title="KMIP Secrets Engine"
-      @message="First, let's create a scope that our roles and credentials will belong to. A client can only access objects within their role's scope."
-    >
-      <Hds::Link::Standalone @icon="plus" @text="Create a scope" @route="scopes.create" />
-    </EmptyState>
+    <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
+      <A.Header @title="KMIP Secrets Engine" @titleTag="h2" data-test-empty-state-title />
+      <A.Body
+        @text="First, let's create a scope that our roles and credentials will belong to. A client can only access objects within their role's scope."
+        data-test-empty-state-message
+      />
+      <A.Footer data-test-empty-state-actions as |F|>
+        <F.LinkStandalone @icon="plus" @text="Create a scope" @route="scopes.create" />
+      </A.Footer>
+    </Hds::ApplicationState>
   {{/if}}
 {{/if}}
\ No newline at end of file
diff --git a/ui/tests/pages/components/list-view.js b/ui/tests/pages/components/list-view.js
index bec4c1844b..39ed59f5c0 100644
--- a/ui/tests/pages/components/list-view.js
+++ b/ui/tests/pages/components/list-view.js
@@ -4,9 +4,10 @@
  */
 
 import { text, isPresent, collection, clickable } from 'ember-cli-page-object';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 
 export default {
-  isEmpty: isPresent('[data-test-component="empty-state"]'),
+  isEmpty: isPresent(GENERAL.emptyStateTitle),
   listItemLinks: collection('[data-test-list-item-link]', {
     text: text(),
     click: clickable(),