ZHA: Bring back clusters UI (#6191)

src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts

@@ -17,8 +17,9 @@ import {
   reconfigureNode,
 } from "../../../../../../data/zha";
 import { navigate } from "../../../../../../common/navigate";
-import { showZHADeviceZigbeeInfoDialog } from "../../../../../../dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info";
+import { showZHADeviceZigbeeInfoDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info";
 import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
+import { showZHAClusterDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-cluster";
 
 @customElement("ha-device-actions-zha")
 export class HaDeviceActionsZha extends LitElement {
@@ -72,6 +73,11 @@ export class HaDeviceActionsZha extends LitElement {
                 "ui.dialogs.zha_device_info.buttons.zigbee_information"
               )}
             </mwc-button>
+            <mwc-button @click=${this._showClustersDialog}>
+              ${this.hass!.localize(
+                "ui.dialogs.zha_device_info.buttons.clusters"
+              )}
+            </mwc-button>
             <mwc-button class="warning" @click=${this._removeDevice}>
               ${this.hass!.localize(
                 "ui.dialogs.zha_device_info.buttons.remove"
@@ -82,6 +88,10 @@ export class HaDeviceActionsZha extends LitElement {
     `;
   }
 
+  private async _showClustersDialog(): Promise<void> {
+    await showZHAClusterDialog(this, { device: this._zhaDevice! });
+  }
+
   private async _onReconfigureNodeClick(): Promise<void> {
     if (!this.hass) {
       return;

src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts

@@ -0,0 +1,143 @@
+import {
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+  PropertyValues,
+} from "lit-element";
+import "../../../../../components/ha-code-editor";
+import { createCloseHeading } from "../../../../../components/ha-dialog";
+import { haStyleDialog } from "../../../../../resources/styles";
+import { HomeAssistant } from "../../../../../types";
+import { ZHADeviceZigbeeInfoDialogParams } from "./show-dialog-zha-device-zigbee-info";
+import {
+  ZHADevice,
+  Cluster,
+  ZHAGroup,
+  fetchBindableDevices,
+  fetchGroups,
+} from "../../../../../data/zha";
+import { ZHAClusterSelectedParams } from "./types";
+import "./zha-cluster-attributes";
+import "./zha-cluster-commands";
+import "./zha-clusters";
+import "./zha-device-binding";
+import "./zha-group-binding";
+import { HASSDomEvent } from "../../../../../common/dom/fire_event";
+import { sortZHADevices, sortZHAGroups } from "./functions";
+
+@customElement("dialog-zha-cluster")
+class DialogZHACluster extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() private _device?: ZHADevice;
+
+  @property() private _selectedCluster?: Cluster;
+
+  @property() private _bindableDevices: ZHADevice[] = [];
+
+  @property() private _groups: ZHAGroup[] = [];
+
+  public async showDialog(
+    params: ZHADeviceZigbeeInfoDialogParams
+  ): Promise<void> {
+    this._device = params.device;
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.update(changedProperties);
+    if (changedProperties.has("_device")) {
+      this._fetchData();
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this._device) {
+      return html``;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        hideActions
+        @closing="${this._close}"
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.panel.config.zha.clusters.header")
+        )}
+      >
+        <zha-clusters
+          .hass=${this.hass}
+          .selectedDevice="${this._device}"
+          @zha-cluster-selected="${this._onClusterSelected}"
+        ></zha-clusters>
+        ${this._selectedCluster
+          ? html`
+              <zha-cluster-attributes
+                .hass=${this.hass}
+                .selectedNode="${this._device}"
+                .selectedCluster="${this._selectedCluster}"
+              ></zha-cluster-attributes>
+              <zha-cluster-commands
+                .hass=${this.hass}
+                .selectedNode="${this._device}"
+                .selectedCluster="${this._selectedCluster}"
+              ></zha-cluster-commands>
+            `
+          : ""}
+        ${this._bindableDevices.length > 0
+          ? html`
+              <zha-device-binding-control
+                .hass=${this.hass}
+                .selectedDevice="${this._device}"
+                .bindableDevices="${this._bindableDevices}"
+              ></zha-device-binding-control>
+            `
+          : ""}
+        ${this._device && this._groups.length > 0
+          ? html`
+              <zha-group-binding-control
+                .hass=${this.hass}
+                .selectedDevice="${this._device}"
+                .groups="${this._groups}"
+              ></zha-group-binding-control>
+            `
+          : ""}
+      </ha-dialog>
+    `;
+  }
+
+  private _onClusterSelected(
+    selectedClusterEvent: HASSDomEvent<ZHAClusterSelectedParams>
+  ): void {
+    this._selectedCluster = selectedClusterEvent.detail.cluster;
+  }
+
+  private _close(): void {
+    this._device = undefined;
+  }
+
+  private async _fetchData(): Promise<void> {
+    if (this._device && this.hass) {
+      this._bindableDevices =
+        this._device && this._device.device_type !== "Coordinator"
+          ? (await fetchBindableDevices(this.hass, this._device.ieee)).sort(
+              sortZHADevices
+            )
+          : [];
+      this._groups = (await fetchGroups(this.hass!)).sort(sortZHAGroups);
+    }
+  }
+
+  static get styles(): CSSResult {
+    return haStyleDialog;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-zha-cluster": DialogZHACluster;
+  }
+}

src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts

@@ -6,10 +6,10 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import "../../components/ha-code-editor";
+import "../../../../../components/ha-code-editor";
-import { createCloseHeading } from "../../components/ha-dialog";
+import { createCloseHeading } from "../../../../../components/ha-dialog";
-import { haStyleDialog } from "../../resources/styles";
+import { haStyleDialog } from "../../../../../resources/styles";
-import { HomeAssistant } from "../../types";
+import { HomeAssistant } from "../../../../../types";
 import { ZHADeviceZigbeeInfoDialogParams } from "./show-dialog-zha-device-zigbee-info";
 
 @customElement("dialog-zha-device-zigbee-info")

src/panels/config/integrations/integration-panels/zha/show-dialog-zha-cluster.ts

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import { ZHADevice } from "../../../../../data/zha";
+
+export interface ZHAClusterDialogParams {
+  device: ZHADevice;
+}
+
+export const loadZHAClusterDialog = () =>
+  import(
+    /* webpackChunkName: "dialog-zha-device-zigbee-info" */ "./dialog-zha-cluster"
+  );
+
+export const showZHAClusterDialog = (
+  element: HTMLElement,
+  params: ZHAClusterDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-zha-cluster",
+    dialogImport: loadZHAClusterDialog,
+    dialogParams: params,
+  });
+};

src/panels/config/integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info.ts

@@ -1,5 +1,5 @@
-import { fireEvent } from "../../common/dom/fire_event";
+import { fireEvent } from "../../../../../common/dom/fire_event";
-import { ZHADevice } from "../../data/zha";
+import { ZHADevice } from "../../../../../data/zha";
 
 export interface ZHADeviceZigbeeInfoDialogParams {
   device: ZHADevice;

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

@@ -64,9 +64,6 @@ export class ZHAClusters extends LitElement {
     return html`
       <ha-config-section .isWide="${this.isWide}">
         <div class="header" slot="header">
-          <span>
-            ${this.hass!.localize("ui.panel.config.zha.clusters.header")}
-          </span>
           <ha-icon-button
             class="toggle-help-icon"
             @click="${this._onHelpTap}"

src/translations/en.json

@@ -443,6 +443,7 @@
         "buttons": {
           "add": "Add Devices via this device",
           "remove": "Remove Device",
+          "clusters": "Manage Clusters",
           "reconfigure": "Reconfigure Device",
           "zigbee_information": "Zigbee device signature"
         },