diff --git a/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs b/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs index 3d39896cb3..421d23dc08 100644 --- a/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs +++ b/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs @@ -2,18 +2,26 @@ {{#if (can "choose nspaces")}} {{#let (or @nspace 'default') - as |nspace|}} + (is-href 'dc.nspaces' @dc.Name) + as |nspace isManaging|}}
  • - {{nspace}} + {{if isManaging 'Manage Namespaces' nspace}} {{#if (gt @nspaces.length 0)}} @@ -40,34 +48,39 @@ /> {{/if}} - {{#each (reject-by 'DeletedAt' @nspaces) as |item|}} + {{#each menu.items as |item|}} + {{item.Name}} {{/each}} - {{#if (can 'manage nspaces')}} - - - - Manage Namespaces - - - {{/if}} diff --git a/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs b/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs index 2855842c1a..eae8faf0f2 100644 --- a/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs +++ b/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs @@ -1,6 +1,7 @@ {{#let (or @partition 'default') -as |partition|}} + (is-href 'dc.partitions' @dc.Name) +as |partition isManaging|}} {{#if (can "choose partitions" dc=@dc)}}
  • - {{partition}} + {{if isManaging 'Manage Partition' partition}} - {{#each (reject-by 'DeletedAt' @partitions) as |item|}} + {{#each menu.items as |item|}} {{item.Name}} {{/each}} - {{#if (can 'manage partitions')}} - - - - Manage Partitions - - - {{/if}} diff --git a/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs b/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs index e5b1021e37..3f910bbfa1 100644 --- a/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs @@ -4,6 +4,7 @@ > - {{#each (sort-by 'Name' @dcs) as |item|}} + {{#each menu.items as |item|}} {{if disclosure.expanded 'Close' 'Open'}} @@ -62,11 +60,53 @@ common usecase of having a floating menu. ``` +`DisclosureMenu` also supports virtually scrolling its menu items for when you have 1000s of items to display in the menu whilst avoiding DOM stuttering. The set up is a tinsy bit more involved. but eesnetially you provide the data items for the menu using the `@items` argument, and then you can loop through these in the menu to make/use your menu items. The `menu.items` property is automatically paged for you depending on the scroll position of the menu panel. Importantly, right now, you should provide a height value for each menu.item using the `--paged-row-height` CSS property, you can do this inline or within your CSS (preferred). If you don't do this the component is unable to calculate the size of the scroll track/thumb. In the future (when needed) we will provide a callback for each item so you can specify a function to calculate the size of each individual item to give us a little more flexibility on what we can do with this component. + +```hbs preview-template + + + + {{if disclosure.expanded 'Close' 'Open'}} + + + + {{#each menu.items as |item|}} + + {{item.Node}} + + {{/each}} + + + + +``` + ## Arguments | Argument | Type | Default | Description | | --- | --- | --- | --- | | `expanded` | `Boolean` | false | The _initial_ state of the disclosure. Please note: this is the _initial_ state only, please use the `disclosure.open` and `disclosure.close` for controling the state. | +| `items` | `object[]` | | When using a paginated menu you should add all possible items to this arguments and then uses the disclosure.Panel.Menu.items property for `each`ing through, see above example | ## Exported API diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs b/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs index ab05bdd8df..0ebb8f5a6f 100644 --- a/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs +++ b/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs @@ -9,7 +9,11 @@ as |disclosure|> {{yield (hash Action=(component 'disclosure-menu/action' disclosure=disclosure) - Menu=(component 'disclosure-menu/menu' disclosure=disclosure) + Menu=(component 'disclosure-menu/menu' + disclosure=disclosure + items=@items + rowHeight=@rowHeight + ) disclosure=disclosure toggle=disclosure.toggle close=disclosure.close diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/index.scss b/ui/packages/consul-ui/app/components/disclosure-menu/index.scss index cca70fbf59..9769284b97 100644 --- a/ui/packages/consul-ui/app/components/disclosure-menu/index.scss +++ b/ui/packages/consul-ui/app/components/disclosure-menu/index.scss @@ -3,4 +3,6 @@ } .disclosure-menu [aria-expanded] ~ * { @extend %menu-panel; + overflow-y: auto !important; + will-change: scrollPosition; } diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs b/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs index a37d86d244..b5b16cc056 100644 --- a/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs +++ b/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs @@ -1,11 +1,25 @@ <@disclosure.Details as |details|> -
    - {{yield (hash - Menu=(component 'menu' disclosure=@disclosure) - )}} -
    + +
    + {{yield (hash + Menu=(component 'menu' + disclosure=@disclosure + pager=pager + ) + )}} +
    +
    diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss index 03b6edb9ac..a7321eb17d 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss @@ -3,14 +3,21 @@ @extend %main-nav-vertical-hoisted; left: 100px; } - nav .dcs .menu-panel { - min-width: 250px; - } nav li.partitions, nav li.nspaces { @extend %main-nav-vertical-popover-menu; - /* --panel-height: 300px; - --row-height: 43px; */ + } + nav li.dcs [aria-expanded] ~ * { + min-width: 250px; + } + nav li.dcs [aria-expanded] ~ * { + max-height: 560px; + --paged-row-height: 43px; + } + nav li.partitions [aria-expanded] ~ *, + nav li.nspaces [aria-expanded] ~ * { + max-height: 360px; + --paged-row-height: 43px; } [role='banner'] a svg { diff --git a/ui/packages/consul-ui/app/components/menu/index.hbs b/ui/packages/consul-ui/app/components/menu/index.hbs index c90c09677f..cd49e1655d 100644 --- a/ui/packages/consul-ui/app/components/menu/index.hbs +++ b/ui/packages/consul-ui/app/components/menu/index.hbs @@ -1,8 +1,10 @@