VAULT-41682 - Replace EmptyState components with Hds::ApplicationState in database directory (#12065) (#12068)

* VAULT-41682 - Replace EmptyState components with Hds::ApplicationState in database directory

* fixed co-pilot review comments

* fixed failing test case

Co-authored-by: mohit-hashicorp <mohit.ojha@hashicorp.com>

ui/app/components/database-connection.hbs

@@ -143,7 +143,10 @@
             {{/each-in}}
           {{/each}}
         {{else}}
-          <EmptyState @title="No plugin selected" @message="Select a plugin type to be able to configure it." />
+          <Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
+            <A.Header data-test-empty-state-title @title="No plugin selected" />
+            <A.Body data-test-empty-state-message @text="Select a plugin type to be able to configure it." />
+          </Hds::ApplicationState>
         {{/if}}
       </fieldset>
     </div>
@@ -154,7 +157,10 @@
       <div class="form-section box is-shadowless is-fullwidth">
         <h3 class="title is-5">Statements</h3>
         {{#if (eq @model.statementFields null)}}
-          <EmptyState @title="No plugin selected" @message="Select a plugin type to be able to configure it." />
+          <Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
+            <A.Header data-test-empty-state-title @title="No plugin selected" />
+            <A.Body data-test-empty-state-message @text="Select a plugin type to be able to configure it." />
+          </Hds::ApplicationState>
         {{else}}
           {{#each @model.statementFields as |attr|}}
             <FormField data-test-field={{true}} @attr={{attr}} @model={{@model}} />
@@ -302,21 +308,22 @@
     </div>
   </form>
 {{else if (eq @model.isAvailablePlugin false)}}
-  <EmptyState
-    @title="Database type unavailable"
-    @subTitle="Not supported in the UI"
-    @icon="skip"
-    @message="This database type cannot be viewed in the UI. You will have to use the API or CLI to perform actions here."
-    @bottomBorder={{true}}
-  >
-    <Hds::Link::Standalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backend.list-root" />
-    <Hds::Link::Standalone
-      @icon="docs-link"
-      @iconPosition="trailing"
-      @text="Database API docs"
-      @href={{doc-link "/vault/api-docs/secret/databases"}}
-    />
-  </EmptyState>
+  <Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
+    <A.Header data-test-empty-state-title @icon="skip" @title="Database type unavailable" />
+    <A.Body data-test-empty-state-message>
+      <p>Not supported in the UI</p>
+      <p>This database type cannot be viewed in the UI. You will have to use the API or CLI to perform actions here.</p>
+    </A.Body>
+    <A.Footer data-test-empty-state-actions as |F|>
+      <F.LinkStandalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backend.list-root" />
+      <F.LinkStandalone
+        @icon="docs-link"
+        @iconPosition="trailing"
+        @text="Database API docs"
+        @href={{doc-link "/vault/api-docs/secret/databases"}}
+      />
+    </A.Footer>
+  </Hds::ApplicationState>
 {{else}}
   {{#each @model.showAttrs as |attr|}}
     {{#let attr.options.defaultShown as |defaultDisplay|}}

ui/app/components/database-role-edit.hbs

@@ -141,10 +141,10 @@
           @modelValidations={{this.modelValidations}}
         />
       {{else}}
-        <EmptyState
-          @title="No database connection selected"
-          @message="Choose a connection to be able to configure a role type."
-        />
+        <Hds::ApplicationState @align="center" class="bottom-padding-32" as |A|>
+          <A.Header data-test-empty-state-title @title="No database connection selected" />
+          <A.Body data-test-empty-state-message @text="Choose a connection to be able to configure a role type." />
+        </Hds::ApplicationState>
       {{/if}}
       <div class="field is-fullwidth box is-bottomless">
         <Hds::ButtonSet>

ui/app/components/database-role-setting-form.hbs

@@ -37,7 +37,10 @@
       {{/each}}
     </div>
   {{else}}
-    <EmptyState @title="No role type selected" @message="Select a type of role to be able to configure it" />
+    <Hds::ApplicationState @align="center" class="top-padding-32 bottom-padding-32" as |A|>
+      <A.Header data-test-empty-state-title @title="No role type selected" />
+      <A.Body data-test-empty-state-message @text="Select a type of role to be able to configure it" />
+    </Hds::ApplicationState>
   {{/if}}
 </div>
 {{! template-lint-configure simple-unless "warn"  }}
@@ -51,10 +54,13 @@
         {{/each}}
       </div>
     {{else}}
-      <EmptyState
-        @title="No role type selected"
-        @message="Select a type of role to be able to add statements for creation, revocation, and/or rotation."
-      />
+      <Hds::ApplicationState @align="center" class="top-padding-32 bottom-padding-32" as |A|>
+        <A.Header data-test-empty-state-title @title="No role type selected" />
+        <A.Body
+          data-test-empty-state-message
+          @text="Select a type of role to be able to add statements for creation, revocation, and/or rotation."
+        />
+      </Hds::ApplicationState>
     {{/if}}
   </div>
 {{/unless}}

ui/app/components/generate-credentials-database.hbs

@@ -12,20 +12,23 @@
 <div class={{if @roleType "box is-fullwidth is-sideless is-marginless"}}>
   {{! If no role type, that means both static and dynamic requests returned an error }}
   {{#unless @roleType}}
-    <EmptyState
-      @title={{this.errorTitle}}
-      @subTitle="Error {{@model.errorHttpStatus}}"
-      @icon="alert-circle"
-      @bottomBorder={{true}}
-      @message={{@model.errorMessage}}
-    >
-      <Hds::Link::Standalone
-        @iconPosition="trailing"
-        @icon="docs-link"
-        @text="Database documentation"
-        @href={{doc-link "/vault/api-docs/secret/databases"}}
+    <Hds::ApplicationState @align="center" class="top-padding-32 bottom-padding-32" as |A|>
+      <A.Header
+        data-test-empty-state-title
+        @title={{this.errorTitle}}
+        @errorCode={{@model.errorHttpStatus}}
+        @icon="alert-circle"
       />
-    </EmptyState>
+      <A.Body data-test-empty-state-message @text={{@model.errorMessage}} />
+      <A.Footer data-test-empty-state-actions as |F|>
+        <F.LinkStandalone
+          @iconPosition="trailing"
+          @icon="docs-link"
+          @text="Database documentation"
+          @href={{doc-link "/vault/api-docs/secret/databases"}}
+        />
+      </A.Footer>
+    </Hds::ApplicationState>
   {{/unless}}
   {{#if (and (not @model.errorMessage) (eq @roleType "dynamic"))}}
     <Hds::Alert @type="inline" @color="warning" class="has-top-bottom-margin" data-test-credentials-warning as |A|>

ui/tests/integration/components/database-role-setting-form-test.js

@@ -9,6 +9,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import { setRunOptions } from 'ember-a11y-testing/test-support';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 
 const testCases = [
   {
@@ -96,7 +97,7 @@ module('Integration | Component | database-role-setting-form', function (hooks)
       },
     });
     await render(hbs`<DatabaseRoleSettingForm @attrs={{this.model.attrs}} @model={{this.model}}/>`);
-    assert.dom('[data-test-component="empty-state"]').exists({ count: 2 }, 'Two empty states exist');
+    assert.dom(GENERAL.emptyStateTitle).exists({ count: 2 }, 'Two empty states exist');
   });
 
   test('it shows appropriate fields based on roleType and db plugin', async function (assert) {