From ba70fe5e55e38d7d8b5c98eddd540f967fae8dd3 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Tue, 21 Dec 2021 06:40:55 +0000 Subject: [PATCH] ui: Fix up missing policy delete warning modal (#11868) Fixes an issue where the policy detail page delete button would disappear when clicking rather than showing a modal confirmation --- .changelog/11868.txt | 5 ++ .../app/components/buttons/index.scss | 1 + .../app/components/modal-dialog/README.mdx | 53 ++++++++++--------- .../app/components/modal-dialog/index.js | 3 ++ .../app/templates/dc/acls/policies/-form.hbs | 1 + .../tests/pages/dc/acls/policies/edit.js | 2 +- 6 files changed, 40 insertions(+), 25 deletions(-) create mode 100644 .changelog/11868.txt diff --git a/.changelog/11868.txt b/.changelog/11868.txt new file mode 100644 index 0000000000..a81ac06836 --- /dev/null +++ b/.changelog/11868.txt @@ -0,0 +1,5 @@ +```release-note:bug +ui: Fix an issue where attempting to delete a policy from the policy detail page when +attached to a token would result in the delete button disappearing and no +deletion being attempted +``` diff --git a/ui/packages/consul-ui/app/components/buttons/index.scss b/ui/packages/consul-ui/app/components/buttons/index.scss index d7112051d6..6bf35de274 100644 --- a/ui/packages/consul-ui/app/components/buttons/index.scss +++ b/ui/packages/consul-ui/app/components/buttons/index.scss @@ -13,6 +13,7 @@ button.type-cancel { @extend %secondary-button; } .with-confirmation .type-delete, +.modal-dialog .type-delete, %app-view-content form button[type='button'].type-delete { @extend %dangerous-button; } diff --git a/ui/packages/consul-ui/app/components/modal-dialog/README.mdx b/ui/packages/consul-ui/app/components/modal-dialog/README.mdx index 0fbcbde88f..c249255c0d 100644 --- a/ui/packages/consul-ui/app/components/modal-dialog/README.mdx +++ b/ui/packages/consul-ui/app/components/modal-dialog/README.mdx @@ -3,30 +3,8 @@ class: ember --- # ModalDialog -## Arguments - -| Argument | Type | Default | Description | -| --- | --- | --- | --- | -| `onopen` | `Function` | `undefined` | A function to call when the modal has opened | -| `onclose` | `Function` | `undefined` | A function to call when the modal has closed | -| `aria` | `Object` | `undefined` | A `hash` of aria properties used in the component, currently only label is supported | - -## Exports - -| Name | Type | Description | -| --- | --- | --- | -| `open` | `Function` | Opens the modal dialog | -| `close` | `Function` | Closes the modal dialog | - -Works in tandem with `` to render modals. First of all ensure -you have a modal layer on the page (it doesn't have to be in the same -template) - -```hbs - -``` - -Then all modals will be rendered into the `` for example: +Consul UIs modal component is a thin wrapper around the excellent `a11y-dialog`. The +most common usage will be something like the below: ```hbs preview-template ``` +All modals work in tandem with `` to render modals. First of all ensure +you have a modal layer on the page (it doesn't have to be in the same +template) + +```hbs + +``` + +Then all modals will be rendered into the ``. + +## Arguments + +| Argument | Type | Default | Description | +| --- | --- | --- | --- | +| `onopen` | `Function` | `undefined` | A function to call when the modal has opened | +| `onclose` | `Function` | `undefined` | A function to call when the modal has closed | +| `aria` | `Object` | `undefined` | A `hash` of aria properties used in the component, currently only label is supported | +| `open` | `Boolean` | `false` | Whether the modal should be initialized in its 'open' state. Useful if the modal should be controlled via handlebars conditionals. Please note this argument it not yet reactive, i.e. it is only checked on component insert not attribute update. An improvement here would be to respect this value during the update of the attribute. | + +## Exports + +| Name | Type | Description | +| --- | --- | --- | +| `open` | `Function` | Opens the modal dialog | +| `close` | `Function` | Closes the modal dialog | + + 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 49e93b0d26..c7e1776fe1 100644 --- a/ui/packages/consul-ui/app/components/modal-dialog/index.js +++ b/ui/packages/consul-ui/app/components/modal-dialog/index.js @@ -11,6 +11,9 @@ export default Component.extend(Slotted, { this.dialog = new A11yDialog($el); this.dialog.on('hide', () => this.onclose({ target: $el })); this.dialog.on('show', () => this.onopen({ target: $el })); + if (this.open) { + this.dialog.show(); + } }, disconnect: function($el) { this.dialog.destroy(); diff --git a/ui/packages/consul-ui/app/templates/dc/acls/policies/-form.hbs b/ui/packages/consul-ui/app/templates/dc/acls/policies/-form.hbs index 1b75737bb7..bb362b9785 100644 --- a/ui/packages/consul-ui/app/templates/dc/acls/policies/-form.hbs +++ b/ui/packages/consul-ui/app/templates/dc/acls/policies/-form.hbs @@ -48,6 +48,7 @@