From 2176d4dceae888f32b510f611c867648e7c59368 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 14 Dec 2022 09:13:31 +0100
Subject: [PATCH] Make editing home location more clear (#14636)

---
 src/components/map/ha-locations-editor.ts     | 15 ++++++++++-----
 .../config/core/ha-config-section-general.ts  |  2 +-
 src/panels/config/zone/ha-config-zone.ts      | 19 ++++++++++++++++---
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts
index 43f68553a7..9995094c95 100644
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@@ -67,23 +67,28 @@ export class HaLocationsEditor extends LitElement {
 
   private Leaflet?: LeafletModuleType;
 
+  private _loadPromise: Promise<boolean | void>;
+
   constructor() {
     super();
 
-    import("leaflet").then((module) => {
+    this._loadPromise = import("leaflet").then((module) =>
       import("leaflet-draw").then(() => {
         this.Leaflet = module.default as LeafletModuleType;
         this._updateMarkers();
-        this.updateComplete.then(() => this.fitMap());
-      });
-    });
+        return this.updateComplete.then(() => this.fitMap());
+      })
+    );
   }
 
   public fitMap(): void {
     this.map.fitMap();
   }
 
-  public fitMarker(id: string): void {
+  public async fitMarker(id: string): Promise<void> {
+    if (!this.Leaflet) {
+      await this._loadPromise;
+    }
     if (!this.map.leafletMap || !this._locationMarkers) {
       return;
     }
diff --git a/src/panels/config/core/ha-config-section-general.ts b/src/panels/config/core/ha-config-section-general.ts
index 635c455d79..10d9ffe10f 100644
--- a/src/panels/config/core/ha-config-section-general.ts
+++ b/src/panels/config/core/ha-config-section-general.ts
@@ -391,7 +391,7 @@ class HaConfigSectionGeneral extends LitElement {
   );
 
   private _editLocation() {
-    navigate("/config/zone");
+    navigate("/config/zone/edit/zone.home");
   }
 
   static styles = [
diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts
index 1f90d1e312..7089e7735a 100644
--- a/src/panels/config/zone/ha-config-zone.ts
+++ b/src/panels/config/zone/ha-config-zone.ts
@@ -1,4 +1,4 @@
-import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
+import { mdiCog, mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
@@ -191,7 +191,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                         !this._canEditCore}
                         .path=${stateObject.entity_id === "zone.home" &&
                         this._canEditCore
-                          ? mdiPencil
+                          ? mdiCog
                           : mdiPencilOff}
                         .label=${stateObject.entity_id === "zone.home"
                           ? hass.localize("ui.panel.config.zone.edit_home")
@@ -273,6 +273,19 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
     }
   }
 
+  protected updated() {
+    if (
+      !this.route.path.startsWith("/edit/") ||
+      !this._stateItems ||
+      !this._storageItems
+    ) {
+      return;
+    }
+    const id = this.route.path.slice(6);
+    navigate("/config/zone", { replace: true });
+    this._zoomZone(id);
+  }
+
   public willUpdate(changedProps: PropertyValues) {
     super.updated(changedProps);
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
@@ -374,7 +387,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
     this._zoomZone(entityId);
   }
 
-  private _zoomZone(id: string) {
+  private async _zoomZone(id: string) {
     this._map?.fitMarker(id);
   }