Show confirm dialog when clicking traces (#13716)

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

@@ -31,7 +31,6 @@ import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
-import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
@@ -135,17 +134,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       >
         ${this._config?.id && !this.narrow
           ? html`
-              <a
+              <mwc-button @click=${this._showTrace} slot="toolbar-icon">
-                class="trace-link"
+                ${this.hass.localize(
-                href="/config/automation/trace/${this._config.id}"
+                  "ui.panel.config.automation.editor.show_trace"
-                slot="toolbar-icon"
+                )}
-              >
+              </mwc-button>
-                <mwc-button>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.show_trace"
-                  )}
-                </mwc-button>
-              </a>
             `
           : ""}
         <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
@@ -486,6 +479,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     fireEvent(this, "hass-more-info", { entityId: this._entityId });
   }
 
+  private async _showTrace() {
+    if (this._config?.id) {
+      const result = await this.confirmUnsavedChanged();
+      if (result) {
+        navigate(`/config/automation/trace/${this._config.id}`);
+      }
+    }
+  }
+
   private _runActions() {
     if (!this.hass || !this._entityId) {
       return;
@@ -535,44 +537,35 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     this._dirty = true;
   }
 
-  private _backTapped = (): void => {
+  private async confirmUnsavedChanged(): Promise<boolean> {
     if (this._dirty) {
-      showConfirmationDialog(this, {
+      return showConfirmationDialog(this, {
         text: this.hass!.localize(
           "ui.panel.config.automation.editor.unsaved_confirm"
         ),
         confirmText: this.hass!.localize("ui.common.leave"),
         dismissText: this.hass!.localize("ui.common.stay"),
-        confirm: () => {
-          afterNextRender(() => history.back());
-        },
       });
-    } else {
+    }
-      afterNextRender(() => history.back());
+    return true;
+  }
+
+  private _backTapped = async () => {
+    const result = await this.confirmUnsavedChanged();
+    if (result) {
+      history.back();
     }
   };
 
   private async _duplicate() {
-    if (this._dirty) {
+    const result = await this.confirmUnsavedChanged();
-      if (
+    if (result) {
-        !(await showConfirmationDialog(this, {
+      showAutomationEditor({
-          text: this.hass!.localize(
+        ...this._config,
-            "ui.panel.config.automation.editor.unsaved_confirm"
+        id: undefined,
-          ),
+        alias: undefined,
-          confirmText: this.hass!.localize("ui.common.leave"),
+      });
-          dismissText: this.hass!.localize("ui.common.stay"),
-        }))
-      ) {
-        return;
-      }
-      // Wait for dialog to complete closing
-      await new Promise((resolve) => setTimeout(resolve, 0));
     }
-    showAutomationEditor({
-      ...this._config,
-      id: undefined,
-      alias: undefined,
-    });
   }
 
   private async _deleteConfirm() {
@@ -689,9 +682,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
           flex-direction: column;
           padding-bottom: 0;
         }
-        .trace-link {
-          text-decoration: none;
-        }
         manual-automation-editor,
         blueprint-automation-editor {
           margin: 0 auto;

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

@@ -184,17 +184,11 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
       >
         ${this.scriptEntityId && !this.narrow
           ? html`
-              <a
+              <mwc-button @click=${this._showTrace} slot="toolbar-icon">
-                class="trace-link"
+                ${this.hass.localize(
-                href="/config/script/trace/${this.scriptEntityId}"
+                  "ui.panel.config.script.editor.show_trace"
-                slot="toolbar-icon"
+                )}
-              >
+              </mwc-button>
-                <mwc-button>
-                  ${this.hass.localize(
-                    "ui.panel.config.script.editor.show_trace"
-                  )}
-                </mwc-button>
-              </a>
             `
           : ""}
         <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
@@ -530,6 +524,15 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     fireEvent(this, "hass-more-info", { entityId: this.scriptEntityId });
   }
 
+  private async _showTrace() {
+    if (this.scriptEntityId) {
+      const result = await this.confirmUnsavedChanged();
+      if (result) {
+        navigate(`/config/script/trace/${this.scriptEntityId}`);
+      }
+    }
+  }
+
   private async _runScript(ev: CustomEvent) {
     ev.stopPropagation();
     await triggerScript(this.hass, this.scriptEntityId as string);
@@ -660,45 +663,36 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     this._dirty = true;
   }
 
-  private _backTapped = (): void => {
+  private async confirmUnsavedChanged(): Promise<boolean> {
     if (this._dirty) {
-      showConfirmationDialog(this, {
+      return showConfirmationDialog(this, {
         text: this.hass!.localize(
-          "ui.panel.config.common.editor.confirm_unsaved"
+          "ui.panel.config.automation.editor.unsaved_confirm"
         ),
         confirmText: this.hass!.localize("ui.common.leave"),
         dismissText: this.hass!.localize("ui.common.stay"),
-        confirm: () => {
-          setTimeout(() => history.back());
-        },
       });
-    } else {
+    }
+    return true;
+  }
+
+  private _backTapped = async () => {
+    const result = await this.confirmUnsavedChanged();
+    if (result) {
       history.back();
     }
   };
 
   private async _duplicate() {
-    if (this._dirty) {
+    const result = await this.confirmUnsavedChanged();
-      if (
+    if (result) {
-        !(await showConfirmationDialog(this, {
+      showScriptEditor({
-          text: this.hass!.localize(
+        ...this._config,
-            "ui.panel.config.common.editor.confirm_unsaved"
+        alias: `${this._config?.alias} (${this.hass.localize(
-          ),
+          "ui.panel.config.script.picker.duplicate"
-          confirmText: this.hass!.localize("ui.common.yes"),
+        )})`,
-          dismissText: this.hass!.localize("ui.common.no"),
+      });
-        }))
-      ) {
-        return;
-      }
-      // Wait for dialog to complete closing
-      await new Promise((resolve) => setTimeout(resolve, 0));
     }
-    showScriptEditor({
-      ...this._config,
-      alias: `${this._config?.alias} (${this.hass.localize(
-        "ui.panel.config.script.picker.duplicate"
-      )})`,
-    });
   }
 
   private async _deleteConfirm() {
@@ -840,9 +834,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         .header a {
           color: var(--secondary-text-color);
         }
-        .trace-link {
-          text-decoration: none;
-        }
         ha-button-menu a {
           text-decoration: none;
           color: var(--primary-color);