From 650743e18fa8b8b63e6b4f10e6c72c8dbd19a4c8 Mon Sep 17 00:00:00 2001
From: Kianna <30884335+kiannaquach@users.noreply.github.com>
Date: Wed, 3 May 2023 13:00:46 -0700
Subject: [PATCH] UI: PKI error handling + some small bugs! (#20478)

---
 ui/app/adapters/pki/issuer.js                 |  10 +-
 ui/app/styles/core/tag.scss                   |   4 +
 .../components/pki/config-pki-ca.hbs          | 264 ------------------
 .../addon/components/page/pki-issuer-list.hbs |  22 +-
 ui/lib/pki/addon/components/pki-role-form.hbs |   2 +-
 ui/lib/pki/addon/routes/error.js              |   3 +-
 ui/lib/pki/addon/routes/roles/create.js       |   8 +-
 ui/lib/pki/addon/routes/roles/role/edit.js    |   8 +-
 .../pki/pki-engine-workflow-test.js           |   4 +-
 9 files changed, 44 insertions(+), 281 deletions(-)
 delete mode 100644 ui/app/templates/components/pki/config-pki-ca.hbs

diff --git a/ui/app/adapters/pki/issuer.js b/ui/app/adapters/pki/issuer.js
index 08267c052..9f15ff11a 100644
--- a/ui/app/adapters/pki/issuer.js
+++ b/ui/app/adapters/pki/issuer.js
@@ -6,7 +6,7 @@
 import ApplicationAdapter from '../application';
 import { encodePath } from 'vault/utils/path-encoding-helpers';
 import { all } from 'rsvp';
-import { verifyCertificates } from 'vault/utils/parse-pki-cert';
+import { verifyCertificates, parseCertificate } from 'vault/utils/parse-pki-cert';
 
 export default class PkiIssuerAdapter extends ApplicationAdapter {
   namespace = 'v1';
@@ -39,7 +39,13 @@ export default class PkiIssuerAdapter extends ApplicationAdapter {
       const issuerRecord = await this.queryRecord(store, type, { id, backend: query.backend });
       const { data } = issuerRecord;
       const isRoot = await verifyCertificates(data.certificate, data.certificate);
-      return { ...keyInfo, ...data, isRoot };
+      const parsedCertificate = parseCertificate(data.certificate);
+      return {
+        ...keyInfo,
+        ...data,
+        isRoot,
+        parsedCertificate: { common_name: parsedCertificate.common_name },
+      };
     } catch (e) {
       return { ...keyInfo, issuer_id: id };
     }
diff --git a/ui/app/styles/core/tag.scss b/ui/app/styles/core/tag.scss
index 9ecac0c80..5f55d7167 100644
--- a/ui/app/styles/core/tag.scss
+++ b/ui/app/styles/core/tag.scss
@@ -53,6 +53,10 @@
     border: 1px solid $grey-light;
   }
 
+  &.is-transparent {
+    background-color: transparent;
+  }
+
   &.is-small {
     height: auto;
   }
diff --git a/ui/app/templates/components/pki/config-pki-ca.hbs b/ui/app/templates/components/pki/config-pki-ca.hbs
deleted file mode 100644
index 33408972d..000000000
--- a/ui/app/templates/components/pki/config-pki-ca.hbs
+++ /dev/null
@@ -1,264 +0,0 @@
-{{#if this.replaceCA}}
-  <MessageError @model={{this.model}} />
-  <h2 data-test-title class="title is-3">
-    {{#if this.needsConfig}}
-      Configure CA Certificate
-    {{else}}
-      {{#if this.model.certificate}}
-        Generated Certificate
-      {{else}}
-        Add CA Certificate
-      {{/if}}
-    {{/if}}
-  </h2>
-  {{#if (or this.model.certificate this.model.csr)}}
-    {{#if (eq this.model.canParse false)}}
-      <AlertBanner
-        @type="info"
-        @message="There was an error parsing the certificate's metadata. As a result, Vault cannot display the issue and expiration dates. This will not interfere with the certificate's functionality."
-        data-test-warning
-      />
-    {{/if}}
-    {{#each this.model.attrs as |attr|}}
-      {{#if (and attr.options.masked (get this.model attr.name))}}
-        <InfoTableRow
-          data-test-table-row
-          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-          @value={{get this.model attr.name}}
-        >
-          <MaskedInput @value={{get this.model attr.name}} @displayOnly={{true}} @allowCopy={{true}} />
-        </InfoTableRow>
-      {{else if (and (get this.model attr.name) (or (eq attr.name "issueDate") (eq attr.name "expiryDate")))}}
-        <InfoTableRow
-          data-test-table-row={{this.value}}
-          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-          @value={{date-format (get this.model attr.name) "MMM dd, yyyy hh:mm:ss a" isFormatted=true}}
-        />
-      {{else}}
-        <InfoTableRow
-          data-test-table-row={{this.value}}
-          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-          @value={{get this.model attr.name}}
-        />
-      {{/if}}
-    {{/each}}
-    <div class="field is-grouped box is-fullwidth is-bottomless">
-      <div class="control">
-        <CopyButton
-          @clipboardText={{or this.model.certificate this.model.csr}}
-          @class="button"
-          @buttonType="button"
-          @success={{action (set-flash-message (concat (if this.model.certificate "Certificate" "CSR") " copied!"))}}
-        >
-          Copy
-          {{if this.model.certificate "Certificate" "CSR"}}
-        </CopyButton>
-      </div>
-      <div class="control">
-        <button data-test-back-button {{action "refresh"}} type="button" class="button">
-          Back
-        </button>
-      </div>
-    </div>
-  {{else}}
-    <form {{action "saveCA" on="submit"}} aria-label="ca form" data-test-generate-root-cert="true">
-      <NamespaceReminder @mode="save" @noun="PKI change" />
-      <FormFieldGroupsLoop @model={{this.model}} @mode={{this.mode}} />
-      <div class="field is-grouped is-grouped-split box is-fullwidth is-bottomless">
-        <div class="field is-grouped">
-          <div class="control">
-            <button
-              data-test-submit
-              type="submit"
-              class="button is-primary {{if this.loading 'is-loading'}}"
-              disabled={{this.loading}}
-            >
-              Save
-            </button>
-          </div>
-          <div class="control">
-            <button data-test-back-button {{action "toggleReplaceCA"}} type="button" class="button">
-              Cancel
-            </button>
-          </div>
-        </div>
-      </div>
-    </form>
-  {{/if}}
-{{else if this.signIntermediate}}
-  {{#if (or this.model.certificate)}}
-    <AlertBanner
-      @type="warning"
-      @message="If using this for an Intermediate CA in Vault, copy the certificate below and write it to the PKI mount being used as an intermediate using the `Set signed Intermediate` endpoint."
-      data-test-warning
-    />
-    {{#each this.model.attrs as |attr|}}
-      {{#if (and attr.options.masked (get this.model attr.name))}}
-        <InfoTableRow
-          data-test-table-row={{this.value}}
-          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-          @value={{get this.model attr.name}}
-        >
-          <MaskedInput @value={{get this.model attr.name}} @displayOnly={{true}} @allowCopy={{true}} />
-        </InfoTableRow>
-      {{else if (and (get this.model attr.name) (or (eq attr.name "issueDate") (eq attr.name "expiryDate")))}}
-        <InfoTableRow
-          data-test-table-row={{this.value}}
-          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-          @value={{date-format (get this.model attr.name) "MMM dd, yyyy hh:mm:ss a" isFormatted=true}}
-        />
-      {{else}}
-        <InfoTableRow
-          data-test-table-row={{this.value}}
-          @label={{capitalize (or attr.options.label (humanize (dasherize attr.name)))}}
-          @value={{get this.model attr.name}}
-        />
-      {{/if}}
-    {{/each}}
-    <div class="field is-grouped box is-fullwidth is-bottomless">
-      <div class="control">
-        <CopyButton
-          @clipboardText={{this.model.certificate}}
-          @class="button"
-          @buttonType="button"
-          @success={{action (set-flash-message "Certificate copied!")}}
-        >
-          Copy Certificate
-        </CopyButton>
-      </div>
-      <div class="control">
-        <button data-test-back-button {{action "refresh"}} type="button" class="button">
-          Back
-        </button>
-      </div>
-    </div>
-  {{else}}
-    <h2 data-test-title class="title is-3">Sign intermediate</h2>
-    <NamespaceReminder @mode="save" @noun="PKI change" />
-    <MessageError @model={{this.model}} @errors={{this.errors}} />
-    <form {{action "saveCA" on="submit"}} data-test-sign-intermediate-form="true" aria-label="sign intermediate form">
-      <FormFieldGroupsLoop @model={{this.model}} @mode={{this.mode}} />
-      <div class="field is-grouped box is-fullwidth is-bottomless">
-        <div class="control">
-          <button
-            data-test-submit
-            type="submit"
-            class="button is-primary {{if this.loading 'is-loading'}}"
-            disabled={{this.loading}}
-          >
-            Save
-          </button>
-        </div>
-        <div class="control">
-          <button {{action "toggleVal" "signIntermediate" false}} type="button" class="button">
-            Cancel
-          </button>
-        </div>
-      </div>
-    </form>
-  {{/if}}
-{{else if this.setSignedIntermediate}}
-  <h2 data-test-title class="title is-3">Set signed intermediate</h2>
-  <NamespaceReminder @mode="save" @noun="PKI change" />
-  <MessageError @model={{this.model}} />
-  <p class="has-text-grey-dark">
-    Submit a signed CA certificate corresponding to a generated private key.
-  </p>
-  <form
-    {{action "saveCA" "setSignedIntermediate" on="submit"}}
-    aria-label="set signed intermediate form"
-    data-test-set-signed-intermediate-form="true"
-  >
-    <div class="field">
-      <label for="certificate" class="is-label">
-        Signed Intermediate Certificate
-      </label>
-      <div class="control">
-        <Textarea
-          data-test-signed-intermediate
-          class="textarea"
-          id="certificate"
-          name="certificate"
-          @value={{this.model.certificate}}
-        />
-      </div>
-    </div>
-    <div class="field is-grouped box is-fullwidth is-bottomless">
-      <div class="control">
-        <button
-          data-test-submit
-          type="submit"
-          class="button is-primary {{if this.loading 'is-loading'}}"
-          disabled={{this.loading}}
-        >
-          Save
-        </button>
-      </div>
-      <div class="control">
-        <button data-test-back-button {{action "toggleVal" "setSignedIntermediate" false}} type="button" class="button">
-          Cancel
-        </button>
-      </div>
-    </div>
-  </form>
-{{else}}
-  <p class="has-text-grey-dark">
-    This is the default CA certificate used in Vault. It is not used for self-signed certificates or if you have a signed
-    intermediate CA certificate with a generated key.
-  </p>
-  {{#each this.downloadHrefs as |dl|}}
-    <div class="box is-shadowless is-marginless is-fullwidth has-slim-padding">
-      <ExternalLink @href={{dl.url}} @sameTab={{true}} download={{dl.name}} data-test-ca-download-link>
-        {{dl.display}}
-      </ExternalLink>
-    </div>
-  {{/each}}
-
-  <div class="field is-grouped box is-fullwidth is-shadowless">
-    <div class="control">
-      <button data-test-go-replace-ca type="button" {{action "toggleReplaceCA"}} class="button">
-        {{#if this.needsConfig}}
-          Configure CA
-        {{else}}
-          Add CA
-        {{/if}}
-      </button>
-    </div>
-    {{#if this.config.pem}}
-      <div class="control">
-        <button data-test-go-sign-intermediate type="button" {{action "toggleVal" "signIntermediate"}} class="button">
-          Sign intermediate
-        </button>
-      </div>
-    {{/if}}
-    <div class="control">
-      <button
-        data-test-go-set-signed-intermediate
-        type="button"
-        {{action "toggleVal" "setSignedIntermediate"}}
-        class="button"
-      >
-        Set signed intermediate
-      </button>
-    </div>
-    {{#unless this.needsConfig}}
-      <div class="control">
-        <ToolTip @verticalPosition="above" @horizontalPosition="center" as |T|>
-          <T.Trigger data-test-tooltip-trigger tabindex="-1">
-            <button type="button" class="button is-primary" disabled={{true}}>
-              Delete
-            </button>
-          </T.Trigger>
-          <T.Content @defaultClass="tool-tip smaller-font">
-            <div class="box" data-test-hover-copy-tooltip-text>
-              Deleting a CA is only available via the CLI and API.
-              <DocLink @path="/vault/api-docs/secret/pki#delete-issuer" class="doc-link-subtle">
-                Learn more
-              </DocLink>
-            </div>
-          </T.Content>
-        </ToolTip>
-      </div>
-    {{/unless}}
-  </div>
-{{/if}}
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/page/pki-issuer-list.hbs b/ui/lib/pki/addon/components/page/pki-issuer-list.hbs
index 8477f9b4a..649fa419f 100644
--- a/ui/lib/pki/addon/components/page/pki-issuer-list.hbs
+++ b/ui/lib/pki/addon/components/page/pki-issuer-list.hbs
@@ -22,16 +22,20 @@
                 }}</span>
             {{/if}}
             {{#if pkiIssuer.serialNumber}}
-              <InfoTooltip>
-                Serial number
-              </InfoTooltip>
-              <span class="tag has-background-transparent" data-test-serial-number={{idx}}>{{pkiIssuer.serialNumber}}</span>
+              <span class="tag is-transparent has-right-margin-none" data-test-serial-number={{idx}}>
+                <InfoTooltip>
+                  Serial number
+                </InfoTooltip>
+                {{pkiIssuer.serialNumber}}
+              </span>
             {{/if}}
-            {{#if pkiIssuer.keyId}}
-              <InfoTooltip>
-                Key ID
-              </InfoTooltip>
-              <span class="tag has-background-transparent" data-test-key-id={{idx}}>{{pkiIssuer.keyId}}</span>
+            {{#if pkiIssuer.parsedCertificate.common_name}}
+              <span class="tag is-transparent has-left-margin-none" data-test-common-name={{idx}}>
+                <InfoTooltip>
+                  Common name
+                </InfoTooltip>
+                {{pkiIssuer.parsedCertificate.common_name}}
+              </span>
             {{/if}}
           </div>
         </div>
diff --git a/ui/lib/pki/addon/components/pki-role-form.hbs b/ui/lib/pki/addon/components/pki-role-form.hbs
index a412d0450..c4a699639 100644
--- a/ui/lib/pki/addon/components/pki-role-form.hbs
+++ b/ui/lib/pki/addon/components/pki-role-form.hbs
@@ -8,7 +8,7 @@
         {{! DEFAULT VIEW }}
         {{#if (eq group "default")}}
           {{#each fields as |attr|}}
-            {{#if (eq attr.name "issuerRef")}}
+            {{#if (and (eq attr.name "issuerRef") @issuers)}}
               <div class="has-top-margin-m {{unless this.showDefaultIssuer 'has-bottom-margin-xs' 'has-bottom-margin-m'}}">
                 <FormFieldLabel
                   for={{attr.name}}
diff --git a/ui/lib/pki/addon/routes/error.js b/ui/lib/pki/addon/routes/error.js
index c6be6271d..a9173e53c 100644
--- a/ui/lib/pki/addon/routes/error.js
+++ b/ui/lib/pki/addon/routes/error.js
@@ -19,8 +19,9 @@ export default class PkiRolesErrorRoute extends Route {
       { label: 'Overview', route: 'overview' },
       { label: 'Roles', route: 'roles.index' },
       { label: 'Issuers', route: 'issuers.index' },
-      { label: 'Certificates', route: 'certificates.index' },
       { label: 'Keys', route: 'keys.index' },
+      { label: 'Certificates', route: 'certificates.index' },
+      { label: 'Configuration', route: 'configuration.index' },
     ];
     controller.title = this.secretMountPath.currentPath;
   }
diff --git a/ui/lib/pki/addon/routes/roles/create.js b/ui/lib/pki/addon/routes/roles/create.js
index ca9d09bd0..f17fd4ba3 100644
--- a/ui/lib/pki/addon/routes/roles/create.js
+++ b/ui/lib/pki/addon/routes/roles/create.js
@@ -17,7 +17,13 @@ export default class PkiRolesCreateRoute extends Route {
     const backend = this.secretMountPath.currentPath;
     return hash({
       role: this.store.createRecord('pki/role', { backend }),
-      issuers: this.store.query('pki/issuer', { backend }),
+      issuers: this.store.query('pki/issuer', { backend }).catch((err) => {
+        if (err.httpStatus === 404) {
+          return [];
+        } else {
+          throw err;
+        }
+      }),
     });
   }
 
diff --git a/ui/lib/pki/addon/routes/roles/role/edit.js b/ui/lib/pki/addon/routes/roles/role/edit.js
index 72f36a6f3..a08426a36 100644
--- a/ui/lib/pki/addon/routes/roles/role/edit.js
+++ b/ui/lib/pki/addon/routes/roles/role/edit.js
@@ -22,7 +22,13 @@ export default class PkiRoleEditRoute extends Route {
         backend,
         id: role,
       }),
-      issuers: this.store.query('pki/issuer', { backend }),
+      issuers: this.store.query('pki/issuer', { backend }).catch((err) => {
+        if (err.httpStatus === 404) {
+          return [];
+        } else {
+          throw err;
+        }
+      }),
     });
   }
 
diff --git a/ui/tests/acceptance/pki/pki-engine-workflow-test.js b/ui/tests/acceptance/pki/pki-engine-workflow-test.js
index a6918e0a0..5f1d21250 100644
--- a/ui/tests/acceptance/pki/pki-engine-workflow-test.js
+++ b/ui/tests/acceptance/pki/pki-engine-workflow-test.js
@@ -355,7 +355,7 @@ module('Acceptance | pki workflow', function (hooks) {
       assert.dom('.linked-block').exists({ count: 1 }, 'One issuer is in list');
       assert.dom('[data-test-is-root-tag="0"]').hasText('root');
       assert.dom('[data-test-serial-number="0"]').exists({ count: 1 }, 'displays serial number tag');
-      assert.dom('[data-test-key-id="0"]').exists({ count: 1 }, 'displays key id tag');
+      assert.dom('[data-test-common-name="0"]').exists({ count: 1 }, 'displays cert common name tag');
     });
     test('lists the correct issuer metadata info when user has only read permission', async function (assert) {
       assert.expect(2);
@@ -379,7 +379,7 @@ module('Acceptance | pki workflow', function (hooks) {
       await visit(`/vault/secrets/${this.mountPath}/pki/overview`);
       await click(SELECTORS.issuersTab);
       assert.dom('[data-test-serial-number="0"]').exists({ count: 1 }, 'displays serial number tag');
-      assert.dom('[data-test-key-id="0"]').exists({ count: 1 }, 'displays key id tag');
+      assert.dom('[data-test-common-name="0"]').exists({ count: 1 }, 'displays cert common name tag');
     });
 
     test('details view renders correct number of info items', async function (assert) {