UI: Update engine dropdowns #26806

hashishaw · 2024-05-03T15:16:29Z

This work is required as part of #26708

As part of the upgrade to Ember 5, we also need to update ember-power-select and ember-basic-dropdown. As part of this upgrade, the dropdown content no longer renders in tests when the dropdown is located within an engine unless @renderInPlace is passed in. Since the changes required can be done separately from the upgrade, I decided to split the work out into its own PR. There are no models used in engines which have editType: 'searchSelect' defined on their attributes, so no updates necessary for FormField.

Another thing we needed to update for this to work for users is to update the styling of toolbar-scroller. With the previous CSS, the dropdown contents were hidden under a scrollbar:

With these changes, it renders correctly:

After this toolbar update, we are unblocked from adopting HDS Dropdowns in the toolbar.

Ent tests pass

- Add aria-label arg - use label or humanized ID as fallback aria-label - protect against non-array options arg

… place

…ernetes, kv, ldap, sync)

github-actions · 2024-05-03T15:22:49Z

CI Results:
All Go tests succeeded! ✅

hashishaw · 2024-05-03T15:30:13Z

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


hashishaw · 2024-05-03T15:30:43Z

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|>


hashishaw · 2024-05-03T15:35:31Z

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

@@ -57,6 +57,7 @@
            @selectLimit="1"
            @fallbackComponent="input-search"
            @onChange={{this.selectRole}}
+            @renderInPlace={{true}}


(without the div around the button, the button height was off)

hashishaw · 2024-05-03T15:41:00Z

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

@@ -35,7 +35,13 @@
        Sign Intermediate
      </ToolbarLink>
    {{/if}}
-    <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
+    <BasicDropdown


Looks like it's centered (also in the binary) because it's rendering a DownloadLink. Fixing this is out of scope for this PR

hashishaw · 2024-05-03T15:42:20Z

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


hashishaw · 2024-05-03T15:43:36Z

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


hashishaw · 2024-05-03T15:45:15Z

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

@@ -39,6 +39,7 @@
        @disallowNewItems={{true}}
        @onChange={{this.handleRolesInput}}
        @fallbackComponent="input-search"
+        @renderInPlace={{true}}


hashishaw · 2024-05-03T15:45:31Z

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

@@ -64,6 +65,7 @@
        @disallowNewItems={{true}}
        @onChange={{this.handleCertificateInput}}
        @fallbackComponent="input-search"
+        @renderInPlace={{true}}


hashishaw · 2024-05-03T15:47:48Z

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

@@ -89,7 +91,7 @@
        @onChange={{this.handleIssuerSearch}}
        @fallbackComponent="input-search"
        @shouldRenderName={{true}}
-        @nameKey={{"issuerName"}}
+        @renderInPlace={{true}}


hashishaw · 2024-05-03T15:48:19Z

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}}


hashishaw · 2024-05-03T15:51:09Z

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}}


hashishaw · 2024-05-03T15:51:35Z

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

@@ -53,6 +53,7 @@
          @selectLimit={{1}}
          @disallowNewItems={{true}}
          @onChange={{this.setMount}}
+          @renderInPlace={{true}}


github-actions · 2024-05-03T16:24:44Z

Build Results:
All builds succeeded! ✅

hellobontempo

Thank you for the screenshots!

hashishaw added 3 commits May 3, 2024 10:07

Update search-select component

dda8f85

- 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…

cd33c81

… place

add renderInPlace to dropdowns in pki engine

d2baa20

hashishaw added ui pr/no-changelog labels May 3, 2024

hashishaw added this to the 1.17.0-rc milestone May 3, 2024

github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label May 3, 2024

hashishaw added 2 commits May 3, 2024 10:17

Update replication package.json and add renderInPlace

2364b4a

Add renderInPlace to search-select and basic-dropdown in engines (kub…

505fdaa

…ernetes, kv, ldap, sync)

hashishaw commented May 3, 2024

View reviewed changes

small cleanup

913de67

hashishaw marked this pull request as ready for review May 3, 2024 16:21

hashishaw requested a review from a team as a code owner May 3, 2024 16:21

hellobontempo approved these changes May 3, 2024

View reviewed changes

hashishaw merged commit 2a99b36 into main May 3, 2024
51 checks passed

hashishaw deleted the ui/update-engine-dropdowns branch May 3, 2024 17:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Update engine dropdowns #26806

UI: Update engine dropdowns #26806

hashishaw commented May 3, 2024 •

edited

Loading

github-actions bot commented May 3, 2024 •

edited

Loading

hashishaw May 3, 2024

hashishaw May 3, 2024

hashishaw May 3, 2024

hashishaw May 3, 2024 •

edited

Loading

hashishaw May 3, 2024

hashishaw May 3, 2024 •

edited

Loading

hashishaw May 3, 2024

hashishaw May 3, 2024

hashishaw May 3, 2024

hashishaw May 3, 2024

hashishaw May 3, 2024

hashishaw May 3, 2024

github-actions bot commented May 3, 2024

hellobontempo left a comment

UI: Update engine dropdowns #26806

UI: Update engine dropdowns #26806

Conversation

hashishaw commented May 3, 2024 • edited Loading

github-actions bot commented May 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hashishaw May 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hashishaw May 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented May 3, 2024

hellobontempo left a comment

Choose a reason for hiding this comment

hashishaw commented May 3, 2024 •

edited

Loading

github-actions bot commented May 3, 2024 •

edited

Loading

hashishaw May 3, 2024 •

edited

Loading

hashishaw May 3, 2024 •

edited

Loading