Use proper styled confirmation dialog for handled actions (#8077)

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

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

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.",