From 9f0787197128c24d688bcf03a85efe03a23caad4 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Tue, 15 Dec 2020 16:33:05 +0000
Subject: [PATCH] ui: Use InformedAction for intention confirmation dialogs
 (#9398)

---
 .../consul/intention/list/table/index.hbs     | 42 ++++++++++++-------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
index 56da9040d8..7935c28ea5 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
@@ -66,24 +66,36 @@ as |item index|>
             <li role="none" class="dangerous">
               <label for={{confirm}} role="menuitem" tabindex="-1" onkeypress={{keypressClick}} data-test-delete>Delete</label>
               <div role="menu">
-                <div class="confirmation-alert warning">
-                  <div>
-                    <header>
-                      Confirm Delete
-                    </header>
+                <InformedAction
+                  class="warning"
+                >
+                  <:header>
+                    Confirm Delete
+                  </:header>
+                  <:body>
                     <p>
                       Are you sure you want to delete this intention?
                     </p>
-                  </div>
-                  <ul>
-                    <li class="dangerous">
-                      <button tabindex="-1" type="button" class="type-delete" onclick={{queue (action change) (action @delete item)}}>Delete</button>
-                    </li>
-                    <li>
-                      <label for={{confirm}}>Cancel</label>
-                    </li>
-                  </ul>
-                </div>
+                  </:body>
+                  <:actions as |Actions|>
+                    <Actions.Action class="dangerous">
+                      <Action
+                        class="type-delete"
+                        tabindex="-1"
+                        {{on 'click' (queue (action change) (action @delete item))}}
+                      >
+                        Delete
+                      </Action>
+                    </Actions.Action>
+                    <Actions.Action>
+                      <Action
+                        @for={{confirm}}
+                      >
+                        Cancel
+                      </Action>
+                    </Actions.Action>
+                  </:actions>
+                </InformedAction>
               </div>
             </li>
           {{else}}