Navigate cleanup (#9202)

2025-07-07 17:36:35 +00:00 · 2021-05-25 17:46:36 +02:00 · 2021-05-25 17:46:36 +02:00 · 21a3a8c594
commit 21a3a8c594
parent 1026e90296
62 changed files with 111 additions and 137 deletions
--- a/demo/src/ha-demo.ts
+++ b/demo/src/ha-demo.ts
@ -70,7 +70,7 @@ class HaDemo extends HomeAssistantAppEl {
        }

        e.preventDefault();
-        navigate(this, href);
+        navigate(href);
      },
      { capture: true }
    );
--- a/hassio/src/addon-store/hassio-addon-repository.ts
+++ b/hassio/src/addon-store/hassio-addon-repository.ts
@ -120,7 +120,7 @@ class HassioAddonRepositoryEl extends LitElement {
  }

  private _addonTapped(ev) {
-    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}`);
  }

  static get styles(): CSSResultGroup {
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@ -138,7 +138,7 @@ class HassioAddonStore extends LitElement {
  protected firstUpdated(changedProps: PropertyValues) {
    super.firstUpdated(changedProps);
    const repositoryUrl = extractSearchParam("repository_url");
-    navigate(this, "/hassio/store", true);
+    navigate("/hassio/store", { replace: true });
    if (repositoryUrl) {
      this._manageRepositories(repositoryUrl);
    }
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@ -175,7 +175,7 @@ class HassioAddonDashboard extends LitElement {
        if (!validAddon) {
          this._error = this.supervisor.localize("my.error_addon_not_found");
        } else {
-          navigate(this, `/hassio/addon/${requestedAddon}`, true);
+          navigate(`/hassio/addon/${requestedAddon}`, { replace: true });
        }
      }
    }
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@ -761,7 +761,7 @@ class HassioAddonInfo extends LitElement {
  }

  private _openIngress(): void {
-    navigate(this, `/hassio/ingress/${this.addon.slug}`);
+    navigate(`/hassio/ingress/${this.addon.slug}`);
  }

  private get _computeShowIngressUI(): boolean {
@ -1051,7 +1051,7 @@ class HassioAddonInfo extends LitElement {
  }

  private _openConfiguration(): void {
-    navigate(this, `/hassio/addon/${this.addon.slug}/config`);
+    navigate(`/hassio/addon/${this.addon.slug}/config`);
  }

  private async _uninstallClicked(ev: CustomEvent): Promise<void> {
--- a/hassio/src/dashboard/hassio-addons.ts
+++ b/hassio/src/dashboard/hassio-addons.ts
@ -96,11 +96,11 @@ class HassioAddons extends LitElement {
  }

  private _addonTapped(ev: any): void {
-    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}/info`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}/info`);
  }

  private _openStore(): void {
-    navigate(this, "/hassio/store");
+    navigate("/hassio/store");
  }
 }

--- a/hassio/src/hassio-main.ts
+++ b/hassio/src/hassio-main.ts
@ -63,7 +63,7 @@ export class HassioMain extends SupervisorBaseElement {
    document.body.addEventListener("click", (ev) => {
      const href = isNavigationClick(ev);
      if (href) {
-        navigate(document.body, href);
+        navigate(href);
      }
    });

--- a/hassio/src/hassio-my-redirect.ts
+++ b/hassio/src/hassio-my-redirect.ts
@ -89,7 +89,7 @@ class HassioMyRedirect extends LitElement {
      return;
    }

-    navigate(this, url, true);
+    navigate(url, { replace: true });
  }

  protected render(): TemplateResult {
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/hassio/src/ingress-view/hassio-ingress-view.ts
@ -105,7 +105,7 @@ class HassioIngressView extends LitElement {
          });
          history.back();
        } else {
-          navigate(this, `/hassio/ingress/${addonInfo.slug}`, true);
+          navigate(`/hassio/ingress/${addonInfo.slug}`, { replace: true });
        }
      }
    }
@ -157,8 +157,8 @@ class HassioIngressView extends LitElement {
      await showAlertDialog(this, {
        text: "Add-on is not running. Please start it first",
        title: addon.name,
+        confirm: () => navigate(`/hassio/addon/${addon.slug}`),
      });
-      navigate(this, `/hassio/addon/${addon.slug}/info`, true);
      return;
    }

--- a/src/common/navigate.ts
+++ b/src/common/navigate.ts
@ -4,13 +4,17 @@ import { mainWindow } from "./dom/get_main_window";
 declare global {
  // for fire event
  interface HASSDomEvents {
-    "location-changed": {
-      replace: boolean;
-    };
+    "location-changed": NavigateOptions;
  }
 }

-export const navigate = (_node: any, path: string, replace = false) => {
+export interface NavigateOptions {
+  replace?: boolean;
+}
+
+export const navigate = (path: string, options?: NavigateOptions) => {
+  const replace = options?.replace || false;
+
  if (__DEMO__) {
    if (replace) {
      mainWindow.history.replaceState(
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@ -241,12 +241,9 @@ let inititialAutomationEditorData: Partial<AutomationConfig> | undefined;
 export const getAutomationConfig = (hass: HomeAssistant, id: string) =>
  hass.callApi<AutomationConfig>("GET", `config/automation/config/${id}`);

-export const showAutomationEditor = (
-  el: HTMLElement,
-  data?: Partial<AutomationConfig>
-) => {
+export const showAutomationEditor = (data?: Partial<AutomationConfig>) => {
  inititialAutomationEditorData = data;
-  navigate(el, "/config/automation/edit/new");
+  navigate("/config/automation/edit/new");
 };

 export const getAutomationEditorInitData = () => {
--- a/src/data/scene.ts
+++ b/src/data/scene.ts
@ -20,12 +20,9 @@ export const SCENE_IGNORED_DOMAINS = [

 let inititialSceneEditorData: Partial<SceneConfig> | undefined;

-export const showSceneEditor = (
-  el: HTMLElement,
-  data?: Partial<SceneConfig>
-) => {
+export const showSceneEditor = (data?: Partial<SceneConfig>) => {
  inititialSceneEditorData = data;
-  navigate(el, "/config/scene/edit/new");
+  navigate("/config/scene/edit/new");
 };

 export const getSceneEditorInitData = () => {
--- a/src/data/script.ts
+++ b/src/data/script.ts
@ -182,12 +182,9 @@ export const deleteScript = (hass: HomeAssistant, objectId: string) =>

 let inititialScriptEditorData: Partial<ScriptConfig> | undefined;

-export const showScriptEditor = (
-  el: HTMLElement,
-  data?: Partial<ScriptConfig>
-) => {
+export const showScriptEditor = (data?: Partial<ScriptConfig>) => {
  inititialScriptEditorData = data;
-  navigate(el, "/config/script/edit/new");
+  navigate("/config/script/edit/new");
 };

 export const getScriptEditorInitData = () => {
--- a/src/data/zone.ts
+++ b/src/data/zone.ts
@ -56,12 +56,9 @@ export const deleteZone = (hass: HomeAssistant, zoneId: string) =>

 let inititialZoneEditorData: Partial<ZoneMutableParams> | undefined;

-export const showZoneEditor = (
-  el: HTMLElement,
-  data?: Partial<ZoneMutableParams>
-) => {
+export const showZoneEditor = (data?: Partial<ZoneMutableParams>) => {
  inititialZoneEditorData = data;
-  navigate(el, "/config/zone/new");
+  navigate("/config/zone/new");
 };

 export const getZoneEditorInitData = () => {
--- a/src/dialogs/more-info/controls/more-info-person.ts
+++ b/src/dialogs/more-info/controls/more-info-person.ts
@ -55,7 +55,7 @@ class MoreInfoPerson extends LitElement {
  }

  private _handleAction() {
-    showZoneEditor(this, {
+    showZoneEditor({
      latitude: this.stateObj!.attributes.latitude,
      longitude: this.stateObj!.attributes.longitude,
    });
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@ -306,7 +306,7 @@ export class MoreInfoDialog extends LitElement {
      idToPassThroughUrl = stateObj.attributes.id;
    }

-    navigate(this, `/config/${domain}/edit/${idToPassThroughUrl}`);
+    navigate(`/config/${domain}/edit/${idToPassThroughUrl}`);
    this.closeDialog();
  }

--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@ -557,7 +557,7 @@ export class QuickBar extends LitElement {
        categoryText: this.hass.localize(
          `ui.dialogs.quick-bar.commands.types.${categoryKey}`
        ),
-        action: () => navigate(this, item.path),
+        action: () => navigate(item.path),
      };

      return {
--- a/src/entrypoints/custom-panel.ts
+++ b/src/entrypoints/custom-panel.ts
@ -88,7 +88,7 @@ function initialize(
          if (window.parent.customPanel) {
            window.parent.customPanel.navigate(
              window.location.pathname,
-              ev.detail ? ev.detail.replace : false
+              ev.detail
            );
          }
        });
@ -122,7 +122,7 @@ function initialize(
  document.body.addEventListener("click", (ev) => {
    const href = isNavigationClick(ev);
    if (href) {
-      navigate(document.body, href);
+      navigate(href);
    }
  });
 }
--- a/src/layouts/hass-router-page.ts
+++ b/src/layouts/hass-router-page.ts
@ -99,7 +99,7 @@ export class HassRouterPage extends ReactiveElement {
    const defaultPage = routerOptions.defaultPage;

    if (route && route.path === "" && defaultPage !== undefined) {
-      navigate(this, `${route.prefix}/${defaultPage}`, true);
+      navigate(`${route.prefix}/${defaultPage}`, { replace: true });
    }

    let newPage = route
@ -127,7 +127,7 @@ export class HassRouterPage extends ReactiveElement {

        // Update the url if we know where we're mounted.
        if (route) {
-          navigate(this, `${route.prefix}/${result}`, true);
+          navigate(`${route.prefix}/${result}`, { replace: true });
        }
      }
    }
--- a/src/layouts/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@ -45,7 +45,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
    const path = curPath();

    if (["", "/"].includes(path)) {
-      navigate(this, `/${getStorageDefaultPanelUrlPath()}`, true);
+      navigate(`/${getStorageDefaultPanelUrlPath()}`, { replace: true });
    }
    this._route = {
      prefix: "",
@ -106,7 +106,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
    window.addEventListener("click", (ev) => {
      const href = isNavigationClick(ev);
      if (href) {
-        navigate(this, href);
+        navigate(href);
      }
    });
  }
--- a/src/mixins/navigate-mixin.js
+++ b/src/mixins/navigate-mixin.js
@ -9,7 +9,7 @@ export default dedupingMixin(
  (superClass) =>
    class extends superClass {
      navigate(...args) {
-        navigate(this, ...args);
+        navigate(...args);
      }
    }
 );
--- a/src/onboarding/onboarding-restore-snapshot.ts
+++ b/src/onboarding/onboarding-restore-snapshot.ts
@ -63,7 +63,7 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
        });
        if (response.status === 401) {
          // If we get a unauthorized response, the restore is done
-          navigate(this, "/", true);
+          navigate("/", { replace: true });
          location.reload();
        }
      } catch (err) {
--- a/src/panels/config/areas/dialog-area-registry-detail.ts
+++ b/src/panels/config/areas/dialog-area-registry-detail.ts
@ -149,7 +149,7 @@ class DialogAreaDetail extends LitElement {
      this._submitting = false;
    }

-    navigate(this, "/config/areas/dashboard");
+    navigate("/config/areas/dashboard");
  }

  static get styles(): CSSResultGroup {
--- a/src/panels/config/areas/ha-config-areas-dashboard.ts
+++ b/src/panels/config/areas/ha-config-areas-dashboard.ts
@ -192,7 +192,7 @@ export class HaConfigAreasDashboard extends LitElement {

  private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
    const areaId = ev.detail.id;
-    navigate(this, `/config/areas/area/${areaId}`);
+    navigate(`/config/areas/area/${areaId}`);
  }

  private _openDialog(entry?: AreaRegistryEntry) {
--- a/src/panels/config/automation/dialog-new-automation.ts
+++ b/src/panels/config/automation/dialog-new-automation.ts
@ -108,7 +108,7 @@ class DialogNewAutomation extends LitElement implements HassDialog {
    replaceDialog();
    showThingtalkDialog(this, {
      callback: (config: Partial<AutomationConfig> | undefined) =>
-        showAutomationEditor(this, config),
+        showAutomationEditor(config),
      input: this.shadowRoot!.querySelector("paper-input")!.value as string,
    });
    this.closeDialog();
@ -117,13 +117,13 @@ class DialogNewAutomation extends LitElement implements HassDialog {
  private async _blueprintPicked(ev: CustomEvent) {
    this.closeDialog();
    await nextRender();
-    showAutomationEditor(this, { use_blueprint: { path: ev.detail.value } });
+    showAutomationEditor({ use_blueprint: { path: ev.detail.value } });
  }

  private async _blank() {
    this.closeDialog();
    await nextRender();
-    showAutomationEditor(this);
+    showAutomationEditor();
  }

  static get styles(): CSSResultGroup {
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@ -450,7 +450,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
      // Wait for dialog to complate closing
      await new Promise((resolve) => setTimeout(resolve, 0));
    }
-    showAutomationEditor(this, {
+    showAutomationEditor({
      ...this._config,
      id: undefined,
      alias: `${this._config?.alias} (${this.hass.localize(
@ -503,7 +503,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
        this._dirty = false;

        if (!this.automationId) {
-          navigate(this, `/config/automation/edit/${id}`, true);
+          navigate(`/config/automation/edit/${id}`, { replace: true });
        }
      },
      (errors) => {
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@ -324,7 +324,7 @@ class HaAutomationPicker extends LitElement {
    ) {
      showNewAutomationDialog(this);
    } else {
-      navigate(this, "/config/automation/edit/new");
+      navigate("/config/automation/edit/new");
    }
  }

--- a/src/panels/config/blueprint/ha-blueprint-overview.ts
+++ b/src/panels/config/blueprint/ha-blueprint-overview.ts
@ -46,11 +46,8 @@ interface BlueprintMetaDataPath extends BlueprintMetaData {
 }

 const createNewFunctions = {
-  automation: (
-    context: HaBlueprintOverview,
-    blueprintMeta: BlueprintMetaDataPath
-  ) => {
-    showAutomationEditor(context, {
+  automation: (blueprintMeta: BlueprintMetaDataPath) => {
+    showAutomationEditor({
      alias: blueprintMeta.name,
      use_blueprint: { path: blueprintMeta.path },
    });
@ -183,7 +180,7 @@ class HaBlueprintOverview extends LitElement {
    super.firstUpdated(changedProps);
    if (this.route.path === "/import") {
      const url = extractSearchParam("blueprint_url");
-      navigate(this, "/config/blueprint/dashboard", true);
+      navigate("/config/blueprint/dashboard", { replace: true });
      if (url) {
        this._addBlueprint(url);
      }
@ -280,7 +277,7 @@ class HaBlueprintOverview extends LitElement {

  private _createNew(ev) {
    const blueprint = ev.currentTarget.blueprint as BlueprintMetaDataPath;
-    createNewFunctions[blueprint.domain](this, blueprint);
+    createNewFunctions[blueprint.domain](blueprint);
  }

  private _share(ev) {
--- a/src/panels/config/cloud/ha-config-cloud.ts
+++ b/src/panels/config/cloud/ha-config-cloud.ts
@ -81,7 +81,7 @@ class HaConfigCloud extends HassRouterPage {
    super.firstUpdated(changedProps);
    this.addEventListener("cloud-done", (ev) => {
      this._flashMessage = (ev as any).detail.flashMessage;
-      navigate(this, "/config/cloud/login");
+      navigate("/config/cloud/login");
    });
  }

@ -95,7 +95,7 @@ class HaConfigCloud extends HassRouterPage {
      if (oldStatus === undefined) {
        this._resolveCloudStatusLoaded();
      } else if (oldStatus.logged_in !== this.cloudStatus.logged_in) {
-        navigate(this, this.route.prefix, true);
+        navigate(this.route.prefix, { replace: true });
      }
    }
  }
--- a/src/panels/config/devices/device-detail/ha-device-automation-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-automation-card.ts
@ -72,12 +72,12 @@ export abstract class HaDeviceAutomationCard<
      return;
    }
    if (this.script) {
-      showScriptEditor(this, { sequence: [automation as DeviceAction] });
+      showScriptEditor({ sequence: [automation as DeviceAction] });
      return;
    }
    const data = {};
    data[this.type] = [automation];
-    showAutomationEditor(this, data);
+    showAutomationEditor(data);
  }

  static get styles(): CSSResultGroup {
--- a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts
@ -66,7 +66,6 @@ export class HaDeviceActionsOzw extends LitElement {

  private async _nodeDetailsClicked() {
    navigate(
-      this,
      `/config/ozw/network/${this.ozw_instance}/node/${this.node_id}/dashboard`
    );
  }
--- a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts
@ -107,14 +107,11 @@ export class HaDeviceActionsZha extends LitElement {
  }

  private _onAddDevicesClick() {
-    navigate(this, "/config/zha/add/" + this._zhaDevice!.ieee);
+    navigate(`/config/zha/add/${this._zhaDevice!.ieee}`);
  }

  private _onViewInVisualizationClick() {
-    navigate(
-      this,
-      "/config/zha/visualization/" + this._zhaDevice!.device_reg_id
-    );
+    navigate(`/config/zha/visualization/${this._zhaDevice!.device_reg_id}`);
  }

  private async _handleZigbeeInfoClicked() {
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@ -533,7 +533,7 @@ export class HaConfigDevicePage extends LitElement {
    this._entities(this.deviceId, this.entities).forEach((entity) => {
      entities[entity.entity_id] = "";
    });
-    showSceneEditor(this, {
+    showSceneEditor({
      entities,
    });
  }
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@ -455,7 +455,7 @@ export class HaConfigDeviceDashboard extends LitElement {
  private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
    const deviceId = ev.detail.id;
    this._ignoreLocationChange = true;
-    navigate(this, `/config/devices/device/${deviceId}`);
+    navigate(`/config/devices/device/${deviceId}`);
  }

  private _showDisabledChanged(ev: CustomEvent<RequestSelectedDetail>) {
@ -473,7 +473,7 @@ export class HaConfigDeviceDashboard extends LitElement {
    if (
      this._activeFilters(this.entries, this._searchParms, this.hass.localize)
    ) {
-      navigate(this, window.location.pathname, true);
+      navigate(window.location.pathname, { replace: true });
    }
    this._showDisabled = true;
  }
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@ -837,7 +837,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
    if (
      this._activeFilters(this._searchParms, this.hass.localize, this._entries)
    ) {
-      navigate(this, window.location.pathname, true);
+      navigate(window.location.pathname, { replace: true });
    }
    this._showDisabled = true;
    this._showReadOnly = true;
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@ -599,7 +599,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {

  private async _handleAdd(localizePromise: Promise<LocalizeFunc>) {
    const domain = extractSearchParam("domain");
-    navigate(this, "/config/integrations", true);
+    navigate("/config/integrations", { replace: true });
    if (!domain) {
      return;
    }
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
@ -143,11 +143,9 @@ class OZWConfigDashboard extends LitElement {
  private async _fetchData() {
    this._instances = await fetchOZWInstances(this.hass!);
    if (this._instances.length === 1) {
-      navigate(
-        this,
-        `/config/ozw/network/${this._instances[0].ozw_instance}`,
-        true
-      );
+      navigate(`/config/ozw/network/${this._instances[0].ozw_instance}`, {
+        replace: true,
+      });
    }
  }

--- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
@ -46,7 +46,7 @@ class OZWNetworkDashboard extends LitElement {

  protected firstUpdated() {
    if (!this.ozwInstance) {
-      navigate(this, "/config/ozw/dashboard", true);
+      navigate("/config/ozw/dashboard", { replace: true });
    } else if (this.hass) {
      this._fetchData();
    }
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
@ -88,7 +88,7 @@ class OZWNetworkNodes extends LitElement {

  protected firstUpdated() {
    if (!this.ozwInstance) {
-      navigate(this, "/config/ozw/dashboard", true);
+      navigate("/config/ozw/dashboard", { replace: true });
    } else if (this.hass) {
      this._fetchData();
    }
@ -117,7 +117,7 @@ class OZWNetworkNodes extends LitElement {

  private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
    const nodeId = ev.detail.id;
-    navigate(this, `/config/ozw/network/${this.ozwInstance}/node/${nodeId}`);
+    navigate(`/config/ozw/network/${this.ozwInstance}/node/${nodeId}`);
  }

  static get styles(): CSSResultGroup {
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
@ -47,9 +47,11 @@ class OZWNodeConfig extends LitElement {

  protected firstUpdated() {
    if (!this.ozwInstance) {
-      navigate(this, "/config/ozw/dashboard", true);
+      navigate("/config/ozw/dashboard", { replace: true });
    } else if (!this.nodeId) {
-      navigate(this, `/config/ozw/network/${this.ozwInstance}/nodes`, true);
+      navigate(`/config/ozw/network/${this.ozwInstance}/nodes`, {
+        replace: true,
+      });
    } else {
      this._fetchData();
    }
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
@ -43,9 +43,11 @@ class OZWNodeDashboard extends LitElement {

  protected firstUpdated() {
    if (!this.ozwInstance) {
-      navigate(this, "/config/ozw/dashboard", true);
+      navigate("/config/ozw/dashboard", { replace: true });
    } else if (!this.nodeId) {
-      navigate(this, `/config/ozw/network/${this.ozwInstance}/nodes`, true);
+      navigate(`/config/ozw/network/${this.ozwInstance}/nodes`, {
+        replace: true,
+      });
    } else if (this.hass) {
      this._fetchData();
    }
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts
@ -68,11 +68,10 @@ class OZWNodeRouter extends HassRouterPage {
    if (this._configEntry && !searchParams.has("config_entry")) {
      searchParams.append("config_entry", this._configEntry);
      navigate(
-        this,
        `${this.routeTail.prefix}${
          this.routeTail.path
        }?${searchParams.toString()}`,
-        true
+        { replace: true }
      );
    }
  }
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
@ -138,7 +138,7 @@ export class ZHAAddGroupPage extends LitElement {
    this._processingAdd = false;
    this._groupName = "";
    this._zhaDevicesDataTable.clearSelection();
-    navigate(this, `/config/zha/group/${group.group_id}`, true);
+    navigate(`/config/zha/group/${group.group_id}`, { replace: true });
  }

  private _handleNameChange(ev: PolymerChangedEvent<string>) {
--- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts
@ -67,11 +67,10 @@ class ZHAConfigDashboardRouter extends HassRouterPage {
    if (this._configEntry && !searchParams.has("config_entry")) {
      searchParams.append("config_entry", this._configEntry);
      navigate(
-        this,
        `${this.routeTail.prefix}${
          this.routeTail.path
        }?${searchParams.toString()}`,
-        true
+        { replace: true }
      );
    }
  }
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
@ -273,7 +273,7 @@ export class ZHAGroupPage extends LitElement {

  private async _deleteGroup(): Promise<void> {
    await removeGroups(this.hass, [this.groupId]);
-    navigate(this, `/config/zha/groups`, true);
+    navigate(`/config/zha/groups`, { replace: true });
  }

  static get styles(): CSSResultGroup {
--- a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
@ -140,7 +140,7 @@ export class ZHAGroupsDashboard extends LitElement {

  private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
    const groupId = ev.detail.id;
-    navigate(this, `/config/zha/group/${groupId}`);
+    navigate(`/config/zha/group/${groupId}`);
  }

  static get styles(): CSSResultGroup {
--- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
@ -100,11 +100,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
      if (ieee) {
        const device = this._devices.get(ieee);
        if (device) {
-          navigate(
-            this,
-            `/config/devices/device/${device.device_reg_id}`,
-            false
-          );
+          navigate(`/config/devices/device/${device.device_reg_id}`);
        }
      }
    });
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-config-router.ts
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-config-router.ts
@ -46,11 +46,10 @@ class ZWaveConfigRouter extends HassRouterPage {
    if (this._configEntry && !searchParams.has("config_entry")) {
      searchParams.append("config_entry", this._configEntry);
      navigate(
-        this,
        `${this.routeTail.prefix}${
          this.routeTail.path
        }?${searchParams.toString()}`,
-        true
+        { replace: true }
      );
    }
  }
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts
@ -439,7 +439,7 @@ export class ZwaveMigration extends LitElement {
  }

  private _navigateOzw() {
-    navigate(this, "/config/ozw");
+    navigate("/config/ozw");
  }

  private _networkStopped(): void {
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-router.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-router.ts
@ -64,11 +64,10 @@ class ZWaveJSConfigRouter extends HassRouterPage {
    if (this._configEntry && !searchParams.has("config_entry")) {
      searchParams.append("config_entry", this._configEntry);
      navigate(
-        this,
        `${this.routeTail.prefix}${
          this.routeTail.path
        }?${searchParams.toString()}`,
-        true
+        { replace: true }
      );
    }
  }
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@ -239,8 +239,7 @@ export class HaConfigLovelaceDashboards extends LitElement {

  private _navigate(ev: Event) {
    ev.stopPropagation();
-    const url = `/${(ev.target as any).urlPath}`;
-    navigate(this, url);
+    navigate(`/${(ev.target as any).urlPath}`);
  }

  private _editDashboard(ev: CustomEvent) {
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@ -749,7 +749,7 @@ export class HaSceneEditor extends SubscribeMixin(
      // Wait for dialog to complete closing
      await new Promise((resolve) => setTimeout(resolve, 0));
    }
-    showSceneEditor(this, {
+    showSceneEditor({
      ...this._config,
      id: undefined,
      name: `${this._config?.name} (${this.hass.localize(
@ -796,7 +796,7 @@ export class HaSceneEditor extends SubscribeMixin(
      this._dirty = false;

      if (!this.sceneId) {
-        navigate(this, `/config/scene/edit/${id}`, true);
+        navigate(`/config/scene/edit/${id}`, { replace: true });
      }
    } catch (err) {
      this._errors = err.body.message || err.message;
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@ -600,7 +600,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
      // Wait for dialog to complate closing
      await new Promise((resolve) => setTimeout(resolve, 0));
    }
-    showScriptEditor(this, {
+    showScriptEditor({
      ...this._config,
      alias: `${this._config?.alias} (${this.hass.localize(
        "ui.panel.config.script.picker.duplicate"
@ -665,7 +665,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
        this._dirty = false;

        if (!this.scriptEntityId) {
-          navigate(this, `/config/script/edit/${id}`, true);
+          navigate(`/config/script/edit/${id}`, { replace: true });
        }
      },
      (errors) => {
--- a/src/panels/config/tags/ha-config-tags.ts
+++ b/src/panels/config/tags/ha-config-tags.ts
@ -260,7 +260,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
      ),
      trigger: [{ platform: "tag", tag_id: tag.id } as TagTrigger],
    };
-    showAutomationEditor(this, data);
+    showAutomationEditor(data);
  }

  private _addTag() {
--- a/src/panels/config/zone/ha-config-zone.ts
+++ b/src/panels/config/zone/ha-config-zone.ts
@ -269,7 +269,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
      ["storage", "default"].includes(this.hass.config.config_source);
    this._fetchData();
    if (this.route.path === "/new") {
-      navigate(this, "/config/zone", true);
+      navigate("/config/zone", { replace: true });
      this._createZone();
    }
  }
@ -399,7 +399,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
    ) {
      return;
    }
-    navigate(this, "/config/core");
+    navigate("/config/core");
  }

  private async _createEntry(values: ZoneMutableParams) {
--- a/src/panels/custom/ha-panel-custom.ts
+++ b/src/panels/custom/ha-panel-custom.ts
@ -1,6 +1,6 @@
 import { PropertyValues, ReactiveElement } from "lit";
 import { property } from "lit/decorators";
-import { navigate } from "../../common/navigate";
+import { navigate, NavigateOptions } from "../../common/navigate";
 import { CustomPanelInfo } from "../../data/panel_custom";
 import { HomeAssistant, Route } from "../../types";
 import { createCustomPanelElement } from "../../util/custom-panel/create-custom-panel-element";
@ -34,8 +34,8 @@ export class HaPanelCustom extends ReactiveElement {
  // Since navigate fires events on `window`, we need to expose this as a function
  // to allow custom panels to forward their location changes to the main window
  // instead of their iframe window.
-  public navigate = (path: string, replace?: boolean) =>
-    navigate(this, path, replace);
+  public navigate = (path: string, options?: NavigateOptions) =>
+    navigate(path, options);

  public registerIframe(initialize, setProperties) {
    initialize(this.panel, {
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@ -77,7 +77,7 @@ class PanelDeveloperTools extends LitElement {
  private handlePageSelected(ev) {
    const newPage = ev.detail.item.getAttribute("page-name");
    if (newPage !== this._page) {
-      navigate(this, `/developer-tools/${newPage}`);
+      navigate(`/developer-tools/${newPage}`);
    } else {
      scrollTo(0, 0);
    }
--- a/src/panels/lovelace/common/handle-action.ts
+++ b/src/panels/lovelace/common/handle-action.ts
@ -101,7 +101,7 @@ export const handleAction = async (
    }
    case "navigate":
      if (actionConfig.navigation_path) {
-        navigate(node, actionConfig.navigation_path);
+        navigate(actionConfig.navigation_path);
      } else {
        showToast(node, {
          message: hass.localize(
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@ -228,7 +228,7 @@ export class HuiDialogEditView extends LitElement {
        deleteView(this._params.lovelace!.config, this._params.viewIndex!)
      );
      this.closeDialog();
-      navigate(this, `/${window.location.pathname.split("/")[1]}`);
+      navigate(`/${window.location.pathname.split("/")[1]}`);
    } catch (err) {
      showAlertDialog(this, {
        text: `Deleting failed: ${err.message}`,
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@ -680,21 +680,21 @@ class HUIRoot extends LitElement {
    if (!shouldHandleRequestSelectedEvent(ev)) {
      return;
    }
-    navigate(this, "/config/lovelace/dashboards");
+    navigate("/config/lovelace/dashboards");
  }

  private _handleManageResources(ev: CustomEvent<RequestSelectedDetail>): void {
    if (!shouldHandleRequestSelectedEvent(ev)) {
      return;
    }
-    navigate(this, "/config/lovelace/resources");
+    navigate("/config/lovelace/resources");
  }

  private _handleUnusedEntities(ev: CustomEvent<RequestSelectedDetail>): void {
    if (!shouldHandleRequestSelectedEvent(ev)) {
      return;
    }
-    navigate(this, `${this.route?.prefix}/hass-unused-entities`);
+    navigate(`${this.route?.prefix}/hass-unused-entities`);
  }

  private _showVoiceCommandDialog(): void {
@ -724,14 +724,12 @@ class HUIRoot extends LitElement {

  private _navigateToView(path: string | number, replace?: boolean) {
    if (!this.lovelace!.editMode) {
-      navigate(this, `${this.route!.prefix}/${path}`, replace);
+      navigate(`${this.route!.prefix}/${path}`, { replace });
      return;
    }
-    navigate(
-      this,
-      `${this.route!.prefix}/${path}?${addSearchParam({ edit: "1" })}`,
-      replace
-    );
+    navigate(`${this.route!.prefix}/${path}?${addSearchParam({ edit: "1" })}`, {
+      replace,
+    });
  }

  private _editView() {
--- a/src/panels/map/ha-panel-map.js
+++ b/src/panels/map/ha-panel-map.js
@ -94,7 +94,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
  }

  openZonesEditor() {
-    navigate(this, "/config/zone");
+    navigate("/config/zone");
  }

  fitMap() {
--- a/src/panels/my/ha-panel-my.ts
+++ b/src/panels/my/ha-panel-my.ts
@ -173,11 +173,9 @@ class HaPanelMy extends LitElement {
        this._error = "no_supervisor";
        return;
      }
-      navigate(
-        this,
-        `/hassio/_my_redirect/${path}${window.location.search}`,
-        true
-      );
+      navigate(`/hassio/_my_redirect/${path}${window.location.search}`, {
+        replace: true,
+      });
      return;
    }

@ -204,7 +202,7 @@ class HaPanelMy extends LitElement {
      return;
    }

-    navigate(this, url, true);
+    navigate(url, { replace: true });
  }

  protected render() {