Clean up the ZHA pairing UI (#14287)

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

@@ -190,12 +190,19 @@ class ZHAAddDevicesPage extends LitElement {
     }
   }
 
+  private _deactivate(): void {
+    this._active = false;
+    if (this._addDevicesTimeoutHandle) {
+      clearTimeout(this._addDevicesTimeoutHandle);
+    }
+  }
+
   private _subscribe(): void {
     if (!this.hass) {
       return;
     }
     this._active = true;
-    const data: any = { type: "zha/devices/permit" };
+    const data: any = { type: "zha/devices/permit", duration: 254 };
     if (this._ieeeAddress) {
       data.ieee = this._ieeeAddress;
     }
@@ -204,8 +211,8 @@ class ZHAAddDevicesPage extends LitElement {
       data
     );
     this._addDevicesTimeoutHandle = setTimeout(
-      () => this._unsubscribe(),
-      120000
+      () => this._deactivate(),
+      254000
     );
   }
 

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

@@ -73,9 +73,9 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
     );
 
     return html`
-      <ha-card .header=${this.device.user_given_name || this.device.name}>
+      <ha-card>
         <div class="card-content">
-          <div class="info">
+          <div>
             <div class="model">${this.device.model}</div>
             <div class="manuf">
               ${this.hass.localize(
@@ -87,15 +87,17 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
           </div>
 
           <div class="device-entities">
-            ${entities.map(
-              (entity) => html`
-                <state-badge
-                  @click=${this._openMoreInfo}
-                  .title=${entity.stateName!}
-                  .stateObj=${this.hass!.states[entity.entity_id]}
-                  slot="item-icon"
-                ></state-badge>
-              `
+            ${entities.map((entity) =>
+              !entity.disabled_by
+                ? html`
+                    <state-badge
+                      @click=${this._openMoreInfo}
+                      .title=${entity.stateName!}
+                      .stateObj=${this.hass!.states[entity.entity_id]}
+                      slot="item-icon"
+                    ></state-badge>
+                  `
+                : ""
             )}
           </div>
           <paper-input
@@ -226,6 +228,10 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
         state-badge {
           cursor: pointer;
         }
+
+        ha-card {
+          border: none;
+        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts

@@ -109,6 +109,13 @@ class ZHADevicePairingStatusCard extends LitElement {
           padding: 8px;
           text-align: center;
           margin-bottom: 20px;
+          /* Padding is subtracted for nested elements with border radiuses */
+          border-top-left-radius: calc(
+            var(--ha-card-border-radius, 12px) - 2px
+          );
+          border-top-right-radius: calc(
+            var(--ha-card-border-radius, 12px) - 2px
+          );
         }
         .discovered.initialized .header {
           background: var(--success-color);