diff --git a/changelog/22160.txt b/changelog/22160.txt new file mode 100644 index 0000000000..19f590bfc5 --- /dev/null +++ b/changelog/22160.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: display CertificateCard instead of MaskedInput for certificates in PKI +``` \ No newline at end of file diff --git a/ui/app/models/pki/action.js b/ui/app/models/pki/action.js index 71c476b07e..accb660bd9 100644 --- a/ui/app/models/pki/action.js +++ b/ui/app/models/pki/action.js @@ -61,13 +61,13 @@ export default class PkiActionModel extends Model { @attr importedIssuers; @attr importedKeys; @attr mapping; - @attr('string', { readOnly: true, masked: true }) certificate; + @attr('string', { readOnly: true, isCertificate: true }) certificate; /* actionType generate-root */ // readonly attrs returned right after root generation @attr serialNumber; - @attr('string', { label: 'Issuing CA', readOnly: true, masked: true }) issuingCa; + @attr('string', { label: 'Issuing CA', readOnly: true, isCertificate: true }) issuingCa; // end of readonly @attr('string', { @@ -212,10 +212,10 @@ export default class PkiActionModel extends Model { @attr('string', { label: 'Issuer ID', readOnly: true, detailLinkTo: 'issuers.issuer.details' }) issuerId; // returned from generate-root action // For generating and signing a CSR - @attr('string', { label: 'CSR', masked: true }) csr; + @attr('string', { label: 'CSR', isCertificate: true }) csr; @attr caChain; @attr('string', { label: 'Key ID', detailLinkTo: 'keys.key.details' }) keyId; - @attr('string', { masked: true }) privateKey; + @attr('string', { isCertificate: true }) privateKey; @attr('string') privateKeyType; get backend() { diff --git a/ui/app/models/pki/certificate/base.js b/ui/app/models/pki/certificate/base.js index 8564bfa195..94e0dfa127 100644 --- a/ui/app/models/pki/certificate/base.js +++ b/ui/app/models/pki/certificate/base.js @@ -83,11 +83,11 @@ export default class PkiCertificateBaseModel extends Model { otherSans; // Attrs that come back from API POST request - @attr({ label: 'CA Chain', masked: true }) caChain; - @attr('string', { masked: true }) certificate; + @attr({ label: 'CA Chain', isCertificate: true }) caChain; + @attr('string', { isCertificate: true }) certificate; @attr('number') expiration; - @attr('string', { label: 'Issuing CA', masked: true }) issuingCa; - @attr('string', { masked: true }) privateKey; // only returned for type=exported and /issue + @attr('string', { label: 'Issuing CA', isCertificate: true }) issuingCa; + @attr('string', { isCertificate: true }) privateKey; // only returned for type=exported and /issue @attr('string') privateKeyType; // only returned for type=exported and /issue @attr('number', { formatDate: true }) revocationTime; @attr('string') serialNumber; diff --git a/ui/app/models/pki/issuer.js b/ui/app/models/pki/issuer.js index 6de6cfc27a..dcc83118c1 100644 --- a/ui/app/models/pki/issuer.js +++ b/ui/app/models/pki/issuer.js @@ -42,8 +42,8 @@ export default class PkiIssuerModel extends Model { @attr isDefault; @attr('string', { label: 'Issuer ID', detailLinkTo: 'issuers.issuer.details' }) issuerId; @attr('string', { label: 'Default key ID', detailLinkTo: 'keys.key.details' }) keyId; - @attr({ label: 'CA Chain', masked: true }) caChain; - @attr({ masked: true }) certificate; + @attr({ label: 'CA Chain', isCertificate: true }) caChain; + @attr({ isCertificate: true }) certificate; @attr('string') serialNumber; // parsed from certificate contents in serializer (see parse-pki-cert.js) diff --git a/ui/lib/core/addon/components/certificate-card.hbs b/ui/lib/core/addon/components/certificate-card.hbs index 828a4e7e16..402c90d323 100644 --- a/ui/lib/core/addon/components/certificate-card.hbs +++ b/ui/lib/core/addon/components/certificate-card.hbs @@ -2,23 +2,24 @@ @level="mid" @hasBorder={{true}} class="is-flex-row has-top-padding-m has-bottom-padding-m is-medium-width" + data-test-certificate-card >

- PEM Format + {{this.format}}

- {{@certificateValue}} + {{@data}}
diff --git a/ui/lib/core/addon/components/certificate-card.js b/ui/lib/core/addon/components/certificate-card.js new file mode 100644 index 0000000000..53f06bc5d1 --- /dev/null +++ b/ui/lib/core/addon/components/certificate-card.js @@ -0,0 +1,40 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; + +/** + * @module CertificateCard + * The CertificateCard component receives data and optionally receives a boolean declaring if that data is meant to be in PEM + * Format. It renders using the . To the left there is a certificate icon. In the center there is a label + * which says which format (PEM or DER) the data is in. Below the label is the truncated data. To the right there is a copy + * button to copy the data. + * + * @example + * ```js + * + * ``` + * @param {string} data - the data to be displayed in the component (usually in PEM or DER format) + * @param {boolean} isPem - optional argument for if the data is required to be in PEM format (and should thus have the PEM Format label) + */ + +export default class CertificateCardComponent extends Component { + // Returns the format the data is in: PEM, DER, or no format if no data is provided + get format() { + if (!this.args.data) return ''; + + let value; + if (typeof this.args.data === 'object') { + value = this.args.data[0]; + } else { + value = this.args.data; + } + + if (value.substring(0, 11) === '-----BEGIN ' || this.args.isPem === true) { + return 'PEM Format'; + } + return 'DER Format'; + } +} diff --git a/ui/lib/kubernetes/addon/components/page/configuration.hbs b/ui/lib/kubernetes/addon/components/page/configuration.hbs index 303aa91537..573f8f4415 100644 --- a/ui/lib/kubernetes/addon/components/page/configuration.hbs +++ b/ui/lib/kubernetes/addon/components/page/configuration.hbs @@ -9,7 +9,7 @@ {{#if @config.kubernetesCaCert}} - + {{/if}} {{else}} diff --git a/ui/lib/pki/addon/components/page/pki-certificate-details.hbs b/ui/lib/pki/addon/components/page/pki-certificate-details.hbs index 2b26a9702a..3364c4f7f8 100644 --- a/ui/lib/pki/addon/components/page/pki-certificate-details.hbs +++ b/ui/lib/pki/addon/components/page/pki-certificate-details.hbs @@ -32,9 +32,9 @@ {{/if}} {{#each @model.formFields as |field|}} - {{#if field.options.masked}} + {{#if field.options.isCertificate}} - + {{else if (eq field.name "serialNumber")}} diff --git a/ui/lib/pki/addon/components/page/pki-issuer-details.hbs b/ui/lib/pki/addon/components/page/pki-issuer-details.hbs index bc8dddb4d9..f16ec62115 100644 --- a/ui/lib/pki/addon/components/page/pki-issuer-details.hbs +++ b/ui/lib/pki/addon/components/page/pki-issuer-details.hbs @@ -94,14 +94,9 @@ {{/if}} {{#each fields as |attr|}} - {{#if attr.options.masked}} + {{#if attr.options.isCertificate}} - + {{else if (eq attr.name "keyId")}} diff --git a/ui/lib/pki/addon/components/page/pki-key-details.hbs b/ui/lib/pki/addon/components/page/pki-key-details.hbs index 09453bd435..8bbaa6494f 100644 --- a/ui/lib/pki/addon/components/page/pki-key-details.hbs +++ b/ui/lib/pki/addon/components/page/pki-key-details.hbs @@ -49,7 +49,7 @@ {{/each}} {{#if @key.privateKey}} - + {{/if}}
\ No newline at end of file diff --git a/ui/lib/pki/addon/components/pki-generate-csr.hbs b/ui/lib/pki/addon/components/pki-generate-csr.hbs index 751cb36e29..164da74b64 100644 --- a/ui/lib/pki/addon/components/pki-generate-csr.hbs +++ b/ui/lib/pki/addon/components/pki-generate-csr.hbs @@ -21,8 +21,8 @@ @value={{value}} @addCopyButton={{eq attr.name "keyId"}} > - {{#if (and attr.options.masked value)}} - + {{#if (and attr.options.isCertificate value)}} + {{else if (eq attr.name "keyId")}} {{@model.keyId}} diff --git a/ui/lib/pki/addon/components/pki-generate-root.hbs b/ui/lib/pki/addon/components/pki-generate-root.hbs index f18b5515fa..ba71699406 100644 --- a/ui/lib/pki/addon/components/pki-generate-root.hbs +++ b/ui/lib/pki/addon/components/pki-generate-root.hbs @@ -11,11 +11,11 @@ > {{get @model attr.name}} - {{else if attr.options.masked}} + {{else if attr.options.isCertificate}} - + {{else}} {{#if @model.privateKey}} - + {{else}} internal {{/if}} diff --git a/ui/lib/pki/addon/components/pki-info-table-rows.hbs b/ui/lib/pki/addon/components/pki-info-table-rows.hbs index 5799ff3c77..e9164495c3 100644 --- a/ui/lib/pki/addon/components/pki-info-table-rows.hbs +++ b/ui/lib/pki/addon/components/pki-info-table-rows.hbs @@ -8,8 +8,8 @@ @value={{value}} @addCopyButton={{or (eq attr.name "issuerId") (eq attr.name "keyId")}} > - {{#if (and attr.options.masked value)}} - + {{#if (and attr.options.isCertificate value)}} + {{else if attr.options.detailLinkTo}} {{value}} {{else if (or (eq attr.name "privateKey") (eq attr.name "privateKeyType"))}} diff --git a/ui/lib/pki/addon/components/pki-sign-intermediate-form.hbs b/ui/lib/pki/addon/components/pki-sign-intermediate-form.hbs index 4e9184fca1..ce6bd3dcb8 100644 --- a/ui/lib/pki/addon/components/pki-sign-intermediate-form.hbs +++ b/ui/lib/pki/addon/components/pki-sign-intermediate-form.hbs @@ -12,8 +12,8 @@ {{#each this.showFields as |fieldName|}} {{#let (find-by "name" fieldName @model.allFields) as |attr|}} - {{#if (and attr.options.masked (get @model attr.name))}} - + {{#if (and attr.options.isCertificate (get @model attr.name))}} + {{else if (eq attr.name "serialNumber")}} `[data-test-value-div="${name}"] [data-test-copy-button]`, crossSign: '[data-test-pki-issuer-cross-sign]', defaultGroup: '[data-test-details-group="default"]', download: '[data-test-issuer-download]', diff --git a/ui/tests/helpers/pki/values.js b/ui/tests/helpers/pki/values.js index 7c945b6f89..8093dc5e6d 100644 --- a/ui/tests/helpers/pki/values.js +++ b/ui/tests/helpers/pki/values.js @@ -26,6 +26,25 @@ o8I9DD+uBHknwByRLXSDmgggwgOYsyTg/IfYoHlLHDD3CaOpkCvUCZvM9bI7nrlx DU3c2oZTc0mPYGft6U8mVwLqfYTcEduGidTLAQPE5w== -----END CERTIFICATE-----`; +export const rootDer = `MIIDJjCCAg6gAwIBAgIUZwx170kTAaGFKeyiG3Di +GpwhKvcwDQYJKoZIhvcNAQELBQAwETEPMA0GA1UEAxMGMTExMTExMB4XDTIzMDgw +OTIxMzk0NloXDTIzMDkxMDIxNDAxNlowETEPMA0GA1UEAxMGMTExMTExMIIBIjAN +BgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA3Hm1gjKWDdXuRLZIk3dDabbzlH+Y +2e4rklkMGlrnNqju2+7iIGZa2q8rQ4jEZ3sesSsqGHUEJ2sIG5HnRhl5yawCr9NS +uJP+3zsNueQLQDj6tEnuN0STZQuEJKc+yeept8JGAD0SGnB+THGUYf3if0D8sDT1 +nHj3XihtnTG3fN62iKyx2Y95WKrVmT1MnpGjbp4HkRvrHSR8PKyq9Q6YyZkIYbfW +DH3adq6gmiJITzozaUT6efftPOVPr5LLTPKAl3BAmoc8ypM/H1IPaE1Z7ef9lV9w +gazvoJZEsc59hskTWF3ZLcWIxAjcq7u6IX2+dU/A0DmCY6GKmmcZ9W5A9wIDAQAB +o3YwdDAOBgNVHQ8BAf8EBAMCAQYwDwYDVR0TAQH/BAUwAwEB/zAdBgNVHQ4EFgQU +b2qEtlDZl/ws00ftFQJX6bjoOckwHwYDVR0jBBgwFoAUb2qEtlDZl/ws00ftFQJX +6bjoOckwEQYDVR0RBAowCIIGMTExMTExMA0GCSqGSIb3DQEBCwUAA4IBAQAFI1H8 +EOw+YcequlJp1ucCpTRArLUhH0t+l7hQAqwORGQevEP6Ml63dRrZCcke7esrpnL9 +7ijKw/PjgoyrM4QS3wAYm8nDm7cZH+f//A2X6WFnvozwKdmDRkacEjMOAe/XU+qh +jdtiETEnUGVH65ulyimKitU5SHV0GNfToKnU/SFBks0bQvglIii0YwgHvSoW1++7 +arCjfZqWLdRe7MHfrLpLr4gaebfxSrZfn3utgm+DsJVba3B9JnOZO+yzTiEw6UkJ +rcmZDy0x1/OaCcYHKai4RegsiQ0QrIEI+iC1N6U0PGiGf/V23eoTR0+5H6qngDz2 +GzXrbHFAPQbtweCf`; + export const issuerPemBundle = ` -----BEGIN CERTIFICATE----- MIIDRTCCAi2gAwIBAgIUdKagCL6TnN5xLkwhPbNY8JEcY0YwDQYJKoZIhvcNAQEL diff --git a/ui/tests/integration/components/certificate-card-test.js b/ui/tests/integration/components/certificate-card-test.js index 7f94abfc08..4571ac7130 100644 --- a/ui/tests/integration/components/certificate-card-test.js +++ b/ui/tests/integration/components/certificate-card-test.js @@ -7,51 +7,58 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'vault/tests/helpers'; import { render } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; +import { rootPem } from 'vault/tests/helpers/pki/values'; +import { rootDer } from 'vault/tests/helpers/pki/values'; const SELECTORS = { label: '[data-test-certificate-label]', value: '[data-test-certificate-value]', + icon: '[data-test-certificate-icon]', + copyButton: '[data-test-copy-button]', }; module('Integration | Component | certificate-card', function (hooks) { setupRenderingTest(hooks); - test('it renders without a certificate value', async function (assert) { + test('it renders', 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'); + assert.dom(SELECTORS.label).hasNoText('There is no label because there is no value'); + assert.dom(SELECTORS.value).hasNoText('There is no value because none was provided'); + assert.dom(SELECTORS.icon).exists('The certificate icon exists'); + assert.dom(SELECTORS.copyButton).exists('The copy button exists'); }); - 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----- - `; + test('it renders with an example PEM Certificate', async function (assert) { + const certificate = rootPem; this.set('certificate', certificate); - await render(hbs``); + 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'); + assert.dom(SELECTORS.label).hasText('PEM Format', 'The label text is PEM Format'); + assert.dom(SELECTORS.value).hasText(certificate, 'The data rendered is correct'); + assert.dom(SELECTORS.icon).exists('The certificate icon exists'); + assert.dom(SELECTORS.copyButton).exists('The copy button exists'); + }); + + test('it renders with an example DER Certificate', async function (assert) { + const certificate = rootDer; + this.set('certificate', certificate); + await render(hbs``); + + assert.dom(SELECTORS.label).hasText('DER Format', 'The label text is DER Format'); + assert.dom(SELECTORS.value).hasText(certificate, 'The data rendered is correct'); + assert.dom(SELECTORS.icon).exists('The certificate icon exists'); + assert.dom(SELECTORS.copyButton).exists('The copy button exists'); + }); + + test('it renders with the PEM Format label regardless of the value provided when @isPem is true', async function (assert) { + const certificate = 'example-certificate-text'; + this.set('certificate', certificate); + await render(hbs``); + + assert.dom(SELECTORS.label).hasText('PEM Format', 'The label text is PEM Format'); + assert.dom(SELECTORS.value).hasText(certificate, 'The data rendered is correct'); + assert.dom(SELECTORS.icon).exists('The certificate icon exists'); + assert.dom(SELECTORS.copyButton).exists('The copy button exists'); }); }); diff --git a/ui/tests/integration/components/kubernetes/page/configuration-test.js b/ui/tests/integration/components/kubernetes/page/configuration-test.js index 25cd99d573..157a03bce1 100644 --- a/ui/tests/integration/components/kubernetes/page/configuration-test.js +++ b/ui/tests/integration/components/kubernetes/page/configuration-test.js @@ -87,14 +87,18 @@ module('Integration | Component | kubernetes | Page::Configuration', function (h assert .dom('[data-test-row-value="Kubernetes host"]') .hasText(this.config.kubernetesHost, 'Kubernetes host value renders'); + assert.dom('[data-test-row-label="Certificate"]').exists('Certificate label renders'); + assert.dom('[data-test-certificate-card]').exists('Certificate card component renders'); assert .dom('[data-test-certificate-icon]') - .hasClass('flight-icon-certificate', 'Certificate card icon renders'); - assert.dom('[data-test-certificate-label]').hasText('PEM Format', 'Certificate card label renders'); + .hasClass('flight-icon-certificate', 'Certificate icon renders'); + assert + .dom('[data-test-certificate-card] [data-test-copy-button]') + .exists('Certificate copy button renders'); + assert.dom('[data-test-certificate-label]').hasText('PEM Format', 'Certificate label renders'); assert .dom('[data-test-certificate-value]') - .hasText(this.config.kubernetesCaCert, 'Certificate card value renders'); - assert.dom('[data-test-certificate-copy]').exists('Certificate copy button renders'); + .hasText(this.config.kubernetesCaCert, 'Certificate value renders'); }); }); diff --git a/ui/tests/integration/components/pki/page/pki-certificate-details-test.js b/ui/tests/integration/components/pki/page/pki-certificate-details-test.js index 6f288b1b83..1f30e3ec9d 100644 --- a/ui/tests/integration/components/pki/page/pki-certificate-details-test.js +++ b/ui/tests/integration/components/pki/page/pki-certificate-details-test.js @@ -91,8 +91,8 @@ module('Integration | Component | pki | Page::PkiCertificateDetails', function ( .dom('[data-test-component="info-table-row"]') .exists({ count: 5 }, 'Correct number of fields render when certificate has not been revoked'); assert - .dom('[data-test-value-div="Certificate"] [data-test-masked-input]') - .exists('Masked input renders for certificate'); + .dom('[data-test-value-div="Certificate"] [data-test-certificate-card]') + .exists('Certificate card renders for certificate'); assert.dom('[data-test-value-div="Serial number"] code').exists('Serial number renders as monospace'); await click('[data-test-pki-cert-download-button]'); @@ -132,18 +132,18 @@ module('Integration | Component | pki | Page::PkiCertificateDetails', function ( .dom('[data-test-component="info-table-row"]') .exists({ count: 9 }, 'Correct number of fields render when certificate has not been revoked'); assert - .dom('[data-test-value-div="Certificate"] [data-test-masked-input]') - .exists('Masked input renders for certificate'); + .dom('[data-test-value-div="Certificate"] [data-test-certificate-card]') + .exists('Certificate card renders for certificate'); assert.dom('[data-test-value-div="Serial number"] code').exists('Serial number renders as monospace'); assert - .dom('[data-test-value-div="CA Chain"] [data-test-masked-input]') - .exists('CA Chain shows with masked value'); + .dom('[data-test-value-div="CA Chain"] [data-test-certificate-card]') + .exists('Certificate card renders for CA Chain'); assert - .dom('[data-test-value-div="Issuing CA"] [data-test-masked-input]') - .exists('Issuing CA shows with masked value'); + .dom('[data-test-value-div="Issuing CA"] [data-test-certificate-card]') + .exists('Certificate card renders for Issuing CA'); assert - .dom('[data-test-value-div="Private key"] [data-test-masked-input]') - .exists('Private key shows with masked value'); + .dom('[data-test-value-div="Private key"] [data-test-certificate-card]') + .exists('Certificate card renders for private key'); await click('[data-test-pki-cert-download-button]'); const { serialNumber, certificate } = this.model; diff --git a/ui/tests/integration/components/pki/page/pki-issuer-rotate-root-test.js b/ui/tests/integration/components/pki/page/pki-issuer-rotate-root-test.js index b5f3369be4..6e5208672e 100644 --- a/ui/tests/integration/components/pki/page/pki-issuer-rotate-root-test.js +++ b/ui/tests/integration/components/pki/page/pki-issuer-rotate-root-test.js @@ -206,7 +206,7 @@ module('Integration | Component | page/pki-issuer-rotate-root', function (hooks) assert.dom(SELECTORS.infoRowValue('Certificate')).exists(); assert.dom(SELECTORS.infoRowValue('Issuer name')).exists(); assert.dom(SELECTORS.infoRowValue('Issuing CA')).exists(); - assert.dom(`${SELECTORS.infoRowValue('Private key')} .masked-input`).hasClass('allow-copy'); + assert.dom(SELECTORS.infoRowValue('Private key')).exists(); assert.dom(`${SELECTORS.infoRowValue('Private key type')} span`).hasText('rsa'); assert.dom(SELECTORS.infoRowValue('Serial number')).hasText(this.returnedData.serial_number); assert.dom(SELECTORS.infoRowValue('Key ID')).hasText(this.returnedData.key_id); diff --git a/ui/tests/integration/components/pki/page/pki-key-details-test.js b/ui/tests/integration/components/pki/page/pki-key-details-test.js index f4fac85f2d..a4a9f7aaa3 100644 --- a/ui/tests/integration/components/pki/page/pki-key-details-test.js +++ b/ui/tests/integration/components/pki/page/pki-key-details-test.js @@ -75,4 +75,20 @@ module('Integration | Component | pki key details page', function (hooks) { assert.dom(SELECTORS.keyDeleteButton).doesNotExist('does not render delete button if no permission'); assert.dom(SELECTORS.keyEditLink).doesNotExist('does not render edit button if no permission'); }); + + test('it renders the private key as a component when there is a private key', async function (assert) { + this.model.privateKey = 'private-key-value'; + await render( + hbs` + + `, + { owner: this.engine } + ); + + assert.dom('[data-test-certificate-card]').exists('Certificate card renders for the private key'); + }); }); diff --git a/ui/tests/integration/components/pki/pki-generate-csr-test.js b/ui/tests/integration/components/pki/pki-generate-csr-test.js index dbb7921b1a..850b680dff 100644 --- a/ui/tests/integration/components/pki/pki-generate-csr-test.js +++ b/ui/tests/integration/components/pki/pki-generate-csr-test.js @@ -113,13 +113,13 @@ module('Integration | Component | pki-generate-csr', function (hooks) { 'renders Next steps alert banner' ); assert - .dom('[data-test-value-div="CSR"] [data-test-masked-input] button') + .dom('[data-test-value-div="CSR"] [data-test-certificate-card] button') .hasAttribute('data-clipboard-text', this.model.csr, 'it renders copyable csr'); assert .dom('[data-test-value-div="Key ID"] button') .hasAttribute('data-clipboard-text', this.model.keyId, 'it renders copyable key_id'); assert - .dom('[data-test-value-div="Private key"] [data-test-masked-input] button') + .dom('[data-test-value-div="Private key"] [data-test-certificate-card] button') .hasAttribute('data-clipboard-text', this.model.privateKey, 'it renders copyable private_key'); assert .dom('[data-test-value-div="Private key type"]') @@ -144,7 +144,7 @@ module('Integration | Component | pki-generate-csr', function (hooks) { 'renders Next steps alert banner' ); assert - .dom('[data-test-value-div="CSR"] [data-test-masked-input] button') + .dom('[data-test-value-div="CSR"] [data-test-certificate-card] button') .hasAttribute('data-clipboard-text', this.model.csr, 'it renders copyable csr'); assert .dom('[data-test-value-div="Key ID"] button') diff --git a/ui/tests/integration/components/pki/pki-issuer-details-test.js b/ui/tests/integration/components/pki/pki-issuer-details-test.js index 7fb5b6a7f7..6133d98375 100644 --- a/ui/tests/integration/components/pki/pki-issuer-details-test.js +++ b/ui/tests/integration/components/pki/pki-issuer-details-test.js @@ -81,6 +81,36 @@ module('Integration | Component | page/pki-issuer-details', function (hooks) { assert.dom(SELECTORS.configure).doesNotExist(); }); + test('it renders correct details by default', async function (assert) { + await render( + hbs` + + + `, + this.context + ); + + // Default group details: + assert.dom(SELECTORS.defaultGroup).exists('Default group of details exists'); + assert.dom(SELECTORS.valueByName('Certificate')).exists('Certificate detail exists'); + assert.dom(SELECTORS.copyButtonByName('Certificate')).exists('Certificate is copyable'); + assert.dom(SELECTORS.valueByName('CA Chain')).exists('CA Chain detail exists'); + assert.dom(SELECTORS.copyButtonByName('CA Chain')).exists('CA Chain is copyable'); + assert.dom(SELECTORS.valueByName('Common name')).exists('Common name detail exists'); + assert.dom(SELECTORS.valueByName('Issuer name')).exists('Issuer name detail exists'); + assert.dom(SELECTORS.valueByName('Issuer ID')).exists('Issuer ID detail exists'); + assert.dom(SELECTORS.copyButtonByName('Issuer ID')).exists('Issuer ID is copyable'); + assert.dom(SELECTORS.valueByName('Default key ID')).exists('Default key ID detail exists'); + + // Issuer URLs group details: + assert.dom(SELECTORS.urlsGroup).exists('Issuer URLs group of details exists'); + assert.dom(SELECTORS.valueByName('Issuing certificates')).exists('Issuing certificates detail exists'); + assert + .dom(SELECTORS.valueByName('CRL distribution points')) + .exists('CRL distribution points detail exists'); + assert.dom(SELECTORS.valueByName('OCSP servers')).exists('OCSP servers detail exists'); + }); + test('it renders parsing error banner if issuer certificate contains unsupported OIDs', async function (assert) { this.issuer.parsedCertificate = { common_name: 'fancy-cert-unsupported-subj-and-ext-oids', diff --git a/ui/tests/integration/components/pki/pki-sign-intermediate-form-test.js b/ui/tests/integration/components/pki/pki-sign-intermediate-form-test.js index f728f2ce9a..6de7fa8b7e 100644 --- a/ui/tests/integration/components/pki/pki-sign-intermediate-form-test.js +++ b/ui/tests/integration/components/pki/pki-sign-intermediate-form-test.js @@ -71,9 +71,9 @@ module('Integration | Component | pki-sign-intermediate-form', function (hooks) request_id: 'some-id', data: { serial_number: '31:52:b9:09:40', - ca_chain: ['-----root pem------'], - issuing_ca: '-----issuing ca------', - certificate: '-----certificate------', + ca_chain: ['-----BEGIN CERTIFICATE-----'], + issuing_ca: '-----BEGIN CERTIFICATE-----', + certificate: '-----BEGIN CERTIFICATE-----', }, }; }); @@ -86,13 +86,13 @@ module('Integration | Component | pki-sign-intermediate-form', function (hooks) await click(selectors.saveButton); [ { label: 'Serial number' }, - { label: 'CA Chain', masked: true }, - { label: 'Certificate', masked: true }, - { label: 'Issuing CA', masked: true }, - ].forEach(({ label, masked }) => { + { label: 'CA Chain', isCertificate: true }, + { label: 'Certificate', isCertificate: true }, + { label: 'Issuing CA', isCertificate: true }, + ].forEach(({ label, isCertificate }) => { assert.dom(selectors.rowByName(label)).exists(); - if (masked) { - assert.dom(selectors.valueByName(label)).hasText('***********', `${label} is masked`); + if (isCertificate) { + assert.dom(selectors.valueByName(label)).includesText('PEM Format', `${label} is isCertificate`); } else { assert.dom(selectors.valueByName(label)).hasText('31:52:b9:09:40', `Renders ${label}`); assert.dom(`${selectors.valueByName(label)} a`).exists(`${label} is a link`);