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

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

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

ui/packages/consul-ui/app/components/modal-dialog/README.mdx

@@ -3,30 +3,8 @@ class: ember
 ---
 # ModalDialog
 
-## Arguments
+Consul UIs modal component is a thin wrapper around the excellent `a11y-dialog`. The
-
+most common usage will be something like the below:
-| 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:
 
 ```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 |
+
+

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

ui/packages/consul-ui/app/templates/dc/acls/policies/-form.hbs

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

ui/packages/consul-ui/tests/pages/dc/acls/policies/edit.js

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