Improve confirm unsaved dialog (#13807)

src/panels/config/automation/ha-automation-editor.ts

@@ -541,11 +541,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   private async confirmUnsavedChanged(): Promise<boolean> {
     if (this._dirty) {
       return showConfirmationDialog(this, {
+        title: this.hass!.localize(
+          "ui.panel.config.automation.editor.unsaved_confirm_title"
+        ),
         text: this.hass!.localize(
-          "ui.panel.config.automation.editor.unsaved_confirm"
+          "ui.panel.config.automation.editor.unsaved_confirm_text"
         ),
         confirmText: this.hass!.localize("ui.common.leave"),
         dismissText: this.hass!.localize("ui.common.stay"),
+        destructive: true,
       });
     }
     return true;

src/panels/config/scene/ha-scene-editor.ts

@@ -26,6 +26,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { navigate } from "../../../common/navigate";
 import { computeRTL } from "../../../common/util/compute_rtl";
+import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/device/ha-device-picker";
 import "../../../components/entity/ha-entities-picker";
 import "../../../components/ha-area-picker";
@@ -763,24 +764,16 @@ export class HaSceneEditor extends SubscribeMixin(
     }
   }
 
-  private _backTapped = (): void => {
+  private _backTapped = async (): Promise<void> => {
-    if (this._dirty) {
+    const result = await this.confirmUnsavedChanged();
-      showConfirmationDialog(this, {
+    if (result) {
-        text: this.hass!.localize(
-          "ui.panel.config.scene.editor.unsaved_confirm"
-        ),
-        confirmText: this.hass!.localize("ui.common.leave"),
-        dismissText: this.hass!.localize("ui.common.stay"),
-        confirm: () => this._goBack(),
-      });
-    } else {
       this._goBack();
     }
   };
 
   private _goBack(): void {
     applyScene(this.hass, this._storedStates);
-    history.back();
+    afterNextRender(() => history.back());
   }
 
   private _deleteTapped(): void {
@@ -806,32 +799,37 @@ export class HaSceneEditor extends SubscribeMixin(
     history.back();
   }
 
-  private async _duplicate() {
+  private async confirmUnsavedChanged(): Promise<boolean> {
     if (this._dirty) {
-      if (
+      return showConfirmationDialog(this, {
-        !(await showConfirmationDialog(this, {
+        title: this.hass!.localize(
-          text: this.hass!.localize(
+          "ui.panel.config.scene.editor.unsaved_confirm_title"
-            "ui.panel.config.scene.editor.unsaved_confirm"
+        ),
-          ),
+        text: this.hass!.localize(
-          confirmText: this.hass!.localize("ui.common.leave"),
+          "ui.panel.config.scene.editor.unsaved_confirm_text"
-          dismissText: this.hass!.localize("ui.common.stay"),
+        ),
-        }))
+        confirmText: this.hass!.localize("ui.common.leave"),
-      ) {
+        dismissText: this.hass!.localize("ui.common.stay"),
-        return;
+        destructive: true,
-      }
+      });
-      // Wait for dialog to complete closing
+    }
-      await new Promise((resolve) => setTimeout(resolve, 0));
+    return true;
+  }
+
+  private async _duplicate() {
+    const result = await this.confirmUnsavedChanged();
+    if (result) {
+      showSceneEditor(
+        {
+          ...this._config,
+          id: undefined,
+          name: `${this._config?.name} (${this.hass.localize(
+            "ui.panel.config.scene.picker.duplicate"
+          )})`,
+        },
+        this._sceneAreaIdCurrent || undefined
+      );
     }
-    showSceneEditor(
-      {
-        ...this._config,
-        id: undefined,
-        name: `${this._config?.name} (${this.hass.localize(
-          "ui.panel.config.scene.picker.duplicate"
-        )})`,
-      },
-      this._sceneAreaIdCurrent || undefined
-    );
   }
 
   private _calculateMetaData(): SceneMetaData {

src/panels/config/script/ha-script-editor.ts

@@ -667,11 +667,15 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   private async confirmUnsavedChanged(): Promise<boolean> {
     if (this._dirty) {
       return showConfirmationDialog(this, {
+        title: this.hass!.localize(
+          "ui.panel.config.automation.editor.unsaved_confirm_title"
+        ),
         text: this.hass!.localize(
-          "ui.panel.config.automation.editor.unsaved_confirm"
+          "ui.panel.config.automation.editor.unsaved_confirm_text"
         ),
         confirmText: this.hass!.localize("ui.common.leave"),
         dismissText: this.hass!.localize("ui.common.stay"),
+        destructive: true,
       });
     }
     return true;

src/translations/en.json

@@ -1836,7 +1836,8 @@
             "load_error_not_deletable": "Only automations in automations.yaml can be deleted.",
             "load_error_unknown": "Error loading automation ({err_no}).",
             "save": "Save",
-            "unsaved_confirm": "You have unsaved changes. Are you sure you want to leave?",
+            "unsaved_confirm_title": "Leave editor?",
+            "unsaved_confirm_text": "Unsaved changes will be lost.",
             "alias": "Name",
             "automation_alias": "Automation name",
             "automation_settings": "Automation settings",
@@ -2353,7 +2354,8 @@
             "load_error_not_editable": "Only scenes in scenes.yaml are editable.",
             "load_error_unknown": "Error loading scene ({err_no}).",
             "save": "Save",
-            "unsaved_confirm": "You have unsaved changes. Are you sure you want to leave?",
+            "unsaved_confirm_title": "Leave editor?",
+            "unsaved_confirm_text": "Unsaved changes will be lost.",
             "name": "Name",
             "icon": "Icon",
             "area": "Area",