From 2a99b3651f7dbe65627dba6183c5c1a465818e7b Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
Date: Fri, 3 May 2024 12:09:03 -0500
Subject: [PATCH] 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         |  1 -
 .../addon/components/copy-secret-dropdown.hbs |  9 ++++++++-
 .../core/addon/components/search-select.hbs   |  1 +
 ui/lib/core/addon/components/search-select.js |  3 ++-
 .../addon/components/page/overview.hbs        |  1 +
 .../addon/components/kv-version-dropdown.hbs  |  2 +-
 .../ldap/addon/components/page/overview.hbs   | 19 +++++++++++--------
 .../components/page/pki-issuer-details.hbs    | 12 +++++++++---
 .../addon/components/page/pki-issuer-list.hbs |  8 +++++++-
 .../page/pki-issuer-rotate-root.hbs           |  8 +++++++-
 .../addon/components/page/pki-overview.hbs    |  5 ++++-
 .../pki/addon/components/page/pki-overview.ts |  4 ++--
 ui/lib/pki/package.json                       |  1 +
 .../components/path-filter-config-list.hbs    |  1 +
 ui/lib/replication/package.json               |  5 +++--
 .../components/secrets/page/destinations.hbs  |  1 +
 .../page/destinations/destination/sync.hbs    |  1 +
 17 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/ui/app/styles/components/toolbar.scss b/ui/app/styles/components/toolbar.scss
index 19dbd3eba2..7a5a5a7f41 100644
--- a/ui/app/styles/components/toolbar.scss
+++ b/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) {
diff --git a/ui/lib/core/addon/components/copy-secret-dropdown.hbs b/ui/lib/core/addon/components/copy-secret-dropdown.hbs
index af83f660f4..63bd2377dd 100644
--- a/ui/lib/core/addon/components/copy-secret-dropdown.hbs
+++ b/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}} />
diff --git a/ui/lib/core/addon/components/search-select.hbs b/ui/lib/core/addon/components/search-select.hbs
index e21441aa8b..1d4680c0c6 100644
--- a/ui/lib/core/addon/components/search-select.hbs
+++ b/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}}
diff --git a/ui/lib/core/addon/components/search-select.js b/ui/lib/core/addon/components/search-select.js
index adb05d1b25..4ee014b206 100644
--- a/ui/lib/core/addon/components/search-select.js
+++ b/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'))
diff --git a/ui/lib/kubernetes/addon/components/page/overview.hbs b/ui/lib/kubernetes/addon/components/page/overview.hbs
index 0fb2bb0ad2..3e8b87d3e1 100644
--- a/ui/lib/kubernetes/addon/components/page/overview.hbs
+++ b/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"
diff --git a/ui/lib/kv/addon/components/kv-version-dropdown.hbs b/ui/lib/kv/addon/components/kv-version-dropdown.hbs
index 97642e5b51..18a050edb2 100644
--- a/ui/lib/kv/addon/components/kv-version-dropdown.hbs
+++ b/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"}}
diff --git a/ui/lib/ldap/addon/components/page/overview.hbs b/ui/lib/ldap/addon/components/page/overview.hbs
index 50b6fc714b..5a4adb931e 100644
--- a/ui/lib/ldap/addon/components/page/overview.hbs
+++ b/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>
diff --git a/ui/lib/pki/addon/components/page/pki-issuer-details.hbs b/ui/lib/pki/addon/components/page/pki-issuer-details.hbs
index b5aa62a335..48efd0d922 100644
--- a/ui/lib/pki/addon/components/page/pki-issuer-details.hbs
+++ b/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">
diff --git a/ui/lib/pki/addon/components/page/pki-issuer-list.hbs b/ui/lib/pki/addon/components/page/pki-issuer-list.hbs
index 38b4830909..2e80e195cc 100644
--- a/ui/lib/pki/addon/components/page/pki-issuer-list.hbs
+++ b/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"
diff --git a/ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs b/ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs
index 46ab633474..5fc4aac68d 100644
--- a/ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs
+++ b/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")}}
diff --git a/ui/lib/pki/addon/components/page/pki-overview.hbs b/ui/lib/pki/addon/components/page/pki-overview.hbs
index 9d0ba981c1..26fb62ab64 100644
--- a/ui/lib/pki/addon/components/page/pki-overview.hbs
+++ b/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
diff --git a/ui/lib/pki/addon/components/page/pki-overview.ts b/ui/lib/pki/addon/components/page/pki-overview.ts
index bf5c70937b..508c84eefa 100644
--- a/ui/lib/pki/addon/components/page/pki-overview.ts
+++ b/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;
 }
 
diff --git a/ui/lib/pki/package.json b/ui/lib/pki/package.json
index d56e1014d3..1635593c2f 100644
--- a/ui/lib/pki/package.json
+++ b/ui/lib/pki/package.json
@@ -6,6 +6,7 @@
   ],
   "dependencies": {
     "date-fns": "*",
+    "ember-basic-dropdown": "*",
     "ember-cli-babel": "*",
     "ember-cli-htmlbars": "*",
     "ember-cli-typescript": "*",
diff --git a/ui/lib/replication/addon/templates/components/path-filter-config-list.hbs b/ui/lib/replication/addon/templates/components/path-filter-config-list.hbs
index 1fa4e02204..8e78ae98fa 100644
--- a/ui/lib/replication/addon/templates/components/path-filter-config-list.hbs
+++ b/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)}}
diff --git a/ui/lib/replication/package.json b/ui/lib/replication/package.json
index 4b3000de97..f8fdcd86a9 100644
--- a/ui/lib/replication/package.json
+++ b/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": [
diff --git a/ui/lib/sync/addon/components/secrets/page/destinations.hbs b/ui/lib/sync/addon/components/secrets/page/destinations.hbs
index 4fc03ba633..7de1b24535 100644
--- a/ui/lib/sync/addon/components/secrets/page/destinations.hbs
+++ b/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"
     />
diff --git a/ui/lib/sync/addon/components/secrets/page/destinations/destination/sync.hbs b/ui/lib/sync/addon/components/secrets/page/destinations/destination/sync.hbs
index 71b5cc80ae..f2e24efb45 100644
--- a/ui/lib/sync/addon/components/secrets/page/destinations/destination/sync.hbs
+++ b/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}}