From 21f8ad289c4dfb6303e5816d970ca21927472f7c Mon Sep 17 00:00:00 2001
From: Kianna <30884335+kiannaquach@users.noreply.github.com>
Date: Wed, 5 Jul 2023 12:50:22 -0700
Subject: [PATCH] =?UTF-8?q?UI:=20[VAULT-17317]=20Update=20components=20to?=
 =?UTF-8?q?=20use=20helper=20class=20and=20use=20overview-=E2=80=A6=20(#21?=
 =?UTF-8?q?586)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/app/styles/components/overview-card.scss   | 18 +++++++++++++++++
 .../components/selectable-card-container.scss |  8 --------
 ui/app/styles/core.scss                       |  1 +
 .../helper-classes/flexbox-and-grid.scss      | 12 +++++++++++
 ui/app/styles/helper-classes/general.scss     |  5 +++++
 .../core/addon/components/overview-card.hbs   | 11 +++++++---
 .../addon/components/page/overview.hbs        |  2 +-
 .../addon/components/page/pki-overview.hbs    |  6 +++---
 ui/tests/helpers/kubernetes/overview.js       | 10 +++++-----
 ui/tests/helpers/pki/overview.js              | 20 +++++++++----------
 10 files changed, 63 insertions(+), 30 deletions(-)
 create mode 100644 ui/app/styles/components/overview-card.scss

diff --git a/ui/app/styles/components/overview-card.scss b/ui/app/styles/components/overview-card.scss
new file mode 100644
index 0000000000..27bce9906f
--- /dev/null
+++ b/ui/app/styles/components/overview-card.scss
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.overview-card {
+  padding: $spacing-l;
+  display: initial;
+  line-height: initial;
+
+  .title-number {
+    color: $black;
+    padding-top: $spacing-s;
+    font-size: 36px;
+    font-weight: 500;
+    line-height: 1.33;
+  }
+}
diff --git a/ui/app/styles/components/selectable-card-container.scss b/ui/app/styles/components/selectable-card-container.scss
index 8422993bc3..e1a267c5c6 100644
--- a/ui/app/styles/components/selectable-card-container.scss
+++ b/ui/app/styles/components/selectable-card-container.scss
@@ -35,14 +35,6 @@
   }
 }
 
-.selectable-card-container.has-grid.has-two-col-grid {
-  grid-template-columns: 2fr 2fr;
-  grid-template-rows: none;
-
-  @include until($mobile) {
-    grid-template-columns: 1fr;
-  }
-}
 .selectable-card-container.has-grid.has-three-col-grid {
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: none;
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index a7041a8224..f91971a438 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -86,6 +86,7 @@
 @import './components/namespace-picker';
 @import './components/namespace-reminder';
 @import './components/navigate-input';
+@import './components/overview-card';
 @import './components/page-header-old';
 @import './components/popup-menu';
 @import './components/radio-card';
diff --git a/ui/app/styles/helper-classes/flexbox-and-grid.scss b/ui/app/styles/helper-classes/flexbox-and-grid.scss
index b2e3b56024..4f3ab5aec4 100644
--- a/ui/app/styles/helper-classes/flexbox-and-grid.scss
+++ b/ui/app/styles/helper-classes/flexbox-and-grid.scss
@@ -102,6 +102,18 @@
   display: grid;
 }
 
+.grid-2-columns {
+  grid-template-columns: 2fr 2fr;
+
+  @include until($mobile) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.grid-gap-2 {
+  grid-gap: 2rem;
+}
+
 .is-grid-3-columns {
   grid-template-columns: repeat(3, 1fr);
 }
diff --git a/ui/app/styles/helper-classes/general.scss b/ui/app/styles/helper-classes/general.scss
index ff77e6410d..65d31ae546 100644
--- a/ui/app/styles/helper-classes/general.scss
+++ b/ui/app/styles/helper-classes/general.scss
@@ -98,3 +98,8 @@
   white-space: nowrap;
   width: 1px;
 }
+
+// border-radius
+.border-radius-2 {
+  border-radius: $radius;
+}
diff --git a/ui/lib/core/addon/components/overview-card.hbs b/ui/lib/core/addon/components/overview-card.hbs
index 2d60a8e59c..f0e2a8fb58 100644
--- a/ui/lib/core/addon/components/overview-card.hbs
+++ b/ui/lib/core/addon/components/overview-card.hbs
@@ -1,5 +1,10 @@
-<div class="selectable-card is-rounded no-flex" data-test-selectable-card-container={{@cardTitle}}>
-  <div class="is-flex-between is-fullwidth card-details" data-test-selectable-card={{@cardTitle}}>
+<Hds::Card::Container
+  @level="mid"
+  @hasBorder={{true}}
+  class="overview-card border-radius-2"
+  data-test-overview-card-container={{@cardTitle}}
+>
+  <div class="is-flex-between" data-test-overview-card={{@cardTitle}}>
     <h3 class="title is-5">{{@cardTitle}}</h3>
     {{#if @actionText}}
       <LinkTo
@@ -15,4 +20,4 @@
   </div>
   <p class="has-text-grey is-size-8 {{unless @actionText 'has-top-margin-s'}}">{{@subText}}</p>
   {{yield}}
-</div>
\ No newline at end of file
+</Hds::Card::Container>
\ No newline at end of file
diff --git a/ui/lib/kubernetes/addon/components/page/overview.hbs b/ui/lib/kubernetes/addon/components/page/overview.hbs
index 228135f3f7..6231d3a778 100644
--- a/ui/lib/kubernetes/addon/components/page/overview.hbs
+++ b/ui/lib/kubernetes/addon/components/page/overview.hbs
@@ -5,7 +5,7 @@
 {{#if @promptConfig}}
   <ConfigCta />
 {{else}}
-  <div class="selectable-card-container has-grid has-top-margin-l has-two-col-grid">
+  <div class="is-grid has-top-margin-l grid-2-columns grid-gap-2">
     <OverviewCard
       @cardTitle="Roles"
       @subText="The number of Vault roles being used to generate Kubernetes credentials."
diff --git a/ui/lib/pki/addon/components/page/pki-overview.hbs b/ui/lib/pki/addon/components/page/pki-overview.hbs
index b96cad10b7..eba226980d 100644
--- a/ui/lib/pki/addon/components/page/pki-overview.hbs
+++ b/ui/lib/pki/addon/components/page/pki-overview.hbs
@@ -1,4 +1,4 @@
-<div class="selectable-card-container has-grid has-top-margin-l has-two-col-grid">
+<div class="is-grid grid-2-columns grid-gap-2 has-top-margin-l">
   <OverviewCard
     @cardTitle="Issuers"
     @subText="The total number of issuers in this PKI mount. Includes both root and intermediate certificates."
@@ -43,7 +43,7 @@
   </OverviewCard>
 
   <OverviewCard @cardTitle="View certificate" @subText="Quickly view a certificate by typing its serial number.">
-    <div class="has-top-margin-m is-flex">
+    <div class="has-top-margin-m {{unless this.certificateValue 'is-flex'}}">
       <SearchSelect
         class="is-flex-1"
         @selectLimit="1"
@@ -57,7 +57,7 @@
       />
       <button
         type="button"
-        class="button is-secondary has-left-margin-s"
+        class="button is-secondary {{unless this.certificateValue 'has-left-margin-s'}}"
         disabled={{unless this.certificateValue true}}
         {{on "click" this.transitionToViewCertificates}}
         data-test-view-certificate-button
diff --git a/ui/tests/helpers/kubernetes/overview.js b/ui/tests/helpers/kubernetes/overview.js
index 49b647b309..33833cdbf0 100644
--- a/ui/tests/helpers/kubernetes/overview.js
+++ b/ui/tests/helpers/kubernetes/overview.js
@@ -4,12 +4,12 @@
  */
 
 export const SELECTORS = {
-  rolesCardTitle: '[data-test-selectable-card="Roles"] .title',
-  rolesCardSubTitle: '[data-test-selectable-card-container="Roles"] p',
-  rolesCardLink: '[data-test-selectable-card="Roles"] a',
+  rolesCardTitle: '[data-test-overview-card="Roles"] .title',
+  rolesCardSubTitle: '[data-test-overview-card-container="Roles"] p',
+  rolesCardLink: '[data-test-overview-card="Roles"] a',
   rolesCardNumRoles: '[data-test-roles-card-overview-num]',
-  generateCredentialsCardTitle: '[data-test-selectable-card="Generate credentials"] .title',
-  generateCredentialsCardSubTitle: '[data-test-selectable-card-container="Generate credentials"] p',
+  generateCredentialsCardTitle: '[data-test-overview-card="Generate credentials"] .title',
+  generateCredentialsCardSubTitle: '[data-test-overview-card-container="Generate credentials"] p',
   generateCredentialsCardButton: '[data-test-generate-credential-button]',
   emptyStateTitle: '.empty-state .empty-state-title',
   emptyStateMessage: '.empty-state .empty-state-message',
diff --git a/ui/tests/helpers/pki/overview.js b/ui/tests/helpers/pki/overview.js
index 78329cd9f3..b6c3ff0bdc 100644
--- a/ui/tests/helpers/pki/overview.js
+++ b/ui/tests/helpers/pki/overview.js
@@ -4,19 +4,19 @@
  */
 
 export const SELECTORS = {
-  issuersCardTitle: '[data-test-selectable-card-container="Issuers"] h3',
-  issuersCardSubtitle: '[data-test-selectable-card-container="Issuers"] p',
-  issuersCardLink: '[data-test-selectable-card-container="Issuers"] a',
-  issuersCardOverviewNum: '[data-test-selectable-card-container="Issuers"] .title-number',
-  rolesCardTitle: '[data-test-selectable-card-container="Roles"] h3',
-  rolesCardSubtitle: '[data-test-selectable-card-container="Roles"] p',
-  rolesCardLink: '[data-test-selectable-card-container="Roles"] a',
-  rolesCardOverviewNum: '[data-test-selectable-card-container="Roles"] .title-number',
-  issueCertificate: '[data-test-selectable-card-container="Issue certificate"] h3',
+  issuersCardTitle: '[data-test-overview-card-container="Issuers"] h3',
+  issuersCardSubtitle: '[data-test-overview-card-container="Issuers"] p',
+  issuersCardLink: '[data-test-overview-card-container="Issuers"] a',
+  issuersCardOverviewNum: '[data-test-overview-card-container="Issuers"] .title-number',
+  rolesCardTitle: '[data-test-overview-card-container="Roles"] h3',
+  rolesCardSubtitle: '[data-test-overview-card-container="Roles"] p',
+  rolesCardLink: '[data-test-overview-card-container="Roles"] a',
+  rolesCardOverviewNum: '[data-test-overview-card-container="Roles"] .title-number',
+  issueCertificate: '[data-test-overview-card-container="Issue certificate"] h3',
   issueCertificateInput: '[data-test-issue-certificate-input]',
   issueCertificatePowerSearch: '[data-test-issue-certificate-input] span',
   issueCertificateButton: '[data-test-issue-certificate-button]',
-  viewCertificate: '[data-test-selectable-card-container="View certificate"] h3',
+  viewCertificate: '[data-test-overview-card-container="View certificate"] h3',
   viewCertificateInput: '[data-test-view-certificate-input]',
   viewCertificatePowerSearch: '[data-test-view-certificate-input] span',
   viewCertificateButton: '[data-test-view-certificate-button]',