From a497f42f734e70438323556ca9f16bf8906e99c3 Mon Sep 17 00:00:00 2001
From: Stefan Agner <stefan@agner.ch>
Date: Wed, 12 Jun 2024 13:35:29 +0200
Subject: [PATCH] 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                              |  1 +
 .../thread/dialog-thread-dataset.ts           | 26 -----------------
 .../thread/thread-config-panel.ts             | 29 +++++++++++++++++++
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/data/otbr.ts b/src/data/otbr.ts
index 604be8982a..8af577efd3 100644
--- a/src/data/otbr.ts
+++ b/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;
diff --git a/src/panels/config/integrations/integration-panels/thread/dialog-thread-dataset.ts b/src/panels/config/integrations/integration-panels/thread/dialog-thread-dataset.ts
index b83c576840..cf022e8422 100644
--- a/src/panels/config/integrations/integration-panels/thread/dialog-thread-dataset.ts
+++ b/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 {
diff --git a/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts b/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts
index e002c73f6c..3d99a4f9e3 100644
--- a/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts
+++ b/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 });