-
-
-
-
-
-
- {{yield (hash
- close=(action "close")
- )}}
-
-
-
+
+
+
+
+ {{yield (hash
+ open=(action "open")
+ close=(action "close")
+ )}}
+
+
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/index.js b/ui/packages/consul-ui/app/components/modal-dialog/index.js
index b90797e58c..de5aed02ea 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/index.js
+++ b/ui/packages/consul-ui/app/components/modal-dialog/index.js
@@ -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);
},
},
});
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/index.scss b/ui/packages/consul-ui/app/components/modal-dialog/index.scss
index e9b93bca9a..4e8fe87b65 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/index.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/index.scss
@@ -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;
}
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/layout.scss b/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
index ba72245965..54b6445f24 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/layout.scss
@@ -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;
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
index 292ef8367b..867ea46d6f 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
@@ -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;
}
diff --git a/ui/packages/consul-ui/app/components/modal-layer/index.hbs b/ui/packages/consul-ui/app/components/modal-layer/index.hbs
index 3f206f7841..20888f6e68 100644
--- a/ui/packages/consul-ui/app/components/modal-layer/index.hbs
+++ b/ui/packages/consul-ui/app/components/modal-layer/index.hbs
@@ -1,4 +1,6 @@
-
-
+
diff --git a/ui/packages/consul-ui/app/components/modal-layer/index.js b/ui/packages/consul-ui/app/components/modal-layer/index.js
deleted file mode 100644
index 689f540bbf..0000000000
--- a/ui/packages/consul-ui/app/components/modal-layer/index.js
+++ /dev/null
@@ -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 });
- }
- });
- },
- },
-});
diff --git a/ui/packages/consul-ui/app/components/policy-selector/index.hbs b/ui/packages/consul-ui/app/components/policy-selector/index.hbs
index 5416633232..803f8a3518 100644
--- a/ui/packages/consul-ui/app/components/policy-selector/index.hbs
+++ b/ui/packages/consul-ui/app/components/policy-selector/index.hbs
@@ -7,7 +7,11 @@
{{#yield-slot name='trigger'}}
{{yield}}
{{else}}
-
-{{#if shouldShowKey}}
+ Metrics Key
@@ -67,5 +71,4 @@
Close
-
-{{/if}}
\ No newline at end of file
+
\ No newline at end of file
diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json
index 3e6b38c20d..6f091f46b8 100644
--- a/ui/packages/consul-ui/package.json
+++ b/ui/packages/consul-ui/package.json
@@ -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",
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature b/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature
index 273aecac88..ded06d0f52 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/intentions/create.feature
@@ -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
---
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/create.feature b/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/create.feature
index ad42b85ec3..d2e4b28bb2 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/create.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/create.feature
@@ -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
diff --git a/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature b/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature
index b5d7b34317..9cf390731e 100644
--- a/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature
+++ b/ui/packages/consul-ui/tests/acceptance/dc/intentions/permissions/warn.feature
@@ -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
diff --git a/ui/packages/consul-ui/tests/pages.js b/ui/packages/consul-ui/tests/pages.js
index d6235204f8..b530cd1a5e 100644
--- a/ui/packages/consul-ui/tests/pages.js
+++ b/ui/packages/consul-ui/tests/pages.js
@@ -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,
diff --git a/ui/packages/consul-ui/tests/pages/dc/intentions/edit.js b/ui/packages/consul-ui/tests/pages/dc/intentions/edit.js
index d79fb84fa2..53503232a4 100644
--- a/ui/packages/consul-ui/tests/pages/dc/intentions/edit.js
+++ b/ui/packages/consul-ui/tests/pages/dc/intentions/edit.js
@@ -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(),
diff --git a/ui/packages/consul-ui/tests/steps/assertions/page.js b/ui/packages/consul-ui/tests/steps/assertions/page.js
index 939289bc23..1732a302a6 100644
--- a/ui/packages/consul-ui/tests/steps/assertions/page.js
+++ b/ui/packages/consul-ui/tests/steps/assertions/page.js
@@ -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(
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 50c8c43ec3..59fc376c40 100644
--- a/ui/yarn.lock
+++ b/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"