UI: Update engine dropdowns (#26806)

* Update search-select component
- Add aria-label arg
- use label or humanized ID as fallback aria-label
- protect against non-array options arg

* remove overflow-x rule on toolbar-scroller so dropdowns can render in place

* add renderInPlace to dropdowns in pki engine

* Update replication package.json and add renderInPlace

* Add renderInPlace to search-select and basic-dropdown in engines (kubernetes, kv, ldap, sync)

* small cleanup

ui/app/styles/components/toolbar.scss

@@ -41,7 +41,6 @@
   display: flex;
   height: 3rem;
   justify-content: space-between;
-  overflow-x: auto;
   width: 100%;
 
   @include from($mobile) {

ui/lib/core/addon/components/copy-secret-dropdown.hbs

@@ -4,7 +4,14 @@
 ~}}
 
 {{! @onWrap is recommend to be a concurrency task! see <Page::Secret::Details> in KV addon for example }}
-<BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" @onClose={{@onClose}} as |D|>
+<BasicDropdown
+  @class="popup-menu"
+  @horizontalPosition="auto-right"
+  @verticalPosition="below"
+  @onClose={{@onClose}}
+  @renderInPlace={{true}}
+  as |D|
+>
   <D.Trigger data-test-copy-menu-trigger class="toolbar-link {{if D.isOpen 'is-active'}}" @htmlTag="button">
     Copy
     <Chevron @direction={{if D.isOpen "up" "down"}} @isButton={{true}} />

ui/lib/core/addon/components/search-select.hbs

@@ -46,6 +46,7 @@
         @renderInPlace={{@renderInPlace}}
         @verticalPosition="below"
         @disabled={{@disabled}}
+        @ariaLabel={{or @ariaLabel @label (humanize @id)}}
         as |option|
       >
         {{#if this.shouldRenderName}}

ui/lib/core/addon/components/search-select.js

@@ -49,6 +49,7 @@ import { addToArray } from 'vault/helpers/add-to-array';
  * @param {string} id - The name of the form field
  * @param {string} [label] - Label for this form field
  * @param {string} [labelClass] - overwrite default label size (14px) from class="is-label"
+ * @param {string} [ariaLabel] - fallback accessible label if label is not provided
  * @param {string} [subText] - Text to be displayed below the label
  * @param {string} fallbackComponent - name of component to be rendered if the API call 403s
  * @param {string} [helpText] - Text to be displayed in the info tooltip for this form field
@@ -142,7 +143,7 @@ export default class SearchSelect extends Component {
     }
 
     if (!this.args.models) {
-      if (this.args.options) {
+      if (Array.isArray(this.args.options)) {
         const { options } = this.args;
         // if options are nested, let parent handle formatting - see path-filter-config-list.js
         this.dropdownOptions = options.some((e) => Object.keys(e).includes('groupName'))

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

@@ -32,6 +32,7 @@
           @selectLimit="1"
           @fallbackComponent="input-search"
           @onChange={{this.selectRole}}
+          @renderInPlace={{true}}
         />
         <Hds::Button
           @text="Generate"

ui/lib/kv/addon/components/kv-version-dropdown.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
+<BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" @renderInPlace={{true}} as |D|>
   <D.Trigger data-test-version-dropdown class="toolbar-link {{if D.isOpen ' is-active'}}">
     Version
     {{or @displayVersion "current"}}

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

@@ -57,15 +57,18 @@
             @selectLimit="1"
             @fallbackComponent="input-search"
             @onChange={{this.selectRole}}
+            @renderInPlace={{true}}
           />
-          <Hds::Button
-            @text="Get credentials"
-            @color="secondary"
-            class="has-left-margin-s"
-            disabled={{not this.selectedRole}}
-            {{on "click" this.generateCredentials}}
-            data-test-generate-credential-button
-          />
+          <div>
+            <Hds::Button
+              @text="Get credentials"
+              @color="secondary"
+              class="has-left-margin-s"
+              disabled={{not this.selectedRole}}
+              {{on "click" this.generateCredentials}}
+              data-test-generate-credential-button
+            />
+          </div>
         </div>
       </OverviewCard>
     </div>

ui/lib/pki/addon/components/page/pki-issuer-details.hbs

@@ -35,15 +35,21 @@
         Sign Intermediate
       </ToolbarLink>
     {{/if}}
-    <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
+    <BasicDropdown
+      @class="popup-menu"
+      @horizontalPosition="auto-right"
+      @verticalPosition="below"
+      @renderInPlace={{true}}
+      as |D|
+    >
       <D.Trigger
-        data-test-popup-menu-trigger="true"
         class={{concat "toolbar-link" (if D.isOpen " is-active")}}
         @htmlTag="button"
         data-test-issuer-download
+        data-test-popup-menu-trigger
       >
         Download
-        <Chevron @direction="down" @isButton={{true}} />
+        <Chevron @direction={{if D.isOpen "up" "down"}} @isButton={{true}} />
       </D.Trigger>
       <D.Content @defaultClass="popup-menu-content">
         <nav class="box menu" aria-label="snapshots actions">

ui/lib/pki/addon/components/page/pki-issuer-list.hbs

@@ -8,7 +8,13 @@
     <ToolbarLink @route="issuers.import" @model={{@backend}} data-test-generate-issuer="import">
       Import
     </ToolbarLink>
-    <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
+    <BasicDropdown
+      @class="popup-menu"
+      @horizontalPosition="auto-right"
+      @verticalPosition="below"
+      @renderInPlace={{true}}
+      as |D|
+    >
       <D.Trigger
         class={{concat "toolbar-link" (if D.isOpen " is-active")}}
         @htmlTag="button"

ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs

@@ -33,7 +33,13 @@
       >
         Sign Intermediate
       </ToolbarLink>
-      <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
+      <BasicDropdown
+        @class="popup-menu"
+        @horizontalPosition="auto-right"
+        @verticalPosition="below"
+        @renderInPlace={{true}}
+        as |D|
+      >
         <D.Trigger
           data-test-popup-menu-trigger
           class={{concat "toolbar-link" (if D.isOpen " is-active")}}

ui/lib/pki/addon/components/page/pki-overview.hbs

@@ -39,6 +39,7 @@
         @disallowNewItems={{true}}
         @onChange={{this.handleRolesInput}}
         @fallbackComponent="input-search"
+        @renderInPlace={{true}}
         data-test-issue-certificate-input
       />
       <Hds::Button
@@ -64,6 +65,7 @@
         @disallowNewItems={{true}}
         @onChange={{this.handleCertificateInput}}
         @fallbackComponent="input-search"
+        @renderInPlace={{true}}
         data-test-view-certificate-input
       />
       <Hds::Button
@@ -89,7 +91,8 @@
         @onChange={{this.handleIssuerSearch}}
         @fallbackComponent="input-search"
         @shouldRenderName={{true}}
-        @nameKey={{"issuerName"}}
+        @nameKey="issuerName"
+        @renderInPlace={{true}}
         data-test-issue-issuer-input
       />
       <Hds::Button

ui/lib/pki/addon/components/page/pki-overview.ts

@@ -13,8 +13,8 @@ import type PkiIssuerModel from 'vault/models/pki/issuer';
 import type PkiRoleModel from 'vault/models/pki/role';
 
 interface Args {
-  issuers: PkiIssuerModel | number;
-  roles: PkiRoleModel | number;
+  issuers: PkiIssuerModel[] | number;
+  roles: PkiRoleModel[] | number;
   engine: string;
 }
 

ui/lib/pki/package.json

@@ -6,6 +6,7 @@
   ],
   "dependencies": {
     "date-fns": "*",
+    "ember-basic-dropdown": "*",
     "ember-cli-babel": "*",
     "ember-cli-htmlbars": "*",
     "ember-cli-typescript": "*",

ui/lib/replication/addon/templates/components/path-filter-config-list.hbs

@@ -89,6 +89,7 @@
     @label="Paths in this {{this.config.mode}}"
     @options={{this.autoCompleteOptions}}
     @search={{perform this.setAutoCompleteOptions}}
+    @renderInPlace={{true}}
   />
 {{/if}}
 {{#if (and (not this.config.mode) this.startedWithMode)}}

ui/lib/replication/package.json

@@ -5,10 +5,11 @@
     "ember-engine"
   ],
   "dependencies": {
+    "ember-auto-import": "*",
     "ember-cli-htmlbars": "*",
     "ember-cli-babel": "*",
-    "@hashicorp/design-system-components": "*",
-    "ember-auto-import": "*"
+    "ember-concurrency": "*",
+    "@hashicorp/design-system-components": "*"
   },
   "ember-addon": {
     "paths": [

ui/lib/sync/addon/components/secrets/page/destinations.hbs

@@ -25,6 +25,7 @@
       @placeholder="Filter by type"
       @inputValue={{if this.typeFilterName (array this.typeFilterName)}}
       @onChange={{fn this.onFilterChange "type"}}
+      @renderInPlace={{true}}
       class="is-marginless"
       data-test-filter="type"
     />

ui/lib/sync/addon/components/secrets/page/destinations/destination/sync.hbs

@@ -53,6 +53,7 @@
           @selectLimit={{1}}
           @disallowNewItems={{true}}
           @onChange={{this.setMount}}
+          @renderInPlace={{true}}
           data-test-sync-mount-select
         />
       {{else}}