Update ZHA config panel to handle the addition of ZHA devices for the Zigbee coordinator (#4541)

* only show when there are entities

* handle coordinator correctly

src/dialogs/zha-device-info-dialog/dialog-zha-device-info.ts

@@ -56,6 +56,7 @@ class DialogZHADeviceInfo extends LitElement {
                 .device=${this._device}
                 @zha-device-removed=${this._onDeviceRemoved}
                 .showEntityDetail=${false}
+                .showActions="${this._device.device_type !== "Coordinator"}"
               ></zha-device-card>
             `}
       </ha-paper-dialog>

src/panels/config/zha/zha-device-card.ts

@@ -224,13 +224,19 @@ class ZHADeviceCard extends LitElement {
             `
           )}
         </div>
-        <div class="card-actions">
+        ${
-          <mwc-button @click=${this._addToLovelaceView}>
+          this.device!.entities && this.device!.entities.length > 0
-            ${this.hass.localize(
+            ? html`
-              "ui.panel.config.devices.entities.add_entities_lovelace"
+                <div class="card-actions">
-            )}
+                  <mwc-button @click=${this._addToLovelaceView}>
-          </mwc-button>
+                    ${this.hass.localize(
-        </div>
+                      "ui.panel.config.devices.entities.add_entities_lovelace"
+                    )}
+                  </mwc-button>
+                </div>
+              `
+            : ""
+        }
         ${
           this.showEditableInfo
             ? html`

src/panels/config/zha/zha-device-page.ts

@@ -79,48 +79,53 @@ export class ZHADevicePage extends LitElement {
           .hass="${this.hass}"
           .device=${this.device}
         ></zha-node>
-        <zha-clusters
-          .hass="${this.hass}"
-          .isWide="${this.isWide}"
-          .selectedDevice="${this.device}"
-          @zha-cluster-selected="${this._onClusterSelected}"
-        ></zha-clusters>
-        ${this._selectedCluster
-          ? html`
-              <zha-cluster-attributes
-                .isWide="${this.isWide}"
-                .hass="${this.hass}"
-                .selectedNode="${this.device}"
-                .selectedCluster="${this._selectedCluster}"
-              ></zha-cluster-attributes>
 
-              <zha-cluster-commands
+        ${this.device && this.device.device_type !== "Coordinator"
-                .isWide="${this.isWide}"
-                .hass="${this.hass}"
-                .selectedNode="${this.device}"
-                .selectedCluster="${this._selectedCluster}"
-              ></zha-cluster-commands>
-            `
-          : ""}
-        ${this._bindableDevices.length > 0
           ? html`
-              <zha-device-binding-control
+              <zha-clusters
-                .isWide="${this.isWide}"
                 .hass="${this.hass}"
-                .selectedDevice="${this.device}"
-                .bindableDevices="${this._bindableDevices}"
-              ></zha-device-binding-control>
-            `
-          : ""}
-        ${this.device && this._groups.length > 0
-          ? html`
-              <zha-group-binding-control
                 .isWide="${this.isWide}"
-                .narrow="${this.narrow}"
-                .hass="${this.hass}"
                 .selectedDevice="${this.device}"
-                .groups="${this._groups}"
+                @zha-cluster-selected="${this._onClusterSelected}"
-              ></zha-group-binding-control>
+              ></zha-clusters>
+              ${this._selectedCluster
+                ? html`
+                    <zha-cluster-attributes
+                      .isWide="${this.isWide}"
+                      .hass="${this.hass}"
+                      .selectedNode="${this.device}"
+                      .selectedCluster="${this._selectedCluster}"
+                    ></zha-cluster-attributes>
+
+                    <zha-cluster-commands
+                      .isWide="${this.isWide}"
+                      .hass="${this.hass}"
+                      .selectedNode="${this.device}"
+                      .selectedCluster="${this._selectedCluster}"
+                    ></zha-cluster-commands>
+                  `
+                : ""}
+              ${this._bindableDevices.length > 0
+                ? html`
+                    <zha-device-binding-control
+                      .isWide="${this.isWide}"
+                      .hass="${this.hass}"
+                      .selectedDevice="${this.device}"
+                      .bindableDevices="${this._bindableDevices}"
+                    ></zha-device-binding-control>
+                  `
+                : ""}
+              ${this.device && this._groups.length > 0
+                ? html`
+                    <zha-group-binding-control
+                      .isWide="${this.isWide}"
+                      .narrow="${this.narrow}"
+                      .hass="${this.hass}"
+                      .selectedDevice="${this.device}"
+                      .groups="${this._groups}"
+                    ></zha-group-binding-control>
+                  `
+                : ""}
             `
           : ""}
         <div class="spacer" />
@@ -137,14 +142,20 @@ export class ZHADevicePage extends LitElement {
   private async _fetchData(): Promise<void> {
     if (this.ieee && this.hass) {
       this.device = await fetchZHADevice(this.hass, this.ieee);
-      this._bindableDevices = (
+      this._bindableDevices =
-        await fetchBindableDevices(this.hass, this.ieee)
+        this.device && this.device.device_type !== "Coordinator"
-      ).sort(sortZHADevices);
+          ? (await fetchBindableDevices(this.hass, this.ieee)).sort(
+              sortZHADevices
+            )
+          : [];
     }
   }
 
   private async _fetchGroups() {
-    this._groups = (await fetchGroups(this.hass!)).sort(sortZHAGroups);
+    this._groups =
+      this.device && this.device.device_type !== "Coordinator"
+        ? (await fetchGroups(this.hass!)).sort(sortZHAGroups)
+        : [];
   }
 
   static get styles(): CSSResult[] {

src/panels/config/zha/zha-node.ts

@@ -67,6 +67,7 @@ export class ZHANode extends LitElement {
                   showName
                   showModelInfo
                   .showEntityDetail=${false}
+                  .showActions="${this.device.device_type !== "Coordinator"}"
                   @zha-device-removed=${this._onDeviceRemoved}
                 ></zha-device-card>
               `