Fix some dialog close history issues (#8102)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
Co-authored-by: Philip Allgaier <mail@spacegaier.de>
This commit is contained in:
Bram Kragten 2021-01-22 13:33:10 +01:00 committed by GitHub
parent 599dd81e3c
commit 870f0bcbb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 41 additions and 17 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -56,6 +56,14 @@ export const urlSyncMixin = <
private _popstateChangeListener = (ev: PopStateEvent) => { private _popstateChangeListener = (ev: PopStateEvent) => {
if (this._ignoreNextPopState) { 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; this._ignoreNextPopState = false;
return; return;
} }