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
This commit is contained in:
John Cowen 2021-12-21 06:40:55 +00:00 committed by GitHub
parent 80ce6b54e2
commit 9830867f6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 40 additions and 25 deletions

5
.changelog/11868.txt Normal file
View File

@ -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
```

View File

@ -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;
}

View File

@ -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 `<ModalLayer />` 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
<ModalLayer />
```
Then all modals will be rendered into the `<ModalLayer />` 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
<ModalDialog
@ -67,3 +45,30 @@ as |modal|>
</button>
```
All modals work in tandem with `<ModalLayer />` 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
<ModalLayer />
```
Then all modals will be rendered into the `<ModalLayer />`.
## 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 |

View File

@ -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();

View File

@ -48,6 +48,7 @@
<ModalDialog
data-test-delete-modal
@onclose={{action cancel}}
@open={{true}}
@aria={{hash
label="Policy in Use"
}}

View File

@ -9,7 +9,7 @@ export default function(visitable, submitable, deletable, cancelable, clickable,
datacenter: clickable('[name="policy[Datacenters]"]'),
deleteModal: {
resetScope: true,
scope: '[data-test-delete-modal]',
scope: '[data-test-delete-modal]:not([aria-hidden="true"])',
...deletable({}),
},
};