From 04676c0eb527f932e288845625bf010d4c8de2c4 Mon Sep 17 00:00:00 2001
From: Kianna <30884335+kiannaquach@users.noreply.github.com>
Date: Fri, 27 Oct 2023 10:13:44 -0700
Subject: [PATCH] UI: [VAULT-17700] Part 3 HDS button (#23830)

---
 ui/app/components/policy-form.hbs             | 23 ++++++++---------
 ui/app/components/sidebar/user-menu.hbs       |  1 +
 .../vault/cluster/access/control-groups.hbs   |  4 +--
 .../vault/cluster/access/identity/index.hbs   |  1 +
 .../vault/cluster/access/leases/index.hbs     |  2 +-
 .../vault/cluster/access/leases/show.hbs      |  4 +--
 .../mfa/enforcements/enforcement/index.hbs    | 13 +++++-----
 .../vault/cluster/access/mfa/index.hbs        |  9 +------
 .../cluster/access/mfa/methods/create.hbs     | 14 ++++-------
 .../templates/vault/cluster/access/oidc.hbs   | 11 +++-----
 ui/app/templates/vault/cluster/auth.hbs       | 25 +++++++++++--------
 ui/app/templates/vault/cluster/init.hbs       |  9 +++----
 .../vault/cluster/secrets/backend/sign.hbs    | 18 +++++++------
 13 files changed, 60 insertions(+), 74 deletions(-)

diff --git a/ui/app/components/policy-form.hbs b/ui/app/components/policy-form.hbs
index 1dd1353347..cd872e3ed4 100644
--- a/ui/app/components/policy-form.hbs
+++ b/ui/app/components/policy-form.hbs
@@ -89,25 +89,22 @@
     {{/each}}
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
-    <div class="control">
-      <button
+    <Hds::ButtonSet>
+      <Hds::Button
+        @text={{if @model.isNew "Create policy" "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-policy-save
-      >
-        {{if @model.isNew "Create policy" "Save"}}
-      </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-policy-cancel
-      >
-        Cancel
-      </button>
-    </div>
+      />
+    </Hds::ButtonSet>
   </div>
 </form>
 
diff --git a/ui/app/components/sidebar/user-menu.hbs b/ui/app/components/sidebar/user-menu.hbs
index d15d368f25..fb49462ab4 100644
--- a/ui/app/components/sidebar/user-menu.hbs
+++ b/ui/app/components/sidebar/user-menu.hbs
@@ -60,6 +60,7 @@
               {{#if (is-before (now interval=1000) this.auth.tokenExpirationDate)}}
                 {{#if this.auth.authData.renewable}}
                   <li class="action">
+                    {{! TODO Hds::Button replacement skipped in favor of updating it when there is a Hds::Dropdown swapout }}
                     <button
                       type="button"
                       {{on "click" this.renewToken}}
diff --git a/ui/app/templates/vault/cluster/access/control-groups.hbs b/ui/app/templates/vault/cluster/access/control-groups.hbs
index 340e089e77..595cf87741 100644
--- a/ui/app/templates/vault/cluster/access/control-groups.hbs
+++ b/ui/app/templates/vault/cluster/access/control-groups.hbs
@@ -34,9 +34,7 @@
       </div>
     </div>
     <div class="field is-grouped box is-fullwidth is-bottomless">
-      <button type="submit" class="button is-primary" disabled={{not this.model.id}}>
-        Lookup
-      </button>
+      <Hds::Button @text="Lookup" type="submit" disabled={{not this.model.id}} />
     </div>
   </form>
 {{else}}
diff --git a/ui/app/templates/vault/cluster/access/identity/index.hbs b/ui/app/templates/vault/cluster/access/identity/index.hbs
index d995acd240..19b51620ec 100644
--- a/ui/app/templates/vault/cluster/access/identity/index.hbs
+++ b/ui/app/templates/vault/cluster/access/identity/index.hbs
@@ -64,6 +64,7 @@
                       </li>
                       <li class="action">
                         {{#if item.disabled}}
+                          {{! TODO Hds::Button replacement skipped in favor of updating it when there is a Hds::Dropdown swapout }}
                           <button type="button" {{action "toggleDisabled" item}} class="link">
                             Enable
                           </button>
diff --git a/ui/app/templates/vault/cluster/access/leases/index.hbs b/ui/app/templates/vault/cluster/access/leases/index.hbs
index 61abe627d5..b5ff61e397 100644
--- a/ui/app/templates/vault/cluster/access/leases/index.hbs
+++ b/ui/app/templates/vault/cluster/access/leases/index.hbs
@@ -27,7 +27,7 @@
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <button type="submit" class="button is-primary">Lookup</button>
+      <Hds::Button @text="Lookup" type="submit" />
     </div>
   </div>
 </form>
\ No newline at end of file
diff --git a/ui/app/templates/vault/cluster/access/leases/show.hbs b/ui/app/templates/vault/cluster/access/leases/show.hbs
index 6090795585..3837cd9266 100644
--- a/ui/app/templates/vault/cluster/access/leases/show.hbs
+++ b/ui/app/templates/vault/cluster/access/leases/show.hbs
@@ -81,9 +81,7 @@
       />
       <div class="field has-top-margin-s">
         <div class="control">
-          <button type="submit" class="button is-primary">
-            Renew lease
-          </button>
+          <Hds::Button @text="Renew lease" type="submit" />
         </div>
       </div>
     </form>
diff --git a/ui/app/templates/vault/cluster/access/mfa/enforcements/enforcement/index.hbs b/ui/app/templates/vault/cluster/access/mfa/enforcements/enforcement/index.hbs
index 85f9e1016d..b56c2bfb80 100644
--- a/ui/app/templates/vault/cluster/access/mfa/enforcements/enforcement/index.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/enforcements/enforcement/index.hbs
@@ -45,14 +45,13 @@
 </div>
 <Toolbar>
   <ToolbarActions>
-    <button
-      class="toolbar-link"
-      onclick={{action (mut this.showDeleteConfirmation) true}}
-      type="button"
+    <Hds::Button
+      @text="Delete"
+      @color="secondary"
+      class="toolbar-button"
+      {{on "click" (action (mut this.showDeleteConfirmation) true)}}
       data-test-enforcement-delete
-    >
-      Delete
-    </button>
+    />
     <div class="toolbar-separator"></div>
     <ToolbarLink
       @route="vault.cluster.access.mfa.enforcements.enforcement.edit"
diff --git a/ui/app/templates/vault/cluster/access/mfa/index.hbs b/ui/app/templates/vault/cluster/access/mfa/index.hbs
index f7a821f339..9d358020ef 100644
--- a/ui/app/templates/vault/cluster/access/mfa/index.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/index.hbs
@@ -20,14 +20,7 @@
       Learn more
     </DocLink>
   </p>
-  <button
-    type="submit"
-    class="button is-primary"
-    {{on "click" (transition-to "vault.cluster.access.mfa.methods.create")}}
-    data-test-mfa-configure
-  >
-    Configure MFA
-  </button>
+  <Hds::Button @text="Configure MFA" @route="vault.cluster.access.mfa.methods.create" data-test-mfa-configure />
 </div>
 <div class="box is-fullwidth is-shadowless">
   <p>
diff --git a/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs b/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs
index 97894e97ff..2bac109738 100644
--- a/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs
+++ b/ui/app/templates/vault/cluster/access/mfa/methods/create.hbs
@@ -92,16 +92,12 @@
   <div class="has-top-margin-l has-border-top-light">
     <div class="has-top-margin-l has-bottom-margin-l">
       {{#if this.showForms}}
-        <button class="button is-primary" type="button" {{on "click" (perform this.save)}} data-test-mfa-create-save>
-          Continue
-        </button>
-        <button class="button has-left-margin-xs" type="button" {{on "click" this.cancel}}>
-          Cancel
-        </button>
+        <Hds::ButtonSet>
+          <Hds::Button @text="Continue" {{on "click" (perform this.save)}} data-test-mfa-create-save />
+          <Hds::Button @text="Cancel" @color="secondary" {{on "click" this.cancel}} />
+        </Hds::ButtonSet>
       {{else if this.type}}
-        <button class="button is-primary" type="button" {{on "click" this.createModels}} data-test-mfa-create-next>
-          Next
-        </button>
+        <Hds::Button @text="Next" {{on "click" this.createModels}} data-test-mfa-create-next />
       {{/if}}
     </div>
   </div>
diff --git a/ui/app/templates/vault/cluster/access/oidc.hbs b/ui/app/templates/vault/cluster/access/oidc.hbs
index a418f6c796..8167d61db1 100644
--- a/ui/app/templates/vault/cluster/access/oidc.hbs
+++ b/ui/app/templates/vault/cluster/access/oidc.hbs
@@ -25,14 +25,11 @@
       </DocLink>
     </p>
     {{#if this.isCta}}
-      <button
-        type="submit"
-        class="button is-primary"
-        {{on "click" (transition-to "vault.cluster.access.oidc.clients.create")}}
+      <Hds::Button
+        @text="Create your first app"
+        @route="vault.cluster.access.oidc.clients.create"
         data-test-oidc-configure
-      >
-        Create your first app
-      </button>
+      />
     {{/if}}
   </div>
   {{#unless this.isCta}}
diff --git a/ui/app/templates/vault/cluster/auth.hbs b/ui/app/templates/vault/cluster/auth.hbs
index 95e5e8d30c..4d75b44acc 100644
--- a/ui/app/templates/vault/cluster/auth.hbs
+++ b/ui/app/templates/vault/cluster/auth.hbs
@@ -14,10 +14,7 @@
         @subTitle={{join ". " this.mfaErrors}}
         class="is-shadowless"
       >
-        <button type="button" class="button is-ghost is-transparent" {{on "click" (action "onMfaErrorDismiss")}}>
-          <Icon @name="chevron-left" />
-          Go back
-        </button>
+        <Hds::Button @text="Go back" @icon="chevron-left" @color="tertiary" {{on "click" (action "onMfaErrorDismiss")}} />
       </EmptyState>
     </div>
   </Page.altContent>
@@ -34,13 +31,21 @@
       </div>
       <div class="is-flex-row">
         {{#if this.mfaAuthData}}
-          <button type="button" class="icon-button" {{on "click" (fn (mut this.mfaAuthData) null)}}>
-            <Icon @name="arrow-left" @size="24" aria-label="Back to login" class="icon-blue" />
-          </button>
+          <Hds::Button
+            @text="Back to login"
+            @icon="arrow-left"
+            @isIconOnly={{true}}
+            @color="tertiary"
+            {{on "click" (fn (mut this.mfaAuthData) null)}}
+          />
         {{else if this.waitingForOktaNumberChallenge}}
-          <button type="button" class="icon-button" {{on "click" (action "cancelAuthentication")}}>
-            <Icon @name="arrow-left" @size="24" aria-label="Back to login" class="icon-blue" />
-          </button>
+          <Hds::Button
+            @text="Back to login"
+            @icon="arrow-left"
+            @isIconOnly={{true}}
+            @color="tertiary"
+            {{on "click" (action "cancelAuthentication")}}
+          />
         {{/if}}
         <h1 class="title is-3">
           {{if (or this.mfaAuthData this.waitingForOktaNumberChallenge) "Authenticate" "Sign in to Vault"}}
diff --git a/ui/app/templates/vault/cluster/init.hbs b/ui/app/templates/vault/cluster/init.hbs
index c51d2d08c2..70d44deb8e 100644
--- a/ui/app/templates/vault/cluster/init.hbs
+++ b/ui/app/templates/vault/cluster/init.hbs
@@ -205,14 +205,13 @@
           {{/if}}
         </div>
         <div class="box is-marginless is-shadowless">
-          <button
+          <Hds::Button
+            @text="Initialize"
+            @icon={{if this.loading "loading"}}
             data-test-init-submit
             type="submit"
-            class="button is-primary {{if this.loading 'is-loading'}}"
             disabled={{this.loading}}
-          >
-            Initialize
-          </button>
+          />
           <div class="init-illustration">
             {{svg-jar "initialize"}}
           </div>
diff --git a/ui/app/templates/vault/cluster/secrets/backend/sign.hbs b/ui/app/templates/vault/cluster/secrets/backend/sign.hbs
index 1cac42a98e..5780bdb6f8 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/sign.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/sign.hbs
@@ -67,9 +67,12 @@
       </div>
     {{/if}}
     <div class="control">
-      <button type="button" {{action "newModel"}} class="button" data-test-secret-generate-back={{true}}>
-        Back
-      </button>
+      <Hds::Button
+        @text="Back"
+        @color="secondary"
+        {{on "click" (action "newModel")}}
+        data-test-secret-generate-back={{true}}
+      />
     </div>
   </div>
 {{else}}
@@ -105,14 +108,13 @@
     </div>
     <div class="field is-grouped box is-fullwidth is-bottomless">
       <div class="control">
-        <button
+        <Hds::Button
+          @text="Sign"
+          @icon={{if this.loading "loading"}}
           type="submit"
           disabled={{this.loading}}
-          class="button is-primary {{if this.loading 'is-loading'}}"
           data-test-secret-generate={{true}}
-        >
-          Sign
-        </button>
+        />
       </div>
       <div class="control">
         <LinkTo