VAULT-42410 - refactored empty state component for replication and recovery directories (#12807) (#13021)

* VAULT-42410 - refactored empty state component for replication and recovery directories

* added data-test attributes

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

ui/app/components/recovery/page/snapshots.hbs

@@ -10,10 +10,8 @@
 />
 
 {{#if @model.snapshots.showRaftStorageMessage}}
-  <hr class="has-background-gray-300" />
-
-  <Hds::ApplicationState as |A|>
-    <A.Header @title="Raft storage required" @icon="info" data-test-empty-state-title />
+  <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
+    <A.Header @title="Raft storage required" @icon="info" @titleTag="h2" data-test-empty-state-title />
     <A.Body @text="Raft storage must be used in order to recover data from a snapshot." data-test-empty-state-message />
     <A.Footer data-test-empty-state-actions as |F|>
       <F.LinkStandalone
@@ -27,41 +25,53 @@
   </Hds::ApplicationState>
 {{else}}
   {{#if @model.showCommunityMessage}}
-    <EmptyState
-      @title="Secrets Recovery is an enterprise feature"
-      @icon="sync-reverse"
-      @message="Secrets Recovery allows you to restore accidentally deleted or lost secrets from a snapshot. The snapshots can be provided via upload or loaded from external storage."
-    >
-      <Hds::Button
-        @text="Learn more about upgrading"
-        @color="tertiary"
-        @icon="docs-link"
-        @iconPosition="trailing"
-        @href={{doc-link "/vault/docs/enterprise"}}
-        @isHrefExternal={{true}}
+    <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
+      <A.Header
+        @title="Secrets Recovery is an enterprise feature"
+        @icon="sync-reverse"
+        @titleTag="h2"
+        data-test-empty-state-title
       />
-    </EmptyState>
+      <A.Body
+        @text="Secrets Recovery allows you to restore accidentally deleted or lost secrets from a snapshot. The snapshots can be provided via upload or loaded from external storage."
+        data-test-empty-state-message
+      />
+      <A.Footer data-test-empty-state-actions as |F|>
+        <F.LinkStandalone
+          @text="Learn more about upgrading"
+          @icon="docs-link"
+          @iconPosition="trailing"
+          @href={{doc-link "/vault/docs/enterprise"}}
+          @isHrefExternal={{true}}
+        />
+      </A.Footer>
+    </Hds::ApplicationState>
   {{else if (not @model.snapshots)}}
     {{! Currently, only a single snapshot is supported and the UI automatically redirects users to "recovery.snapshots.snapshot.manage" if one exists.
   In the future, this may change to support multiple loaded snapshots and a LIST view will be built then. }}
     {{#let (get this.emptyStateDetails this.state) as |d|}}
-      <EmptyState @title={{d.title}} @icon={{d.icon}} @message={{d.message}}>
+      <Hds::Separator />
 
-        {{#if (eq this.state this.viewState.ALLOW_UPLOAD)}}
-          <Hds::Button @text={{d.buttonText}} @color={{d.buttonColor}} @route="vault.cluster.recovery.snapshots.load" />
-        {{else}}
-          <Hds::Button
-            @text={{d.buttonText}}
-            @color={{d.buttonColor}}
-            @icon={{d.buttonIcon}}
-            @iconPosition="trailing"
-            @route={{d.buttonRoute}}
-            @query={{if d.buttonRoute (hash namespace="")}}
-            @href={{doc-link d.buttonHref}}
-            @isHrefExternal={{if d.buttonHref true}}
-          />
-        {{/if}}
-      </EmptyState>
+      <Hds::ApplicationState class="is-marginless" as |A|>
+        <A.Header @title={{d.title}} @icon={{d.icon}} @titleTag="h2" data-test-empty-state-title />
+        <A.Body @text={{d.message}} data-test-empty-state-message />
+        <A.Footer data-test-empty-state-actions as |F|>
+          {{#if (eq this.state this.viewState.ALLOW_UPLOAD)}}
+            <F.Button @text={{d.buttonText}} @color={{d.buttonColor}} @route="vault.cluster.recovery.snapshots.load" />
+          {{else}}
+            <F.Button
+              @text={{d.buttonText}}
+              @color={{d.buttonColor}}
+              @icon={{d.buttonIcon}}
+              @iconPosition="trailing"
+              @route={{d.buttonRoute}}
+              @query={{if d.buttonRoute (hash namespace="")}}
+              @href={{doc-link d.buttonHref}}
+              @isHrefExternal={{if d.buttonHref true}}
+            />
+          {{/if}}
+        </A.Footer>
+      </Hds::ApplicationState>
     {{/let}}
   {{/if}}
 {{/if}}

ui/lib/replication/addon/templates/index.hbs

@@ -18,7 +18,13 @@
         </:breadcrumbs>
       </Page::Header>
 
-      <EmptyState @title="The current cluster configuration does not support replication" />
+      <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
+        <A.Header
+          @title="The current cluster configuration does not support replication"
+          @titleTag="h2"
+          data-test-empty-state-title
+        />
+      </Hds::ApplicationState>
     {{else if this.model.replicationIsInitializing}}
       <LayoutLoading />
     {{else if this.model.allReplicationDisabled}}

ui/lib/replication/addon/templates/mode/secondaries/config-show.hbs

@@ -44,5 +44,8 @@
     </InfoTableRow>
   </div>
 {{else}}
-  <EmptyState @title="No config yet" @message="Performance Mount Filtering is not configured for this secondary" />
+  <Hds::ApplicationState class="top-padding-32 is-marginless" as |A|>
+    <A.Header @title="No config yet" @titleTag="h2" data-test-empty-state-title />
+    <A.Body @text="Performance Mount Filtering is not configured for this secondary." data-test-empty-state-message />
+  </Hds::ApplicationState>
 {{/if}}