status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-01-11 06:16:08 +00:00
Code Issues Projects Releases Wiki Activity

ui: Rework popover-menu auto closing (#8340)

Browse Source 
* ui: Move more menu subcomponents deeper down into popovermenu

* ui: Simplify aria-menu component+remove auto menu close on route change

* Add ember-string-fns

* Use new PopoverMenu sub components and fix up tests

* Fix up wrong closing let

* Remove dcs from the service show page now we have it in the navigation
This commit is contained in:
John Cowen 2020-08-10 09:26:02 +01:00 committed by GitHub
parent ff37af1129
commit d1c879e06c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 233 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui-v2/app/components/aria-menu/index.hbs
View File

@ -1,8 +1,10 @@
{{yield {{yield
(action 'change') (action 'change')
(action 'keypress') (action 'keypress')
(concat 'component-aria-menu-trigger-' guid)
(concat 'component-aria-menu-menu-' guid)
(if expanded 'true' undefined)
(action 'keypressClick') (action 'keypressClick')
(hash
labelledBy=(concat 'component-aria-menu-trigger-' guid)
controls=(concat 'component-aria-menu-menu-' guid)
expanded=(if expanded 'true' undefined)
)
}} }}

4
ui-v2/app/components/aria-menu/index.js
View File

@ -39,7 +39,6 @@ const MENU_ITEMS = '[role^="menuitem"]';
export default Component.extend({ export default Component.extend({
tagName: '', tagName: '',
dom: service('dom'), dom: service('dom'),
router: service('router'),
guid: '', guid: '',
expanded: false, expanded: false,
orientation: 'vertical', orientation: 'vertical',
@ -56,9 +55,6 @@ export default Component.extend({
this.$menu = this.dom.element(`#${COMPONENT_ID}menu-${this.guid}`); this.$menu = this.dom.element(`#${COMPONENT_ID}menu-${this.guid}`);
const labelledBy = this.$menu.getAttribute('aria-labelledby'); const labelledBy = this.$menu.getAttribute('aria-labelledby');
this.$trigger = this.dom.element(`#${labelledBy}`); this.$trigger = this.dom.element(`#${labelledBy}`);
this._routelisteners.add(this.router, {
routeWillChange: () => this.actions.close.apply(this, [{}]),
});
}, },
willDestroyElement: function() { willDestroyElement: function() {
this._super(...arguments); this._super(...arguments);

114
ui-v2/app/components/hashicorp-consul/index.hbs
View File

@ -17,7 +17,7 @@
{{#if (and (eq nspaces.length 1) (not canManageNspaces)) }} {{#if (and (eq nspaces.length 1) (not canManageNspaces)) }}
<span data-test-nspace-selected={{nspace.Name}}>{{nspace.Name}}</span> <span data-test-nspace-selected={{nspace.Name}}>{{nspace.Name}}</span>
{{ else }} {{ else }}
<PopoverMenu @position="left"> <PopoverMenu @position="left" as |components api|>
<BlockSlot @name="trigger"> <BlockSlot @name="trigger">
{{nspace.Name}} {{nspace.Name}}
</BlockSlot> </BlockSlot>
@ -29,25 +29,39 @@
</BlockSlot> </BlockSlot>
{{/if}} {{/if}}
<BlockSlot @name="menu"> <BlockSlot @name="menu">
<li role="separator"> {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
<MenuSeparator>
<BlockSlot @name="label">
Namespaces Namespaces
<DataSource <DataSource
@src="/*/*/namespaces" @src="/*/*/namespaces"
@onchange={{action (mut nspaces) value="data"}} @onchange={{action (mut nspaces) value="data"}}
@loading="lazy" @loading="lazy"
/> />
</li> </BlockSlot>
</MenuSeparator>
{{#each (reject-by 'DeletedAt' nspaces) as |item|}} {{#each (reject-by 'DeletedAt' nspaces) as |item|}}
<li role="none" class={{if (eq nspace.Name item.Name) 'is-active'}}> <MenuItem
<a tabindex="-1" role="menuitem" href={{href-mut (hash nspace=(concat '~' item.Name))}}>{{item.Name}}</a> class={{if (eq nspace.Name item.Name) 'is-active'}}
</li> @href={{href-mut (hash nspace=(concat '~' item.Name))}}
>
<BlockSlot @name="label">
{{item.Name}}
</BlockSlot>
</MenuItem>
{{/each}} {{/each}}
{{#if canManageNspaces }} {{#if canManageNspaces }}
<li role="separator"></li> <MenuSeparator />
<li role="none" data-test-main-nav-nspaces> <MenuItem
<a tabindex="-1" role="menuitem" href={{href-to 'dc.nspaces' dc.Name}}>Manage namespaces</a> data-test-main-nav-nspaces
</li> @href={{href-to 'dc.nspaces' dc.Name}}
>
<BlockSlot @name="label">
Manage Namespaces
</BlockSlot>
</MenuItem>
{{/if}} {{/if}}
{{/let}}
</BlockSlot> </BlockSlot>
</PopoverMenu> </PopoverMenu>
{{/if}} {{/if}}
@ -57,24 +71,34 @@
{{#if (or (not dcs) (eq dcs.length 1)) }} {{#if (or (not dcs) (eq dcs.length 1)) }}
<span data-test-datacenter-selected={{dc.Name}}>{{dc.Name}}</span> <span data-test-datacenter-selected={{dc.Name}}>{{dc.Name}}</span>
{{ else }} {{ else }}
<PopoverMenu @position="left"> <PopoverMenu @position="left" as |components|>
<BlockSlot @name="trigger"> <BlockSlot @name="trigger">
{{dc.Name}} {{dc.Name}}
</BlockSlot> </BlockSlot>
<BlockSlot @name="menu"> <BlockSlot @name="menu">
<li role="separator"> {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
<MenuSeparator>
<BlockSlot @name="label">
Datacenters Datacenters
<DataSource <DataSource
@src="/*/*/datacenters" @src="/*/*/datacenters"
@onchange={{action (mut dcs) value="data"}} @onchange={{action (mut dcs) value="data"}}
@loading="lazy" @loading="lazy"
/> />
</li> </BlockSlot>
</MenuSeparator>
{{#each (sort-by 'Name' dcs) as |item|}} {{#each (sort-by 'Name' dcs) as |item|}}
<li role="none" data-test-datacenter-picker class={{if (eq dc.Name item.Name) 'is-active'}}> <MenuItem
<a tabindex="-1" role="menuitem" href={{href-mut (hash dc=item.Name)}}>{{item.Name}}</a> data-test-datacenter-picker
</li> class={{if (eq dc.Name item.Name) 'is-active'}}
@href={{href-mut (hash dc=item.Name)}}
>
<BlockSlot @name="label">
{{item.Name}}
</BlockSlot>
</MenuItem>
{{/each}} {{/each}}
{{/let}}
</BlockSlot> </BlockSlot>
</PopoverMenu> </PopoverMenu>
@ -101,21 +125,38 @@
<nav> <nav>
<ul> <ul>
<li data-test-main-nav-help> <li data-test-main-nav-help>
<PopoverMenu @position="right"> <PopoverMenu @position="right" as |components|>
<BlockSlot @name="trigger"> <BlockSlot @name="trigger">
Help Help
</BlockSlot> </BlockSlot>
<BlockSlot @name="menu" as |id send keypressClick change|> <BlockSlot @name="menu">
<li role="none" class="docs-link"> {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
<a tabindex="-1" role="menuitem" href={{env 'CONSUL_DOCS_URL'}} rel="noopener noreferrer" target="_blank" onclick={{change}}>Documentation</a> <MenuItem
</li> class="docs-link"
<li role="none" class="learn-link"> @href={{env 'CONSUL_DOCS_URL'}}
<a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_LEARN_URL') '/consul'}} rel="noopener noreferrer" target="_blank" onclick={{change}}>HashiCorp Learn</a> >
</li> <BlockSlot @name="label">
<li role="separator"></li> Documentation
<li role="none" class="feedback-link"> </BlockSlot>
<a tabindex="-1" role="menuitem" href={{env 'CONSUL_REPO_ISSUES_URL'}} target="_blank" rel="noopener noreferrer" onclick={{change}}>Provide Feedback</a> </MenuItem>
</li> <MenuItem
class="learn-link"
@href={{concat (env 'CONSUL_DOCS_LEARN_URL') '/consul'}}
>
<BlockSlot @name="label">
HashiCorp Learn
</BlockSlot>
</MenuItem>
<MenuSeparator />
<MenuItem
class="learn-link"
@href={{env 'CONSUL_REPO_ISSUES_URL'}}
>
<BlockSlot @name="label">
Provide Feedback
</BlockSlot>
</MenuItem>
{{/let}}
</BlockSlot> </BlockSlot>
</PopoverMenu> </PopoverMenu>
</li> </li>
@ -168,21 +209,28 @@
</button> </button>
</BlockSlot> </BlockSlot>
</ModalDialog> </ModalDialog>
<PopoverMenu @position="right"> <PopoverMenu @position="right" as |components api|>
<BlockSlot @name="trigger"> <BlockSlot @name="trigger">
Logout Logout
</BlockSlot> </BlockSlot>
<BlockSlot @name="menu"> <BlockSlot @name="menu">
{{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
{{!TODO: It might be nice to use one of our recursive components here}} {{!TODO: It might be nice to use one of our recursive components here}}
{{#if authDialog.token.AccessorID}} {{#if authDialog.token.AccessorID}}
<li role="none"> <li role="none">
<AuthProfile /> <AuthProfile />
</li> </li>
<li role="separator"></li> <MenuSeparator />
{{/if}} {{/if}}
<li class="dangerous" role="none"> <MenuItem
<button type="button" tabindex="-1" role="menuitem" onclick={{action authDialog.logout}}>Logout</button> class="dangerous"
</li> @onclick={{action authDialog.logout}}
>
<BlockSlot @name="label">
Logout
</BlockSlot>
</MenuItem>
{{/let}}
</BlockSlot> </BlockSlot>
</PopoverMenu> </PopoverMenu>
</BlockSlot> </BlockSlot>

5
ui-v2/app/components/hashicorp-consul/pageobject.js
View File

@ -1,4 +1,4 @@
export default (clickable, attribute, is, authForm) => scope => { export default (collection, clickable, attribute, is, authForm) => scope => {
const page = { const page = {
navigation: [ navigation: [
'services', 'services',
@ -47,5 +47,8 @@ export default (clickable, attribute, is, authForm) => scope => {
':checked', ':checked',
'[data-test-nspace-menu] > input[type="checkbox"]' '[data-test-nspace-menu] > input[type="checkbox"]'
); );
page.navigation.dcs = collection('[data-test-datacenter-picker]', {
name: clickable('a'),
});
return page; return page;
}; };

12
ui-v2/app/components/more-popover-menu/index.hbs
View File

@ -1,16 +1,10 @@
<div class="more-popover-menu"> <div class="more-popover-menu">
<PopoverMenu @expanded={{expanded}} @onchange={{action onchange}} @keyboardAccess={{false}} as |api|> <PopoverMenu @expanded={{expanded}} @onchange={{action onchange}} @keyboardAccess={{false}} as |components api|>
<BlockSlot @name="trigger"> <BlockSlot @name="trigger">
More More
</BlockSlot> </BlockSlot>
<BlockSlot @name="menu" as |confirm send keypressClick clickTrigger|> <BlockSlot @name="menu">
{{yield (component 'more-popover-menu/action' menu=(hash {{yield components.MenuItem}}
addSubmenu=api.addSubmenu
removeSubmenu=api.removeSubmenu
confirm=confirm
keypressClick=keypressClick
clickTrigger=clickTrigger
))}}
</BlockSlot> </BlockSlot>
</PopoverMenu> </PopoverMenu>
</div> </div>

56
ui-v2/app/components/popover-menu/index.hbs
View File

@ -1,44 +1,62 @@
{{yield}} {{yield}}
<div class="popover-menu" ...attributes> <div class="popover-menu" ...attributes>
<AriaMenu @keyboardAccess={{keyboardAccess}} as |change keypress ariaLabelledBy ariaControls ariaExpanded keypressClick|> <AriaMenu @keyboardAccess={{keyboardAccess}} as |change keypress keypressClick aria|>
{{#let (hash
MenuItem=(component
'popover-menu/menu-item'
menu=(hash
addSubmenu=(action "addSubmenu")
removeSubmenu=(action "removeSubmenu")
confirm=(concat "popover-menu-" guid "-")
clickTrigger=this.toggle.click
keypressClick=keypressClick
)
)
MenuSeparator=(component
'popover-menu/menu-separator'
)
)
as |components|}}
{{#let (hash
toggle=this.toggle.click
)
as |api|}}
<ToggleButton <ToggleButton
@checked={{if keyboardAccess ariaExpanded expanded}} @checked={{if keyboardAccess aria.expanded expanded}}
@onchange={{queue change (action "change")}} @onchange={{queue change (action "change")}}
as |api|> as |toggle|>
<Ref @target={{this}} @name="toggle" @value={{api}} /> <Ref @target={{this}} @name="toggle" @value={{toggle}} />
<button type="button" aria-haspopup="menu" onkeydown={{keypress}} onclick={{this.toggle.click}} id={{ariaLabelledBy}} aria-controls={{ariaControls}}> <button type="button" aria-haspopup="menu" onkeydown={{keypress}} onclick={{this.toggle.click}} id={{aria.labelledBy}} aria-controls={{aria.controls}}>
<YieldSlot @name="trigger"> <YieldSlot @name="trigger">
{{yield (hash {{yield components api}}
addSubmenu=(action 'addSubmenu')
removeSubmenu=(action 'removeSubmenu')
)}}
</YieldSlot> </YieldSlot>
</button> </button>
</ToggleButton> </ToggleButton>
<MenuPanel @position={{position}} id={{ariaControls}} aria-labelledby={{ariaLabelledBy}} aria-expanded={{ariaExpanded}} as |api|>
<MenuPanel @position={{position}} id={{aria.controls}} aria-labelledby={{aria.labelledBy}} aria-expanded={{aria.expanded}} as |menu|>
<BlockSlot @name="controls"> <BlockSlot @name="controls">
<input type="checkbox" id={{concat 'popover-menu-' guid '-'}} /> <input type="checkbox" id={{concat 'popover-menu-' guid '-'}} />
{{#each submenus as |sub|}} {{#each submenus as |sub|}}
<input type="checkbox" id={{concat 'popover-menu-' guid '-' sub}} onchange={{api.change}} /> <input type="checkbox" id={{concat 'popover-menu-' guid '-' sub}} onchange={{menu.change}} />
{{/each}} {{/each}}
</BlockSlot> </BlockSlot>
{{#if hasHeader}} {{#if hasHeader}}
<BlockSlot @name="header"> <BlockSlot @name="header">
{{yield (hash {{yield components api}}
addSubmenu=(action 'addSubmenu')
removeSubmenu=(action 'removeSubmenu')
)}}
{{#yield-slot name="header"}}{{else}}{{/yield-slot}} {{#yield-slot name="header"}}{{else}}{{/yield-slot}}
</BlockSlot> </BlockSlot>
{{/if}} {{/if}}
<BlockSlot @name="menu"> <BlockSlot @name="menu">
<YieldSlot @name="menu" @params={{block-params (concat "popover-menu-" guid "-") send keypressClick this.toggle.click}}> <YieldSlot @name="menu" @params={{block-params (concat "popover-menu-" guid "-") send keypressClick this.toggle.click}}>
{{yield (hash {{yield components api}}
addSubmenu=(action 'addSubmenu')
removeSubmenu=(action 'removeSubmenu')
)}}
</YieldSlot> </YieldSlot>
</BlockSlot> </BlockSlot>
</MenuPanel> </MenuPanel>
{{/let}}
{{/let}}
</AriaMenu> </AriaMenu>
</div> </div>

11
ui-v2/app/components/more-popover-menu/action/index.hbs → ui-v2/app/components/popover-menu/menu-item/index.hbs
View File

@ -13,11 +13,19 @@
}}>{{yield}}</YieldSlot> }}>{{yield}}</YieldSlot>
</div> </div>
{{else if href}} {{else if href}}
<a role="menuitem" tabindex="-1" href={{href}}> {{#let (string-includes href '://') as |external|}}
<a
role="menuitem" tabindex="-1"
onclick={{action menu.clickTrigger}}
href={{href}}
target={{if external '_blank'}}
rel={{if external 'noopener noreferrer'}}
>
<YieldSlot @name="label"> <YieldSlot @name="label">
{{yield}} {{yield}}
</YieldSlot> </YieldSlot>
</a> </a>
{{/let}}
{{else}} {{else}}
<button role="menuitem" tabindex="-1" type="button" onclick={{action this.onclick}}> <button role="menuitem" tabindex="-1" type="button" onclick={{action this.onclick}}>
<YieldSlot @name="label"> <YieldSlot @name="label">
@ -26,3 +34,4 @@
</button> </button>
{{/if}} {{/if}}
</li> </li>

0
ui-v2/app/components/more-popover-menu/action/index.js → ui-v2/app/components/popover-menu/menu-item/index.js
View File

4
ui-v2/app/components/popover-menu/menu-separator/index.hbs Normal file
View File

@ -0,0 +1,4 @@
{{yield}}
<li role="separator">
<YieldSlot @name="label">{{yield}}</YieldSlot>
</li>

7
ui-v2/app/components/popover-menu/menu-separator/index.js Normal file
View File

@ -0,0 +1,7 @@
import Component from '@ember/component';
import Slotted from 'block-slots';
export default Component.extend(Slotted, {
tagName: '',
});

23
ui-v2/app/components/popover-select/index.hbs
View File

@ -1,19 +1,28 @@
<div class="popover-select" ...attributes> <div class="popover-select" ...attributes>
<PopoverMenu> <PopoverMenu as |components menu|>
<BlockSlot @name="trigger"> <BlockSlot @name="trigger">
<span> <span>
{{selected.value}} {{selected.value}}
</span> </span>
</BlockSlot> </BlockSlot>
<BlockSlot @name="menu" as |id send keypressClick change|> <BlockSlot @name="menu">
<li role="separator"> {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
<MenuSeparator>
<BlockSlot @name="label">
{{title}} {{title}}
</li> </BlockSlot>
</MenuSeparator>
{{#each options as |option|}} {{#each options as |option|}}
<li role="none" class={{if (eq selected.key option.key) 'is-active'}}> <MenuItem
<button tabindex="-1" role="menuitem" type="button" value={{option.key}} onclick={{action (queue (action 'change' option) change )}}>{{option.value}}</button> class={{if (eq selected.key option.key) 'is-active'}}
</li> @onclick={{action (queue (action 'change' option) (if multiple (noop) menu.toggle))}}
>
<BlockSlot @name="label">
{{option.value}}
</BlockSlot>
</MenuItem>
{{/each}} {{/each}}
{{/let}}
</BlockSlot> </BlockSlot>
</PopoverMenu> </PopoverMenu>
</div> </div>

2
ui-v2/app/components/popover-select/index.js
View File

@ -4,6 +4,8 @@ import { inject as service } from '@ember/service';
export default Component.extend({ export default Component.extend({
tagName: '', tagName: '',
dom: service('dom'), dom: service('dom'),
multiple: false,
onchange: function() {},
actions: { actions: {
change: function(option, e) { change: function(option, e) {
this.onchange(this.dom.setEventTargetProperty(e, 'selected', selected => option)); this.onchange(this.dom.setEventTargetProperty(e, 'selected', selected => option));

1
ui-v2/package.json
View File

@ -108,6 +108,7 @@
"ember-sinon-qunit": "5.0.0", "ember-sinon-qunit": "5.0.0",
"ember-source": "~3.16.0", "ember-source": "~3.16.0",
"ember-stargate": "^0.2.0", "ember-stargate": "^0.2.0",
"ember-string-fns": "^1.4.0",
"ember-test-selectors": "^4.0.0", "ember-test-selectors": "^4.0.0",
"ember-tooltips": "^3.4.3", "ember-tooltips": "^3.4.3",
"ember-truth-helpers": "^2.0.0", "ember-truth-helpers": "^2.0.0",

2
ui-v2/tests/acceptance/dc/error.feature
View File

@ -30,5 +30,5 @@ Feature: dc / error: Recovering from a dc 500 error
Scenario: Choosing a different dc from the dc menu Scenario: Choosing a different dc from the dc menu
Given the url "/v1/internal/ui/services" responds with a 200 status Given the url "/v1/internal/ui/services" responds with a 200 status
When I click dc on the navigation When I click dc on the navigation
And I click dcs.0.name And I click dcs.0.name on the navigation
Then I see 3 service models Then I see 3 service models

6
ui-v2/tests/acceptance/dc/services/dc-switch.feature
View File

@ -29,14 +29,14 @@ Feature: dc / services / dc-switch : Switching Datacenters
Then the url should be /dc-1/services Then the url should be /dc-1/services
Then I see 6 service models Then I see 6 service models
When I click dc on the navigation When I click dc on the navigation
And I click dcs.1.name And I click dcs.1.name on the navigation
Then the url should be /dc-2/services Then the url should be /dc-2/services
Then I see 6 service models Then I see 6 service models
When I click dc on the navigation When I click dc on the navigation
And I click dcs.0.name And I click dcs.0.name on the navigation
Then the url should be /dc-1/services Then the url should be /dc-1/services
Then I see 6 service models Then I see 6 service models
When I click dc on the navigation When I click dc on the navigation
And I click dcs.1.name And I click dcs.1.name on the navigation
Then the url should be /dc-2/services Then the url should be /dc-2/services
Then I see 6 service models Then I see 6 service models

2
ui-v2/tests/acceptance/dc/services/error.feature
View File

@ -28,4 +28,4 @@ Feature: dc / services / error
# When running through namespaces as the dc menu says 'Error' # When running through namespaces as the dc menu says 'Error'
# which is still kind of ok # which is still kind of ok
When I click dc on the navigation When I click dc on the navigation
And I see 2 datacenter models And I see 2 datacenter models on the navigation component

2
ui-v2/tests/acceptance/dc/services/show/dc-switch.feature
View File

@ -22,6 +22,6 @@ Feature: dc / services / show / dc-switch : Switching Datacenters
Then the url should be /dc-1/services/consul/instances Then the url should be /dc-1/services/consul/instances
And I see instancesUrl on the tabs contains "/dc-1/services/consul/instances" And I see instancesUrl on the tabs contains "/dc-1/services/consul/instances"
When I click dc on the navigation When I click dc on the navigation
And I click dcs.1.name And I click dcs.1.name on the navigation
Then the url should be /dc-2/services/consul/instances Then the url should be /dc-2/services/consul/instances
And I see instancesUrl on the tabs contains "/dc-2/services/consul/instances" And I see instancesUrl on the tabs contains "/dc-2/services/consul/instances"

13
ui-v2/tests/pages.js
View File

@ -124,7 +124,7 @@ const consulPolicyList = consulPolicyListFactory(
morePopoverMenu morePopoverMenu
); );
const page = pageFactory(clickable, attribute, is, authForm); const page = pageFactory(collection, clickable, attribute, is, authForm);
// pages // pages
const create = function(appView) { const create = function(appView) {
@ -150,16 +150,7 @@ export default {
) )
), ),
service: create( service: create(
service( service(visitable, attribute, collection, text, consulIntentionList, catalogToolbar, tabgroup)
visitable,
clickable,
attribute,
collection,
text,
consulIntentionList,
catalogToolbar,
tabgroup
)
), ),
instance: create(instance(visitable, attribute, collection, text, tabgroup)), instance: create(instance(visitable, attribute, collection, text, tabgroup)),
nodes: create(nodes(visitable, clickable, attribute, collection, catalogFilter)), nodes: create(nodes(visitable, clickable, attribute, collection, catalogFilter)),

3
ui-v2/tests/pages/dc/services/index.js
View File

@ -9,9 +9,6 @@ export default function(visitable, clickable, text, attribute, present, collecti
return { return {
visit: visitable('/:dc/services'), visit: visitable('/:dc/services'),
services: collection('.consul-service-list > ul > li:not(:first-child)', service), services: collection('.consul-service-list > ul > li:not(:first-child)', service),
dcs: collection('[data-test-datacenter-picker]', {
name: clickable('a'),
}),
home: clickable('[data-test-home]'), home: clickable('[data-test-home]'),
sort: popoverSelect(), sort: popoverSelect(),
}; };

16
ui-v2/tests/pages/dc/services/show.js
View File

@ -1,13 +1,4 @@
export default function( export default function(visitable, attribute, collection, text, intentions, filter, tabs) {
visitable,
clickable,
attribute,
collection,
text,
intentions,
filter,
tabs
) {
const page = { const page = {
visit: visitable('/:dc/services/:service'), visit: visitable('/:dc/services/:service'),
externalSource: attribute('data-test-external-source', '[data-test-external-source]', { externalSource: attribute('data-test-external-source', '[data-test-external-source]', {
@ -25,11 +16,6 @@ export default function(
'tags', 'tags',
]), ]),
filter: filter(), filter: filter(),
dcs: collection('[data-test-datacenter-picker]', {
name: clickable('a'),
}),
// TODO: These need to somehow move to subpages // TODO: These need to somehow move to subpages
instances: collection('.consul-service-instance-list > ul > li:not(:first-child)', { instances: collection('.consul-service-instance-list > ul > li:not(:first-child)', {
address: text('[data-test-address]'), address: text('[data-test-address]'),

7
ui-v2/yarn.lock
View File

@ -5921,6 +5921,13 @@ ember-stargate@^0.2.0:
ember-in-element-polyfill "^1.0.0" ember-in-element-polyfill "^1.0.0"
tracked-maps-and-sets "^2.1.0" tracked-maps-and-sets "^2.1.0"
ember-string-fns@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/ember-string-fns/-/ember-string-fns-1.4.0.tgz#bde188643d54b58c501d332e15ba5c04733a6233"
integrity sha512-1pcdUA40PdzzsUAUQ7U4eMRDtxOeUpKwyyInCkj3f/Qdt/QbXZkA/Ix9vWWly9N4QcO7akK0xHWIJiu4XzP8Rw==
dependencies:
ember-cli-babel "^7.7.3"
ember-template-lint@^2.0.1: ember-template-lint@^2.0.1:
version "2.9.0" version "2.9.0"
resolved "https://registry.yarnpkg.com/ember-template-lint/-/ember-template-lint-2.9.0.tgz#0580468e052c53451c1e983578beb7ee59885141" resolved "https://registry.yarnpkg.com/ember-template-lint/-/ember-template-lint-2.9.0.tgz#0580468e052c53451c1e983578beb7ee59885141"