Add targeted joins to ZHA config panel (#3048)

* initial targeted add

* mains powered devices only

* fix prop reference

* import

* fix targeted join

src/data/zha.ts

@@ -16,6 +16,7 @@ export interface ZHADevice {
   manufacturer_code: number;
   device_reg_id: string;
   user_given_name?: string;
+  power_source?: string;
   area_id?: string;
 }
 

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

@@ -18,23 +18,28 @@ import {
 
 import { ZHADevice } from "../../../data/zha";
 import { haStyle } from "../../../resources/styles";
-import { HomeAssistant } from "../../../types";
+import { HomeAssistant, Route } from "../../../types";
 
 @customElement("zha-add-devices-page")
 class ZHAAddDevicesPage extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public isWide?: boolean;
+  @property() public route?: Route;
   @property() private _error?: string;
   @property() private _discoveredDevices: ZHADevice[] = [];
   @property() private _formattedEvents: string = "";
   @property() private _active: boolean = false;
   @property() private _showHelp: boolean = false;
+  private _ieeeAddress?: string;
   private _addDevicesTimeoutHandle: any = undefined;
   private _subscribed?: Promise<() => Promise<void>>;
 
   public connectedCallback(): void {
     super.connectedCallback();
-    this._subscribe();
+    if (this.route && this.route.path && this.route.path !== "") {
+      this._ieeeAddress = this.route.path.substring(1);
+    }
+    this._subscribe(this._ieeeAddress);
   }
 
   public disconnectedCallback(): void {
@@ -151,10 +156,14 @@ class ZHAAddDevicesPage extends LitElement {
     }
   }
 
-  private _subscribe(): void {
+  private _subscribe(ieeeAddress: string | undefined): void {
+    const data: any = { type: "zha/devices/permit" };
+    if (ieeeAddress) {
+      data.ieee = ieeeAddress;
+    }
     this._subscribed = this.hass!.connection.subscribeMessage(
       (message) => this._handleMessage(message),
-      { type: "zha/devices/permit" }
+      data
     );
     this._active = true;
     this._addDevicesTimeoutHandle = setTimeout(

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

@@ -1,4 +1,5 @@
 import "../../../components/buttons/ha-call-service-button";
+import "../../../components/ha-service-description";
 import "../../../components/entity/state-badge";
 import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
@@ -34,6 +35,7 @@ import { reconfigureNode, ZHADevice } from "../../../data/zha";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { ItemSelectedEvent, NodeServiceData } from "./types";
+import { navigate } from "../../../common/navigate";
 
 declare global {
   // for fire event
@@ -222,6 +224,23 @@ class ZHADeviceCard extends LitElement {
                         </div>
                       `
                     : ""}
+                  ${this.device!.power_source === "Mains"
+                    ? html`
+                        <mwc-button @click=${this._onAddDevicesClick}>
+                          Add Devices
+                        </mwc-button>
+                        ${this.showHelp
+                          ? html`
+                              <ha-service-description
+                                .hass="${this.hass}"
+                                domain="zha"
+                                service="permit"
+                                class="help-text2"
+                              />
+                            `
+                          : ""}
+                      `
+                    : ""}
                 </div>
               `
             : ""
@@ -281,6 +300,10 @@ class ZHADeviceCard extends LitElement {
     this.device!.area_id = newAreaId;
   }
 
+  private _onAddDevicesClick() {
+    navigate(this, "add/" + this.device!.ieee);
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,