Add tabs to energy config page (#29689)

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

@@ -1,8 +1,10 @@
 import "../../../layouts/hass-error-screen";
-import { mdiDownload } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { mdiDownload, mdiFire, mdiLightningBolt, mdiWater } from "@mdi/js";
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { cache } from "lit/directives/cache";
+import { navigate } from "../../../common/navigate";
 import type {
   EnergyPreferencesValidation,
   EnergyInfo,
@@ -17,7 +19,7 @@ import {
 import type { StatisticsMetaData } from "../../../data/recorder";
 import { getStatisticMetadata } from "../../../data/recorder";
 import "../../../layouts/hass-loading-screen";
-import "../../../layouts/hass-subpage";
+import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import "../../../components/ha-alert";
@@ -29,6 +31,7 @@ import "./components/ha-energy-battery-settings";
 import "./components/ha-energy-gas-settings";
 import "./components/ha-energy-water-settings";
 import { fileDownload } from "../../../util/file_download";
+import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
 
 const INITIAL_CONFIG: EnergyPreferences = {
   energy_sources: [],
@@ -36,6 +39,27 @@ const INITIAL_CONFIG: EnergyPreferences = {
   device_consumption_water: [],
 };
 
+const TABS: PageNavigation[] = [
+  {
+    path: "/config/energy/electricity",
+    translationKey: "ui.panel.config.energy.tabs.electricity",
+    iconPath: mdiLightningBolt,
+    iconColor: "#F1C447",
+  },
+  {
+    path: "/config/energy/gas",
+    translationKey: "ui.panel.config.energy.tabs.gas",
+    iconPath: mdiFire,
+    iconColor: "#F1C447",
+  },
+  {
+    path: "/config/energy/water",
+    translationKey: "ui.panel.config.energy.tabs.water",
+    iconPath: mdiWater,
+    iconColor: "#F1C447",
+  },
+];
+
 @customElement("ha-config-energy")
 class HaConfigEnergy extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -60,6 +84,19 @@ class HaConfigEnergy extends LitElement {
 
   @state() private _statsMetadata?: Record<string, StatisticsMetaData>;
 
+  private get _currTab(): string {
+    return this.route.path.substring(1) || "electricity";
+  }
+
+  protected willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has("route")) {
+      const tab = this.route.path.substring(1);
+      if (!tab || !TABS.some((t) => t.path.endsWith(`/${tab}`))) {
+        navigate(`${this.route.prefix}/electricity`, { replace: true });
+      }
+    }
+  }
+
   protected firstUpdated() {
     this._fetchConfig();
   }
@@ -81,13 +118,14 @@ class HaConfigEnergy extends LitElement {
     }
 
     return html`
-      <hass-subpage
+      <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         .backPath=${this._searchParms.has("historyBack")
           ? undefined
           : "/config/lovelace/dashboards"}
-        .header=${this.hass.localize("ui.panel.config.energy.caption")}
+        .route=${this.route}
+        .tabs=${TABS}
       >
         <ha-icon-button
           slot="toolbar-icon"
@@ -100,7 +138,15 @@ class HaConfigEnergy extends LitElement {
         <ha-alert>
           ${this.hass.localize("ui.panel.config.energy.new_device_info")}
         </ha-alert>
-        <div class="content">
+        <div class="content">${cache(this._renderTabContent())}</div>
+      </hass-tabs-subpage>
+    `;
+  }
+
+  private _renderTabContent(): TemplateResult | typeof nothing {
+    switch (this._currTab) {
+      case "electricity":
+        return html`
           <ha-energy-grid-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
@@ -123,20 +169,6 @@ class HaConfigEnergy extends LitElement {
             .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-battery-settings>
-          <ha-energy-gas-settings
-            .hass=${this.hass}
-            .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata}
-            .validationResult=${this._validationResult}
-            @value-changed=${this._prefsChanged}
-          ></ha-energy-gas-settings>
-          <ha-energy-water-settings
-            .hass=${this.hass}
-            .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata}
-            .validationResult=${this._validationResult}
-            @value-changed=${this._prefsChanged}
-          ></ha-energy-water-settings>
           <ha-energy-device-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
@@ -144,6 +176,26 @@ class HaConfigEnergy extends LitElement {
             .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-device-settings>
+        `;
+      case "gas":
+        return html`
+          <ha-energy-gas-settings
+            .hass=${this.hass}
+            .preferences=${this._preferences!}
+            .statsMetadata=${this._statsMetadata}
+            .validationResult=${this._validationResult}
+            @value-changed=${this._prefsChanged}
+          ></ha-energy-gas-settings>
+        `;
+      case "water":
+        return html`
+          <ha-energy-water-settings
+            .hass=${this.hass}
+            .preferences=${this._preferences!}
+            .statsMetadata=${this._statsMetadata}
+            .validationResult=${this._validationResult}
+            @value-changed=${this._prefsChanged}
+          ></ha-energy-water-settings>
           <ha-energy-device-settings-water
             .hass=${this.hass}
             .preferences=${this._preferences!}
@@ -151,9 +203,10 @@ class HaConfigEnergy extends LitElement {
             .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-device-settings-water>
-        </div>
-      </hass-subpage>
-    `;
+        `;
+      default:
+        return nothing;
+    }
   }
 
   private async _fetchConfig() {

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

@@ -321,7 +321,16 @@ class PanelEnergy extends LitElement {
 
   private _navigateConfig(ev?: Event) {
     ev?.stopPropagation();
-    navigate("/config/energy?historyBack=1");
+    const viewPath = this.route?.path?.split("/")[1] || "";
+    const tabMap: Record<string, string> = {
+      overview: "electricity",
+      electricity: "electricity",
+      gas: "gas",
+      water: "water",
+      now: "electricity",
+    };
+    const tab = tabMap[viewPath] || "electricity";
+    navigate(`/config/energy/${tab}?historyBack=1`);
   }
 
   private _reloadConfig() {

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

@@ -139,7 +139,7 @@ export const getMyRedirects = (): Redirects => ({
   },
   config_energy: {
     component: "energy",
-    redirect: "/config/energy/dashboard",
+    redirect: "/config/energy",
   },
   config_ssdp: {
     component: "ssdp",

src/translations/en.json

@@ -3799,6 +3799,11 @@
           "caption": "Energy",
           "description": "Monitor your energy production and consumption",
           "new_device_info": "After setting up a new device, it can take up to 2 hours for new data to arrive in your energy dashboard.",
+          "tabs": {
+            "electricity": "Electricity",
+            "gas": "Gas",
+            "water": "Water"
+          },
           "delete_source": "Are you sure you want to remove this source?",
           "delete_integration": "Are you sure you want to remove this integration? It will remove the entities it provides",
           "grid": {