UI: upgrade HDS to 4.12.0 (#28525)

* update hds to latest version * yield dropdown Interactive text instead of use @text arg, results after running codemod * remaining dropdown changes * address sidebar nav IconButton deprecation, fix secret tests * revert * explicitly select popupmenu * more test changes * fix pki toggle button * remove tracked prop in oidc client controller * aaand more test updates * change to tilde * tilde yarn lock changes * small cleanup items
hashicorp · Oct 4, 2024 · 05f32b6 · 05f32b6
1 parent bae0072
commit 05f32b6
Show file tree

Hide file tree

Showing 67 changed files with 282 additions and 419 deletions.
diff --git a/ui/app/components/sidebar/frame.hbs b/ui/app/components/sidebar/frame.hbs
@@ -18,9 +18,11 @@
             />
           </:logo>
           <:actions>
-            <Hds::SideNav::Header::IconButton
+            <Hds::Button
+              @isIconOnly={{true}}
+              @size="large"
               @icon="terminal-screen"
-              @ariaLabel="Console toggle"
+              @text="Console toggle"
               data-test-console-toggle
               {{on "click" (fn (mut this.console.isOpen) (not this.console.isOpen))}}
             />

diff --git a/ui/app/components/sidebar/user-menu.hbs b/ui/app/components/sidebar/user-menu.hbs
@@ -12,7 +12,7 @@
   as |Dropdown|
 >
   <Dropdown.Trigger data-test-user-menu-trigger>
-    <Hds::SideNav::Header::IconButton @icon="user" @ariaLabel="User menu" />
+    <Hds::Button @isIconOnly={{true}} @size="large" @icon="user" @text="User menu" />
   </Dropdown.Trigger>
   <Dropdown.Content>
     <div class="popup-menu-content" data-test-user-menu-content>

diff --git a/ui/app/controllers/vault/cluster/access/oidc/clients/client.js b/ui/app/controllers/vault/cluster/access/oidc/clients/client.js
@@ -5,22 +5,7 @@
 
 import Controller from '@ember/controller';
 import { service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
 
 export default class OidcClientController extends Controller {
   @service router;
-  @tracked isEditRoute;
-
-  constructor() {
-    super(...arguments);
-    this.router.on(
-      'routeDidChange',
-      ({ targetName }) => (this.isEditRoute = targetName.includes('edit') ? true : false)
-    );
-  }
-
-  get showHeader() {
-    // hide header when rendering the edit form
-    return !this.isEditRoute;
-  }
 }
diff --git a/ui/app/controllers/vault/cluster/access/oidc/keys/key.js b/ui/app/controllers/vault/cluster/access/oidc/keys/key.js
@@ -5,21 +5,7 @@
 
 import Controller from '@ember/controller';
 import { service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
 
 export default class OidcKeyController extends Controller {
   @service router;
-  @tracked isEditRoute;
-
-  constructor() {
-    super(...arguments);
-    this.router.on('routeDidChange', ({ targetName }) => {
-      return (this.isEditRoute = targetName.includes('edit') ? true : false);
-    });
-  }
-
-  get showHeader() {
-    // hide header when rendering the edit form
-    return !this.isEditRoute;
-  }
 }
diff --git a/ui/app/controllers/vault/cluster/access/oidc/providers/provider.js b/ui/app/controllers/vault/cluster/access/oidc/providers/provider.js
@@ -5,21 +5,7 @@
 
 import Controller from '@ember/controller';
 import { service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
 
 export default class OidcProviderController extends Controller {
   @service router;
-  @tracked isEditRoute;
-
-  constructor() {
-    super(...arguments);
-    this.router.on('routeDidChange', ({ targetName }) => {
-      return (this.isEditRoute = targetName.includes('edit') ? true : false);
-    });
-  }
-
-  get showHeader() {
-    // hide header when rendering the edit form
-    return !this.isEditRoute;
-  }
 }
diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss
@@ -55,7 +55,8 @@
     &:hover {
       background-color: $ui-gray-050;
     }
-    div {
+    div,
+    span {
       margin-left: -$spacing-4;
       font-size: $size-7;
       font-weight: $font-weight-semibold;

diff --git a/ui/app/styles/core/element-styling.scss b/ui/app/styles/core/element-styling.scss
@@ -195,8 +195,3 @@ label {
     cursor: not-allowed;
   }
 }
-
-// TODO remove when HDS has released fix
-.hds-form-masked-input .hds-form-masked-input__toggle-button {
-  margin-right: $spacing-12;
-}
diff --git a/ui/app/templates/components/generated-item-list.hbs b/ui/app/templates/components/generated-item-list.hbs
@@ -79,20 +79,17 @@
             data-test-popup-menu-trigger
           />
           <dd.Interactive
-            @text="View {{singularize @itemType}}"
             @route="vault.cluster.access.method.item.show"
             @models={{array @methodModel.id @itemType list.item.id}}
-          />
+          >View {{singularize @itemType}}</dd.Interactive>
           <dd.Interactive
-            @text="Edit {{singularize @itemType}}"
             @route="vault.cluster.access.method.item.edit"
             @models={{array @methodModel.id @itemType list.item.id}}
-          />
-          <dd.Interactive
-            @text="Delete {{singularize @itemType}}"
-            @color="critical"
-            {{on "click" (fn (mut this.itemToDelete) list.item)}}
-          />
+          >Edit {{singularize @itemType}}</dd.Interactive>
+          <dd.Interactive @color="critical" {{on "click" (fn (mut this.itemToDelete) list.item)}}>
+            Delete
+            {{singularize @itemType}}
+          </dd.Interactive>
         </Hds::Dropdown>
       </Item.menu>
       {{#if (eq list.item this.itemToDelete)}}

diff --git a/ui/app/templates/components/identity/popup-alias.hbs b/ui/app/templates/components/identity/popup-alias.hbs
@@ -12,29 +12,26 @@
       data-test-popup-menu-trigger
     />
     <dd.Interactive
-      @text="Details"
       @route="vault.cluster.access.identity.aliases.show"
       @models={{array (pluralize @item.parentType) @item.id "details"}}
-    />
+    >Details</dd.Interactive>
     {{#if @item.updatePath.isPending}}
       <dd.Generic class="has-text-center">
         <LoadingDropdownOption />
       </dd.Generic>
     {{else}}
       {{#if @item.canEdit}}
         <dd.Interactive
-          @text="Edit"
           @route="vault.cluster.access.identity.aliases.edit"
           @models={{array (pluralize @item.parentType) @item.id}}
-        />
+        >Edit</dd.Interactive>
       {{/if}}
       {{#if @item.canDelete}}
         <dd.Interactive
-          @text="Remove"
           @color="critical"
           {{on "click" (fn (mut this.showConfirmModal) true)}}
           data-test-popup-menu="delete"
-        />
+        >Remove</dd.Interactive>
       {{/if}}
     {{/if}}
   </Hds::Dropdown>

diff --git a/ui/app/templates/components/identity/popup-members.hbs b/ui/app/templates/components/identity/popup-members.hbs
@@ -11,7 +11,7 @@
       @hasChevron={{false}}
       data-test-popup-menu-trigger
     />
-    <dd.Interactive @text="Remove" @color="critical" {{on "click" (fn (mut this.showConfirmModal) true)}} />
+    <dd.Interactive @color="critical" {{on "click" (fn (mut this.showConfirmModal) true)}}>Remove</dd.Interactive>
   </Hds::Dropdown>
 </div>
 

diff --git a/ui/app/templates/components/identity/popup-metadata.hbs b/ui/app/templates/components/identity/popup-metadata.hbs
@@ -6,7 +6,7 @@
 <div class="has-text-right">
   <Hds::Dropdown @isInline={{true}} @listPosition="bottom-right" as |dd|>
     <dd.ToggleIcon @icon="more-horizontal" @text="Metadata options" @hasChevron={{false}} data-test-popup-menu-trigger />
-    <dd.Interactive @text="Remove" @color="critical" {{on "click" (fn (mut this.showConfirmModal) true)}} />
+    <dd.Interactive @color="critical" {{on "click" (fn (mut this.showConfirmModal) true)}}>Remove</dd.Interactive>
   </Hds::Dropdown>
 </div>
 

diff --git a/ui/app/templates/components/identity/popup-policy.hbs b/ui/app/templates/components/identity/popup-policy.hbs
@@ -11,13 +11,12 @@
       @hasChevron={{false}}
       data-test-popup-menu-trigger
     />
-    <dd.Interactive @text="View policy" @route="vault.cluster.policy.show" @models={{array "acl" @policyName}} />
-    <dd.Interactive @text="Edit policy" @route="vault.cluster.policy.edit" @models={{array "acl" @policyName}} />
-    <dd.Interactive
-      @text="Remove from {{@model.identityType}}"
-      @color="critical"
-      {{on "click" (fn (mut this.showConfirmModal) true)}}
-    />
+    <dd.Interactive @route="vault.cluster.policy.show" @models={{array "acl" @policyName}}>View policy</dd.Interactive>
+    <dd.Interactive @route="vault.cluster.policy.edit" @models={{array "acl" @policyName}}>Edit policy</dd.Interactive>
+    <dd.Interactive @color="critical" {{on "click" (fn (mut this.showConfirmModal) true)}}>
+      Remove from
+      {{@model.identityType}}
+    </dd.Interactive>
   </Hds::Dropdown>
 </div>
 

diff --git a/ui/app/templates/components/mfa/login-enforcement-list-item.hbs b/ui/app/templates/components/mfa/login-enforcement-list-item.hbs
@@ -27,17 +27,15 @@
             data-test-popup-menu-trigger
           />
           <dd.Interactive
-            @text="Details"
             @route="vault.cluster.access.mfa.enforcements.enforcement"
             @model={{@model.name}}
             data-test-list-item-link="details"
-          />
+          >Details</dd.Interactive>
           <dd.Interactive
-            @text="Edit"
             @route="vault.cluster.access.mfa.enforcements.enforcement.edit"
             @model={{@model.name}}
             data-test-list-item-link="edit"
-          />
+          >Edit</dd.Interactive>
         </Hds::Dropdown>
       </div>
     </div>

diff --git a/ui/app/templates/components/mfa/method-list-item.hbs b/ui/app/templates/components/mfa/method-list-item.hbs
@@ -38,17 +38,15 @@
             data-test-popup-menu-trigger
           />
           <dd.Interactive
-            @text="Details"
             @route="vault.cluster.access.mfa.methods.method"
             @model={{@model.id}}
             data-test-mfa-method-menu-link="details"
-          />
+          >Details</dd.Interactive>
           <dd.Interactive
-            @text="Edit"
             @route="vault.cluster.access.mfa.methods.method.edit"
             @model={{@model.id}}
             data-test-mfa-method-menu-link="edit"
-          />
+          >Edit</dd.Interactive>
         </Hds::Dropdown>
       </div>
     </div>

diff --git a/ui/app/templates/components/oidc/client-list.hbs b/ui/app/templates/components/oidc/client-list.hbs
@@ -34,19 +34,17 @@
               />
               {{#if client.canRead}}
                 <dd.Interactive
-                  @text="Details"
                   @route="vault.cluster.access.oidc.clients.client.details"
                   @model={{client.name}}
                   data-test-oidc-client-menu-link="details"
-                />
+                >Details</dd.Interactive>
               {{/if}}
               {{#if client.canEdit}}
                 <dd.Interactive
-                  @text="Edit"
                   @route="vault.cluster.access.oidc.clients.client.edit"
                   @model={{client.name}}
                   data-test-oidc-client-menu-link="edit"
-                />
+                >Edit</dd.Interactive>
               {{/if}}
             </Hds::Dropdown>
           {{/if}}

diff --git a/ui/app/templates/components/oidc/provider-list.hbs b/ui/app/templates/components/oidc/provider-list.hbs
@@ -34,19 +34,17 @@
               />
               {{#if provider.canRead}}
                 <dd.Interactive
-                  @text="Details"
                   @route="vault.cluster.access.oidc.providers.provider.details"
                   @model={{provider.name}}
                   data-test-oidc-provider-menu-link="details"
-                />
+                >Details</dd.Interactive>
               {{/if}}
               {{#if provider.canEdit}}
                 <dd.Interactive
-                  @text="Edit"
                   @route="vault.cluster.access.oidc.providers.provider.edit"
                   @model={{provider.name}}
                   data-test-oidc-provider-menu-link="edit"
-                />
+                >Edit</dd.Interactive>
               {{/if}}
             </Hds::Dropdown>
           {{/if}}

diff --git a/ui/app/templates/components/raft-storage-overview.hbs b/ui/app/templates/components/raft-storage-overview.hbs
@@ -12,13 +12,12 @@
         <dd.Interactive
           @href="/v1/sys/storage/raft/snapshot"
           @isHrefExternal={{false}}
-          @text="Download"
           {{on "click" (action "downloadViaServiceWorker")}}
-        />
+        >Download</dd.Interactive>
       {{else}}
-        <dd.Interactive @text="Download" {{on "click" (action "downloadSnapshot")}} />
+        <dd.Interactive {{on "click" (action "downloadSnapshot")}}>Download</dd.Interactive>
       {{/if}}
-      <dd.Interactive @text="Restore" @route="vault.cluster.storage-restore" />
+      <dd.Interactive @route="vault.cluster.storage-restore">Restore</dd.Interactive>
     </Hds::Dropdown>
   </PH.Actions>
 </Hds::PageHeader>

diff --git a/ui/app/templates/components/secret-list/aws-role-item.hbs b/ui/app/templates/components/secret-list/aws-role-item.hbs
@@ -36,11 +36,10 @@
           </dd.Generic>
         {{else if @item.canGenerate}}
           <dd.Interactive
-            @text="Generate credentials"
             @route="vault.cluster.secrets.backend.credentials"
             @model={{@item.id}}
             data-test-role-aws-link="generate"
-          />
+          >Generate credentials</dd.Interactive>
         {{/if}}
         {{#if @item.updatePath.isPending}}
           <dd.Generic class="has-text-center">
@@ -49,27 +48,24 @@
         {{else}}
           {{#if @item.canRead}}
             <dd.Interactive
-              @text="Details"
               @route="vault.cluster.secrets.backend.show"
               @model={{@item.id}}
               data-test-role-ssh-link="show"
-            />
+            >Details</dd.Interactive>
           {{/if}}
           {{#if @item.canEdit}}
             <dd.Interactive
-              @text="Edit"
               @route="vault.cluster.secrets.backend.edit"
               @model={{@item.id}}
               data-test-role-ssh-link="edit"
-            />
+            >Edit</dd.Interactive>
           {{/if}}
           {{#if @item.canDelete}}
             <dd.Interactive
-              @text="Delete"
               @color="critical"
               {{on "click" (fn (mut this.showConfirmModal) true)}}
               data-test-aws-role-delete={{@item.id}}
-            />
+            >Delete</dd.Interactive>
           {{/if}}
         {{/if}}
       </Hds::Dropdown>