Config Menu: Addressing Comments in #12377 (#12399)

src/components/ha-metric.ts

@@ -9,25 +9,27 @@ import "./ha-settings-row";
 class HaMetric extends LitElement {
   @property({ type: Number }) public value!: number;
 
-  @property({ type: String }) public description!: string;
+  @property({ type: String }) public heading!: string;
 
   @property({ type: String }) public tooltip?: string;
 
   protected render(): TemplateResult {
     const roundedValue = roundWithOneDecimal(this.value);
-    return html`<ha-settings-row>
-      <span slot="heading"> ${this.description} </span>
-      <div slot="description" .title=${this.tooltip ?? ""}>
-        <span class="value"> ${roundedValue} % </span>
-        <ha-bar
-          class=${classMap({
-            "target-warning": roundedValue > 50,
-            "target-critical": roundedValue > 85,
-          })}
-          .value=${this.value}
-        ></ha-bar>
-      </div>
-    </ha-settings-row>`;
+    return html`
+      <ha-settings-row>
+        <span slot="heading"> ${this.heading} </span>
+        <div slot="description" .title=${this.tooltip ?? ""}>
+          <span class="value"> ${roundedValue} % </span>
+          <ha-bar
+            class=${classMap({
+              "target-warning": roundedValue > 50,
+              "target-critical": roundedValue > 85,
+            })}
+            .value=${this.value}
+          ></ha-bar>
+        </div>
+      </ha-settings-row>
+    `;
   }
 
   static get styles(): CSSResultGroup {

src/panels/config/core/ha-config-section-storage.ts

@@ -1,6 +1,5 @@
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-alert";
 import "../../../components/ha-bar";
@@ -52,7 +51,7 @@ class HaConfigSectionStorage extends LitElement {
             ? html`
                 <ha-card outlined>
                   <ha-metric
-                    .description=${this.hass.localize(
+                    .heading=${this.hass.localize(
                       "ui.panel.config.storage.used_space"
                     )}
                     .value=${this._getUsedSpace(
@@ -65,7 +64,7 @@ class HaConfigSectionStorage extends LitElement {
                   this._storageData.disk_life_time >= 10
                     ? html`
                         <ha-metric
-                          .description=${this.hass.localize(
+                          .heading=${this.hass.localize(
                             "ui.panel.config.storage.emmc_lifetime_used"
                           )}
                           .value=${this._storageData.disk_life_time}
@@ -86,19 +85,15 @@ class HaConfigSectionStorage extends LitElement {
   }
 
   private async _load() {
-    this._error = undefined;
     try {
-      if (isComponentLoaded(this.hass, "hassio")) {
-        this._storageData = await fetchHassioHostInfo(this.hass);
-      }
+      this._storageData = await fetchHassioHostInfo(this.hass);
     } catch (err: any) {
       this._error = err.message || err;
     }
   }
 
-  private _getUsedSpace = memoizeOne((used: number, total: number) =>
-    roundWithOneDecimal(getValueInPercentage(used, 0, total))
-  );
+  private _getUsedSpace = (used: number, total: number) =>
+    roundWithOneDecimal(getValueInPercentage(used, 0, total));
 
   static styles = css`
     .content {

src/panels/config/zone/dialog-core-zone-detail.ts

@@ -9,8 +9,10 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { currencies } from "../../../components/currency-datalist";
 import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-formfield";
 import { HaRadio } from "../../../components/ha-radio";
 import "../../../components/ha-select";
+import "../../../components/ha-textfield";
 import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
 import { SYMBOL_TO_ISO } from "../../../data/currency";
 import { haStyleDialog } from "../../../resources/styles";

src/panels/config/zone/ha-config-zone.ts

@@ -1,4 +1,4 @@
-import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
+import { mdiPencil, mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
@@ -36,7 +36,10 @@ import {
   Zone,
   ZoneMutableParams,
 } from "../../../data/zone";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
@@ -186,12 +189,9 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                       <ha-icon-button
                         .entityId=${stateObject.entity_id}
                         @click=${this._openCoreConfig}
-                        .disabled=${stateObject.entity_id === "zone.home" &&
+                        .noEdit=${stateObject.entity_id === "zone.home" &&
                         !this._canEditCore}
-                        .path=${stateObject.entity_id === "zone.home" &&
-                        this._canEditCore
-                          ? mdiPencil
-                          : mdiPencilOff}
+                        .path=${mdiPencil}
                         .label=${hass.localize(
                           "ui.panel.config.zone.edit_zone"
                         )}
@@ -385,7 +385,15 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
     this._openDialog(entry);
   }
 
-  private async _openCoreConfig() {
+  private async _openCoreConfig(ev) {
+    if (ev.currentTarget.noEdit) {
+      showAlertDialog(this, {
+        title: this.hass.localize("ui.panel.config.zone.can_not_edit"),
+        text: this.hass.localize("ui.panel.config.zone.configured_in_yaml"),
+        confirm: () => {},
+      });
+      return;
+    }
     showCoreZoneDetailDialog(this);
   }
 

src/translations/en.json

@@ -2622,6 +2622,7 @@
           "add_zone": "Add Zone",
           "edit_zone": "Edit Zone",
           "confirm_delete": "Are you sure you want to delete this zone?",
+          "can_not_edit": "Unable to edit zone",
           "configured_in_yaml": "Zones configured via configuration.yaml cannot be edited via the UI.",
           "edit_home_zone": "The radius of the Home zone can't be edited from the frontend yet. Drag the marker on the map to move the home zone.",
           "edit_home_zone_narrow": "The radius of the Home zone can't be edited from the frontend yet. The location can be changed from the general configuration.",