Fix some dialog close history issues (#8102)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
Co-authored-by: Philip Allgaier <mail@spacegaier.de>

src/dialogs/make-dialog-manager.ts

@@ -87,6 +87,10 @@ export const showDialog = async (
   dialogElement.showDialog(dialogParams);
 };
 
+export const replaceDialog = () => {
+  history.replaceState({ ...history.state, replaced: true }, "");
+};
+
 export const closeDialog = async (dialogTag: string): Promise<boolean> => {
   if (!(dialogTag in LOADED)) {
     return true;

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -35,6 +35,7 @@ import "./controls/more-info-default";
 import "./ha-more-info-history";
 import "./ha-more-info-logbook";
 import "./more-info-content";
+import { replaceDialog } from "../make-dialog-manager";
 
 const DOMAINS_NO_INFO = ["camera", "configurator"];
 /**
@@ -293,6 +294,7 @@ export class MoreInfoDialog extends LitElement {
   }
 
   private _gotoSettings() {
+    replaceDialog();
     showEntityEditorDialog(this, {
       entity_id: this._entityId!,
     });

src/panels/config/devices/device-detail/ha-device-automation-dialog.ts

@@ -7,6 +7,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-dialog";
 import {
   DeviceAction,
@@ -22,6 +23,7 @@ import "./ha-device-actions-card";
 import "./ha-device-conditions-card";
 import "./ha-device-triggers-card";
 import { DeviceAutomationDialogParams } from "./show-dialog-device-automation";
+import "@material/mwc-button/mwc-button";
 
 @customElement("dialog-device-automation")
 export class DialogDeviceAutomation extends LitElement {
@@ -40,6 +42,11 @@ export class DialogDeviceAutomation extends LitElement {
     await this.updateComplete;
   }
 
+  public closeDialog(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this.hass.loadBackendTranslation("device_automation");
@@ -84,14 +91,14 @@ export class DialogDeviceAutomation extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing="${this._close}"
+        @closed=${this.closeDialog}
         .heading=${this.hass.localize(
           `ui.panel.config.devices.${
             this._params.script ? "script" : "automation"
           }.create`
         )}
       >
-        <div @chip-clicked=${this._close}>
+        <div @chip-clicked=${this.closeDialog}>
           ${this._triggers.length ||
           this._conditions.length ||
           this._actions.length
@@ -126,17 +133,13 @@ export class DialogDeviceAutomation extends LitElement {
                 "ui.panel.config.devices.automation.no_device_automations"
               )}
         </div>
-        <mwc-button slot="primaryAction" @click="${this._close}">
-          Close
+        <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+          ${this.hass.localize("ui.common.close")}
         </mwc-button>
       </ha-dialog>
     `;
   }
 
-  private _close(): void {
-    this._params = undefined;
-  }
-
   static get styles(): CSSResult {
     return haStyleDialog;
   }

src/panels/config/entities/dialog-entity-editor.ts

@@ -32,6 +32,7 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { PLATFORMS_WITH_SETTINGS_TAB } from "./const";
 import "./entity-registry-settings";
 import type { EntityRegistryDetailDialogParams } from "./show-dialog-entity-editor";
+import { replaceDialog } from "../../../dialogs/make-dialog-manager";
 
 interface Tabs {
   [key: string]: Tab;
@@ -235,6 +236,7 @@ export class DialogEntityEditor extends LitElement {
   }
 
   private _openMoreInfo(): void {
+    replaceDialog();
     fireEvent(this, "hass-more-info", {
       entityId: this._params!.entity_id,
     });

src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts

@@ -18,6 +18,7 @@ import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { Lovelace } from "../../types";
 import "./hui-lovelace-editor";
+import { fireEvent } from "../../../../common/dom/fire_event";
 
 @customElement("hui-dialog-edit-lovelace")
 export class HuiDialogEditLovelace extends LitElement {
@@ -46,6 +47,12 @@ export class HuiDialogEditLovelace extends LitElement {
     this._dialog.open();
   }
 
+  public closeDialog(): void {
+    this._config = undefined;
+    this._dialog.close();
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   private get _dialog(): HaPaperDialog {
     return this.shadowRoot!.querySelector("ha-paper-dialog")!;
   }
@@ -69,7 +76,7 @@ export class HuiDialogEditLovelace extends LitElement {
           ></hui-lovelace-editor
         ></paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <mwc-button @click="${this._closeDialog}"
+          <mwc-button @click=${this.closeDialog}
             >${this.hass!.localize("ui.common.cancel")}</mwc-button
           >
           <mwc-button
@@ -90,17 +97,12 @@ export class HuiDialogEditLovelace extends LitElement {
     `;
   }
 
-  private _closeDialog(): void {
-    this._config = undefined;
-    this._dialog.close();
-  }
-
   private async _save(): Promise<void> {
     if (!this._config) {
       return;
     }
     if (!this._isConfigChanged()) {
-      this._closeDialog();
+      this.closeDialog();
       return;
     }
 
@@ -114,7 +116,7 @@ export class HuiDialogEditLovelace extends LitElement {
 
     try {
       await lovelace.saveConfig(config);
-      this._closeDialog();
+      this.closeDialog();
     } catch (err) {
       alert(`Saving failed: ${err.message}`);
     } finally {

src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts

@@ -17,6 +17,7 @@ import {
   LovelaceConfig,
   LovelaceDashboard,
 } from "../../../../data/lovelace";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import "../../components/hui-views-list";
@@ -45,6 +46,7 @@ export class HuiDialogSelectView extends LitElement {
 
   public closeDialog(): void {
     this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -11,7 +11,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { HASSDomEvent } from "../../../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
 import "../../../../components/ha-circular-progress";
 import "../../../../components/ha-dialog";
@@ -82,6 +82,7 @@ export class HuiDialogEditView extends LitElement {
     this._params = undefined;
     this._config = {};
     this._badges = [];
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   private get _viewConfigTitle(): string {

src/state/url-sync-mixin.ts

@@ -56,6 +56,14 @@ export const urlSyncMixin = <
 
         private _popstateChangeListener = (ev: PopStateEvent) => {
           if (this._ignoreNextPopState) {
+            if (ev.state?.oldState?.replaced) {
+              // if the previous dialog was replaced, and the current dialog is closed, we should also remove the replaced dialog from history
+              if (DEBUG) {
+                console.log("remove old state", ev.state.oldState);
+              }
+              history.back();
+              return;
+            }
             this._ignoreNextPopState = false;
             return;
           }