From b9a41717784b4de151651e0663efedc135b89dce Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Fri, 18 Dec 2020 09:03:25 +0000
Subject: [PATCH] ui: Use InformedAction for KV table row delete confirmations
 (#9425)

---
 .../app/components/consul/kv/list/index.hbs   | 45 ++++++++++---------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/ui/packages/consul-ui/app/components/consul/kv/list/index.hbs b/ui/packages/consul-ui/app/components/consul/kv/list/index.hbs
index 8099596e35..da80b8948f 100644
--- a/ui/packages/consul-ui/app/components/consul/kv/list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/kv/list/index.hbs
@@ -23,31 +23,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 key?
+                    Are you sure you want to delete this KV entry?
                   </p>
-                </div>
-                <ul>
-                  <li class="dangerous">
-                    <button
-                      tabindex="-1"
-                      type="button"
+                </:body>
+                <:actions as |Actions|>
+                  <Actions.Action class="dangerous">
+                    <Action
                       class="type-delete"
-                      onclick={{queue (action change) (action @delete item)}}
+                      tabindex="-1"
+                      {{on 'click' (queue (action change) (action @delete item))}}
                     >
                       Delete
-                    </button>
-                  </li>
-                  <li>
-                    <label for={{confirm}}>Cancel</label>
-                  </li>
-                </ul>
-              </div>
+                    </Action>
+                  </Actions.Action>
+                  <Actions.Action>
+                    <Action
+                      @for={{confirm}}
+                    >
+                      Cancel
+                    </Action>
+                  </Actions.Action>
+                </:actions>
+              </InformedAction>
             </div>
           </li>
       </BlockSlot>