Prompt for unsaved changes on programmatic navigation

Author: MindFreeze

src/common/navigate.ts

@@ -80,6 +80,60 @@ const ensureDialogsClosed = async (timestamp: number): Promise<boolean> => {
   return ensureDialogsClosed(timestamp);
 };
 
+/**
+ * Lets a page with unsaved changes (e.g. the automation editor) veto
+ * navigation. `isDirty` is read live at navigation time; `prompt` resolves
+ * true when navigation may proceed.
+ */
+export interface UnsavedChangesGuard {
+  isDirty(): boolean;
+  prompt(): Promise<boolean>;
+}
+
+const unsavedChangesGuards = new Set<UnsavedChangesGuard>();
+
+export const registerUnsavedChangesGuard = (guard: UnsavedChangesGuard) => {
+  unsavedChangesGuards.add(guard);
+};
+
+export const unregisterUnsavedChangesGuard = (guard: UnsavedChangesGuard) => {
+  unsavedChangesGuards.delete(guard);
+};
+
+let pendingUnsavedPrompt: Promise<boolean> | undefined;
+
+/**
+ * Asks each dirty guard whether navigation may proceed. Returns true when
+ * nothing is dirty or every prompt was confirmed. Concurrent navigations
+ * share one pending prompt instead of stacking dialogs; the dirty check runs
+ * before joining it, so a navigation triggered from inside a prompt (e.g. by
+ * its save action) cannot deadlock on its own promise.
+ */
+const ensureUnsavedChangesConfirmed = (): Promise<boolean> => {
+  const dirtyGuards = [...unsavedChangesGuards].filter((guard) =>
+    guard.isDirty()
+  );
+  if (!dirtyGuards.length) {
+    return Promise.resolve(true);
+  }
+  if (!pendingUnsavedPrompt) {
+    pendingUnsavedPrompt = (async () => {
+      try {
+        for (const guard of dirtyGuards) {
+          // eslint-disable-next-line no-await-in-loop
+          if (!(await guard.prompt())) {
+            return false;
+          }
+        }
+        return true;
+      } finally {
+        pendingUnsavedPrompt = undefined;
+      }
+    })();
+  }
+  return pendingUnsavedPrompt;
+};
+
 const buildHistoryState = (
   data: Record<string, unknown> | undefined,
   from?: string
@@ -91,7 +145,7 @@ const buildHistoryState = (
   return { ...state, from };
 };
 
-export const navigate = async (path: string, options?: NavigateOptions) => {
+const performNavigation = async (path: string, options?: NavigateOptions) => {
   const canProceed = await ensureDialogsClosed(Date.now());
   if (!canProceed) {
     return false;
@@ -130,6 +184,15 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
   return true;
 };
 
+export const navigate = async (path: string, options?: NavigateOptions) => {
+  // Only guard actual departures: navigating to the current path keeps the
+  // page, and any unsaved state on it, mounted.
+  if (path !== currentPath() && !(await ensureUnsavedChangesConfirmed())) {
+    return false;
+  }
+  return performNavigation(path, options);
+};
+
 /**
  * Whether the previous history entry is a page this app navigated away from.
  * `history.length` cannot answer this: a login redirect goes through
@@ -142,6 +205,9 @@ export const canGoBack = (): boolean =>
 /**
  * Navigate back to the page we came from, falling back to a path when the
  * previous entry is not ours (deep link, login redirect, fresh tab).
+ * Deliberately not guarded against unsaved changes: pages with such a guard
+ * confirm in their own back handlers, and delete flows leave through here
+ * after the edited item is already gone.
  */
 export const goBack = async (fallbackPath?: string): Promise<void> => {
   const canProceed = await ensureDialogsClosed(Date.now());
@@ -156,5 +222,5 @@ export const goBack = async (fallbackPath?: string): Promise<void> => {
     return;
   }
 
-  await navigate(fallbackPath || "/", { replace: true });
+  await performNavigation(fallbackPath || "/", { replace: true });
 };

src/mixins/prevent-unsaved-mixin.ts

@@ -1,5 +1,9 @@
 import type { LitElement, PropertyValues } from "lit";
-import { isNavigationClick } from "../common/dom/is-navigation-click";
+import type { UnsavedChangesGuard } from "../common/navigate";
+import {
+  registerUnsavedChangesGuard,
+  unregisterUnsavedChangesGuard,
+} from "../common/navigate";
 import type { Constructor } from "../types";
 
 export const PreventUnsavedMixin = <T extends Constructor<LitElement>>(
@@ -9,45 +13,34 @@ export const PreventUnsavedMixin = <T extends Constructor<LitElement>>(
     /** Provided by `DirtyStateProviderMixin`. */
     declare isDirtyState: boolean;
 
-    private _handleClick = async (e: MouseEvent) => {
-      // get the right target, otherwise the composedPath would return <home-assistant> in the new event
-      const target = e.composedPath()[0];
-      if (!isNavigationClick(e)) {
-        return;
-      }
+    private _handleUnload = (e: BeforeUnloadEvent) => e.preventDefault();
 
-      const result = await this.promptDiscardChanges();
-      if (result) {
-        this._removeListeners();
-        if (target) {
-          const newEvent = new MouseEvent(e.type, e);
-          target.dispatchEvent(newEvent);
-        }
-      }
+    private _unsavedChangesGuard: UnsavedChangesGuard = {
+      isDirty: () => this.isDirtyState,
+      prompt: () => this.promptDiscardChanges(),
     };
 
-    private _handleUnload = (e: BeforeUnloadEvent) => e.preventDefault();
+    public connectedCallback(): void {
+      super.connectedCallback();
 
-    private _removeListeners() {
-      window.removeEventListener("click", this._handleClick, true);
-      window.removeEventListener("beforeunload", this._handleUnload);
+      registerUnsavedChangesGuard(this._unsavedChangesGuard);
     }
 
     protected willUpdate(changedProperties: PropertyValues<this>): void {
       super.willUpdate(changedProperties);
 
       if (this.isDirtyState && this.isConnected) {
-        window.addEventListener("click", this._handleClick, true);
         window.addEventListener("beforeunload", this._handleUnload);
       } else {
-        this._removeListeners();
+        window.removeEventListener("beforeunload", this._handleUnload);
       }
     }
 
     public disconnectedCallback(): void {
       super.disconnectedCallback();
 
-      this._removeListeners();
+      unregisterUnsavedChangesGuard(this._unsavedChangesGuard);
+      window.removeEventListener("beforeunload", this._handleUnload);
     }
 
     protected async promptDiscardChanges(): Promise<boolean> {

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

@@ -896,10 +896,15 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
             return;
           }
 
+          this.yamlErrors = undefined;
           resolve(true);
         },
         onClose: () => resolve(false),
-        onDiscard: () => resolve(true),
+        onDiscard: () => {
+          this.yamlErrors = undefined;
+          this._markDirtyStateClean();
+          resolve(true);
+        },
         entityRegistryUpdate: this.entityRegistryUpdate,
         entityRegistryEntry: this.registryEntry,
         title: this.hass.localize(

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

@@ -1115,20 +1115,24 @@ export class HaSceneEditor extends DirtyStateProviderMixin<number>()(
   }
 
   private async _confirmUnsavedChanged(): Promise<boolean> {
-    if (this.isDirtyState) {
-      return showConfirmationDialog(this, {
-        title: this.hass!.localize(
-          "ui.panel.config.scene.editor.unsaved_confirm_title"
-        ),
-        text: this.hass!.localize(
-          "ui.panel.config.scene.editor.unsaved_confirm_text"
-        ),
-        confirmText: this.hass!.localize("ui.common.leave"),
-        dismissText: this.hass!.localize("ui.common.stay"),
-        destructive: true,
-      });
+    if (!this.isDirtyState) {
+      return true;
+    }
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass!.localize(
+        "ui.panel.config.scene.editor.unsaved_confirm_title"
+      ),
+      text: this.hass!.localize(
+        "ui.panel.config.scene.editor.unsaved_confirm_text"
+      ),
+      confirmText: this.hass!.localize("ui.common.leave"),
+      dismissText: this.hass!.localize("ui.common.stay"),
+      destructive: true,
+    });
+    if (confirmed) {
+      this._markDirtyStateClean();
     }
-    return true;
+    return confirmed;
   }
 
   private async _duplicate() {

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

@@ -804,10 +804,15 @@ export class HaScriptEditor extends SubscribeMixin(
             return;
           }
 
+          this.yamlErrors = undefined;
           resolve(true);
         },
         onClose: () => resolve(false),
-        onDiscard: () => resolve(true),
+        onDiscard: () => {
+          this.yamlErrors = undefined;
+          this._markDirtyStateClean();
+          resolve(true);
+        },
         entityRegistryUpdate: this.entityRegistryUpdate,
         entityRegistryEntry: this.registryEntry,
         title: this.hass.localize(

test/common/navigate.test.ts

@@ -1,7 +1,16 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-import type { NavigateOptions } from "../../src/common/navigate";
-import { canGoBack, goBack, navigate } from "../../src/common/navigate";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type {
+  NavigateOptions,
+  UnsavedChangesGuard,
+} from "../../src/common/navigate";
+import {
+  canGoBack,
+  goBack,
+  navigate,
+  registerUnsavedChangesGuard,
+  unregisterUnsavedChangesGuard,
+} from "../../src/common/navigate";
 
 // navigate() closes open dialogs before touching history.
 vi.mock("../../src/dialogs/make-dialog-manager", () => ({
@@ -54,6 +63,133 @@ describe("navigate", () => {
   });
 });
 
+describe("unsaved changes guard", () => {
+  const registeredGuards: UnsavedChangesGuard[] = [];
+
+  const registerGuard = (isDirty: boolean, promptResult = true) => {
+    const guard = {
+      isDirty: vi.fn(() => isDirty),
+      prompt: vi.fn(async () => promptResult),
+    };
+    registerUnsavedChangesGuard(guard);
+    registeredGuards.push(guard);
+    return guard;
+  };
+
+  beforeEach(() => {
+    setEntry("/config");
+  });
+
+  afterEach(() => {
+    registeredGuards.splice(0).forEach(unregisterUnsavedChangesGuard);
+  });
+
+  it("navigates without prompting when no guard is dirty", async () => {
+    const guard = registerGuard(false);
+
+    expect(await navigate("/config/areas")).toBe(true);
+
+    expect(window.location.pathname).toEqual("/config/areas");
+    expect(guard.prompt).not.toHaveBeenCalled();
+  });
+
+  it("prompts a dirty guard and navigates when confirmed", async () => {
+    const guard = registerGuard(true, true);
+
+    expect(await navigate("/config/areas")).toBe(true);
+
+    expect(guard.prompt).toHaveBeenCalledOnce();
+    expect(window.location.pathname).toEqual("/config/areas");
+  });
+
+  it("leaves history untouched when the prompt is declined", async () => {
+    const guard = registerGuard(true, false);
+    const listener = vi.fn();
+    window.addEventListener("location-changed", listener);
+
+    expect(await navigate("/config/areas")).toBe(false);
+
+    window.removeEventListener("location-changed", listener);
+    expect(guard.prompt).toHaveBeenCalledOnce();
+    expect(window.location.pathname).toEqual("/config");
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it("does not prompt when navigating to the current path", async () => {
+    const guard = registerGuard(true, false);
+
+    expect(await navigate("/config")).toBe(true);
+
+    expect(guard.prompt).not.toHaveBeenCalled();
+  });
+
+  it("skips a pending prompt once no guard is dirty anymore", async () => {
+    let dirty = true;
+    let resolvePrompt!: (value: boolean) => void;
+    const guard: UnsavedChangesGuard = {
+      isDirty: () => dirty,
+      prompt: vi.fn(
+        () =>
+          new Promise<boolean>((resolve) => {
+            resolvePrompt = resolve;
+          })
+      ),
+    };
+    registerUnsavedChangesGuard(guard);
+    registeredGuards.push(guard);
+
+    const first = navigate("/config/areas");
+    dirty = false;
+
+    expect(await navigate("/config/devices/dashboard")).toBe(true);
+    expect(window.location.pathname).toEqual("/config/devices/dashboard");
+
+    resolvePrompt(true);
+    expect(await first).toBe(true);
+    expect(guard.prompt).toHaveBeenCalledOnce();
+  });
+
+  it("shares one pending prompt between concurrent navigations", async () => {
+    let resolvePrompt!: (value: boolean) => void;
+    const guard: UnsavedChangesGuard = {
+      isDirty: () => true,
+      prompt: vi.fn(
+        () =>
+          new Promise<boolean>((resolve) => {
+            resolvePrompt = resolve;
+          })
+      ),
+    };
+    registerUnsavedChangesGuard(guard);
+    registeredGuards.push(guard);
+
+    const first = navigate("/config/areas");
+    const second = navigate("/config/devices/dashboard");
+    resolvePrompt(true);
+
+    expect(await Promise.all([first, second])).toEqual([true, true]);
+    expect(guard.prompt).toHaveBeenCalledOnce();
+  });
+
+  it("stops prompting once the guard is unregistered", async () => {
+    const guard = registerGuard(true, false);
+    unregisterUnsavedChangesGuard(guard);
+
+    expect(await navigate("/config/areas")).toBe(true);
+
+    expect(guard.prompt).not.toHaveBeenCalled();
+  });
+
+  it("does not prompt for goBack's fallback navigation", async () => {
+    const guard = registerGuard(true, false);
+
+    await goBack("/config/cloud/account");
+
+    expect(window.location.pathname).toEqual("/config/cloud/account");
+    expect(guard.prompt).not.toHaveBeenCalled();
+  });
+});
+
 describe("goBack", () => {
   beforeEach(() => {
     setEntry("/config/cloud/remote");