From 24f5807da4da836ac26bfb1fc6e2e10db7db683e Mon Sep 17 00:00:00 2001
From: Angel Garbarino <Monkeychip@users.noreply.github.com>
Date: Fri, 17 Nov 2023 15:34:54 -0700
Subject: [PATCH] UI: HDS adoption replace <Button> in lib/pki (#24176)

* initial run through

* search for button

* wip addressing pr comments

* wip clean up

* clean up

* address overview

* add in conditional
---
 ui/app/styles/helper-classes/layout.scss      |  4 ++
 .../page/pki-certificate-details.hbs          | 30 +++++-----
 .../page/pki-configuration-details.hbs        | 13 ++--
 .../page/pki-configuration-edit.hbs           | 60 +++++++++----------
 .../components/page/pki-configure-create.hbs  | 15 ++---
 .../components/page/pki-issuer-details.hbs    | 13 ++--
 .../addon/components/page/pki-issuer-edit.hbs | 43 +++++++------
 .../page/pki-issuer-rotate-root.hbs           | 39 +++++-------
 .../addon/components/page/pki-overview.hbs    | 31 +++++-----
 .../pki/addon/components/pki-generate-csr.hbs | 27 +++------
 .../addon/components/pki-generate-root.hbs    | 39 +++++-------
 .../components/pki-import-pem-bundle.hbs      | 29 ++++-----
 .../components/pki-issuer-cross-sign.hbs      | 41 +++++--------
 ui/lib/pki/addon/components/pki-key-form.hbs  | 45 +++++++-------
 .../pki/addon/components/pki-key-import.hbs   | 47 +++++++--------
 ui/lib/pki/addon/components/pki-role-form.hbs | 40 ++++++-------
 .../addon/components/pki-role-generate.hbs    | 48 +++++++--------
 .../components/pki-sign-intermediate-form.hbs | 48 +++++++--------
 ui/lib/pki/addon/components/pki-tidy-form.hbs | 34 +++++------
 19 files changed, 287 insertions(+), 359 deletions(-)

diff --git a/ui/app/styles/helper-classes/layout.scss b/ui/app/styles/helper-classes/layout.scss
index 3bc337eb03..4fa01150b6 100644
--- a/ui/app/styles/helper-classes/layout.scss
+++ b/ui/app/styles/helper-classes/layout.scss
@@ -85,6 +85,10 @@
 }
 
 // alignment
+.align-self-baseline {
+  align-self: baseline;
+}
+
 .is-v-centered {
   vertical-align: middle;
 }
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 ba9dec11ef..144c4e4ec0 100644
--- a/ui/lib/pki/addon/components/page/pki-certificate-details.hbs
+++ b/ui/lib/pki/addon/components/page/pki-certificate-details.hbs
@@ -5,10 +5,14 @@
 
 <Toolbar>
   <ToolbarActions>
-    <button type="button" class="toolbar-link" {{on "click" this.downloadCert}} data-test-pki-cert-download-button>
-      Download
-      <Chevron @direction="down" @isButton={{true}} />
-    </button>
+    <Hds::Button
+      @text="Download"
+      @color="secondary"
+      @icon="download"
+      class="toolbar-button"
+      {{on "click" this.downloadCert}}
+      data-test-pki-cert-download-button
+    />
     {{#if @model.canRevoke}}
       <ConfirmAction
         @buttonClasses="toolbar-link"
@@ -60,16 +64,12 @@
 
 {{#if @onBack}}
   <div class="field is-grouped box is-fullwidth is-bottomless">
-    <div class="control">
-      <button
-        type="button"
-        class="button"
-        disabled={{this.revoke.isRunning}}
-        {{on "click" @onBack}}
-        data-test-pki-cert-details-back
-      >
-        Back
-      </button>
-    </div>
+    <Hds::Button
+      @text="Back"
+      @color="secondary"
+      disabled={{this.revoke.isRunning}}
+      {{on "click" @onBack}}
+      data-test-pki-cert-details-back
+    />
   </div>
 {{/if}}
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/page/pki-configuration-details.hbs b/ui/lib/pki/addon/components/page/pki-configuration-details.hbs
index 11485d3631..e85cf542fd 100644
--- a/ui/lib/pki/addon/components/page/pki-configuration-details.hbs
+++ b/ui/lib/pki/addon/components/page/pki-configuration-details.hbs
@@ -7,16 +7,13 @@
   <Toolbar>
     <ToolbarActions>
       {{#if @canDeleteAllIssuers}}
-        <button
-          type="button"
-          class="toolbar-link"
+        <Hds::Button
+          @text="Delete all issuers"
+          @color="secondary"
+          class="toolbar-button"
           {{on "click" (fn (mut this.showDeleteAllIssuers) true)}}
           data-test-delete-all-issuers-link
-        >
-          Delete all issuers
-          <Icon @name="chevron-right" />
-
-        </button>
+        />
         <div class="toolbar-separator"></div>
       {{/if}}
       <ToolbarLink @route="configuration.edit">
diff --git a/ui/lib/pki/addon/components/page/pki-configuration-edit.hbs b/ui/lib/pki/addon/components/page/pki-configuration-edit.hbs
index 7705daff74..713f9c46ff 100644
--- a/ui/lib/pki/addon/components/page/pki-configuration-edit.hbs
+++ b/ui/lib/pki/addon/components/page/pki-configuration-edit.hbs
@@ -123,39 +123,35 @@
       {{/if}}
     </fieldset>
 
-    <div class="field is-grouped box is-fullwidth is-bottomless">
-      <div class="control">
-        {{#if (or @urls.canSet @crl.canSet)}}
-          <button
-            type="submit"
-            class="button is-primary {{if this.save.isRunning 'is-loading'}}"
-            disabled={{this.save.isRunning}}
-            data-test-configuration-edit-save
-          >
-            Save
-          </button>
-        {{/if}}
-        <button
-          {{on "click" this.cancel}}
-          type="button"
-          class="button has-left-margin-s"
+    <hr class="has-background-gray-100" />
+    <Hds::ButtonSet>
+      {{#if (or @urls.canSet @crl.canSet)}}
+        <Hds::Button
+          @text="Save"
+          @icon={{if this.save.isRunning "loading"}}
+          type="submit"
           disabled={{this.save.isRunning}}
-          data-test-configuration-edit-cancel
-        >
-          Cancel
-        </button>
-      </div>
-      {{#if this.invalidFormAlert}}
-        <div class="control">
-          <AlertInline
-            @type="danger"
-            @paddingTop={{true}}
-            @message={{this.invalidFormAlert}}
-            @mimicRefresh={{true}}
-            data-test-configuration-edit-validation-alert
-          />
-        </div>
+          data-test-configuration-edit-save
+        />
       {{/if}}
-    </div>
+      <Hds::Button
+        @text="Cancel"
+        @color="secondary"
+        {{on "click" this.cancel}}
+        disabled={{this.save.isRunning}}
+        data-test-configuration-edit-cancel
+      />
+    </Hds::ButtonSet>
+    {{#if this.invalidFormAlert}}
+      <div class="control">
+        <AlertInline
+          @type="danger"
+          @paddingTop={{true}}
+          @message={{this.invalidFormAlert}}
+          @mimicRefresh={{true}}
+          data-test-configuration-edit-validation-alert
+        />
+      </div>
+    {{/if}}
   </form>
 </div>
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/page/pki-configure-create.hbs b/ui/lib/pki/addon/components/page/pki-configure-create.hbs
index 494446972c..f03b78749f 100644
--- a/ui/lib/pki/addon/components/page/pki-configure-create.hbs
+++ b/ui/lib/pki/addon/components/page/pki-configure-create.hbs
@@ -90,14 +90,9 @@
     @message="To see configuration options, choose your desired output above."
     data-test-configuration-empty-state
   />
-  <div class="field is-grouped box is-fullwidth is-bottomless">
-    <div class="control">
-      <button type="button" class="button is-primary" disabled={{true}} data-test-pki-config-save>
-        Done
-      </button>
-      <button type="button" class="button has-left-margin-s" {{on "click" @onCancel}} data-test-pki-config-cancel>
-        Cancel
-      </button>
-    </div>
-  </div>
+  <hr class="has-background-gray-100" />
+  <Hds::ButtonSet>
+    <Hds::Button @text="Done" disabled={{true}} data-test-pki-config-save />
+    <Hds::Button @text="Cancel" @color="secondary" {{on "click" @onCancel}} data-test-pki-config-cancel />
+  </Hds::ButtonSet>
 {{/if}}
\ No newline at end of file
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 4d1bf91ce4..35a88266ba 100644
--- a/ui/lib/pki/addon/components/page/pki-issuer-details.hbs
+++ b/ui/lib/pki/addon/components/page/pki-issuer-details.hbs
@@ -6,15 +6,14 @@
 <Toolbar>
   <ToolbarActions>
     {{#if (and @isRotatable @canRotate)}}
-      <button
-        type="button"
-        class="toolbar-link"
+      <Hds::Button
+        @text="Rotate this root"
+        @color="secondary"
+        @icon="rotate-cw"
+        class="toolbar-button"
         {{on "click" (fn (mut this.showRotationModal) true)}}
         data-test-pki-issuer-rotate-root
-      >
-        Rotate this root
-        <Icon @name="rotate-cw" />
-      </button>
+      />
     {{/if}}
     {{#if @canCrossSign}}
       <ToolbarLink @route="issuers.issuer.cross-sign" @type="pen-tool" @model={{@issuer.id}} data-test-pki-issuer-cross-sign>
diff --git a/ui/lib/pki/addon/components/page/pki-issuer-edit.hbs b/ui/lib/pki/addon/components/page/pki-issuer-edit.hbs
index 4ce6d5424b..80d682355b 100644
--- a/ui/lib/pki/addon/components/page/pki-issuer-edit.hbs
+++ b/ui/lib/pki/addon/components/page/pki-issuer-edit.hbs
@@ -50,33 +50,30 @@
       </FormField>
     {{/each}}
   </div>
-  <div class="has-top-margin-l has-bottom-margin-l">
-    <button
+  <Hds::ButtonSet class="has-top-margin-l has-bottom-margin-l">
+    <Hds::Button
+      @text="Update"
+      @icon={{if this.save.isRunning "loading"}}
       type="submit"
-      class="button is-primary {{if this.save.isRunning 'is-loading'}}"
       disabled={{this.save.isRunning}}
       data-test-save
-    >
-      Update
-    </button>
-    <button
-      type="button"
-      class="button has-left-margin-s"
+    />
+    <Hds::Button
+      @text="Cancel"
+      @color="secondary"
       disabled={{this.save.isRunning}}
       {{on "click" this.cancel}}
       data-test-cancel
-    >
-      Cancel
-    </button>
-    {{#if this.error}}
-      <div class="control">
-        <AlertInline
-          @type="danger"
-          @paddingTop={{true}}
-          @message="There was an error submitting this form."
-          @mimicRefresh={{true}}
-        />
-      </div>
-    {{/if}}
-  </div>
+    />
+  </Hds::ButtonSet>
+  {{#if this.error}}
+    <div class="control">
+      <AlertInline
+        @type="danger"
+        @paddingTop={{true}}
+        @message="There was an error submitting this form."
+        @mimicRefresh={{true}}
+      />
+    </div>
+  {{/if}}
 </form>
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs b/ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs
index 238b1637f8..e84330f80c 100644
--- a/ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs
+++ b/ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs
@@ -124,11 +124,7 @@
     <PkiInfoTableRows @model={{@newRootModel}} @displayFields={{this.displayFields}} />
     <ParsedCertificateInfoRows @model={{@newRootModel.parsedCertificate}} />
     <div class="field is-grouped is-fullwidth has-top-margin-l has-bottom-margin-s">
-      <div class="control">
-        <button type="button" class="button is-primary" {{on "click" @onComplete}} data-test-done>
-          Done
-        </button>
-      </div>
+      <Hds::Button @text="Done" {{on "click" @onComplete}} data-test-done />
     </div>
   {{else}}
     {{!  USE OLD SETTINGS FORM INPUTS  }}
@@ -168,27 +164,22 @@
         {{/if}}
       </div>
 
-      <div class="field is-grouped box is-fullwidth is-bottomless">
+      <hr class="has-background-gray-100" />
+      <Hds::ButtonSet>
+        <Hds::Button @text="Done" type="submit" data-test-pki-rotate-root-save />
+        <Hds::Button @text="Cancel" @color="secondary" {{on "click" @onCancel}} data-test-pki-rotate-root-cancel />
+      </Hds::ButtonSet>
+      {{#if this.invalidFormAlert}}
         <div class="control">
-          <button type="submit" class="button is-primary" data-test-pki-rotate-root-save>
-            Done
-          </button>
-          <button {{on "click" @onCancel}} type="button" class="button has-left-margin-s" data-test-pki-rotate-root-cancel>
-            Cancel
-          </button>
+          <AlertInline
+            @type="danger"
+            @paddingTop={{true}}
+            @message={{this.invalidFormAlert}}
+            @mimicRefresh={{true}}
+            data-test-pki-rotate-root-validation-error
+          />
         </div>
-        {{#if this.invalidFormAlert}}
-          <div class="control">
-            <AlertInline
-              @type="danger"
-              @paddingTop={{true}}
-              @message={{this.invalidFormAlert}}
-              @mimicRefresh={{true}}
-              data-test-pki-rotate-root-validation-error
-            />
-          </div>
-        {{/if}}
-      </div>
+      {{/if}}
     </form>
   {{/if}}
 {{else}}
diff --git a/ui/lib/pki/addon/components/page/pki-overview.hbs b/ui/lib/pki/addon/components/page/pki-overview.hbs
index 1fe7003fae..915e4c2123 100644
--- a/ui/lib/pki/addon/components/page/pki-overview.hbs
+++ b/ui/lib/pki/addon/components/page/pki-overview.hbs
@@ -39,15 +39,15 @@
         @fallbackComponent="input-search"
         data-test-issue-certificate-input
       />
-      <button
+      <Hds::Button
+        @text="Issue"
+        @color="secondary"
+        class="has-left-margin-s align-self-baseline"
         type="submit"
-        class="button is-secondary has-left-margin-s"
         disabled={{unless this.rolesValue true}}
         {{on "click" this.transitionToIssueCertificates}}
         data-test-issue-certificate-button
-      >
-        Issue
-      </button>
+      />
     </div>
   </OverviewCard>
 
@@ -64,15 +64,14 @@
         @fallbackComponent="input-search"
         data-test-view-certificate-input
       />
-      <button
-        type="button"
-        class="button is-secondary {{unless this.certificateValue 'has-left-margin-s'}}"
+      <Hds::Button
+        @text="View"
+        @color="secondary"
+        class="align-self-baseline {{unless this.certificateValue 'has-left-margin-s'}}"
         disabled={{unless this.certificateValue true}}
         {{on "click" this.transitionToViewCertificates}}
         data-test-view-certificate-button
-      >
-        View
-      </button>
+      />
     </div>
   </OverviewCard>
 
@@ -91,15 +90,15 @@
         @nameKey={{"issuerName"}}
         data-test-issue-issuer-input
       />
-      <button
+      <Hds::Button
+        @text="View"
+        @color="secondary"
+        class="has-left-margin-s align-self-baseline"
         type="submit"
-        class="button is-secondary has-left-margin-s"
         disabled={{unless this.issuerValue true}}
         {{on "click" this.transitionToIssuerDetails}}
         data-test-view-issuer-button
-      >
-        View
-      </button>
+      />
     </div>
   </OverviewCard>
 </div>
\ 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 0a61878f80..b363631dcd 100644
--- a/ui/lib/pki/addon/components/pki-generate-csr.hbs
+++ b/ui/lib/pki/addon/components/pki-generate-csr.hbs
@@ -44,11 +44,7 @@
   </main>
   <footer>
     <div class="field is-grouped is-fullwidth has-top-margin-l">
-      <div class="control">
-        <button type="button" class="button is-primary" {{on "click" @onComplete}} data-test-done>
-          Done
-        </button>
-      </div>
+      <Hds::Button @text="Done" {{on "click" @onComplete}} data-test-done />
     </div>
   </footer>
 {{else}}
@@ -64,20 +60,15 @@
 
     <PkiGenerateToggleGroups @model={{@model}} @modelValidations={{this.modelValidations}} />
 
-    <div class="field is-grouped box is-fullwidth is-bottomless has-top-margin-l">
+    <hr class="has-background-gray-100" />
+    <Hds::ButtonSet>
+      <Hds::Button @text="Generate" type="submit" data-test-save />
+      <Hds::Button @text="Cancel" @color="secondary" {{on "click" this.cancel}} data-test-cancel />
+    </Hds::ButtonSet>
+    {{#if this.alert}}
       <div class="control">
-        <button type="submit" class="button is-primary" data-test-save>
-          Generate
-        </button>
-        <button {{on "click" this.cancel}} type="button" class="button has-left-margin-s" data-test-cancel>
-          Cancel
-        </button>
+        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.alert}} @mimicRefresh={{true}} data-test-alert />
       </div>
-      {{#if this.alert}}
-        <div class="control">
-          <AlertInline @type="danger" @paddingTop={{true}} @message={{this.alert}} @mimicRefresh={{true}} data-test-alert />
-        </div>
-      {{/if}}
-    </div>
+    {{/if}}
   </form>
 {{/if}}
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/pki-generate-root.hbs b/ui/lib/pki/addon/components/pki-generate-root.hbs
index 1f7e915259..f94cfb58e4 100644
--- a/ui/lib/pki/addon/components/pki-generate-root.hbs
+++ b/ui/lib/pki/addon/components/pki-generate-root.hbs
@@ -44,11 +44,7 @@
   </main>
   <footer>
     <div class="field is-grouped is-fullwidth has-top-margin-l">
-      <div class="control">
-        <button type="button" class="button is-primary" {{on "click" @onComplete}} data-test-done>
-          Done
-        </button>
-      </div>
+      <Hds::Button @text="Done" {{on "click" @onComplete}} data-test-done />
     </div>
   </footer>
 {{else}}
@@ -99,26 +95,21 @@
       </fieldset>
     {{/if}}
 
-    <div class="field is-grouped box is-fullwidth is-bottomless">
+    <hr class="has-background-gray-100" />
+    <Hds::ButtonSet>
+      <Hds::Button @text="Done" type="submit" data-test-pki-generate-root-save />
+      <Hds::Button @text="Cancel" @color="secondary" {{on "click" @onCancel}} data-test-pki-generate-root-cancel />
+    </Hds::ButtonSet>
+    {{#if this.invalidFormAlert}}
       <div class="control">
-        <button type="submit" class="button is-primary" data-test-pki-generate-root-save>
-          Done
-        </button>
-        <button {{on "click" @onCancel}} type="button" class="button has-left-margin-s" data-test-pki-generate-root-cancel>
-          Cancel
-        </button>
+        <AlertInline
+          @type="danger"
+          @paddingTop={{true}}
+          @message={{this.invalidFormAlert}}
+          @mimicRefresh={{true}}
+          data-test-pki-generate-root-validation-error
+        />
       </div>
-      {{#if this.invalidFormAlert}}
-        <div class="control">
-          <AlertInline
-            @type="danger"
-            @paddingTop={{true}}
-            @message={{this.invalidFormAlert}}
-            @mimicRefresh={{true}}
-            data-test-pki-generate-root-validation-error
-          />
-        </div>
-      {{/if}}
-    </div>
+    {{/if}}
   </form>
 {{/if}}
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/pki-import-pem-bundle.hbs b/ui/lib/pki/addon/components/pki-import-pem-bundle.hbs
index 7d843b1cab..010084e1aa 100644
--- a/ui/lib/pki/addon/components/pki-import-pem-bundle.hbs
+++ b/ui/lib/pki/addon/components/pki-import-pem-bundle.hbs
@@ -47,11 +47,7 @@
   </div>
   <footer>
     <div class="field is-grouped is-fullwidth has-top-margin-l">
-      <div class="control">
-        <button type="button" class="button is-primary" {{on "click" @onComplete}} data-test-done>
-          Done
-        </button>
-      </div>
+      <Hds::Button @text="Done" {{on "click" @onComplete}} data-test-done />
     </div>
   </footer>
 {{else}}
@@ -69,25 +65,22 @@
             editing the individual issuer once it is uploaded to Vault.
           </p>
         </div>
-        <div class="has-top-padding-s">
-          <button
+        <Hds::ButtonSet class="has-top-padding-s">
+          <Hds::Button
+            @text="Import issuer"
+            @icon={{if this.submitForm.isRunning "loading"}}
             type="submit"
-            class="button is-primary {{if this.submitForm.isRunning 'is-loading'}}"
             disabled={{this.submitForm.isRunning}}
             data-test-pki-import-pem-bundle
-          >
-            Import issuer
-          </button>
-          <button
-            type="button"
-            class="button has-left-margin-s"
+          />
+          <Hds::Button
+            @text="Cancel"
+            @color="secondary"
             disabled={{this.submitForm.isRunning}}
             {{on "click" this.cancel}}
             data-test-pki-ca-cert-cancel
-          >
-            Cancel
-          </button>
-        </div>
+          />
+        </Hds::ButtonSet>
       </form>
     </div>
   </div>
diff --git a/ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs b/ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs
index 10b67f0f29..0f4cf53e75 100644
--- a/ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs
+++ b/ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs
@@ -75,17 +75,10 @@
         </div>
       {{/each}}
     </div>
-    <button
-      type="button"
-      class="button is-primary"
-      {{on "click" (transition-to "vault.cluster.secrets.backend.pki.issuers.issuer.details")}}
-      data-test-cross-sign-done
-    >
-      Done
-    </button>
-    <button type="button" class="button has-left-margin-s" data-test-cross-sign-more {{on "click" this.reset}}>
-      Sign more issuers
-    </button>
+    <Hds::ButtonSet>
+      <Hds::Button @text="Done" @route="issuers.issuer.details" data-test-cross-sign-done />
+      <Hds::Button @text="Sign more issuers" @color="secondary" data-test-cross-sign-more {{on "click" this.reset}} />
+    </Hds::ButtonSet>
   {{else}}
     <form {{on "submit" (perform this.submit)}} data-test-cross-sign-form>
       <ObjectListInput
@@ -93,25 +86,23 @@
         @onChange={{fn (mut this.formData)}}
         @validationErrors={{this.validationErrors}}
       />
-      <div class="control box is-fullwidth has-only-top-shadow">
-        <button
+      <hr class="has-background-gray-100" />
+      <Hds::ButtonSet>
+        <Hds::Button
+          @text="Cross-sign"
+          @icon={{if this.submit.isRunning "loading"}}
           type="submit"
-          class="button is-primary {{if this.submit.isRunning 'is-loading'}}"
           disabled={{this.submit.isRunning}}
           data-test-cross-sign-submit
-        >
-          Cross-sign
-        </button>
-        <button
-          type="button"
-          class="button has-left-margin-s"
+        />
+        <Hds::Button
+          @text="Cancel"
+          @color="secondary"
+          @route="issuers.issuer.details"
           disabled={{this.submit.isRunning}}
-          {{on "click" (transition-to "vault.cluster.secrets.backend.pki.issuers.issuer.details")}}
           data-test-cross-sign-cancel
-        >
-          Cancel
-        </button>
-      </div>
+        />
+      </Hds::ButtonSet>
     </form>
   {{/if}}
 </div>
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/pki-key-form.hbs b/ui/lib/pki/addon/components/pki-key-form.hbs
index 33a16ce740..9dcd62dc26 100644
--- a/ui/lib/pki/addon/components/pki-key-form.hbs
+++ b/ui/lib/pki/addon/components/pki-key-form.hbs
@@ -35,34 +35,31 @@
       {{/let}}
     {{/if}}
   </div>
-  <div class="has-top-padding-s">
-    <button
+  <Hds::ButtonSet class="has-top-padding-s">
+    <Hds::Button
+      @text={{if @model.isNew "Generate key" "Edit key"}}
+      @icon={{if this.save.isRunning "loading"}}
       type="submit"
-      class="button is-primary {{if this.save.isRunning 'is-loading'}}"
       disabled={{this.save.isRunning}}
       data-test-pki-key-save
-    >
-      {{if @model.isNew "Generate key" "Edit key"}}
-    </button>
-    <button
-      type="button"
-      class="button has-left-margin-s"
+    />
+    <Hds::Button
+      @text="Cancel"
+      @color="secondary"
       disabled={{this.save.isRunning}}
       {{on "click" @onCancel}}
       data-test-pki-key-cancel
-    >
-      Cancel
-    </button>
-    {{#if this.invalidFormAlert}}
-      <div class="control">
-        <AlertInline
-          @type="danger"
-          @paddingTop={{true}}
-          @message={{this.invalidFormAlert}}
-          @mimicRefresh={{true}}
-          data-test-pki-key-validation-error
-        />
-      </div>
-    {{/if}}
-  </div>
+    />
+  </Hds::ButtonSet>
+  {{#if this.invalidFormAlert}}
+    <div class="control">
+      <AlertInline
+        @type="danger"
+        @paddingTop={{true}}
+        @message={{this.invalidFormAlert}}
+        @mimicRefresh={{true}}
+        data-test-pki-key-validation-error
+      />
+    </div>
+  {{/if}}
 </form>
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/pki-key-import.hbs b/ui/lib/pki/addon/components/pki-key-import.hbs
index 9272b84c38..aa3859b946 100644
--- a/ui/lib/pki/addon/components/pki-key-import.hbs
+++ b/ui/lib/pki/addon/components/pki-key-import.hbs
@@ -9,7 +9,7 @@
     <p class="has-bottom-margin-l">
       Use this form to import a single pem encoded rsa, ec, or ed25519 key.
       <DocLink @path="/vault/api-docs/secret/pki#import-key">
-        Learn more here.
+        Importing a PKI key
       </DocLink>
     </p>
     {{#let (find-by "name" "keyName" @model.formFields) as |attr|}}
@@ -17,34 +17,31 @@
     {{/let}}
     <TextFile @onChange={{this.onFileUploaded}} @label="PEM Bundle" data-test-pki-key-file />
   </div>
-  <div class="has-top-padding-s">
-    <button
+  <Hds::ButtonSet class="has-top-padding-s">
+    <Hds::Button
+      @text="Import key"
+      @icon={{if this.submitForm.isRunning "loading"}}
       type="submit"
-      class="button is-primary {{if this.submitForm.isRunning 'is-loading'}}"
       disabled={{this.submitForm.isRunning}}
       data-test-pki-key-import
-    >
-      Import key
-    </button>
-    <button
-      type="button"
-      class="button has-left-margin-s"
+    />
+    <Hds::Button
+      @text="Cancel"
+      @color="secondary"
       disabled={{this.submitForm.isRunning}}
       {{on "click" this.cancel}}
       data-test-pki-key-cancel
-    >
-      Cancel
-    </button>
-    {{#if this.invalidFormAlert}}
-      <div class="control">
-        <AlertInline
-          @type="danger"
-          @paddingTop={{true}}
-          @message={{this.invalidFormAlert}}
-          @mimicRefresh={{true}}
-          data-test-pki-key-validation-error
-        />
-      </div>
-    {{/if}}
-  </div>
+    />
+  </Hds::ButtonSet>
+  {{#if this.invalidFormAlert}}
+    <div class="control">
+      <AlertInline
+        @type="danger"
+        @paddingTop={{true}}
+        @message={{this.invalidFormAlert}}
+        @mimicRefresh={{true}}
+        data-test-pki-key-validation-error
+      />
+    </div>
+  {{/if}}
 </form>
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/pki-role-form.hbs b/ui/lib/pki/addon/components/pki-role-form.hbs
index fb97a88eaf..2b8d2cbdff 100644
--- a/ui/lib/pki/addon/components/pki-role-form.hbs
+++ b/ui/lib/pki/addon/components/pki-role-form.hbs
@@ -6,7 +6,6 @@
 <form {{on "submit" (perform this.save)}}>
   <div class="box is-sideless is-fullwidth is-marginless">
     <MessageError @errorMessage={{this.errorBanner}} class="has-top-margin-s" />
-    {{! ARG TODO write a test for namespace reminder }}
     <NamespaceReminder @mode={{if @role.isNew "create" "update"}} @noun="PKI role" />
     {{#each @role.formFieldGroups as |fieldGroup|}}
       {{#each-in fieldGroup as |group fields|}}
@@ -118,31 +117,28 @@
       {{/each-in}}
     {{/each}}
   </div>
-  <div class="has-top-padding-s">
-    <button
+  <Hds::ButtonSet class="has-top-padding-s">
+    <Hds::Button
+      @text={{if @role.isNew "Create" "Update"}}
+      @icon={{if this.save.isRunning "loading"}}
       type="submit"
-      class="button is-primary {{if this.save.isRunning 'is-loading'}}"
       disabled={{this.save.isRunning}}
       data-test-pki-role-save
-    >
-      {{if @role.isNew "Create" "Update"}}
-    </button>
-    <button
-      type="button"
-      class="button has-left-margin-s"
+    />
+    <Hds::Button
+      @text="Cancel"
+      @color="secondary"
       disabled={{this.save.isRunning}}
       {{on "click" @onCancel}}
       data-test-pki-role-cancel
-    >
-      Cancel
-    </button>
-    {{#if this.modelValidations.targets.errors}}
-      <AlertInline @type="danger" @message={{join ", " this.modelValidations.targets.errors}} @paddingTop={{true}} />
-    {{/if}}
-    {{#if this.invalidFormAlert}}
-      <div class="control">
-        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
-      </div>
-    {{/if}}
-  </div>
+    />
+  </Hds::ButtonSet>
+  {{#if this.modelValidations.targets.errors}}
+    <AlertInline @type="danger" @message={{join ", " this.modelValidations.targets.errors}} @paddingTop={{true}} />
+  {{/if}}
+  {{#if this.invalidFormAlert}}
+    <div class="control">
+      <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
+    </div>
+  {{/if}}
 </form>
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/pki-role-generate.hbs b/ui/lib/pki/addon/components/pki-role-generate.hbs
index ad710f6205..e1bebc7e31 100644
--- a/ui/lib/pki/addon/components/pki-role-generate.hbs
+++ b/ui/lib/pki/addon/components/pki-role-generate.hbs
@@ -24,31 +24,29 @@
         @showHelpText={{false}}
       />
     </div>
-    <div class="field is-grouped box is-fullwidth is-bottomless">
-      <div class="control">
-        <button
-          type="submit"
-          class="button is-primary {{if this.save.isRunning 'is-loading'}}"
-          disabled={{this.save.isRunning}}
-          data-test-pki-generate-button
-        >
-          {{capitalize this.verb}}
-        </button>
-        <button
-          type="button"
-          class="button has-left-margin-s"
-          disabled={{this.save.isRunning}}
-          {{on "click" this.cancel}}
-          data-test-pki-generate-cancel
-        >
-          Cancel
-        </button>
+    <hr class="has-background-gray-100" />
+    <Hds::ButtonSet>
+      <Hds::Button
+        @text={{capitalize this.verb}}
+        @icon={{if this.save.isRunning "loading"}}
+        type="submit"
+        disabled={{this.save.isRunning}}
+        data-test-pki-generate-button
+      />
+      <Hds::Button
+        @text="Cancel"
+        @color="secondary"
+        disabled={{this.save.isRunning}}
+        {{on "click" this.cancel}}
+        data-test-pki-generate-cancel
+      />
+    </Hds::ButtonSet>
+
+    {{#if this.invalidFormAlert}}
+      <div class="control" data-test-alert>
+        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
       </div>
-      {{#if this.invalidFormAlert}}
-        <div class="control" data-test-alert>
-          <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
-        </div>
-      {{/if}}
-    </div>
+    {{/if}}
+
   </form>
 {{/if}}
\ No newline at end of file
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 823628f2c8..c49c947199 100644
--- a/ui/lib/pki/addon/components/pki-sign-intermediate-form.hbs
+++ b/ui/lib/pki/addon/components/pki-sign-intermediate-form.hbs
@@ -53,35 +53,35 @@
 
       <PkiGenerateToggleGroups @model={{@model}} @groups={{this.groups}} />
     </div>
-    <div class="has-top-padding-s">
-      <button
+
+    <Hds::ButtonSet class="has-top-padding-s">
+      <Hds::Button
+        @text="Save"
+        @icon={{if this.save.isRunning "loading"}}
         type="submit"
-        class="button is-primary {{if this.save.isRunning 'is-loading'}}"
         disabled={{this.save.isRunning}}
         data-test-pki-sign-intermediate-save
-      >
-        Save
-      </button>
-      <button
-        type="button"
-        class="button has-left-margin-s"
+      />
+      <Hds::Button
+        @text="Cancel"
+        @color="secondary"
+        class="has-left-margin-s"
         disabled={{this.save.isRunning}}
         {{on "click" this.cancel}}
         data-test-pki-sign-intermediate-cancel
-      >
-        Cancel
-      </button>
-      {{#if this.inlineFormAlert}}
-        <div class="control">
-          <AlertInline
-            @type="danger"
-            @paddingTop={{true}}
-            @message={{this.inlineFormAlert}}
-            @mimicRefresh={{true}}
-            data-test-form-error
-          />
-        </div>
-      {{/if}}
-    </div>
+      />
+    </Hds::ButtonSet>
+    {{#if this.inlineFormAlert}}
+      <div class="control">
+        <AlertInline
+          @type="danger"
+          @paddingTop={{true}}
+          @message={{this.inlineFormAlert}}
+          @mimicRefresh={{true}}
+          data-test-form-error
+        />
+      </div>
+    {{/if}}
+
   </form>
 {{/if}}
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/pki-tidy-form.hbs b/ui/lib/pki/addon/components/pki-tidy-form.hbs
index 5e781b6d58..e5daca47cf 100644
--- a/ui/lib/pki/addon/components/pki-tidy-form.hbs
+++ b/ui/lib/pki/addon/components/pki-tidy-form.hbs
@@ -57,29 +57,25 @@
   {{/each}}
 
   <hr class="is-marginless has-background-gray-200" />
-
-  <div class="has-top-margin-m">
-    <button
+  <Hds::ButtonSet class="has-top-margin-m">
+    <Hds::Button
+      @text={{if (eq @tidyType "manual") "Perform tidy" "Save"}}
+      @icon={{if this.save.isRunning "loading"}}
       type="submit"
-      class="button is-primary {{if this.save.isRunning 'is-loading'}}"
       disabled={{this.save.isRunning}}
       data-test-pki-tidy-button
-    >
-      {{if (eq @tidyType "manual") "Perform tidy" "Save"}}
-    </button>
-    <button
-      type="button"
-      class="button is-secondary"
+    />
+    <Hds::Button
+      @text="Cancel"
+      @color="secondary"
       disabled={{this.save.isRunning}}
       {{on "click" @onCancel}}
       data-test-pki-tidy-cancel
-    >
-      Cancel
-    </button>
-    {{#if this.invalidFormAlert}}
-      <div class="control">
-        <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
-      </div>
-    {{/if}}
-  </div>
+    />
+  </Hds::ButtonSet>
+  {{#if this.invalidFormAlert}}
+    <div class="control">
+      <AlertInline @type="danger" @paddingTop={{true}} @message={{this.invalidFormAlert}} @mimicRefresh={{true}} />
+    </div>
+  {{/if}}
 </form>
\ No newline at end of file