mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-25 00:21:07 +02:00
52aa1e0fc5
* [VAULT-35871] UI: Address design UI feedback on namespace picker * remove unused css class * dynamic width based on namespace length; not help messages * handle long namespace name - truncate the second line * hide/show message element so that it doesn't affect the layout while getting the width. * add copyright header to scss file * address PR comments & additional design feedback * fix syntax error * address more design feedback: use small buttons
95 lines
3.0 KiB
Handlebars
95 lines
3.0 KiB
Handlebars
{{!
|
|
Copyright (c) HashiCorp, Inc.
|
|
SPDX-License-Identifier: BUSL-1.1
|
|
}}
|
|
|
|
<div class="namespace-picker side-padding-4" ...attributes>
|
|
<Hds::Dropdown @enableCollisionDetection={{true}} as |D|>
|
|
|
|
<D.ToggleButton @icon="org" @text={{or this.selected.id "-"}} @isFullWidth={{true}} data-test-namespace-toggle />
|
|
|
|
{{#if this.errorLoadingNamespaces}}
|
|
|
|
<D.Header>
|
|
<MessageError @errorMessage={{this.errorLoadingNamespaces}} />
|
|
</D.Header>
|
|
|
|
{{else}}
|
|
|
|
<D.Header class="is-paddingless" @hasDivider={{true}}>
|
|
<div class="has-padding-8">
|
|
<Hds::Form::TextInput::Field
|
|
@value={{this.searchInput}}
|
|
@type="search"
|
|
aria-label="Search namespaces"
|
|
placeholder="Search"
|
|
{{on "keydown" this.onKeyDown}}
|
|
{{on "input" this.onSearchInput}}
|
|
{{did-insert this.focusSearchInput}}
|
|
/>
|
|
</div>
|
|
</D.Header>
|
|
|
|
<D.Header class="is-paddingless">
|
|
{{#if (and this.hasSearchInput (not this.showNoNamespacesMessage))}}
|
|
<div class="sub-text is-marginless has-top-padding-xs left-padding-16" {{did-insert this.adjustElementWidth}}>
|
|
{{this.searchInputHelpText}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div class="is-size-8 has-text-black has-text-weight-semibold left-padding-16 top-padding-10">
|
|
{{this.namespaceLabel}}
|
|
<Hds::BadgeCount @text={{or this.namespaceCount 0}} />
|
|
</div>
|
|
</D.Header>
|
|
|
|
{{#if this.showNoNamespacesMessage}}
|
|
<D.Generic class="sub-text is-marginless" {{did-insert this.adjustElementWidth}}>
|
|
{{this.noNamespacesMessage}}
|
|
</D.Generic>
|
|
{{/if}}
|
|
|
|
<div class="is-overflow-y-auto is-max-drawer-height" {{did-insert this.setupScrollListener}}>
|
|
{{#each this.visibleNamespaceOptions as |option|}}
|
|
<D.Checkmark
|
|
@selected={{eq option.id this.selected.id}}
|
|
{{on "click" (fn this.onChange option)}}
|
|
data-test-namespace-link={{option.path}}
|
|
>
|
|
<span class="is-fullwidth is-word-break right-padding-4">{{option.label}}</span>
|
|
</D.Checkmark>
|
|
{{/each}}
|
|
</div>
|
|
|
|
{{/if}}
|
|
|
|
<D.Footer @hasDivider={{true}} class="is-flex-center">
|
|
<Hds::ButtonSet class="is-fullwidth">
|
|
{{#if this.canRefreshNamespaces}}
|
|
<Hds::Button
|
|
@color="secondary"
|
|
@text="Refresh list"
|
|
@isFullWidth={{(not this.canManageNamespaces)}}
|
|
@icon="reload"
|
|
@size="small"
|
|
{{on "click" this.refreshList}}
|
|
data-test-refresh-namespaces
|
|
/>
|
|
{{/if}}
|
|
{{#if this.canManageNamespaces}}
|
|
<Hds::Button
|
|
@color="tertiary"
|
|
@text="Manage"
|
|
@isFullWidth={{(not this.canRefreshNamespaces)}}
|
|
@icon="settings"
|
|
@size="small"
|
|
@route="vault.cluster.access.namespaces"
|
|
data-test-manage-namespaces
|
|
/>
|
|
{{/if}}
|
|
</Hds::ButtonSet>
|
|
|
|
</D.Footer>
|
|
|
|
</Hds::Dropdown>
|
|
</div> |