ui: Use InformedAction for KV table row delete confirmations (#9425)

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>
+              <InformedAction
+                class="warning"
+              >
+                <:header>
                   Confirm Delete
-                  </header>
+                </: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>