UI: [VAULT-17365, VAULT-17613, VAULT-17614] Dashboard Secrets Engine …

…Card Improvements (#21604)
hashicorp · Jul 6, 2023 · 8b4fc35 · 8b4fc35
1 parent 58b9d46
commit 8b4fc35
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/ui/app/styles/helper-classes/general.scss b/ui/app/styles/helper-classes/general.scss
@@ -89,6 +89,14 @@
   overflow: hidden;
 }
 
+.truncate-first-line {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 // screen reader only
 .sr-only {
   border: 0;
@@ -107,3 +115,8 @@
 .border-radius-2 {
   border-radius: $radius;
 }
+
+// border-spacing
+.is-border-spacing-revert {
+  border-spacing: revert;
+}
diff --git a/ui/app/templates/components/dashboard/secrets-engines-card.hbs b/ui/app/templates/components/dashboard/secrets-engines-card.hbs
@@ -1,16 +1,9 @@
-<div class="is-flex-between has-left-margin-xs" data-test-dashboard-secrets-engines-header>
-  <h3 class="title is-4">Secrets Engines</h3>
-  <div>
-    <Hds::Link::Inline @route="vault.cluster.secrets.backends" class="has-text-weight-semibold is-no-underline">
-      View more
-    </Hds::Link::Inline>
-  </div>
-</div>
-<Hds::Table @caption="Five secrets engines" class="has-border-collapse" data-test-dashboard-secrets-engines-table>
+<h3 class="title is-4 has-left-margin-xxs" data-test-dashboard-secrets-engines-header>Secrets Engines</h3>
+<Hds::Table @caption="Five secrets engines" class="is-border-spacing-revert" data-test-dashboard-secrets-engines-table>
   <:body as |B|>
     {{#each this.filteredSecretsEngines as |backend|}}
       <B.Tr data-test-secrets-engines-row={{backend.id}}>
-        <B.Td class="is-flex-between is-flex-center">
+        <B.Td class="is-flex-between is-flex-center has-gap-m">
           <div>
             <div class="is-flex-center">
               {{#if backend.icon}}
@@ -30,7 +23,7 @@
                   <LinkTo
                     @route={{backend.backendLink}}
                     @model={{backend.id}}
-                    class="has-text-black has-text-weight-semibold is-no-underline"
+                    class="has-text-black has-text-weight-semibold"
                     data-test-secret-path
                   >
                     {{backend.path}}
@@ -46,7 +39,7 @@
               </code>
             {{/if}}
             {{#if backend.description}}
-              <div data-test-description>
+              <div data-test-description class="truncate-first-line">
                 {{backend.description}}
               </div>
             {{/if}}
@@ -67,4 +60,13 @@
       </B.Tr>
     {{/each}}
   </:body>
-</Hds::Table>
+</Hds::Table>
+<div class="is-flex-end has-top-margin-s">
+  <Hds::Link::Standalone
+    class="has-text-weight-semibold is-no-underline"
+    @icon="arrow-right"
+    @iconPosition="trailing"
+    @text="Show all"
+    @route="vault.cluster.secrets.backends"
+  />
+</div>
diff --git a/ui/app/templates/vault/cluster/dashboard.hbs b/ui/app/templates/vault/cluster/dashboard.hbs
@@ -1,16 +1,14 @@
 <h1 class="title has-top-margin-m">Vault version</h1>
 <div>
-  <div class="is-flex-row has-gap-m has-bottom-margin-m">
+  <div class="is-grid grid-2-columns grid-gap-2 has-bottom-margin-m">
     <Hds::Card::Container @hasBorder={{true}} class="has-padding-l is-flex-column is-flex-half">
       <Dashboard::SecretsEnginesCard @secretsEngines={{@model.secretsEngines}} />
     </Hds::Card::Container>
 
     <Hds::Card::Container @hasBorder={{true}} class="has-padding-l is-flex-column is-flex-half">
       <h3 class="title is-4">Quick Actions</h3>
     </Hds::Card::Container>
-  </div>
 
-  <div class="is-flex-row has-gap-m">
     <Hds::Card::Container @hasBorder={{true}} class="has-padding-l is-flex-column is-flex-half">
       <Dashboard::LearnMoreCard />
     </Hds::Card::Container>

diff --git a/ui/tests/helpers/components/dashboard/secrets-engines-card.js b/ui/tests/helpers/components/dashboard/secrets-engines-card.js
@@ -4,7 +4,7 @@
  */
 
 const SELECTORS = {
-  cardTitle: '[data-test-dashboard-secrets-engines-header] h3',
+  cardTitle: '[data-test-dashboard-secrets-engines-header]',
   secretEnginesTableRows: '[data-test-dashboard-secrets-engines-table] tr',
   getSecretEngineAccessor: (engineId) => `[data-test-secrets-engines-row=${engineId}] [data-test-accessor]`,
   getSecretEngineDescription: (engineId) =>