luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: a11y modals (#9819) 

This PR uses the excellent a11y-dialog to implement our modal functionality across the UI.

This package covers all our a11y needs - overlay click and ESC to close, controlling aria-* attributes, focus trap and restore. It's also very small (1.6kb) and has good DOM and JS APIs and also seems to be widely used and well tested.

There is one downside to using this, and that is:

We made use of a very handy characteristic of the relationship between HTML labels and inputs in order to implement our modals previously. Adding a for="id" attribute to a label meant you can control an <input id="id" /> from anywhere else in the page without having to pass javascript objects around. It's just based on using the same string for the for attribute and the id attribute. This allowed us to easily open our login dialog with CSS from anywhere within the UI without having to manage passing around a javascript object/function/method in order to open the dialog.

We've PRed #9813 which includes an approach which would make passing around JS modal object easier to do. But in the meantime we've added a little 'hack' here using an additional <input /> element and a change listener which allows us to keep this label/input characteristic of our old modals. I'd originally thought this would be a temporary amend in order to wait on #9813 but the more I think about it, the more I think its quite a nice thing to keep - so longer term we may/may not keep this.
This commit is contained in:
John Cowen 2021-03-09 09:30:01 +00:00 committed by GitHub
parent f0e34dfadb
commit a2fa60681a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 198 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/9819.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: improve accessibility of modal dialogs
```

9
ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs
View File

@ -147,7 +147,7 @@
<button <button
data-test-create-permission data-test-create-permission
type="button" type="button"
onclick={{action (mut shouldShowPermissionForm) true}} {{on "click" (optional this.modal.open)}}
> >
Add permission Add permission
</button> </button>
@ -156,7 +156,7 @@
<Consul::Intention::Notice::Permissions /> <Consul::Intention::Notice::Permissions />
<Consul::Intention::Permission::List <Consul::Intention::Permission::List
@items={{item.Permissions}} @items={{item.Permissions}}
@onclick={{queue (action (mut permission)) (action (mut shouldShowPermissionForm) true)}} @onclick={{queue (action (mut permission)) (action (optional this.modal.open))}}
@ondelete={{action 'delete' 'Permissions' item}} @ondelete={{action 'delete' 'Permissions' item}}
/> />
{{else}} {{else}}
@ -190,11 +190,11 @@
</label> </label>
</fieldset> </fieldset>
{{#if shouldShowPermissionForm}}
<ModalDialog <ModalDialog
class="consul-intention-permission-modal" class="consul-intention-permission-modal"
@onclose={{queue (action (mut shouldShowPermissionForm) false) (action (mut permission) undefined)}} @onclose={{action (mut permission) undefined}}
as |modal|> as |modal|>
<Ref @target={{this}} @name="modal" @value={{modal}} />
<BlockSlot @name="header"> <BlockSlot @name="header">
<h3>Edit Permission</h3> <h3>Edit Permission</h3>
</BlockSlot> </BlockSlot>
@ -225,6 +225,5 @@
</button> </button>
</BlockSlot> </BlockSlot>
</ModalDialog> </ModalDialog>
{{/if}}
</div> </div>

2
ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss
View File

@ -22,6 +22,6 @@
float: right; float: right;
} }
} }
.consul-intention-permission-modal [role="dialog"] > div > div { .consul-intention-permission-modal [role="dialog"] {
width: 100%; width: 100%;
} }

6
ui/packages/consul-ui/app/components/consul/intention/form/index.hbs
View File

@ -34,13 +34,12 @@ as |api|>
{{#let api.data as |item|}} {{#let api.data as |item|}}
{{#if (can 'write intention' item=item)}} {{#if (can 'write intention' item=item)}}
{{#if this.warn}}
{{#let (changeset-get item 'Action') as |newAction|}} {{#let (changeset-get item 'Action') as |newAction|}}
<ModalDialog <ModalDialog
class="consul-intention-action-warn-modal warning" class="consul-intention-action-warn-modal warning"
data-test-action-warning data-test-action-warning
@onclose={{action (mut this.warn) false}} as |modal|>
> <Ref @target={{this}} @name="modal" @value={{modal}} />
<BlockSlot @name="header"> <BlockSlot @name="header">
<h2>Set intention to {{newAction}}?</h2> <h2>Set intention to {{newAction}}?</h2>
</BlockSlot> </BlockSlot>
@ -69,7 +68,6 @@ as |api|>
</BlockSlot> </BlockSlot>
</ModalDialog> </ModalDialog>
{{/let}} {{/let}}
{{/if}}
<DataSource <DataSource
@src={{concat '/*/' @dc '/services'}} @src={{concat '/*/' @dc '/services'}}

4
ui/packages/consul-ui/app/components/consul/intention/form/index.js
View File

@ -14,7 +14,7 @@ export default class ConsulIntentionForm extends Component {
@tracked isManagedByCRDs; @tracked isManagedByCRDs;
@tracked warn = false; modal = null; // reference to the warning modal
@service('repository/intention') repo; @service('repository/intention') repo;
@ -55,7 +55,7 @@ export default class ConsulIntentionForm extends Component {
// if the action of the intention has changed and its non-empty then warn // if the action of the intention has changed and its non-empty then warn
// the user // the user
if (typeof item.change.Action !== 'undefined' && typeof item.data.Action === 'undefined') { if (typeof item.change.Action !== 'undefined' && typeof item.data.Action === 'undefined') {
this.warn = true; this.modal.open();
} else { } else {
submit(); submit();
} }

36
ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
View File

@ -201,39 +201,45 @@
> >
{{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}} {{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}}
<BlockSlot @name="unauthorized"> <BlockSlot @name="unauthorized">
<label tabindex="0" for="login-toggle" onkeypress={{this.keypressClick}}> <label
tabindex="0"
{{on 'keypress' this.keypressClick}}
{{on "click" (optional this.modal.open)}}
>
<span>Log in</span> <span>Log in</span>
</label> </label>
<ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |api|> <ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |modal|>
<Ref @target={{this}} @name="modal" @value={{api}} /> <Ref @target={{this}} @name="modal" @value={{modal}} />
<BlockSlot @name="header"> <BlockSlot @name="header">
<h2>Log in to Consul</h2> <h2>Log in to Consul</h2>
</BlockSlot> </BlockSlot>
<BlockSlot @name="body"> <BlockSlot @name="body">
<AuthForm as |api|> <AuthForm as |authForm|>
<Ref @target={{this}} @name="authForm" @value={{api}} /> <Ref @target={{this}} @name="authForm" @value={{authForm}} />
</AuthForm> </AuthForm>
</BlockSlot> </BlockSlot>
<BlockSlot @name="actions" as |close|> <BlockSlot @name="actions">
<button type="button" onclick={{action close}}> <button type="button"
{{on "click" modal.close}}
>
Continue without logging in Continue without logging in
</button> </button>
</BlockSlot> </BlockSlot>
</ModalDialog> </ModalDialog>
</BlockSlot> </BlockSlot>
<BlockSlot @name="authorized"> <BlockSlot @name="authorized">
<ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |api|> <ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |modal|>
<Ref @target={{this}} @name="modal" @value={{api}} /> <Ref @target={{this}} @name="modal" @value={{modal}} />
<BlockSlot @name="header"> <BlockSlot @name="header">
<h2>Log in with a different token</h2> <h2>Log in with a different token</h2>
</BlockSlot> </BlockSlot>
<BlockSlot @name="body"> <BlockSlot @name="body">
<AuthForm as |api|> <AuthForm as |authForm|>
<Ref @target={{this}} @name="authForm" @value={{api}} /> <Ref @target={{this}} @name="authForm" @value={{authForm}} />
</AuthForm> </AuthForm>
</BlockSlot> </BlockSlot>
<BlockSlot @name="actions" as |close|> <BlockSlot @name="actions">
<button type="button" onclick={{action close}}> <button type="button" onclick={{action modal.close}}>
Continue without logging in Continue without logging in
</button> </button>
</BlockSlot> </BlockSlot>
@ -271,7 +277,9 @@
</:complementary-nav> </:complementary-nav>
<:main> <:main>
{{yield}} {{yield (hash
modal=this.modal
)}}
</:main> </:main>
<:content-info> <:content-info>

5
ui/packages/consul-ui/app/components/hashicorp-consul/index.js
View File

@ -17,4 +17,9 @@ export default class HashiCorpConsul extends Component {
this.modal.close(); this.modal.close();
this.args.onchange(e); this.args.onchange(e);
} }
@action
keypressClick(e) {
e.target.dispatchEvent(new MouseEvent('click'));
}
} }

78
ui/packages/consul-ui/app/components/modal-dialog/index.hbs
View File

@ -1,51 +1,55 @@
{{on-window 'resize' (action "resize") }}
<Portal @target="modal"> <Portal @target="modal">
{{yield}} {{yield}}
<input
id={{@name}}
type="checkbox"
{{on 'change' (action 'change')}}
/>
<div <div
class="modal-dialog" class="modal-dialog"
{{ref this 'modal'}} aria-hidden="true"
...attributes ...attributes
{{did-insert (action "connect")}}
{{will-destroy (action "disconnect")}}
> >
<input <div tabindex="-1" data-a11y-dialog-hide></div>
class="modal-dialog-control"
id={{name}}
type="radio"
name="modal"
data-checked="{{checked}}"
checked={{checked}}
onchange={{action 'change'}}
/>
<div <div
class="modal-dialog-modal" class="modal-dialog-modal"
role="dialog" role="dialog"
aria-modal="true"
> >
<label for="modal_close"></label> <div
<div> role="document"
<div class="modal-dialog-window"> >
<header class="modal-dialog-header"> <header class="modal-dialog-header">
<label for="modal_close"></label> <button
<YieldSlot @name="header"> type="button"
{{yield (hash data-a11y-dialog-hide
close=(action "close") aria-label="Close dialog"
)}} >
</YieldSlot> </button>
</header> <YieldSlot @name="header">
<div class="modal-dialog-body"> {{yield (hash
<YieldSlot @name="body"> open=(action "open")
{{yield (hash close=(action "close")
close=(action "close") )}}
)}} </YieldSlot>
</YieldSlot> </header>
</div> <div class="modal-dialog-body">
<footer class="modal-dialog-footer"> <YieldSlot @name="body">
<YieldSlot @name="actions" @params={{block-params (action "close")}}> {{yield (hash
{{yield (hash open=(action "open")
close=(action "close") close=(action "close")
)}} )}}
</YieldSlot> </YieldSlot>
</footer>
</div> </div>
<footer class="modal-dialog-footer">
<YieldSlot @name="actions" @params={{block-params (action "close")}}>
{{yield (hash
open=(action "open")
close=(action "close")
)}}
</YieldSlot>
</footer>
</div> </div>
</div> </div>
</div> </div>

119
ui/packages/consul-ui/app/components/modal-dialog/index.js
View File

@ -1,119 +1,28 @@
import Component from '@ember/component'; import Component from '@ember/component';
import { get, set } from '@ember/object';
import { inject as service } from '@ember/service';
import Slotted from 'block-slots'; import Slotted from 'block-slots';
import A11yDialog from 'a11y-dialog';
import templatize from 'consul-ui/utils/templatize';
export default Component.extend(Slotted, { export default Component.extend(Slotted, {
tagName: '', tagName: '',
dom: service('dom'),
checked: true,
height: null,
// dialog is a reference to the modal-dialog 'panel' so its 'window'
dialog: null,
overflowingClass: 'overflowing',
onclose: function() {}, onclose: function() {},
onopen: function() {}, onopen: function() {},
_open: function(e) {
set(this, 'checked', true);
if (this.height === null) {
if (this.element) {
const dialogPanel = this.dom.element('.modal-dialog-window', this.modal);
const rect = dialogPanel.getBoundingClientRect();
set(this, 'dialog', dialogPanel);
set(this, 'height', rect.height);
}
}
this.didAppear();
this.onopen(e);
},
didAppear: function() {
this._super(...arguments);
if (this.checked) {
this.dom.root().classList.add(...templatize(['with-modal']));
}
},
_close: function(e) {
set(this, 'checked', false);
const dialogPanel = this.dialog;
if (dialogPanel) {
const overflowing = this.overflowingClass;
if (dialogPanel.classList.contains(overflowing)) {
dialogPanel.classList.remove(overflowing);
}
}
// TODO: should we make a didDisappear?
this.dom.root().classList.remove(...templatize(['with-modal']));
this.onclose(e);
},
didReceiveAttrs: function() {
this._super(...arguments);
// TODO: Why does setting name mean checked it false?
// It's because if it has a name then it is likely to be linked
// to HTML state rather than just being added via HTMLBars
// and therefore likely to be immediately on the page
// It's not our usecase just yet, but this should check the state
// of the thing its linked to, incase that has a `checked` of true
// right now we know ours is always false.
if (this.name) {
set(this, 'checked', false);
}
if (this.element) {
if (this.checked) {
// TODO: probably need an event here
// possibly this.element for the target
// or find the input
this._open({ target: {} });
}
}
},
didInsertElement: function() {
this._super(...arguments);
this.actions.resize.apply(this, [{ target: this.dom.viewport() }]);
if (this.checked) {
// TODO: probably need an event here
// possibly this.element for the target
// or find the input
this._open({ target: {} });
}
},
didDestroyElement: function() {
this._super(...arguments);
this.dom.root().classList.remove(...templatize(['with-modal']));
},
actions: { actions: {
resize: function(e) { connect: function($el) {
if (this.checked) { this.dialog = new A11yDialog($el);
const height = this.height; this.dialog.on('hide', () => this.onclose({ target: $el }));
if (height !== null) { this.dialog.on('show', () => this.onopen({ target: $el }));
const dialogPanel = this.dialog;
const overflowing = this.overflowingClass;
if (height > e.target.innerHeight) {
if (!dialogPanel.classList.contains(overflowing)) {
dialogPanel.classList.add(overflowing);
}
return;
} else {
if (dialogPanel.classList.contains(overflowing)) {
dialogPanel.classList.remove(overflowing);
}
}
}
}
}, },
change: function(e) { disconnect: function($el) {
if (get(e, 'target.checked')) { this.dialog.destroy();
this._open(e); },
} else { open: function() {
this._close(e); this.dialog.show();
}
}, },
close: function() { close: function() {
const $close = this.dom.element('#modal_close'); this.dialog.hide();
$close.checked = true; },
const $input = this.dom.element('input[name="modal"]', this.modal); change: function(e) {
$input.onchange({ target: $input }); this.actions.open.call(this);
}, },
}, },
}); });

15
ui/packages/consul-ui/app/components/modal-dialog/index.scss
View File

@ -1,14 +1,11 @@
@import './skin'; @import './skin';
@import './layout'; @import './layout';
.modal-dialog-modal { .modal-layer {
@extend %modal-layer;
}
.modal-dialog {
@extend %modal-dialog; @extend %modal-dialog;
} }
input[name='modal'] { %modal-dialog [role="document"] {
@extend %modal-control; @extend %modal-window;
}
html.template-with-modal {
@extend %with-modal;
}
%modal-dialog table {
min-height: 149px;
} }

72
ui/packages/consul-ui/app/components/modal-dialog/layout.scss
View File

@ -1,37 +1,5 @@
%with-modal { %modal-layer {
overflow: hidden; height: 0;
}
/*TODO: %display-toggle?*/
%modal-control,
%modal-control + * {
display: none;
}
%modal-control:checked + * {
display: block;
}
%modal-dialog > div > div {
@extend %modal-window;
}
%modal-dialog {
z-index: 500;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
%modal-dialog > label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
%modal-dialog > div {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
} }
/*TODO: Should these be here? */ /*TODO: Should these be here? */
%modal-window table { %modal-window table {
@ -40,15 +8,41 @@
%modal-window tbody { %modal-window tbody {
max-height: 100px; max-height: 100px;
} }
/**/ %modal-dialog table {
%modal-window.overflowing { min-height: 149px;
overflow: auto; }
%modal-dialog > div:first-child {
@extend %modal-dialog-overlay;
}
%modal-dialog,
%modal-dialog-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
%modal-dialog {
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
height: 100%; height: 100%;
} }
%modal-dialog[aria-hidden='true'] {
display: none;
}
%modal-window {
margin: auto;
z-index: 2;
position: relative;
}
/**/
%modal-window { %modal-window {
max-width: 855px; max-width: 855px;
position: relative; position: relative;
z-index: 1;
} }
%modal-window > * { %modal-window > * {
padding-left: 15px; padding-left: 15px;
@ -67,7 +61,7 @@
%modal-window > header { %modal-window > header {
position: relative; position: relative;
} }
%modal-window > header [for='modal_close'] { %modal-window > header [data-a11y-dialog-hide] {
float: right; float: right;
text-indent: -9000px; text-indent: -9000px;
width: 24px; width: 24px;

18
ui/packages/consul-ui/app/components/modal-dialog/skin.scss
View File

@ -1,20 +1,20 @@
.modal-dialog.warning header { %modal-dialog.warning header {
background-color: $yellow-050; background-color: $yellow-050;
border-color: $yellow-500; border-color: $yellow-500;
color: $yellow-800; color: $yellow-800;
} }
.modal-dialog.warning header > *:not(label) { %modal-dialog.warning header > *:not(label) {
font-size: $typo-size-500; font-size: $typo-size-500;
font-weight: $typo-weight-semibold; font-weight: $typo-weight-semibold;
} }
.modal-dialog.warning header::before { %modal-dialog.warning header::before {
@extend %with-alert-triangle-mask, %as-pseudo; @extend %with-alert-triangle-mask, %as-pseudo;
color: $yellow-500; color: $yellow-500;
float: left; float: left;
margin-top: 2px; margin-top: 2px;
margin-right: 3px; margin-right: 3px;
} }
%modal-dialog > label { %modal-dialog-overlay {
background-color: rgba($white, 0.9); background-color: rgba($white, 0.9);
} }
%modal-window { %modal-window {
@ -22,7 +22,7 @@
} }
%modal-window { %modal-window {
/*%frame-gray-000*/ /*%frame-gray-000*/
background-color: $white; background-color: var(--gray-000);
} }
%modal-window > footer, %modal-window > footer,
%modal-window > header { %modal-window > header {
@ -35,7 +35,7 @@
.modal-dialog-body, .modal-dialog-body,
%modal-window > footer, %modal-window > footer,
%modal-window > header { %modal-window > header {
border-color: $gray-300; border-color: var(--gray-300);
} }
.modal-dialog-body { .modal-dialog-body {
border-style: solid; border-style: solid;
@ -47,12 +47,12 @@
border-width: 1px; border-width: 1px;
} }
%modal-window > header [for='modal_close'] { %modal-window > header [data-a11y-dialog-hide] {
@extend %with-cancel-plain-icon; @extend %with-cancel-plain-icon;
cursor: pointer; cursor: pointer;
border: $decor-border-100; border: $decor-border-100;
/*%frame-gray-050??*/ /*%frame-gray-050??*/
background-color: $gray-050; background-color: var(--gray-050);
border-color: $gray-300; border-color: var(--gray-300);
border-radius: $decor-radius-100; border-radius: $decor-radius-100;
} }

6
ui/packages/consul-ui/app/components/modal-layer/index.hbs
View File

@ -1,4 +1,6 @@
<div> <div
<span><input id="modal_close" type="radio" name="modal" onchange={{action 'change'}} /></span> class="modal-layer"
...attributes
>
<PortalTarget @name="modal" @multiple={{true}} /> <PortalTarget @name="modal" @multiple={{true}} />
</div> </div>

20
ui/packages/consul-ui/app/components/modal-layer/index.js
View File

@ -1,20 +0,0 @@
import Component from '@ember/component';
import { inject as service } from '@ember/service';
export default Component.extend({
dom: service('dom'),
tagName: '',
actions: {
change: function(e) {
[...this.dom.elements('[name="modal"]')]
.filter(function(item) {
return item.getAttribute('id') !== 'modal_close';
})
.forEach(function(item, i) {
if (item.getAttribute('data-checked') === 'true') {
item.onchange({ target: item });
}
});
},
},
});

9
ui/packages/consul-ui/app/components/policy-selector/index.hbs
View File

@ -7,7 +7,11 @@
{{#yield-slot name='trigger'}} {{#yield-slot name='trigger'}}
{{yield}} {{yield}}
{{else}} {{else}}
<label class="type-dialog" for="new-policy-toggle"> <label
class="type-dialog"
data-test-policy-create
{{on "click" (optional this.modal.open)}}
>
<span>Create new policy</span> <span>Create new policy</span>
</label> </label>
{{!TODO: potentially call trigger something else}} {{!TODO: potentially call trigger something else}}
@ -16,7 +20,8 @@
data-test-policy-form data-test-policy-form
@onopen={{action "open"}} @onopen={{action "open"}}
@name="new-policy-toggle" @name="new-policy-toggle"
> as |modal|>
<Ref @target={{this}} @name="modal" @value={{modal}} />
<BlockSlot @name="header"> <BlockSlot @name="header">
<h2>New Policy</h2> <h2>New Policy</h2>
</BlockSlot> </BlockSlot>

2
ui/packages/consul-ui/app/components/policy-selector/pageobject.js
View File

@ -1,6 +1,6 @@
export default (clickable, deletable, collection, alias, policyForm) => ( export default (clickable, deletable, collection, alias, policyForm) => (
scope = '#policies', scope = '#policies',
createSelector = '[for="new-policy-toggle"]' createSelector = '[data-test-policy-create]'
) => { ) => {
return { return {
scope: scope, scope: scope,

8
ui/packages/consul-ui/app/components/role-selector/index.hbs
View File

@ -3,7 +3,8 @@
data-test-role-form data-test-role-form
@onclose={{action (mut state) "role"}} @onclose={{action (mut state) "role"}}
@name="new-role-toggle" @name="new-role-toggle"
> as |modal|>
<Ref @target={{this}} @name="modal" @value={{modal}} />
<BlockSlot @name="header"> <BlockSlot @name="header">
{{#if (eq state 'role')}} {{#if (eq state 'role')}}
<h2>New Role</h2> <h2>New Role</h2>
@ -63,7 +64,10 @@
Apply an existing role Apply an existing role
</BlockSlot> </BlockSlot>
<BlockSlot @name="create"> <BlockSlot @name="create">
<label class="type-dialog" for="new-role-toggle"> <label class="type-dialog"
data-test-role-create
{{on "click" (optional this.modal.open)}}
>
<span>Create new role</span> <span>Create new role</span>
</label> </label>

2
ui/packages/consul-ui/app/components/role-selector/pageobject.js
View File

@ -1,7 +1,7 @@
export default (clickable, deletable, collection, alias, roleForm) => (scope = '#roles') => { export default (clickable, deletable, collection, alias, roleForm) => (scope = '#roles') => {
return { return {
scope: scope, scope: scope,
create: clickable('[for="new-role-toggle"]'), create: clickable('[data-test-role-create]'),
form: roleForm(), form: roleForm(),
roles: alias('selectedOptions'), roles: alias('selectedOptions'),
selectedOptions: collection( selectedOptions: collection(

13
ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs
View File

@ -19,7 +19,12 @@
{{#if (not empty)}} {{#if (not empty)}}
{{#if data.labels}} {{#if data.labels}}
<a class="sparkline-key-link" {{action (mut shouldShowKey) true}}>Key</a> <a
class="sparkline-key-link"
{{on "click" (optional this.modal.open)}}
>
Key
</a>
{{/if}} {{/if}}
{{/if}} {{/if}}
@ -36,11 +41,10 @@
<svg class="sparkline"></svg> <svg class="sparkline"></svg>
</div> </div>
{{#if shouldShowKey}}
<ModalDialog <ModalDialog
class="sparkline-key" class="sparkline-key"
@onclose={{action (mut shouldShowKey) false}}
as |modal|> as |modal|>
<Ref @target={{this}} @name="modal" @value={{modal}} />
<BlockSlot @name="header"> <BlockSlot @name="header">
<h3>Metrics Key</h3> <h3>Metrics Key</h3>
</BlockSlot> </BlockSlot>
@ -67,5 +71,4 @@
Close Close
</button> </button>
</BlockSlot> </BlockSlot>
</ModalDialog> </ModalDialog>
{{/if}}

1
ui/packages/consul-ui/package.json
View File

@ -66,6 +66,7 @@
"@hashicorp/ember-cli-api-double": "^3.1.0", "@hashicorp/ember-cli-api-double": "^3.1.0",
"@mapbox/rehype-prism": "^0.5.0", "@mapbox/rehype-prism": "^0.5.0",
"@xstate/fsm": "^1.4.0", "@xstate/fsm": "^1.4.0",
"a11y-dialog": "^6.0.1",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"babel-loader": "^8.1.0", "babel-loader": "^8.1.0",
"babel-plugin-ember-modules-api-polyfill": "^3.2.0", "babel-plugin-ember-modules-api-polyfill": "^3.2.0",

4
ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature
View File

@ -32,7 +32,7 @@ Feature: dc / intentions / create: Intention Create
And I click ".ember-power-select-option:first-child" And I click ".ember-power-select-option:first-child"
Then I see the text "db" in "[data-test-destination-element] .ember-power-select-selected-item" Then I see the text "db" in "[data-test-destination-element] .ember-power-select-selected-item"
# Specifically set deny # Specifically set deny
And I click "[value=deny]" And I click ".value-deny"
And I submit And I submit
# TODO: When namespace is empty we expect * # TODO: When namespace is empty we expect *
# Then a PUT request was made to "/v1/connect/intentions/exact?source=@namespace%2Fweb&destination=@namespace%2Fdb&dc=datacenter" from yaml # Then a PUT request was made to "/v1/connect/intentions/exact?source=@namespace%2Fweb&destination=@namespace%2Fdb&dc=datacenter" from yaml
@ -75,7 +75,7 @@ Feature: dc / intentions / create: Intention Create
And I click ".ember-power-select-option:first-child" And I click ".ember-power-select-option:first-child"
Then I see the text "db" in "[data-test-destination-element] .ember-power-select-selected-item" Then I see the text "db" in "[data-test-destination-element] .ember-power-select-selected-item"
# Specifically set deny # Specifically set deny
And I click "[value=deny]" And I click ".value-deny"
And I submit And I submit
Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" from yaml Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" from yaml
--- ---

2
ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/create.feature
View File

@ -9,7 +9,7 @@ Feature: dc / intentions / permissions / create: Intention Permission Create
Then the url should be /datacenter/intentions/create Then the url should be /datacenter/intentions/create
And the title should be "New Intention - Consul" And the title should be "New Intention - Consul"
# Specifically set L7 # Specifically set L7
And I click "[value='']" And I click ".value-"
And I click the permissions.create object And I click the permissions.create object
And I click the permissions.form.Action.option.Deny object And I click the permissions.form.Action.option.Deny object

8
ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature
View File

@ -20,12 +20,12 @@ Feature: dc / intentions / permissions / warn: Intention Permission Warn
intention: intention-id intention: intention-id
--- ---
Then the url should be /datacenter/intentions/intention-id Then the url should be /datacenter/intentions/intention-id
And I click "[value='deny']" And I click ".value-deny"
And I submit And I submit
And the warning object is present And I see the warning object
And I click the warning.cancel object And I click the warning.cancel object
And the warning object isn't present And I don't see the warning object
And I submit And I submit
And the warning object is present And I see the warning object
And I click the warning.confirm object And I click the warning.confirm object
Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" from yaml Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" from yaml

3
ui/packages/consul-ui/tests/pages.js
View File

@ -6,6 +6,7 @@ import {
collection, collection,
text, text,
isPresent, isPresent,
isVisible,
} from 'ember-cli-page-object'; } from 'ember-cli-page-object';
import { alias } from 'ember-cli-page-object/macros'; import { alias } from 'ember-cli-page-object/macros';
@ -204,7 +205,7 @@ export default {
intention( intention(
visitable, visitable,
clickable, clickable,
isPresent, isVisible,
submitable, submitable,
deletable, deletable,
cancelable, cancelable,

4
ui/packages/consul-ui/tests/pages/dc/intentions/edit.js
View File

@ -1,7 +1,7 @@
export default function( export default function(
visitable, visitable,
clickable, clickable,
isPresent, isVisible,
submitable, submitable,
deletable, deletable,
cancelable, cancelable,
@ -22,7 +22,7 @@ export default function(
warning: { warning: {
scope: '[data-test-action-warning]', scope: '[data-test-action-warning]',
resetScope: true, resetScope: true,
present: isPresent(), see: isVisible(),
confirm: { confirm: {
scope: '[data-test-action-warning-confirm]', scope: '[data-test-action-warning-confirm]',
click: clickable(), click: clickable(),

6
ui/packages/consul-ui/tests/steps/assertions/page.js
View File

@ -34,7 +34,11 @@ const dont = `( don't| shouldn't| can't)?`;
export default function(scenario, assert, find, currentPage, $) { export default function(scenario, assert, find, currentPage, $) {
scenario scenario
.then([`I${dont} $verb the $pageObject object`], function(negative, verb, element, next) { .then([`I${dont} $verb the $pageObject object`], function(negative, verb, element, next) {
assert[negative ? 'notOk' : 'ok'](element[verb]()); let res = element[verb];
if (typeof res === 'function') {
res = res.call(element);
}
assert[negative ? 'notOk' : 'ok'](res, this.step);
setTimeout(() => next()); setTimeout(() => next());
}) })
.then( .then(

12
ui/yarn.lock
View File

@ -2200,6 +2200,13 @@ JSV@^4.0.x:
resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57" resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57"
integrity sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c= integrity sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c=
a11y-dialog@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/a11y-dialog/-/a11y-dialog-6.0.1.tgz#0b6b4d4cbfeb0e3b5034e07b8484cffd17393c8d"
integrity sha512-d/I0nUjQFbJgBGU7olFwt9ZBvVHTNjpzJArr8oR+Vhobwcl153KFU/Pgppq7fIf9hSwJnLLTbK+2u7ald56uCA==
dependencies:
focusable-selectors "^0.2.0"
abab@^2.0.0, abab@^2.0.3: abab@^2.0.0, abab@^2.0.3:
version "2.0.5" version "2.0.5"
resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a" resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
@ -7931,6 +7938,11 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3" inherits "^2.0.3"
readable-stream "^2.3.6" readable-stream "^2.3.6"
focusable-selectors@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/focusable-selectors/-/focusable-selectors-0.2.0.tgz#ae8aeb730e8e70bcd2572542fcdba3f89548922a"
integrity sha512-v6a8tiRtsiO0TvRDtrnpzhvUDb7L52MM8SrcO+pzC5azbekuvMLjijbyWeZ30efBGhVdgMv5zn0z7Y1bLkjc0w==
follow-redirects@^1.0.0: follow-redirects@^1.0.0:
version "1.13.0" version "1.13.0"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"