Initial custom configuration for ZHA

src/data/zha.ts

@@ -1,4 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
+import { HaFormSchema } from "../components/ha-form/ha-form";
 import { HomeAssistant } from "../types";
 
 export interface ZHAEntityReference extends HassEntity {
@@ -75,6 +76,11 @@ export interface ZHAGroup {
   members: ZHADeviceEndpoint[];
 }
 
+export interface ZHAConfiguration {
+  data: Record<string, Record<string, unknown>>;
+  schemas: Record<string, HaFormSchema[]>;
+}
+
 export interface ZHAGroupMember {
   ieee: string;
   endpoint_id: string;
@@ -282,6 +288,22 @@ export const addGroup = (
     members: membersToAdd,
   });
 
+export const fetchZHAConfiguration = (
+  hass: HomeAssistant
+): Promise<ZHAConfiguration> =>
+  hass.callWS({
+    type: "zha/configuration",
+  });
+
+export const updateZHAConfiguration = (
+  hass: HomeAssistant,
+  data: any
+): Promise<any> =>
+  hass.callWS({
+    type: "zha/configuration/update",
+    data: data,
+  });
+
 export const INITIALIZED = "INITIALIZED";
 export const INTERVIEW_COMPLETE = "INTERVIEW_COMPLETE";
 export const CONFIGURED = "CONFIGURED";

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -9,6 +9,7 @@ import {
   html,
   LitElement,
   property,
+  PropertyValues,
   TemplateResult,
 } from "lit-element";
 import { computeRTL } from "../../../../../common/util/compute_rtl";
@@ -20,6 +21,12 @@ import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../../../types";
 import "../../../ha-config-section";
+import "../../../../../components/ha-form/ha-form";
+import {
+  fetchZHAConfiguration,
+  updateZHAConfiguration,
+  ZHAConfiguration,
+} from "../../../../../data/zha";
 
 export const zhaTabs: PageNavigation[] = [
   {
@@ -51,6 +58,15 @@ class ZHAConfigDashboard extends LitElement {
 
   @property() public configEntryId?: string;
 
+  @property() private _configuration?: ZHAConfiguration;
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    if (this.hass) {
+      this._fetchConfiguration();
+    }
+  }
+
   protected render(): TemplateResult {
     return html`
       <hass-tabs-subpage
@@ -60,10 +76,11 @@ class ZHAConfigDashboard extends LitElement {
         .tabs=${zhaTabs}
         back-path="/config/integrations"
       >
-        <ha-card header="Zigbee Network">
-          <div class="card-content">
-            In the future you can change network settings for ZHA here.
-          </div>
+        <ha-card
+          header=${this.hass.localize(
+            "ui.panel.config.zha.configuration_page.shortcuts_title"
+          )}
+        >
           ${this.configEntryId
             ? html`<div class="card-actions">
                 <a
@@ -87,6 +104,38 @@ class ZHAConfigDashboard extends LitElement {
               </div>`
             : ""}
         </ha-card>
+        ${this._configuration
+          ? Object.entries(this._configuration.schemas).map(
+              ([section, schema]) => html` <ha-card
+                header=${this.hass.localize(
+                  `ui.panel.config.zha.configuration_page.${section}.title`
+                )}
+              >
+                <div class="card-content">
+                  <ha-form
+                    .schema=${schema}
+                    .data=${this._configuration!.data[section]}
+                    @value-changed=${this._dataChanged}
+                    .section=${section}
+                    .computeLabel=${this._computeLabelCallback(
+                      this.hass.localize,
+                      section
+                    )}
+                  ></ha-form>
+                </div>
+              </ha-card>`
+            )
+          : ""}
+        <ha-card>
+          <div class="card-actions">
+            <mwc-button @click=${this._updateConfiguration}>
+              ${this.hass.localize(
+                "ui.panel.config.zha.configuration_page.update_button"
+              )}
+            </mwc-button>
+          </div>
+        </ha-card>
+
         <a href="/config/zha/add" slot="fab">
           <ha-fab
             .label=${this.hass.localize("ui.panel.config.zha.add_device")}
@@ -100,6 +149,26 @@ class ZHAConfigDashboard extends LitElement {
     `;
   }
 
+  private async _fetchConfiguration(): Promise<void> {
+    this._configuration = await fetchZHAConfiguration(this.hass!);
+  }
+
+  private _dataChanged(ev) {
+    this._configuration!.data[ev.currentTarget!.section] = ev.detail.value;
+  }
+
+  private async _updateConfiguration(): Promise<any> {
+    await updateZHAConfiguration(this.hass!, this._configuration!.data);
+  }
+
+  private _computeLabelCallback(localize, section: string) {
+    // Returns a callback for ha-form to calculate labels per schema object
+    return (schema) =>
+      localize(
+        `ui.panel.config.zha.configuration_page.${section}.${schema.name}`
+      ) || schema.name;
+  }
+
   static get styles(): CSSResultArray {
     return [
       haStyle,

src/translations/en.json

@@ -2380,6 +2380,15 @@
             "manufacturer_code_override": "Manufacturer Code Override",
             "value": "Value"
           },
+          "configuration_page": {
+            "shortcuts_title": "Shortcuts",
+            "update_button": "Update Configuration",
+            "zha_options": {
+              "title": "Global Options",
+              "enable_identify_on_join": "Enable identify effect when devices join the network",
+              "default_light_transition": "Default light transition time (seconds)"
+            }
+          },
           "add_device_page": {
             "spinner": "Searching for ZHA Zigbee devices...",
             "pairing_mode": "Make sure your devices are in pairing mode. Check the instructions of your device on how to do this.",