Show confirm dialog when clicking traces (#13716)

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

@@ -184,17 +184,11 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
       >
         ${this.scriptEntityId && !this.narrow
           ? html`
-              <a
-                class="trace-link"
-                href="/config/script/trace/${this.scriptEntityId}"
-                slot="toolbar-icon"
-              >
-                <mwc-button>
-                  ${this.hass.localize(
-                    "ui.panel.config.script.editor.show_trace"
-                  )}
-                </mwc-button>
-              </a>
+              <mwc-button @click=${this._showTrace} slot="toolbar-icon">
+                ${this.hass.localize(
+                  "ui.panel.config.script.editor.show_trace"
+                )}
+              </mwc-button>
             `
           : ""}
         <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) {
-      if (
-        !(await showConfirmationDialog(this, {
-          text: this.hass!.localize(
-            "ui.panel.config.common.editor.confirm_unsaved"
-          ),
-          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));
+    const result = await this.confirmUnsavedChanged();
+    if (result) {
+      showScriptEditor({
+        ...this._config,
+        alias: `${this._config?.alias} (${this.hass.localize(
+          "ui.panel.config.script.picker.duplicate"
+        )})`,
+      });
     }
-    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);