Add group binding to the ZHA config panel and misc. cleanup

src/data/zha.ts

@@ -126,6 +126,32 @@ export const unbindDevices = (
     target_ieee: targetIEEE,
   });
 
+export const bindDeviceToGroup = (
+  hass: HomeAssistant,
+  deviceIEEE: string,
+  groupId: number,
+  clusters: Cluster[]
+): Promise<void> =>
+  hass.callWS({
+    type: "zha/groups/bind",
+    source_ieee: deviceIEEE,
+    group_id: groupId,
+    bindings: clusters,
+  });
+
+export const unbindDeviceFromGroup = (
+  hass: HomeAssistant,
+  deviceIEEE: string,
+  groupId: number,
+  clusters: Cluster[]
+): Promise<void> =>
+  hass.callWS({
+    type: "zha/groups/unbind",
+    source_ieee: deviceIEEE,
+    group_id: groupId,
+    bindings: clusters,
+  });
+
 export const readAttributeValue = (
   hass: HomeAssistant,
   data: ReadAttributeServiceData

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

@@ -54,9 +54,8 @@ class DialogZHADeviceInfo extends LitElement {
                 class="card"
                 .hass=${this.hass}
                 .device=${this._device}
-                showActions
-                isJoinPage
                 @zha-device-removed=${this._onDeviceRemoved}
+                .showEntityDetail=${false}
               ></zha-device-card>
             `}
       </ha-paper-dialog>

src/panels/config/zha/functions.ts

@@ -1,4 +1,4 @@
-import { ZHADevice, ZHAGroup } from "../../../data/zha";
+import { ZHADevice, ZHAGroup, Cluster } from "../../../data/zha";
 
 export const formatAsPaddedHex = (value: string | number): string => {
   let hex = value;
@@ -19,3 +19,9 @@ export const sortZHAGroups = (a: ZHAGroup, b: ZHAGroup): number => {
   const nameb = b.name;
   return nameA.localeCompare(nameb);
 };
+
+export const computeClusterKey = (cluster: Cluster): string => {
+  return `${cluster.name} (Endpoint id: ${
+    cluster.endpoint_id
+  }, Id: ${formatAsPaddedHex(cluster.id)}, Type: ${cluster.type})`;
+};

src/panels/config/zha/zha-add-devices-page.ts

@@ -120,7 +120,7 @@ class ZHAAddDevicesPage extends LitElement {
                       .narrow=${!this.isWide}
                       .showHelp=${this._showHelp}
                       .showActions=${!this._active}
-                      isJoinPage
+                      .showEntityDetail=${false}
                     ></zha-device-card>
                   `
                 )}

src/panels/config/zha/zha-add-group-page.ts

@@ -117,7 +117,10 @@ export class ZHAAddGroupPage extends LitElement {
   private _handleAddSelectionChanged(ev: CustomEvent): void {
     const changedSelection = ev.detail as SelectionChangedEvent;
     const entity = changedSelection.id;
-    if (changedSelection.selected) {
+    if (
+      changedSelection.selected &&
+      !this._selectedDevicesToAdd.includes(entity)
+    ) {
       this._selectedDevicesToAdd.push(entity);
     } else {
       const index = this._selectedDevicesToAdd.indexOf(entity);

src/panels/config/zha/zha-clusters-data-table.ts

@@ -0,0 +1,92 @@
+import "../../../components/data-table/ha-data-table";
+import "../../../components/entity/ha-state-icon";
+
+import memoizeOne from "memoize-one";
+
+import {
+  LitElement,
+  html,
+  TemplateResult,
+  property,
+  customElement,
+} from "lit-element";
+import { HomeAssistant } from "../../../types";
+// tslint:disable-next-line
+import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
+// tslint:disable-next-line
+import { Cluster } from "../../../data/zha";
+import { formatAsPaddedHex } from "./functions";
+
+export interface ClusterRowData extends Cluster {
+  cluster?: Cluster;
+  cluster_id?: string;
+}
+
+@customElement("zha-clusters-data-table")
+export class ZHAClustersDataTable extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public narrow = false;
+  @property() public clusters: Cluster[] = [];
+
+  private _clusters = memoizeOne((clusters: Cluster[]) => {
+    let outputClusters: ClusterRowData[] = clusters;
+
+    outputClusters = outputClusters.map((cluster) => {
+      return {
+        ...cluster,
+        cluster_id: cluster.endpoint_id + "-" + cluster.id,
+      };
+    });
+
+    return outputClusters;
+  });
+
+  private _columns = memoizeOne(
+    (narrow: boolean): DataTableColumnContainer =>
+      narrow
+        ? {
+            name: {
+              title: "Name",
+              sortable: true,
+              direction: "asc",
+            },
+          }
+        : {
+            name: {
+              title: "Name",
+              sortable: true,
+              direction: "asc",
+            },
+            id: {
+              title: "ID",
+              template: (id: number) => {
+                return html`
+                  ${formatAsPaddedHex(id)}
+                `;
+              },
+              sortable: true,
+            },
+            endpoint_id: {
+              title: "Endpoint ID",
+              sortable: true,
+            },
+          }
+  );
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-data-table
+        .columns=${this._columns(this.narrow)}
+        .data=${this._clusters(this.clusters)}
+        .id=${"cluster_id"}
+        selectable
+      ></ha-data-table>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "zha-clusters-data-table": ZHAClustersDataTable;
+  }
+}

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

@@ -21,7 +21,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { Cluster, fetchClustersForZhaNode, ZHADevice } from "../../../data/zha";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
-import { formatAsPaddedHex } from "./functions";
+import { computeClusterKey } from "./functions";
 import { ItemSelectedEvent } from "./types";
 
 declare global {
@@ -33,12 +33,6 @@ declare global {
   }
 }
 
-const computeClusterKey = (cluster: Cluster): string => {
-  return `${cluster.name} (Endpoint id: ${
-    cluster.endpoint_id
-  }, Id: ${formatAsPaddedHex(cluster.id)}, Type: ${cluster.type})`;
-};
-
 export class ZHAClusters extends LitElement {
   @property() public hass?: HomeAssistant;
   @property() public isWide?: boolean;

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

@@ -48,7 +48,6 @@ class ZHAConfigDashboard extends LitElement {
         ...device,
         name: device.user_given_name ? device.user_given_name : device.name,
         nwk: formatAsPaddedHex(device.nwk),
-        id: device.ieee,
       };
     });
 
@@ -142,6 +141,7 @@ class ZHAConfigDashboard extends LitElement {
               .columns=${this._columns(this.narrow)}
               .data=${this._memoizeDevices(this._devices)}
               @row-click=${this._handleDeviceClicked}
+              .id=${"ieee"}
             ></ha-data-table>
           </ha-card>
         </ha-config-section>

src/panels/config/zha/zha-binding.ts → src/panels/config/zha/zha-device-binding.ts

@@ -24,8 +24,8 @@ import { HomeAssistant } from "../../../types";
 import { ItemSelectedEvent } from "./types";
 import "@polymer/paper-item/paper-item";
 
-@customElement("zha-binding-control")
-export class ZHABindingControl extends LitElement {
+@customElement("zha-device-binding-control")
+export class ZHADeviceBindingControl extends LitElement {
   @property() public hass?: HomeAssistant;
   @property() public isWide?: boolean;
   @property() public selectedDevice?: ZHADevice;
@@ -175,7 +175,9 @@ export class ZHABindingControl extends LitElement {
 
         .helpText {
           color: grey;
-          padding: 16px;
+          padding-left: 28px;
+          padding-right: 28px;
+          padding-bottom: 10px;
         }
 
         .header {
@@ -204,6 +206,6 @@ export class ZHABindingControl extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "zha-binding-control": ZHABindingControl;
+    "zha-device-binding-control": ZHADeviceBindingControl;
   }
 }

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

@@ -58,8 +58,11 @@ class ZHADeviceCard extends LitElement {
   @property() public device?: ZHADevice;
   @property({ type: Boolean }) public narrow?: boolean;
   @property({ type: Boolean }) public showHelp?: boolean = false;
-  @property({ type: Boolean }) public showActions?: boolean;
-  @property({ type: Boolean }) public isJoinPage?: boolean;
+  @property({ type: Boolean }) public showActions?: boolean = true;
+  @property({ type: Boolean }) public showName?: boolean = true;
+  @property({ type: Boolean }) public showEntityDetail?: boolean = true;
+  @property({ type: Boolean }) public showModelInfo?: boolean = true;
+  @property({ type: Boolean }) public showEditableInfo?: boolean = true;
   @property() private _serviceData?: NodeServiceData;
   @property() private _areas: AreaRegistryEntry[] = [];
   @property() private _selectedAreaIndex: number = -1;
@@ -137,9 +140,9 @@ class ZHADeviceCard extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <ha-card header="${this.isJoinPage ? this.device!.name : ""}">
+      <ha-card header="${this.showName ? this.device!.name : ""}">
         ${
-          this.isJoinPage
+          this.showModelInfo
             ? html`
                 <div class="info">
                   <div class="model">${this.device!.model}</div>
@@ -202,7 +205,7 @@ class ZHADeviceCard extends LitElement {
                   .stateObj="${this.hass!.states[entity.entity_id]}"
                   slot="item-icon"
                 ></state-badge>
-                ${!this.isJoinPage
+                ${this.showEntityDetail
                   ? html`
                       <paper-item-body>
                         <div class="name">
@@ -218,40 +221,48 @@ class ZHADeviceCard extends LitElement {
             `
           )}
         </div>
-        <div class="editable">
-          <paper-input
-            type="string"
-            @change="${this._saveCustomName}"
-            .value="${this._userGivenName}"
-            placeholder="${this.hass!.localize(
-              "ui.dialogs.zha_device_info.zha_device_card.device_name_placeholder"
-            )}"
-          ></paper-input>
-        </div>
-        <div class="node-picker">
-          <paper-dropdown-menu
-            label="${this.hass!.localize(
-              "ui.dialogs.zha_device_info.zha_device_card.area_picker_label"
-            )}"
-            class="menu"
-          >
-            <paper-listbox
-              slot="dropdown-content"
-              .selected="${this._selectedAreaIndex}"
-              @iron-select="${this._selectedAreaChanged}"
-            >
-              <paper-item>
-                ${this.hass!.localize("ui.dialogs.zha_device_info.no_area")}
-              </paper-item>
+        ${
+          this.showEditableInfo
+            ? html`
+                <div class="editable">
+                  <paper-input
+                    type="string"
+                    @change="${this._saveCustomName}"
+                    .value="${this._userGivenName}"
+                    .placeholder="${this.hass!.localize(
+                      "ui.dialogs.zha_device_info.zha_device_card.device_name_placeholder"
+                    )}"
+                  ></paper-input>
+                </div>
+                <div class="node-picker">
+                  <paper-dropdown-menu
+                    .label="${this.hass!.localize(
+                      "ui.dialogs.zha_device_info.zha_device_card.area_picker_label"
+                    )}"
+                    class="menu"
+                  >
+                    <paper-listbox
+                      slot="dropdown-content"
+                      .selected="${this._selectedAreaIndex}"
+                      @iron-select="${this._selectedAreaChanged}"
+                    >
+                      <paper-item>
+                        ${this.hass!.localize(
+                          "ui.dialogs.zha_device_info.no_area"
+                        )}
+                      </paper-item>
 
-              ${this._areas.map(
-                (entry) => html`
-                  <paper-item area="${entry}">${entry.name}</paper-item>
-                `
-              )}
-            </paper-listbox>
-          </paper-dropdown-menu>
-        </div>
+                      ${this._areas.map(
+                        (entry) => html`
+                          <paper-item>${entry.name}</paper-item>
+                        `
+                      )}
+                    </paper-listbox>
+                  </paper-dropdown-menu>
+                </div>
+              `
+            : ""
+        }
         ${
           this.showActions
             ? html`
@@ -275,6 +286,9 @@ class ZHADeviceCard extends LitElement {
                     .hass="${this.hass}"
                     domain="zha"
                     service="remove"
+                    .confirmation=${this.hass!.localize(
+                      "ui.dialogs.zha_device_info.confirmations.remove"
+                    )}
                     .serviceData="${this._serviceData}"
                   >
                     ${this.hass!.localize(