UI: prep for running button codemod (#23628)

* replace buttons with tabs

* update console buttons

* update ssh role item buttons

* remove tracked variable

* more tab cleanup

* remove unwrapActiveTab variable

* fix button control

* fix search select with modal test

ui/app/components/modal-form/policy-template.hbs

@@ -4,35 +4,21 @@
 ~}}
 
 {{#if this.policy.policyType}}
-  <nav class="tabs has-bottom-margin-l">
-    <ul>
-      <li class={{unless this.showExamplePolicy "active"}}>
-        <button
-          data-test-tab-your-policy
-          type="button"
-          name="form"
-          class="link link-plain tab has-text-weight-semibold {{unless this.showExamplePolicy ' is-active'}}"
-          {{on "click" (fn (mut this.showExamplePolicy) false)}}
-        >
-          Your Policy
-        </button>
-      </li>
-      <li class={{if this.showExamplePolicy "active"}}>
-        <button
-          data-test-tab-example-policy
-          type="button"
-          name="form"
-          class="link link-plain tab has-text-weight-semibold {{if this.showExamplePolicy ' is-active'}}"
-          {{on "click" (fn (mut this.showExamplePolicy) true)}}
-        >
-          Example Policy
-        </button>
-      </li>
-    </ul>
-  </nav>
-{{/if}}
-{{#if this.showExamplePolicy}}
-  <PolicyExample @policyType={{this.policy.policyType}} @container="#search-select-modal" />
+  <Hds::Tabs as |T|>
+    <T.Tab data-test-tab-your-policy>
+      Your Policy
+    </T.Tab>
+    <T.Tab Tab data-test-tab-example-policy>
+      Example Policy
+    </T.Tab>
+
+    <T.Panel>
+      <PolicyForm @onSave={{this.onSave}} @model={{this.policy}} @onCancel={{@onCancel}} />
+    </T.Panel>
+    <T.Panel class="has-top-padding-m">
+      <PolicyExample @policyType={{this.policy.policyType}} @container="#search-select-modal" />
+    </T.Panel>
+  </Hds::Tabs>
 {{else}}
   <Select
     @name="policyType"
@@ -43,9 +29,5 @@
     @onChange={{this.setPolicyType}}
     @noDefault={{true}}
   />
-  {{#if this.policy.policyType}}
-    <PolicyForm @onSave={{this.onSave}} @model={{this.policy}} @onCancel={{@onCancel}} />
-  {{else}}
-    <EmptyState @title="No policy type selected" @message="Select a policy type to continue creating." />
-  {{/if}}
+  <EmptyState @title="No policy type selected" @message="Select a policy type to continue creating." />
 {{/if}}

ui/app/components/modal-form/policy-template.js

@@ -29,7 +29,6 @@ export default class PolicyTemplate extends Component {
   @service version;
 
   @tracked policy = null; // model record passed to policy-form
-  @tracked showExamplePolicy = false;
 
   get policyOptions() {
     return [

ui/app/components/policy-form.hbs

@@ -4,7 +4,7 @@
 ~}}
 
 <form {{on "submit" (perform this.save)}} data-test-policy-form>
-  <div class="box is-bottomless is-fullwidth is-marginless">
+  <div class="box is-shadowless is-fullwidth is-marginless">
     <MessageError @errorMessage={{this.errorBanner}} />
     <NamespaceReminder @mode={{if @model.isNew "create" "edit"}} @noun="policy" />
     {{#if @model.isNew}}

ui/app/components/tool-actions-form.js

@@ -39,7 +39,6 @@ export default Component.extend(DEFAULTS, {
   algorithm: 'sha2-256',
 
   tagName: '',
-  unwrapActiveTab: 'data',
 
   didReceiveAttrs() {
     this._super(...arguments);

ui/app/components/tool-unwrap.js

@@ -16,14 +16,12 @@ import { action } from '@ember/object';
  *  @onClear={{action "onClear"}}
  *  @token={{token}}
  *  @unwrap_data={{unwrap_data}}
- *  @unwrapActiveTab={{unwrapActiveTab}}
  *  @details={{details}}
  *  @errors={{errors}}/>
  * ```
  * @param onClear {Function} - parent action that is passed through. Must be passed as {{action "onClear"}}
  * @param token=null {String} - property passed from parent to child and then passed back up to parent
  * @param unwrap_data {String} - property returned from parent.
- * @param unwrapActiveTab {String} - property returned from parent.
  * @param details {String} - property returned from parent.
  * @param error=null {Object} - errors passed from parent as default then from child back to parent.
  */

ui/app/styles/components/console-ui-panel.scss

@@ -18,20 +18,6 @@ $console-close-height: 35px;
   will-change: transform, min-height;
   -webkit-overflow-scrolling: touch;
   z-index: 199;
-
-  .button {
-    background: transparent;
-    border: none;
-    color: $white;
-    min-width: 0;
-    padding: 0 $size-8;
-
-    &.active,
-    &:hover {
-      background: $blue;
-      color: $white;
-    }
-  }
 }
 
 .console-ui-panel-content {
@@ -73,7 +59,7 @@ $console-close-height: 35px;
   input {
     background-color: rgba($black, 0.5);
     border: 1px solid var(--token-color-palette-neutral-500);
-    border-radius: 2px;
+    border-radius: var(--token-side-nav-body-list-item-border-radius);
     caret-color: $white;
     color: $white;
     flex: 1 1 auto;

ui/app/styles/components/tabs-component.scss

@@ -29,8 +29,7 @@
       &:focus {
         box-shadow: none;
       }
-      &.active,
-      &.active .tab {
+      &.active {
         border-color: $blue;
         color: $blue;
       }
@@ -40,10 +39,6 @@
       &.is-active {
         border-bottom: 2px solid $blue;
         color: $blue;
-
-        > button {
-          color: $blue;
-        }
       }
       // solves for tabs on auth mounts & secrets engines
       > a {
@@ -61,8 +56,7 @@
       box-shadow: none;
     }
     &.active a,
-    &.is-active a,
-    &.active .tab {
+    &.is-active a {
       border-color: $blue;
       color: $blue;
     }
@@ -73,10 +67,6 @@
     display: flex;
     justify-content: center;
     vertical-align: top;
-  }
-
-  a,
-  .tab {
     border-bottom: 2px solid transparent;
     color: $grey;
     font-weight: $font-weight-semibold;

ui/app/styles/core/buttons.scss

@@ -391,7 +391,6 @@ a.button.disabled {
     box-shadow: none;
     &:hover:not(.disabled) {
       background-color: $ui-gray-100;
-      border: 0;
       color: $blue;
     }
   }

ui/app/styles/helper-classes/colors.scss

@@ -18,6 +18,10 @@
   background-color: $ui-gray-200;
 }
 
+.has-background-gray-300 {
+  background-color: $ui-gray-300;
+}
+
 .has-background-gray-900 {
   background-color: $ui-gray-900;
 }

ui/app/templates/components/console/command-input.hbs

@@ -12,17 +12,14 @@
   <input onkeyup={{action "handleKeyUp"}} value={{this.value}} autocomplete="off" spellcheck="false" />
   <ToolTip @horizontalPosition="auto-right" @verticalPosition="above" as |d|>
     <d.Trigger>
-      <button
-        type="button"
-        class={{concat "button is-compact" (if this.isFullscreen " active")}}
+      <Hds::Button
+        class="hds-side-nav__icon-button"
         {{on "click" (action "fullscreen")}}
         data-test-tool-tip-trigger
-      >
-        <Icon
-          @name={{if this.isFullscreen "minimize" "maximize"}}
-          aria-label={{if this.isFullscreen "Minimize" "Maximize"}}
-        />
-      </button>
+        @icon={{if this.isFullscreen "minimize" "maximize"}}
+        @text={{if this.isFullscreen "Minimize" "Maximize"}}
+        @isIconOnly={{true}}
+      />
     </d.Trigger>
     <d.Content @defaultClass="tool-tip">
       <div class="box">

ui/app/templates/components/console/ui-panel.hbs

@@ -4,9 +4,14 @@
 ~}}
 
 <div class="console-close-button">
-  <button type="button" class="button is-ghost" {{action "closeConsole"}} data-test-console-panel-close>
-    <Icon @name="x" aria-label="Close console" />
-  </button>
+  <Hds::Button
+    class="hds-side-nav__icon-button"
+    {{on "click" (action "closeConsole")}}
+    data-test-console-panel-close
+    @text="Close console"
+    @icon="x"
+    @isIconOnly={{true}}
+  />
 </div>
 <div class="console-ui-panel-content">
   <div class="content has-bottom-margin-l">

ui/app/templates/components/secret-list/ssh-role-item.hbs

@@ -43,9 +43,7 @@
                 {{#if (eq @item.keyType "otp")}}
                   {{#if @item.generatePath.isPending}}
                     <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 if @item.canGenerate}}
                     <li class="action">
@@ -61,9 +59,9 @@
                 {{else if (eq @item.keyType "ca")}}
                   {{#if @item.signPath.isPending}}
                     <li class="action">
-                      <button disabled type="button" class="link button is-loading is-transparent">
-                        loading
-                      </button>
+                      <li class="action">
+                        <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
+                      </li>
                     </li>
                   {{else if @item.canGenerate}}
                     <li class="action">
@@ -78,40 +76,21 @@
                   {{/if}}
                 {{/if}}
                 {{#if @item.canEditZeroAddress}}
-                  {{#if @item.zeroAddress}}
-                    <li class="action">
-                      <button
-                        type="button"
-                        disabled={{get this (concat "loading-" @item.id)}}
-                        class="link button is-transparent {{if (get this (concat 'loading-' @item.id)) 'is-loading'}} "
-                        {{on "click" @toggleZeroAddress}}
-                      >
-                        Disable Zero Address
-                      </button>
-                    </li>
-                  {{else}}
-                    <li class="action">
-                      <button
-                        type="button"
-                        disabled={{get this (concat "loading-" @item.id)}}
-                        class="link button is-transparent {{if (get this (concat 'loading-' @item.id)) 'is-loading'}}"
-                        {{on "click" @toggleZeroAddress}}
-                      >
-                        Enable Zero Address
-                      </button>
-                    </li>
-                  {{/if}}
+                  <li class="action">
+                    <Hds::Button
+                      disabled={{@loadingToggleZeroAddress}}
+                      class="link"
+                      @icon={{if @loadingToggleZeroAddress "loading"}}
+                      @isIconOnly={{@loadingToggleZeroAddress}}
+                      {{on "click" @toggleZeroAddress}}
+                      @text={{if @item.zeroAddress "Disable Zero Address" "Enable Zero Address"}}
+                    />
+                  </li>
                 {{/if}}
                 {{#if @item.updatePath.isPending}}
                   <li class="action">
-                    <button disabled type="button" class="link button is-loading is-transparent">
-                      loading
-                    </button>
-                  </li>
-                  <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}} />
+                    <Hds::Button disabled @color="tertiary" @icon="loading" @text="loading" @isIconOnly={{true}} />
                   </li>
                 {{else}}
                   {{#if @item.canRead}}

ui/app/templates/components/tool-actions-form.hbs

@@ -36,7 +36,6 @@
     <ToolUnwrap
       @onClear={{action "onClear"}}
       @unwrap_data={{this.unwrap_data}}
-      @unwrapActiveTab={{this.unwrapActiveTab}}
       @details={{this.details}}
       @errors={{this.errors}}
       @token={{this.token}}

ui/app/templates/components/tool-unwrap.hbs

@@ -12,41 +12,20 @@
 </PageHeader>
 
 {{#if @unwrap_data}}
-  <div class="box is-sideless is-fullwidth is-marginless">
-    <nav class="tabs has-bottom-margin-l">
-      <ul>
-        {{! template-lint-configure no-nested-interactive "warn" }}
-        <li class={{if (eq @unwrapActiveTab "data") "is-active"}}>
-          <button
-            type="button"
-            class="link link-plain tab has-text-weight-semibold"
-            {{action (mut @unwrapActiveTab) "data"}}
-            data-test-button-data
-          >
-            Data
-          </button>
-        </li>
-        <li class={{if (eq @unwrapActiveTab "details") "is-active"}}>
-          <button
-            type="button"
-            class="link link-plain tab has-text-weight-semibold"
-            {{action (mut @unwrapActiveTab) "details"}}
-            data-test-button-details
-          >
-            Wrap Details
-          </button>
-        </li>
-        {{! template-lint-configure no-nested-interactive "on" }}
-      </ul>
-    </nav>
-    {{#if (eq @unwrapActiveTab "data")}}
-      <div class="field">
-        <div class="control">
-          <JsonEditor @title="Unwrapped Data" @value={{stringify @unwrap_data}} @readOnly={{true}} />
-        </div>
-      </div>
-    {{else}}
-      <div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">
+  <Hds::Tabs as |T|>
+    <T.Tab data-test-button-data>Data</T.Tab>
+    <T.Tab data-test-button-details>Wrap Details</T.Tab>
+    <T.Panel>
+      <JsonEditor
+        class="has-top-padding-m"
+        @title="Unwrapped Data"
+        @value={{stringify @unwrap_data}}
+        @readOnly={{true}}
+        @container=".toolbar-actions"
+      />
+    </T.Panel>
+    <T.Panel>
+      <div class="has-top-padding-m">
         {{#each-in @details as |key detail|}}
           <InfoTableRow @label={{key}} @value={{key}}>
             {{#if (or (eq detail "No") (eq detail "None"))}}
@@ -61,18 +40,12 @@
           </InfoTableRow>
         {{/each-in}}
       </div>
-    {{/if}}
-  </div>
-  <div class="field is-grouped box is-fullwidth is-bottomless">
-    <div class="control">
-      <Hds::Copy::Button @text="Copy" @textToCopy={{stringify @unwrap_data}} class="primary" />
-    </div>
-    <div class="control">
-      <button {{on "click" this.onClear}} type="button" class="button">
-        Back
-      </button>
-    </div>
-  </div>
+    </T.Panel>
+  </Hds::Tabs>
+  <Hds::ButtonSet class="has-top-padding-m">
+    <Hds::Copy::Button @text="Copy unwrapped data" @textToCopy={{stringify @unwrap_data}} class="primary" />
+    <Hds::Button {{on "click" this.onClear}} type="button" class="button" @text="Back" />
+  </Hds::ButtonSet>
 {{else}}
   <div class="box is-sideless is-fullwidth is-marginless">
     <NamespaceReminder @mode="perform" @noun={{@selectedAction}} />

ui/app/templates/vault/cluster/policies/create.hbs

@@ -22,6 +22,8 @@
   </p.levelLeft>
 </PageHeader>
 
+<hr class="has-background-gray-300 is-marginless" />
+
 <PolicyForm
   @model={{this.model}}
   @onSave={{transition-to "vault.cluster.policy.show" this.model.policyType this.model.name}}

ui/app/templates/vault/cluster/secrets/backend/list.hbs

@@ -75,6 +75,7 @@
           @modelType={{@modelType}}
           @options={{options}}
           @toggleZeroAddress={{action "toggleZeroAddress" item this.backendModel}}
+          @loadingToggleZeroAddress={{get this (concat "loading-" item.id)}}
         />
       {{/let}}
     {{else}}

ui/tests/integration/components/search-select-with-modal-test.js

@@ -185,10 +185,10 @@ module('Integration | Component | search select with modal', function (hooks) {
     assert.dom('[data-test-empty-state-title]').hasText('No policy type selected');
     await fillIn('[data-test-select="policyType"]', 'acl');
     assert.dom('[data-test-policy-form]').exists('policy form renders after type is selected');
-    await click('[data-test-tab-example-policy]');
-    assert.dom('[data-test-tab-example-policy]').hasClass('is-active');
-    await click('[data-test-tab-your-policy]');
-    assert.dom('[data-test-tab-your-policy]').hasClass('is-active');
+    await click('[data-test-tab-example-policy] button');
+    assert.dom('[data-test-tab-example-policy] button').hasAttribute('aria-selected', 'true');
+    await click('[data-test-tab-your-policy] button');
+    assert.dom('[data-test-tab-your-policy] button').hasAttribute('aria-selected', 'true');
     await fillIn(
       '[data-test-component="code-mirror-modifier"] textarea',
       'path "secret/super-secret" { capabilities = ["deny"] }'