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
GitHub
parent
f0e34dfadb
commit
a2fa60681a
|
|
@ -0,0 +1,3 @@
|
|||
```release-note:improvement
|
||||
ui: improve accessibility of modal dialogs
|
||||
```
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
<button
|
||||
data-test-create-permission
|
||||
type="button"
|
||||
onclick={{action (mut shouldShowPermissionForm) true}}
|
||||
{{on "click" (optional this.modal.open)}}
|
||||
>
|
||||
Add permission
|
||||
</button>
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
<Consul::Intention::Notice::Permissions />
|
||||
<Consul::Intention::Permission::List
|
||||
@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}}
|
||||
/>
|
||||
{{else}}
|
||||
|
|
@ -190,11 +190,11 @@
|
|||
</label>
|
||||
</fieldset>
|
||||
|
||||
{{#if shouldShowPermissionForm}}
|
||||
<ModalDialog
|
||||
class="consul-intention-permission-modal"
|
||||
@onclose={{queue (action (mut shouldShowPermissionForm) false) (action (mut permission) undefined)}}
|
||||
@onclose={{action (mut permission) undefined}}
|
||||
as |modal|>
|
||||
<Ref @target={{this}} @name="modal" @value={{modal}} />
|
||||
<BlockSlot @name="header">
|
||||
<h3>Edit Permission</h3>
|
||||
</BlockSlot>
|
||||
|
|
@ -225,6 +225,5 @@
|
|||
</button>
|
||||
</BlockSlot>
|
||||
</ModalDialog>
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
|
|
@ -22,6 +22,6 @@
|
|||
float: right;
|
||||
}
|
||||
}
|
||||
.consul-intention-permission-modal [role="dialog"] > div > div {
|
||||
.consul-intention-permission-modal [role="dialog"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,13 +34,12 @@ as |api|>
|
|||
{{#let api.data as |item|}}
|
||||
{{#if (can 'write intention' item=item)}}
|
||||
|
||||
{{#if this.warn}}
|
||||
{{#let (changeset-get item 'Action') as |newAction|}}
|
||||
<ModalDialog
|
||||
class="consul-intention-action-warn-modal warning"
|
||||
data-test-action-warning
|
||||
@onclose={{action (mut this.warn) false}}
|
||||
>
|
||||
as |modal|>
|
||||
<Ref @target={{this}} @name="modal" @value={{modal}} />
|
||||
<BlockSlot @name="header">
|
||||
<h2>Set intention to {{newAction}}?</h2>
|
||||
</BlockSlot>
|
||||
|
|
@ -69,7 +68,6 @@ as |api|>
|
|||
</BlockSlot>
|
||||
</ModalDialog>
|
||||
{{/let}}
|
||||
{{/if}}
|
||||
|
||||
<DataSource
|
||||
@src={{concat '/*/' @dc '/services'}}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default class ConsulIntentionForm extends Component {
|
|||
|
||||
@tracked isManagedByCRDs;
|
||||
|
||||
@tracked warn = false;
|
||||
modal = null; // reference to the warning modal
|
||||
|
||||
@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
|
||||
// the user
|
||||
if (typeof item.change.Action !== 'undefined' && typeof item.data.Action === 'undefined') {
|
||||
this.warn = true;
|
||||
this.modal.open();
|
||||
} else {
|
||||
submit();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -201,39 +201,45 @@
|
|||
>
|
||||
{{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}}
|
||||
<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>
|
||||
</label>
|
||||
<ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |api|>
|
||||
<Ref @target={{this}} @name="modal" @value={{api}} />
|
||||
<ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |modal|>
|
||||
<Ref @target={{this}} @name="modal" @value={{modal}} />
|
||||
<BlockSlot @name="header">
|
||||
<h2>Log in to Consul</h2>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="body">
|
||||
<AuthForm as |api|>
|
||||
<Ref @target={{this}} @name="authForm" @value={{api}} />
|
||||
<AuthForm as |authForm|>
|
||||
<Ref @target={{this}} @name="authForm" @value={{authForm}} />
|
||||
</AuthForm>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="actions" as |close|>
|
||||
<button type="button" onclick={{action close}}>
|
||||
<BlockSlot @name="actions">
|
||||
<button type="button"
|
||||
{{on "click" modal.close}}
|
||||
>
|
||||
Continue without logging in
|
||||
</button>
|
||||
</BlockSlot>
|
||||
</ModalDialog>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="authorized">
|
||||
<ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |api|>
|
||||
<Ref @target={{this}} @name="modal" @value={{api}} />
|
||||
<ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |modal|>
|
||||
<Ref @target={{this}} @name="modal" @value={{modal}} />
|
||||
<BlockSlot @name="header">
|
||||
<h2>Log in with a different token</h2>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="body">
|
||||
<AuthForm as |api|>
|
||||
<Ref @target={{this}} @name="authForm" @value={{api}} />
|
||||
<AuthForm as |authForm|>
|
||||
<Ref @target={{this}} @name="authForm" @value={{authForm}} />
|
||||
</AuthForm>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="actions" as |close|>
|
||||
<button type="button" onclick={{action close}}>
|
||||
<BlockSlot @name="actions">
|
||||
<button type="button" onclick={{action modal.close}}>
|
||||
Continue without logging in
|
||||
</button>
|
||||
</BlockSlot>
|
||||
|
|
@ -271,7 +277,9 @@
|
|||
</:complementary-nav>
|
||||
|
||||
<:main>
|
||||
{{yield}}
|
||||
{{yield (hash
|
||||
modal=this.modal
|
||||
)}}
|
||||
</:main>
|
||||
|
||||
<:content-info>
|
||||
|
|
|
|||
|
|
@ -17,4 +17,9 @@ export default class HashiCorpConsul extends Component {
|
|||
this.modal.close();
|
||||
this.args.onchange(e);
|
||||
}
|
||||
|
||||
@action
|
||||
keypressClick(e) {
|
||||
e.target.dispatchEvent(new MouseEvent('click'));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,55 @@
|
|||
{{on-window 'resize' (action "resize") }}
|
||||
<Portal @target="modal">
|
||||
{{yield}}
|
||||
<input
|
||||
id={{@name}}
|
||||
type="checkbox"
|
||||
{{on 'change' (action 'change')}}
|
||||
/>
|
||||
<div
|
||||
class="modal-dialog"
|
||||
{{ref this 'modal'}}
|
||||
aria-hidden="true"
|
||||
...attributes
|
||||
{{did-insert (action "connect")}}
|
||||
{{will-destroy (action "disconnect")}}
|
||||
>
|
||||
<input
|
||||
class="modal-dialog-control"
|
||||
id={{name}}
|
||||
type="radio"
|
||||
name="modal"
|
||||
data-checked="{{checked}}"
|
||||
checked={{checked}}
|
||||
onchange={{action 'change'}}
|
||||
/>
|
||||
<div tabindex="-1" data-a11y-dialog-hide></div>
|
||||
<div
|
||||
class="modal-dialog-modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<label for="modal_close"></label>
|
||||
<div>
|
||||
<div class="modal-dialog-window">
|
||||
<header class="modal-dialog-header">
|
||||
<label for="modal_close"></label>
|
||||
<YieldSlot @name="header">
|
||||
{{yield (hash
|
||||
close=(action "close")
|
||||
)}}
|
||||
</YieldSlot>
|
||||
</header>
|
||||
<div class="modal-dialog-body">
|
||||
<YieldSlot @name="body">
|
||||
{{yield (hash
|
||||
close=(action "close")
|
||||
)}}
|
||||
</YieldSlot>
|
||||
</div>
|
||||
<footer class="modal-dialog-footer">
|
||||
<YieldSlot @name="actions" @params={{block-params (action "close")}}>
|
||||
{{yield (hash
|
||||
close=(action "close")
|
||||
)}}
|
||||
</YieldSlot>
|
||||
</footer>
|
||||
<div
|
||||
role="document"
|
||||
>
|
||||
<header class="modal-dialog-header">
|
||||
<button
|
||||
type="button"
|
||||
data-a11y-dialog-hide
|
||||
aria-label="Close dialog"
|
||||
>
|
||||
</button>
|
||||
<YieldSlot @name="header">
|
||||
{{yield (hash
|
||||
open=(action "open")
|
||||
close=(action "close")
|
||||
)}}
|
||||
</YieldSlot>
|
||||
</header>
|
||||
<div class="modal-dialog-body">
|
||||
<YieldSlot @name="body">
|
||||
{{yield (hash
|
||||
open=(action "open")
|
||||
close=(action "close")
|
||||
)}}
|
||||
</YieldSlot>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,119 +1,28 @@
|
|||
import Component from '@ember/component';
|
||||
import { get, set } from '@ember/object';
|
||||
import { inject as service } from '@ember/service';
|
||||
import Slotted from 'block-slots';
|
||||
|
||||
import templatize from 'consul-ui/utils/templatize';
|
||||
import A11yDialog from 'a11y-dialog';
|
||||
|
||||
export default Component.extend(Slotted, {
|
||||
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() {},
|
||||
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: {
|
||||
resize: function(e) {
|
||||
if (this.checked) {
|
||||
const height = this.height;
|
||||
if (height !== null) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
connect: function($el) {
|
||||
this.dialog = new A11yDialog($el);
|
||||
this.dialog.on('hide', () => this.onclose({ target: $el }));
|
||||
this.dialog.on('show', () => this.onopen({ target: $el }));
|
||||
},
|
||||
change: function(e) {
|
||||
if (get(e, 'target.checked')) {
|
||||
this._open(e);
|
||||
} else {
|
||||
this._close(e);
|
||||
}
|
||||
disconnect: function($el) {
|
||||
this.dialog.destroy();
|
||||
},
|
||||
open: function() {
|
||||
this.dialog.show();
|
||||
},
|
||||
close: function() {
|
||||
const $close = this.dom.element('#modal_close');
|
||||
$close.checked = true;
|
||||
const $input = this.dom.element('input[name="modal"]', this.modal);
|
||||
$input.onchange({ target: $input });
|
||||
this.dialog.hide();
|
||||
},
|
||||
change: function(e) {
|
||||
this.actions.open.call(this);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
.modal-dialog-modal {
|
||||
.modal-layer {
|
||||
@extend %modal-layer;
|
||||
}
|
||||
.modal-dialog {
|
||||
@extend %modal-dialog;
|
||||
}
|
||||
input[name='modal'] {
|
||||
@extend %modal-control;
|
||||
}
|
||||
html.template-with-modal {
|
||||
@extend %with-modal;
|
||||
}
|
||||
%modal-dialog table {
|
||||
min-height: 149px;
|
||||
%modal-dialog [role="document"] {
|
||||
@extend %modal-window;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,5 @@
|
|||
%with-modal {
|
||||
overflow: hidden;
|
||||
}
|
||||
/*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%;
|
||||
%modal-layer {
|
||||
height: 0;
|
||||
}
|
||||
/*TODO: Should these be here? */
|
||||
%modal-window table {
|
||||
|
|
@ -40,15 +8,41 @@
|
|||
%modal-window tbody {
|
||||
max-height: 100px;
|
||||
}
|
||||
/**/
|
||||
%modal-window.overflowing {
|
||||
overflow: auto;
|
||||
%modal-dialog table {
|
||||
min-height: 149px;
|
||||
}
|
||||
%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%;
|
||||
}
|
||||
|
||||
%modal-dialog[aria-hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
%modal-window {
|
||||
margin: auto;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
/**/
|
||||
%modal-window {
|
||||
max-width: 855px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
%modal-window > * {
|
||||
padding-left: 15px;
|
||||
|
|
@ -67,7 +61,7 @@
|
|||
%modal-window > header {
|
||||
position: relative;
|
||||
}
|
||||
%modal-window > header [for='modal_close'] {
|
||||
%modal-window > header [data-a11y-dialog-hide] {
|
||||
float: right;
|
||||
text-indent: -9000px;
|
||||
width: 24px;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
.modal-dialog.warning header {
|
||||
%modal-dialog.warning header {
|
||||
background-color: $yellow-050;
|
||||
border-color: $yellow-500;
|
||||
color: $yellow-800;
|
||||
}
|
||||
.modal-dialog.warning header > *:not(label) {
|
||||
%modal-dialog.warning header > *:not(label) {
|
||||
font-size: $typo-size-500;
|
||||
font-weight: $typo-weight-semibold;
|
||||
}
|
||||
.modal-dialog.warning header::before {
|
||||
%modal-dialog.warning header::before {
|
||||
@extend %with-alert-triangle-mask, %as-pseudo;
|
||||
color: $yellow-500;
|
||||
float: left;
|
||||
margin-top: 2px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
%modal-dialog > label {
|
||||
%modal-dialog-overlay {
|
||||
background-color: rgba($white, 0.9);
|
||||
}
|
||||
%modal-window {
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
%modal-window {
|
||||
/*%frame-gray-000*/
|
||||
background-color: $white;
|
||||
background-color: var(--gray-000);
|
||||
}
|
||||
%modal-window > footer,
|
||||
%modal-window > header {
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
.modal-dialog-body,
|
||||
%modal-window > footer,
|
||||
%modal-window > header {
|
||||
border-color: $gray-300;
|
||||
border-color: var(--gray-300);
|
||||
}
|
||||
.modal-dialog-body {
|
||||
border-style: solid;
|
||||
|
|
@ -47,12 +47,12 @@
|
|||
border-width: 1px;
|
||||
}
|
||||
|
||||
%modal-window > header [for='modal_close'] {
|
||||
%modal-window > header [data-a11y-dialog-hide] {
|
||||
@extend %with-cancel-plain-icon;
|
||||
cursor: pointer;
|
||||
border: $decor-border-100;
|
||||
/*%frame-gray-050??*/
|
||||
background-color: $gray-050;
|
||||
border-color: $gray-300;
|
||||
background-color: var(--gray-050);
|
||||
border-color: var(--gray-300);
|
||||
border-radius: $decor-radius-100;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<div>
|
||||
<span><input id="modal_close" type="radio" name="modal" onchange={{action 'change'}} /></span>
|
||||
<div
|
||||
class="modal-layer"
|
||||
...attributes
|
||||
>
|
||||
<PortalTarget @name="modal" @multiple={{true}} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -7,7 +7,11 @@
|
|||
{{#yield-slot name='trigger'}}
|
||||
{{yield}}
|
||||
{{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>
|
||||
</label>
|
||||
{{!TODO: potentially call trigger something else}}
|
||||
|
|
@ -16,7 +20,8 @@
|
|||
data-test-policy-form
|
||||
@onopen={{action "open"}}
|
||||
@name="new-policy-toggle"
|
||||
>
|
||||
as |modal|>
|
||||
<Ref @target={{this}} @name="modal" @value={{modal}} />
|
||||
<BlockSlot @name="header">
|
||||
<h2>New Policy</h2>
|
||||
</BlockSlot>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export default (clickable, deletable, collection, alias, policyForm) => (
|
||||
scope = '#policies',
|
||||
createSelector = '[for="new-policy-toggle"]'
|
||||
createSelector = '[data-test-policy-create]'
|
||||
) => {
|
||||
return {
|
||||
scope: scope,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
data-test-role-form
|
||||
@onclose={{action (mut state) "role"}}
|
||||
@name="new-role-toggle"
|
||||
>
|
||||
as |modal|>
|
||||
<Ref @target={{this}} @name="modal" @value={{modal}} />
|
||||
<BlockSlot @name="header">
|
||||
{{#if (eq state 'role')}}
|
||||
<h2>New Role</h2>
|
||||
|
|
@ -63,7 +64,10 @@
|
|||
Apply an existing role
|
||||
</BlockSlot>
|
||||
<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>
|
||||
</label>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
export default (clickable, deletable, collection, alias, roleForm) => (scope = '#roles') => {
|
||||
return {
|
||||
scope: scope,
|
||||
create: clickable('[for="new-role-toggle"]'),
|
||||
create: clickable('[data-test-role-create]'),
|
||||
form: roleForm(),
|
||||
roles: alias('selectedOptions'),
|
||||
selectedOptions: collection(
|
||||
|
|
|
|||
|
|
@ -19,7 +19,12 @@
|
|||
|
||||
{{#if (not empty)}}
|
||||
{{#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}}
|
||||
|
||||
|
|
@ -36,11 +41,10 @@
|
|||
<svg class="sparkline"></svg>
|
||||
</div>
|
||||
|
||||
{{#if shouldShowKey}}
|
||||
<ModalDialog
|
||||
class="sparkline-key"
|
||||
@onclose={{action (mut shouldShowKey) false}}
|
||||
as |modal|>
|
||||
<Ref @target={{this}} @name="modal" @value={{modal}} />
|
||||
<BlockSlot @name="header">
|
||||
<h3>Metrics Key</h3>
|
||||
</BlockSlot>
|
||||
|
|
@ -68,4 +72,3 @@
|
|||
</button>
|
||||
</BlockSlot>
|
||||
</ModalDialog>
|
||||
{{/if}}
|
||||
|
|
@ -66,6 +66,7 @@
|
|||
"@hashicorp/ember-cli-api-double": "^3.1.0",
|
||||
"@mapbox/rehype-prism": "^0.5.0",
|
||||
"@xstate/fsm": "^1.4.0",
|
||||
"a11y-dialog": "^6.0.1",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"babel-loader": "^8.1.0",
|
||||
"babel-plugin-ember-modules-api-polyfill": "^3.2.0",
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ Feature: dc / intentions / create: Intention Create
|
|||
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"
|
||||
# Specifically set deny
|
||||
And I click "[value=deny]"
|
||||
And I click ".value-deny"
|
||||
And I submit
|
||||
# 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
|
||||
|
|
@ -75,7 +75,7 @@ Feature: dc / intentions / create: Intention Create
|
|||
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"
|
||||
# Specifically set deny
|
||||
And I click "[value=deny]"
|
||||
And I click ".value-deny"
|
||||
And I submit
|
||||
Then a PUT request was made to "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" from yaml
|
||||
---
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ Feature: dc / intentions / permissions / create: Intention Permission Create
|
|||
Then the url should be /datacenter/intentions/create
|
||||
And the title should be "New Intention - Consul"
|
||||
# Specifically set L7
|
||||
And I click "[value='']"
|
||||
And I click ".value-"
|
||||
|
||||
And I click the permissions.create object
|
||||
And I click the permissions.form.Action.option.Deny object
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ Feature: dc / intentions / permissions / warn: Intention Permission Warn
|
|||
intention: 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 the warning object is present
|
||||
And I see the warning 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 the warning object is present
|
||||
And I see the warning 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
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
collection,
|
||||
text,
|
||||
isPresent,
|
||||
isVisible,
|
||||
} from 'ember-cli-page-object';
|
||||
|
||||
import { alias } from 'ember-cli-page-object/macros';
|
||||
|
|
@ -204,7 +205,7 @@ export default {
|
|||
intention(
|
||||
visitable,
|
||||
clickable,
|
||||
isPresent,
|
||||
isVisible,
|
||||
submitable,
|
||||
deletable,
|
||||
cancelable,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
export default function(
|
||||
visitable,
|
||||
clickable,
|
||||
isPresent,
|
||||
isVisible,
|
||||
submitable,
|
||||
deletable,
|
||||
cancelable,
|
||||
|
|
@ -22,7 +22,7 @@ export default function(
|
|||
warning: {
|
||||
scope: '[data-test-action-warning]',
|
||||
resetScope: true,
|
||||
present: isPresent(),
|
||||
see: isVisible(),
|
||||
confirm: {
|
||||
scope: '[data-test-action-warning-confirm]',
|
||||
click: clickable(),
|
||||
|
|
|
|||
|
|
@ -34,7 +34,11 @@ const dont = `( don't| shouldn't| can't)?`;
|
|||
export default function(scenario, assert, find, currentPage, $) {
|
||||
scenario
|
||||
.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());
|
||||
})
|
||||
.then(
|
||||
|
|
|
|||
12
ui/yarn.lock
12
ui/yarn.lock
|
|
@ -2200,6 +2200,13 @@ JSV@^4.0.x:
|
|||
resolved "https://registry.yarnpkg.com/JSV/-/JSV-4.0.2.tgz#d077f6825571f82132f9dffaed587b4029feff57"
|
||||
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:
|
||||
version "2.0.5"
|
||||
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"
|
||||
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:
|
||||
version "1.13.0"
|
||||
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
|
||||
|
|
|
|||
Loading…
Reference in New Issue