diff --git a/changelog/21968.txt b/changelog/21968.txt new file mode 100644 index 0000000000..3ba650d585 --- /dev/null +++ b/changelog/21968.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: Fix styling for viewing certificate in kubernetes configuration +``` \ No newline at end of file diff --git a/ui/app/styles/helper-classes/layout.scss b/ui/app/styles/helper-classes/layout.scss index 1011ed0576..010d0dd242 100644 --- a/ui/app/styles/helper-classes/layout.scss +++ b/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; } diff --git a/ui/app/styles/helper-classes/spacing.scss b/ui/app/styles/helper-classes/spacing.scss index 5f8c50087c..cf9103d587 100644 --- a/ui/app/styles/helper-classes/spacing.scss +++ b/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; } diff --git a/ui/lib/core/addon/components/certificate-card.hbs b/ui/lib/core/addon/components/certificate-card.hbs new file mode 100644 index 0000000000..828a4e7e16 --- /dev/null +++ b/ui/lib/core/addon/components/certificate-card.hbs @@ -0,0 +1,28 @@ + + + + +
+

+ PEM Format +

+ + {{@certificateValue}} + +
+
+ + + +
+ \ No newline at end of file diff --git a/ui/lib/core/app/components/certificate-card.js b/ui/lib/core/app/components/certificate-card.js new file mode 100644 index 0000000000..cd642df64d --- /dev/null +++ b/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'; diff --git a/ui/lib/kubernetes/addon/components/page/configuration.hbs b/ui/lib/kubernetes/addon/components/page/configuration.hbs index 9dee03246c..303aa91537 100644 --- a/ui/lib/kubernetes/addon/components/page/configuration.hbs +++ b/ui/lib/kubernetes/addon/components/page/configuration.hbs @@ -9,32 +9,7 @@ {{#if @config.kubernetesCaCert}} -
-
- - - -
-

- PEM Format -

- - {{@config.kubernetesCaCert}} - -
-
- - - -
-
-
+ {{/if}} {{else}} diff --git a/ui/tests/integration/components/certificate-card-test.js b/ui/tests/integration/components/certificate-card-test.js new file mode 100644 index 0000000000..7f94abfc08 --- /dev/null +++ b/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``); + + 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``); + + 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``); + + 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'); + }); +});