Button Conversion Part 1 (#23633)

* adds codemod for transforming button element to hds component

* runs button codemod on kmip and kubernetes enginges

* manully updates kuberenetes roles button

* runs button codemod on ldap engine

* manually updates remaining ldap buttons

* updates button codemod to check if all child nodes were included in text arg construction

* runs button codemod on kv engine

* adds comment for future kv button update

* Update ui/lib/kv/addon/components/page/secret/details.hbs

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

* updates remaining instance of toolbar-link class on button and adds class name transform to button codemod

* adds display inline override to hds button

* updates hds button display override to inline-flex

* updates ldap account check in button to tertiary

* updates ldap library check out icon to tertiary and adds icon

---------

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

ui/lib/kubernetes/addon/components/page/configure.hbs

@@ -64,14 +64,14 @@
       Configuration values can be inferred from the pod and your local environment variables.
     </p>
     <div>
-      <button
-        class="button has-top-margin-s {{if this.fetchInferred.isRunning 'is-loading'}}"
-        type="button"
+      <Hds::Button
+        @text="Get config values"
+        @color="secondary"
+        @icon={{if this.fetchInferred.isRunning "loading"}}
+        class="has-top-margin-s"
         disabled={{this.fetchInferred.isRunning}}
         {{on "click" (perform this.fetchInferred)}}
-      >
-        Get config values
-      </button>
+      />
     </div>
   {{/if}}
 </div>
@@ -79,24 +79,15 @@
 <hr class="has-background-gray-200 has-top-margin-l" />
 
 <div class="has-top-margin-s has-bottom-margin-s is-flex">
-  <button
-    data-test-config-save
-    class="button is-primary"
-    type="button"
-    disabled={{this.isDisabled}}
-    {{on "click" (perform this.save)}}
-  >
-    Save
-  </button>
-  <button
+  <Hds::Button @text="Save" data-test-config-save disabled={{this.isDisabled}} {{on "click" (perform this.save)}} />
+  <Hds::Button
+    @text="Back"
+    @color="secondary"
+    class="has-left-margin-xs"
     data-test-config-cancel
-    class="button has-left-margin-xs"
-    type="button"
     disabled={{or this.save.isRunning this.fetchInferred.isRunning}}
     {{on "click" this.cancel}}
-  >
-    Back
-  </button>
+  />
   {{#if this.alert}}
     <AlertInline @type="danger" @paddingTop={{true}} @message={{this.alert}} @mimicRefresh={{true}} data-test-alert />
   {{/if}}

ui/lib/kubernetes/addon/components/page/credentials.hbs

@@ -46,9 +46,7 @@
   </div>
 
   <div class="has-top-margin-l">
-    <button class="button is-primary" type="button" data-test-generate-credentials-done {{on "click" this.cancel}}>
-      Done
-    </button>
+    <Hds::Button @text="Done" data-test-generate-credentials-done {{on "click" this.cancel}} />
   </div>
 {{else}}
   <div data-test-generate-credentials>
@@ -99,23 +97,21 @@
         />
       </div>
       <div class="has-top-margin-l">
-        <button
-          class="button is-primary {{if this.fetchCredentials.isRunning 'is-loading'}}"
+        <Hds::Button
+          @text="Generate credentials"
+          @icon={{if this.fetchCredentials.isRunning "loading"}}
           type="submit"
           disabled={{this.fetchCredentials.isRunning}}
           data-test-generate-credentials-button
-        >
-          Generate credentials
-        </button>
-        <button
-          class="button has-left-margin-xs"
-          type="button"
+        />
+        <Hds::Button
+          @text="Back"
+          @color="secondary"
+          class="has-left-margin-xs"
           disabled={{this.fetchCredentials.isRunning}}
           {{on "click" this.cancel}}
           data-test-generate-credentials-back
-        >
-          Back
-        </button>
+        />
       </div>
     </form>
   </div>

ui/lib/kubernetes/addon/components/page/overview.hbs

@@ -33,15 +33,14 @@
           @fallbackComponent="input-search"
           @onChange={{this.selectRole}}
         />
-        <button
-          class="button has-left-margin-s"
-          type="button"
+        <Hds::Button
+          @text="Generate"
+          @color="secondary"
+          class="has-left-margin-s"
           disabled={{not this.selectedRole}}
           {{on "click" this.generateCredential}}
           data-test-generate-credential-button
-        >
-          Generate
-        </button>
+        />
       </div>
     </OverviewCard>
   </div>

ui/lib/kubernetes/addon/components/page/role/create-and-edit.hbs

@@ -116,10 +116,14 @@
             @valueUpdated={{fn (mut template.rules)}}
             @helpText={{sanitized-html this.roleRulesHelpText}}
           >
-            <button type="button" class="toolbar-link" {{on "click" this.resetRoleRules}} data-test-restore-example>
-              Restore example
-              <Icon @name="reload" />
-            </button>
+            <Hds::Button
+              @icon="reload"
+              @text="Restore example"
+              @color="secondary"
+              class="toolbar-button"
+              {{on "click" this.resetRoleRules}}
+              data-test-restore-example
+            />
           </JsonEditor>
         {{/let}}
       </div>
@@ -141,16 +145,13 @@
 <hr class="is-marginless has-background-gray-200" />
 
 <div class="has-top-margin-l has-bottom-margin-s">
-  <button
+  <Hds::Button
+    @text="Save"
+    @icon={{if this.save.isRunning "loading"}}
     type="submit"
     form="role"
-    class="button is-primary {{if this.save.isRunning 'is-loading'}}"
     disabled={{or (not @model.generationPreference) this.save.isRunning}}
     data-test-save
-  >
-    Save
-  </button>
-  <button type="button" class="button has-left-margin-s" data-test-cancel {{on "click" this.cancel}}>
-    Back
-  </button>
+  />
+  <Hds::Button @text="Back" @color="secondary" class="has-left-margin-s" data-test-cancel {{on "click" this.cancel}} />
 </div>

ui/lib/kubernetes/addon/components/page/roles.hbs

@@ -43,9 +43,7 @@
         <Item.menu as |Menu|>
           {{#if role.rolesPath.isLoading}}
             <li class="action">
-              <button disabled type="button" class="link button is-loading is-transparent">
-                loading
-              </button>
+              <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
             </li>
           {{else}}
             <li class="action">