🔧 Standardize Generic Dialogs (#4726)

* 🔧 Use confirmation dialog in area deletion

* Swap automation confirmation dialogs

* Add to disable webhook

* Add to person deletion

* Add to zone deletion

* Add dialogs in raw editor

* Add/fix try catch

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/config/areas/ha-config-areas.ts

@@ -31,6 +31,7 @@ import { classMap } from "lit-html/directives/class-map";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { configSections } from "../ha-panel-config";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 
 @customElement("ha-config-areas")
 export class HaConfigAreas extends LitElement {
@@ -150,9 +151,16 @@ export class HaConfigAreas extends LitElement {
         updateAreaRegistryEntry(this.hass!, entry!.area_id, values),
       removeEntry: async () => {
         if (
-          !confirm(`Are you sure you want to delete this area?
+          !(await showConfirmationDialog(this, {
-
+            title: this.hass.localize(
-All devices in this area will become unassigned.`)
+              "ui.panel.config.areas.delete.confirmation_title"
+            ),
+            text: this.hass.localize(
+              "ui.panel.config.areas.delete.confirmation_text"
+            ),
+            dismissText: this.hass.localize("ui.common.no"),
+            confirmText: this.hass.localize("ui.common.yes"),
+          }))
         ) {
           return false;
         }

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -16,6 +16,7 @@ import { dynamicElement } from "../../../../common/dom/dynamic-element-directive
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import { HomeAssistant } from "../../../../types";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 
 import { Action } from "../../../../data/script";
 
@@ -206,15 +207,16 @@ export default class HaAutomationActionRow extends LitElement {
   }
 
   private _onDelete() {
-    if (
+    showConfirmationDialog(this, {
-      confirm(
+      text: this.hass.localize(
-        this.hass.localize(
+        "ui.panel.config.automation.editor.actions.delete_confirm"
-          "ui.panel.config.automation.editor.actions.delete_confirm"
+      ),
-        )
+      dismissText: this.hass.localize("ui.common.no"),
-      )
+      confirmText: this.hass.localize("ui.common.yes"),
-    ) {
+      confirm: () => {
-      fireEvent(this, "value-changed", { value: null });
+        fireEvent(this, "value-changed", { value: null });
-    }
+      },
+    });
   }
 
   private _typeChanged(ev: CustomEvent) {

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -12,6 +12,7 @@ import {
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import { HomeAssistant } from "../../../../types";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 
 import "./ha-automation-condition-editor";
 import { Condition } from "../../../../data/automation";
@@ -104,15 +105,16 @@ export default class HaAutomationConditionRow extends LitElement {
   }
 
   private _onDelete() {
-    if (
+    showConfirmationDialog(this, {
-      confirm(
+      text: this.hass.localize(
-        this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.delete_confirm"
-          "ui.panel.config.automation.editor.conditions.delete_confirm"
+      ),
-        )
+      dismissText: this.hass.localize("ui.common.no"),
-      )
+      confirmText: this.hass.localize("ui.common.yes"),
-    ) {
+      confirm: () => {
-      fireEvent(this, "value-changed", { value: null });
+        fireEvent(this, "value-changed", { value: null });
-    }
+      },
+    });
   }
 
   private _switchYamlMode() {

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -16,6 +16,7 @@ import { dynamicElement } from "../../../../common/dom/dynamic-element-directive
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import { HomeAssistant } from "../../../../types";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 
 import "./types/ha-automation-trigger-device";
 import "./types/ha-automation-trigger-event";
@@ -180,15 +181,16 @@ export default class HaAutomationTriggerRow extends LitElement {
   }
 
   private _onDelete() {
-    if (
+    showConfirmationDialog(this, {
-      confirm(
+      text: this.hass.localize(
-        this.hass.localize(
+        "ui.panel.config.automation.editor.triggers.delete_confirm"
-          "ui.panel.config.automation.editor.triggers.delete_confirm"
+      ),
-        )
+      dismissText: this.hass.localize("ui.common.no"),
-      )
+      confirmText: this.hass.localize("ui.common.yes"),
-    ) {
+      confirm: () => {
-      fireEvent(this, "value-changed", { value: null });
+        fireEvent(this, "value-changed", { value: null });
-    }
+      },
+    });
   }
 
   private _typeChanged(ev: CustomEvent) {

src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts

@@ -13,6 +13,7 @@ import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { HomeAssistant } from "../../../../types";
 import { haStyle } from "../../../../resources/styles";
 import { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 
 const inputLabel = "Public URL – Click to copy to clipboard";
 
@@ -108,18 +109,17 @@ export class DialogManageCloudhook extends LitElement {
   }
 
   private async _disableWebhook() {
-    if (
+    showConfirmationDialog(this, {
-      !confirm(
+      text: this.hass!.localize(
-        this.hass!.localize(
+        "ui.panel.config.cloud.dialog_cloudhook.confirm_disable"
-          "ui.panel.config.cloud.dialog_cloudhook.confirm_disable"
+      ),
-        )
+      dismissText: this.hass!.localize("ui.common.no"),
-      )
+      confirmText: this.hass!.localize("ui.common.yes"),
-    ) {
+      confirm: () => {
-      return;
+        this._params!.disableHook();
-    }
+        this._closeDialog();
-
+      },
-    this._params!.disableHook();
+    });
-    this._closeDialog();
   }
 
   private _copyClipboard(ev: FocusEvent) {

src/panels/config/person/ha-config-person.ts

@@ -29,6 +29,7 @@ import {
 } from "./show-dialog-person-detail";
 import { User, fetchUsers } from "../../../data/user";
 import { configSections } from "../ha-panel-config";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 
 class HaConfigPerson extends LitElement {
   @property() public hass?: HomeAssistant;
@@ -189,11 +190,12 @@ class HaConfigPerson extends LitElement {
       },
       removeEntry: async () => {
         if (
-          !confirm(`${this.hass!.localize(
+          !(await showConfirmationDialog(this, {
-            "ui.panel.config.person.confirm_delete"
+            title: this.hass!.localize("ui.panel.config.person.confirm_delete"),
-          )}
+            text: this.hass!.localize("ui.panel.config.person.confirm_delete2"),
-
+            dismissText: this.hass!.localize("ui.common.no"),
-${this.hass!.localize("ui.panel.config.person.confirm_delete2")}`)
+            confirmText: this.hass!.localize("ui.common.yes"),
+          }))
         ) {
           return false;
         }

src/panels/config/zone/ha-config-zone.ts

@@ -422,9 +422,12 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
 
   private async _removeEntry(entry: Zone) {
     if (
-      !confirm(`${this.hass!.localize("ui.panel.config.zone.confirm_delete")}
+      !(await showConfirmationDialog(this, {
-
+        title: this.hass!.localize("ui.panel.config.zone.confirm_delete"),
-${this.hass!.localize("ui.panel.config.zone.confirm_delete2")}`)
+        text: this.hass!.localize("ui.panel.config.zone.confirm_delete2"),
+        dismissText: this.hass!.localize("ui.common.no"),
+        confirmText: this.hass!.localize("ui.common.yes"),
+      }))
     ) {
       return false;
     }

src/panels/lovelace/hui-editor.ts

@@ -168,19 +168,19 @@ class LovelaceFullConfigEditor extends LitElement {
 
   private _closeEditor() {
     if (this._changed) {
-      if (
+      showConfirmationDialog(this, {
-        !confirm(
+        text: this.hass.localize(
-          this.hass.localize(
+          "ui.panel.lovelace.editor.raw_editor.confirm_unsaved_changes"
-            "ui.panel.lovelace.editor.raw_editor.confirm_unsaved_changes"
+        ),
-          )
+        dismissText: this.hass!.localize("ui.common.no"),
-        )
+        confirmText: this.hass!.localize("ui.common.yes"),
-      ) {
+        confirm: () => {
-        return;
+          window.onbeforeunload = null;
-      }
+          if (this.closeEditor) {
-    }
+            this.closeEditor();
-    window.onbeforeunload = null;
+          }
-    if (this.closeEditor) {
+        },
-      this.closeEditor();
+      });
     }
   }
 
@@ -188,13 +188,13 @@ class LovelaceFullConfigEditor extends LitElement {
     try {
       await this.lovelace!.deleteConfig();
     } catch (err) {
-      alert(
+      showAlertDialog(this, {
-        this.hass.localize(
+        text: this.hass.localize(
           "ui.panel.lovelace.editor.raw_editor.error_remove",
           "error",
           err
-        )
+        ),
-      );
+      });
     }
     window.onbeforeunload = null;
     if (this.closeEditor) {

src/translations/en.json

@@ -796,6 +796,10 @@
             "delete": "DELETE",
             "update": "UPDATE",
             "create": "CREATE"
+          },
+          "delete": {
+            "confirmation_title": "Are you sure you want to delete this area?",
+            "confirmation_text": "All devices in this area will become unassigned."
           }
         },
         "helpers": {
@@ -1015,7 +1019,7 @@
               "add": "Add trigger",
               "duplicate": "Duplicate",
               "delete": "[%key:ui::panel::mailbox::delete_button%]",
-              "delete_confirm": "Sure you want to delete?",
+              "delete_confirm": "Are you sure you want to delete this?",
               "unsupported_platform": "Unsupported platform: {platform}",
               "type_select": "Trigger type",
               "type": {