Open edit area dialog when clicking edit button in area view (#29128)

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

@@ -1,8 +1,11 @@
+import { mdiPencil } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { navigate } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
+import { updateAreaRegistryEntry } from "../../data/area/area_registry";
 import { updateDeviceRegistryEntry } from "../../data/device/device_registry";
 import {
   fetchFrontendSystemData,
@@ -13,8 +16,10 @@ import type { LovelaceDashboardStrategyConfig } from "../../data/lovelace/config
 import type { HomeAssistant, PanelInfo, Route } from "../../types";
 import { showToast } from "../../util/toast";
 import "../lovelace/hui-root";
+import type { ExtraActionItem } from "../lovelace/hui-root";
 import { expandLovelaceConfigStrategies } from "../lovelace/strategies/get-strategy";
 import type { Lovelace } from "../lovelace/types";
+import { showAreaRegistryDetailDialog } from "../config/areas/show-dialog-area-registry-detail";
 import { showDeviceRegistryDetailDialog } from "../config/devices/device-registry-detail/show-dialog-device-registry-detail";
 import { showEditHomeDialog } from "./dialogs/show-dialog-edit-home";
 
@@ -32,6 +37,8 @@ class PanelHome extends LitElement {
 
   @state() private _config: FrontendSystemData["home"] = {};
 
+  @state() private _extraActionItems?: ExtraActionItem[];
+
   public willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
     // Initial setup
@@ -40,6 +47,10 @@ class PanelHome extends LitElement {
       return;
     }
 
+    if (changedProps.has("route")) {
+      this._updateExtraActionItems();
+    }
+
     if (!changedProps.has("hass")) {
       return;
     }
@@ -74,6 +85,7 @@ class PanelHome extends LitElement {
   }
 
   private async _setup() {
+    this._updateExtraActionItems();
     try {
       const [_, data] = await Promise.all([
         this.hass.loadFragmentTranslation("lovelace"),
@@ -94,9 +106,69 @@ class PanelHome extends LitElement {
   );
 
   private _registriesChanged = async () => {
+    // If on an area view that no longer exists, redirect to overview
+    const path = this.route?.path?.split("/")[1];
+    if (path?.startsWith("areas-")) {
+      const areaId = path.replace("areas-", "");
+      if (!this.hass.areas[areaId]) {
+        navigate("/home");
+        return;
+      }
+    }
     this._setLovelace();
   };
 
+  private _updateExtraActionItems() {
+    const path = this.route?.path?.split("/")[1];
+
+    if (path?.startsWith("areas-")) {
+      this._extraActionItems = [
+        {
+          icon: mdiPencil,
+          labelKey: "ui.panel.lovelace.menu.edit_area",
+          action: this._editArea,
+        },
+      ];
+    } else if (!path || path === "overview") {
+      this._extraActionItems = [
+        {
+          icon: mdiPencil,
+          labelKey: "ui.panel.lovelace.menu.edit_overview",
+          action: this._editHome,
+        },
+      ];
+    } else {
+      this._extraActionItems = undefined;
+    }
+  }
+
+  private _editHome = () => {
+    showEditHomeDialog(this, {
+      config: this._config,
+      saveConfig: async (config) => {
+        await this._saveConfig(config);
+      },
+    });
+  };
+
+  private _editArea = async () => {
+    const path = this.route?.path?.split("/")[1];
+    if (!path?.startsWith("areas-")) {
+      return;
+    }
+    const areaId = path.replace("areas-", "");
+    const area = this.hass.areas[areaId];
+    if (!area) {
+      return;
+    }
+    await this.hass.loadFragmentTranslation("config");
+    showAreaRegistryDetailDialog(this, {
+      entry: area,
+      updateEntry: (values) =>
+        updateAreaRegistryEntry(this.hass, areaId, values),
+    });
+  };
+
   private _handleLLCustomEvent = (ev: Event) => {
     const detail = (ev as CustomEvent).detail;
     if (detail.home_panel) {
@@ -132,6 +204,8 @@ class PanelHome extends LitElement {
         .lovelace=${this._lovelace}
         .route=${this.route}
         .panel=${this.panel}
+        no-edit
+        .extraActionItems=${this._extraActionItems}
         @ll-custom=${this._handleLLCustomEvent}
       ></hui-root>
     `;
@@ -165,20 +239,11 @@ class PanelHome extends LitElement {
       enableFullEditMode: () => undefined,
       saveConfig: async () => undefined,
       deleteConfig: async () => undefined,
-      setEditMode: this._setEditMode,
+      setEditMode: () => undefined,
       showToast: () => undefined,
     };
   }
 
-  private _setEditMode = () => {
-    showEditHomeDialog(this, {
-      config: this._config,
-      saveConfig: async (config) => {
-        await this._saveConfig(config);
-      },
-    });
-  };
-
   private async _saveConfig(config: HomeFrontendSystemData): Promise<void> {
     try {
       await saveFrontendSystemData(this.hass.connection, "home", config);

src/panels/lovelace/hui-root.ts

@@ -144,6 +144,8 @@ class HUIRoot extends LitElement {
 
   @property({ attribute: false }) public extraActionItems?: ExtraActionItem[];
 
+  @property({ type: Boolean, attribute: "no-edit" }) public noEdit = false;
+
   @state() private _curView?: number | "hass-unused-entities";
 
   private _configChangedByUndo = false;
@@ -345,7 +347,8 @@ class HUIRoot extends LitElement {
           !this._editMode &&
           this.hass!.user?.is_admin &&
           !this.hass!.config.recovery_mode &&
-          !this.hass.kioskMode,
+          !this.hass.kioskMode &&
+          !this.noEdit,
         overflow: true,
         overflow_can_promote: true,
       },

src/translations/en.json

@@ -7791,7 +7791,9 @@
           "create_area_action": "View area",
           "add_person_success": "Person added",
           "add_person_action": "View persons",
-          "add_person": "Add person"
+          "add_person": "Add person",
+          "edit_overview": "Edit overview",
+          "edit_area": "Edit area"
         },
         "reload_resources": {
           "refresh_header": "Do you want to refresh?",