UI: Small styling fix for viewing certificate in kubernetes configuration (#21958)

* created KubernetesCertificate component, moved functionality from configuration.hbs to kubernetes-certificate.hbs, added .scss file, fixed bug in the certificate

* change new component name from KubernetesCertificate to CertificateCard

* switched to using Hds::Card in certificate-card.hbs. Added additional padding class to spacing.scss

* added tests for the CertificateCard in certificate-card-test.js

* added changelog and copyright header

* change naming on CSS class

* changed param name used in CertificateCard to be more generic. removed one class from certificate-card.scss

* changed width of CertificateCard by adding helper class to layout.scss. removed component stylesheet for CertificateCard

changelog/21968.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix styling for viewing certificate in kubernetes configuration
+```

ui/app/styles/helper-classes/layout.scss

@@ -52,6 +52,10 @@
   min-width: 0;
 }
 
+.is-medium-width {
+  width: $desktop / 3;
+}
+
 .is-medium-height {
   height: 125px;
 }

ui/app/styles/helper-classes/spacing.scss

@@ -34,6 +34,10 @@
   padding-bottom: $spacing-s;
 }
 
+.has-bottom-padding-m {
+  padding-bottom: $spacing-m;
+}
+
 .has-bottom-padding-l {
   padding-bottom: $spacing-l;
 }

ui/lib/core/addon/components/certificate-card.hbs

@@ -0,0 +1,28 @@
+<Hds::Card::Container
+  @level="mid"
+  @hasBorder={{true}}
+  class="is-flex-row has-top-padding-m has-bottom-padding-m is-medium-width"
+>
+  <span class="has-left-margin-s">
+    <Icon @name="certificate" @size="24" data-test-certificate-icon />
+  </span>
+  <div class="has-left-margin-m is-min-width-0 is-flex-1">
+    <p class="has-text-weight-bold" data-test-certificate-label>
+      PEM Format
+    </p>
+    <code class="is-size-8 truncate-second-line has-text-grey" data-test-certificate-value>
+      {{@certificateValue}}
+    </code>
+  </div>
+  <div class="is-flex has-background-white-bis has-side-padding-s has-top-bottom-margin-negative-m">
+    <CopyButton
+      data-test-certificate-copy
+      class="button is-transparent is-flex-v-centered"
+      @clipboardText={{@certificateValue}}
+      @buttonType="button"
+      @success={{action (set-flash-message "Certificate copied")}}
+    >
+      <Icon @name="clipboard-copy" aria-label="Copy" />
+    </CopyButton>
+  </div>
+</Hds::Card::Container>

ui/lib/core/app/components/certificate-card.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from 'core/components/certificate-card';

ui/lib/kubernetes/addon/components/page/configuration.hbs

@@ -9,32 +9,7 @@
     <InfoTableRow @label="Kubernetes host" @value={{@config.kubernetesHost}} />
     {{#if @config.kubernetesCaCert}}
       <InfoTableRow @label="Certificate">
-        <div class="column is-half box is-rounded">
+        <CertificateCard @certificateValue={{@config.kubernetesCaCert}} />
-          <div class="is-flex-row">
-            <span class="has-left-margin-s">
-              <Icon @name="certificate" @size="24" data-test-certificate-icon />
-            </span>
-            <div class="has-left-margin-m is-min-width-0">
-              <p class="has-text-weight-bold" data-test-certificate-label>
-                PEM Format
-              </p>
-              <code class="is-size-8 truncate-second-line has-text-grey" data-test-certificate-value>
-                {{@config.kubernetesCaCert}}
-              </code>
-            </div>
-            <div class="is-flex has-background-white-bis has-side-padding-s has-top-bottom-margin-negative-m">
-              <CopyButton
-                data-test-certificate-copy
-                class="button is-transparent is-flex-v-centered"
-                @clipboardText={{@config.kubernetesCaCert}}
-                @buttonType="button"
-                @success={{action (set-flash-message "Certificate copied")}}
-              >
-                <Icon @name="clipboard-copy" aria-label="Copy" />
-              </CopyButton>
-            </div>
-          </div>
-        </div>
       </InfoTableRow>
     {{/if}}
   {{else}}

ui/tests/integration/components/certificate-card-test.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'vault/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+const SELECTORS = {
+  label: '[data-test-certificate-label]',
+  value: '[data-test-certificate-value]',
+};
+
+module('Integration | Component | certificate-card', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders without a certificate value', async function (assert) {
+    await render(hbs`<CertificateCard />`);
+
+    assert.dom(SELECTORS.label).hasText('PEM Format', 'The label text is correct');
+    assert.dom(SELECTORS.value).hasNoText('The is no value for the certificate');
+  });
+
+  test('it renders with a small example value for certificate ', async function (assert) {
+    await render(hbs`<CertificateCard @certificateValue="test"/>`);
+
+    assert.dom(SELECTORS.label).hasText('PEM Format', 'The label text is correct');
+    assert.dom(SELECTORS.value).hasText('test', 'The value for the certificate is correct');
+  });
+
+  test('it renders with an example Kubernetes CA Certificate', async function (assert) {
+    const certificate = `
+      -----BEGIN CERTIFICATE-----
+      MIICUTCCAfugAwIBAgIBADANBgkqhkiG9w0BAQQFADBXMQswCQYDVQQGEwJDTjEL
+      MAkGA1UECBMCUE4xCzAJBgNVBAcTAkNOMQswCQYDVQQKEwJPTjELMAkGA1UECxMC
+      VU4xFDASBgNVBAMTC0hlcm9uZyBZYW5nMB4XDTA1MDcxNTIxMTk0N1oXDTA1MDgx
+      NDIxMTk0N1owVzELMAkGA1UEBhMCQ04xCzAJBgNVBAgTAlBOMQswCQYDVQQHEwJD
+      TjELMAkGA1UEChMCT04xCzAJBgNVBAsTAlVOMRQwEgYDVQQDEwtIZXJvbmcgWWFu
+      ZzBcMA0GCSqGSIb3DQEBAQUAA0sAMEgCQQCp5hnG7ogBhtlynpOS21cBewKE/B7j
+      V14qeyslnr26xZUsSVko36ZnhiaO/zbMOoRcKK9vEcgMtcLFuQTWDl3RAgMBAAGj
+      gbEwga4wHQYDVR0OBBYEFFXI70krXeQDxZgbaCQoR4jUDncEMH8GA1UdIwR4MHaA
+      FFXI70krXeQDxZgbaCQoR4jUDncEoVukWTBXMQswCQYDVQQGEwJDTjELMAkGA1UE
+      CBMCUE4xCzAJBgNVBAcTAkNOMQswCQYDVQQKEwJPTjELMAkGA1UECxMCVU4xFDAS
+      BgNVBAMTC0hlcm9uZyBZYW5nggEAMAwGA1UdEwQFMAMBAf8wDQYJKoZIhvcNAQEE
+      BQADQQA/ugzBrjjK9jcWnDVfGHlk3icNRq0oV7Ri32z/+HQX67aRfgZu7KWdI+Ju
+      Wm7DCfrPNGVwFWUQOmsPue9rZBgO
+      -----END CERTIFICATE-----
+    `;
+    this.set('certificate', certificate);
+    await render(hbs`<CertificateCard @certificateValue={{this.certificate}}/>`);
+
+    assert.dom(SELECTORS.label).hasText('PEM Format', 'The label text is correct');
+    assert.dom(SELECTORS.value).hasText(certificate, 'The value for the CA Certificate is correct');
+  });
+});