Move send credentials to phone to main Thread configuration panel (#21066)

Move send credentials to phone to main view

Currently the button is hidden in the more info dialog, and even there
it seems that it is currently not rendered correctly.

This moves the button to the main view, make it more obvious while
still keeping it out of the way if the feature is not applicable.

src/data/otbr.ts

@@ -2,6 +2,7 @@ import { HomeAssistant } from "../types";
 
 export interface OTBRInfo {
   active_dataset_tlvs: string;
+  border_agent_id: string;
   channel: number;
   extended_address: string;
   url: string;

src/panels/config/integrations/integration-panels/thread/dialog-thread-dataset.ts

@@ -36,14 +36,8 @@ class DialogThreadDataset extends LitElement implements HassDialog {
       dataset.extended_pan_id &&
       otbrInfo.active_dataset_tlvs?.includes(dataset.extended_pan_id);
 
-    const canImportKeychain =
-      hasOTBR &&
-      this.hass.auth.external?.config.canTransferThreadCredentialsToKeychain &&
-      network.routers?.length;
-
     return html`<ha-dialog
       open
-      .hideActions=${!canImportKeychain}
       @closed=${this.closeDialog}
       .heading=${createCloseHeading(this.hass, network.name)}
     >
@@ -59,28 +53,8 @@ class DialogThreadDataset extends LitElement implements HassDialog {
               Active dataset TLVs: ${otbrInfo.active_dataset_tlvs}`
           : nothing}
       </div>
-      ${canImportKeychain
-        ? html`<ha-button slot="primary-action" @click=${this._sendCredentials}
-            >Send credentials to phone</ha-button
-          >`
-        : nothing}
     </ha-dialog>`;
   }
-
-  private _sendCredentials() {
-    this.hass.auth.external!.fireMessage({
-      type: "thread/store_in_platform_keychain",
-      payload: {
-        mac_extended_address:
-          this._params?.network.dataset?.preferred_extended_address ||
-          this._params!.network.routers![0]!.extended_address,
-        border_agent_id:
-          this._params?.network.dataset?.preferred_border_agent_id ||
-          this._params!.network.routers![0]!.border_agent_id,
-        active_operational_dataset: this._params!.otbrInfo!.active_dataset_tlvs,
-      },
-    });
-  }
 }
 
 declare global {

src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts

@@ -160,6 +160,14 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
   }
 
   private _renderNetwork(network: ThreadNetwork) {
+    const canImportKeychain =
+      this.hass.auth.external?.config.canTransferThreadCredentialsToKeychain &&
+      network.dataset?.extended_pan_id &&
+      this._otbrInfo &&
+      this._otbrInfo?.active_dataset_tlvs?.includes(
+        network.dataset.extended_pan_id
+      );
+
     return html`<ha-card>
       <div class="card-header">
         ${network.name}${network.dataset
@@ -303,9 +311,30 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
             >
           </div>`
         : ""}
+      ${canImportKeychain
+        ? html`<div class="card-actions">
+            <mwc-button @click=${this._sendCredentials}
+              >Send credentials to phone</mwc-button
+            >
+          </div>`
+        : ""}
     </ha-card>`;
   }
 
+  private _sendCredentials() {
+    if (!this._otbrInfo) {
+      return;
+    }
+    this.hass.auth.external!.fireMessage({
+      type: "thread/store_in_platform_keychain",
+      payload: {
+        mac_extended_address: this._otbrInfo.extended_address,
+        border_agent_id: this._otbrInfo.border_agent_id ?? "",
+        active_operational_dataset: this._otbrInfo.active_dataset_tlvs ?? "",
+      },
+    });
+  }
+
   private async _showDatasetInfo(ev: Event) {
     const network = (ev.currentTarget as any).network as ThreadNetwork;
     showThreadDatasetDialog(this, { network, otbrInfo: this._otbrInfo });