From f2e9b3577dec8d9432323694150e2ab52617c00e Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Tue, 5 Jan 2021 14:04:45 +0100
Subject: [PATCH] Use proper styled confirmation dialog for handled actions
 (#8077)

---
 src/panels/lovelace/common/handle-action.ts    | 18 ++++++++++++------
 .../elements/hui-service-button-element.ts     |  6 +++---
 src/translations/en.json                       |  1 +
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/panels/lovelace/common/handle-action.ts b/src/panels/lovelace/common/handle-action.ts
index 2147176c9a..bb6467b2c1 100644
--- a/src/panels/lovelace/common/handle-action.ts
+++ b/src/panels/lovelace/common/handle-action.ts
@@ -4,6 +4,7 @@ import { forwardHaptic } from "../../../data/haptics";
 import { ActionConfig } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { toggleEntity } from "./entity/toggle-entity";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 
 declare global {
   interface HASSDomEvents {
@@ -11,7 +12,7 @@ declare global {
   }
 }
 
-export const handleAction = (
+export const handleAction = async (
   node: HTMLElement,
   hass: HomeAssistant,
   config: {
@@ -22,7 +23,7 @@ export const handleAction = (
     double_tap_action?: ActionConfig;
   },
   action: string
-): void => {
+): Promise<void> => {
   let actionConfig: ActionConfig | undefined;
 
   if (action === "double_tap" && config.double_tap_action) {
@@ -49,10 +50,15 @@ export const handleAction = (
     forwardHaptic("warning");
 
     if (
-      !confirm(
-        actionConfig.confirmation.text ||
-          `Are you sure you want to ${actionConfig.action}?`
-      )
+      !(await showConfirmationDialog(node, {
+        text:
+          actionConfig.confirmation.text ||
+          hass.localize(
+            "ui.panel.lovelace.cards.action_confirmation",
+            "action",
+            actionConfig.action
+          ),
+      }))
     ) {
       return;
     }
diff --git a/src/panels/lovelace/elements/hui-service-button-element.ts b/src/panels/lovelace/elements/hui-service-button-element.ts
index 016526f987..0bac32a647 100644
--- a/src/panels/lovelace/elements/hui-service-button-element.ts
+++ b/src/panels/lovelace/elements/hui-service-button-element.ts
@@ -48,9 +48,9 @@ export class HuiServiceButtonElement extends LitElement
     return html`
       <ha-call-service-button
         .hass=${this.hass}
-        .domain="${this._domain}"
-        .service="${this._service}"
-        .serviceData="${this._config.service_data}"
+        .domain=${this._domain}
+        .service=${this._service}
+        .serviceData=${this._config.service_data}
         >${this._config.title}</ha-call-service-button
       >
     `;
diff --git a/src/translations/en.json b/src/translations/en.json
index 9d18749495..e66b0e5f75 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2390,6 +2390,7 @@
       "lovelace": {
         "cards": {
           "confirm_delete": "Are you sure you want to delete this card?",
+          "action_confirmation": "Are you sure you want to exectue action \"{action}\"?",
           "empty_state": {
             "title": "Welcome Home",
             "no_devices": "This page allows you to control your devices, however it looks like you have no devices set up yet. Head to the integrations page to get started.",