Navigate cleanup (#9202)

demo/src/ha-demo.ts

@@ -70,7 +70,7 @@ class HaDemo extends HomeAssistantAppEl {
         }
 
         e.preventDefault();
-        navigate(this, href);
+        navigate(href);
       },
       { capture: true }
     );

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 {

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);
     }

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 });
         }
       }
     }

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> {

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");
   }
 }
 

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);
       }
     });
 

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 {

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;
     }
 

src/common/navigate.ts

@@ -4,13 +4,17 @@ import { mainWindow } from "./dom/get_main_window";
 declare global {
   // for fire event
   interface HASSDomEvents {
-    "location-changed": {
+    "location-changed": NavigateOptions;
-      replace: boolean;
-    };
   }
 }
 
-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(

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

src/data/scene.ts

@@ -20,12 +20,9 @@ export const SCENE_IGNORED_DOMAINS = [
 
 let inititialSceneEditorData: Partial<SceneConfig> | undefined;
 
-export const showSceneEditor = (
+export const showSceneEditor = (data?: Partial<SceneConfig>) => {
-  el: HTMLElement,
-  data?: Partial<SceneConfig>
-) => {
   inititialSceneEditorData = data;
-  navigate(el, "/config/scene/edit/new");
+  navigate("/config/scene/edit/new");
 };
 
 export const getSceneEditorInitData = () => {

src/data/script.ts

@@ -182,12 +182,9 @@ export const deleteScript = (hass: HomeAssistant, objectId: string) =>
 
 let inititialScriptEditorData: Partial<ScriptConfig> | undefined;
 
-export const showScriptEditor = (
+export const showScriptEditor = (data?: Partial<ScriptConfig>) => {
-  el: HTMLElement,
-  data?: Partial<ScriptConfig>
-) => {
   inititialScriptEditorData = data;
-  navigate(el, "/config/script/edit/new");
+  navigate("/config/script/edit/new");
 };
 
 export const getScriptEditorInitData = () => {

src/data/zone.ts

@@ -56,12 +56,9 @@ export const deleteZone = (hass: HomeAssistant, zoneId: string) =>
 
 let inititialZoneEditorData: Partial<ZoneMutableParams> | undefined;
 
-export const showZoneEditor = (
+export const showZoneEditor = (data?: Partial<ZoneMutableParams>) => {
-  el: HTMLElement,
-  data?: Partial<ZoneMutableParams>
-) => {
   inititialZoneEditorData = data;
-  navigate(el, "/config/zone/new");
+  navigate("/config/zone/new");
 };
 
 export const getZoneEditorInitData = () => {

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,
     });

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();
   }
 

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 {

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);
     }
   });
 }

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 });
         }
       }
     }

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);
       }
     });
   }

src/mixins/navigate-mixin.js

@@ -9,7 +9,7 @@ export default dedupingMixin(
   (superClass) =>
     class extends superClass {
       navigate(...args) {
-        navigate(this, ...args);
+        navigate(...args);
       }
     }
 );

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) {

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 {

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) {

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 {

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) => {

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");
     }
   }
 

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -46,11 +46,8 @@ interface BlueprintMetaDataPath extends BlueprintMetaData {
 }
 
 const createNewFunctions = {
-  automation: (
+  automation: (blueprintMeta: BlueprintMetaDataPath) => {
-    context: HaBlueprintOverview,
+    showAutomationEditor({
-    blueprintMeta: BlueprintMetaDataPath
-  ) => {
-    showAutomationEditor(context, {
       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) {

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 });
       }
     }
   }

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 {

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`
     );
   }

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(
+    navigate(`/config/zha/visualization/${this._zhaDevice!.device_reg_id}`);
-      this,
-      "/config/zha/visualization/" + this._zhaDevice!.device_reg_id
-    );
   }
 
   private async _handleZigbeeInfoClicked() {

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,
     });
   }

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;
   }

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;

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;
     }

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(
+      navigate(`/config/ozw/network/${this._instances[0].ozw_instance}`, {
-        this,
+        replace: true,
-        `/config/ozw/network/${this._instances[0].ozw_instance}`,
+      });
-        true
-      );
     }
   }
 

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();
     }

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 {

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();
     }

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();
     }

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 }
       );
     }
   }

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>) {

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 }
       );
     }
   }

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 {

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 {

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(
+          navigate(`/config/devices/device/${device.device_reg_id}`);
-            this,
-            `/config/devices/device/${device.device_reg_id}`,
-            false
-          );
         }
       }
     });

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 }
       );
     }
   }

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 {

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 }
       );
     }
   }

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(`/${(ev.target as any).urlPath}`);
-    navigate(this, url);
   }
 
   private _editDashboard(ev: CustomEvent) {

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;

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) => {

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() {

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) {

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) =>
+  public navigate = (path: string, options?: NavigateOptions) =>
-    navigate(this, path, replace);
+    navigate(path, options);
 
   public registerIframe(initialize, setProperties) {
     initialize(this.panel, {

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);
     }

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(

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}`,

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(
+    navigate(`${this.route!.prefix}/${path}?${addSearchParam({ edit: "1" })}`, {
-      this,
+      replace,
-      `${this.route!.prefix}/${path}?${addSearchParam({ edit: "1" })}`,
+    });
-      replace
-    );
   }
 
   private _editView() {

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() {

src/panels/my/ha-panel-my.ts

@@ -173,11 +173,9 @@ class HaPanelMy extends LitElement {
         this._error = "no_supervisor";
         return;
       }
-      navigate(
+      navigate(`/hassio/_my_redirect/${path}${window.location.search}`, {
-        this,
+        replace: true,
-        `/hassio/_my_redirect/${path}${window.location.search}`,
+      });
-        true
-      );
       return;
     }
 
@@ -204,7 +202,7 @@ class HaPanelMy extends LitElement {
       return;
     }
 
-    navigate(this, url, true);
+    navigate(url, { replace: true });
   }
 
   protected render() {