Show Thread panel on thread config entry

src/data/thread.ts → src/data/otbr.ts

@@ -1,11 +1,11 @@
 import { HomeAssistant } from "../types";
 
-export interface ThreadInfo {
+export interface OTBRInfo {
   url: string;
   active_dataset_tlvs: string;
 }
 
-export const threadGetInfo = (hass: HomeAssistant): Promise<ThreadInfo> =>
+export const getOTBRInfo = (hass: HomeAssistant): Promise<OTBRInfo> =>
   hass.callWS({
     type: "otbr/info",
   });

src/panels/config/integrations/ha-integration-card.ts

@@ -75,11 +75,11 @@ import type { ConfigEntryExtended } from "./ha-config-integrations";
 import "./ha-integration-header";
 
 const integrationsWithPanel = {
+  matter: "/config/matter",
   mqtt: "/config/mqtt",
+  thread: "/config/thread",
   zha: "/config/zha/dashboard",
   zwave_js: "/config/zwave_js/dashboard",
-  matter: "/config/matter",
-  otbr: "/config/thread",
 };
 
 @customElement("ha-integration-card")

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

@@ -5,37 +5,53 @@ import "../../../../../components/ha-card";
 import "../../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
-import { threadGetInfo, ThreadInfo } from "../../../../../data/thread";
+import { getOTBRInfo, OTBRInfo } from "../../../../../data/otbr";
+import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
+import { showConfigFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-config-flow";
 
 @customElement("thread-config-panel")
 export class ThreadConfigPanel extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @state() private _info?: ThreadInfo;
+  @state() private _info?: OTBRInfo;
 
   protected render(): TemplateResult {
     return html`
       <hass-subpage .narrow=${this.narrow} .hass=${this.hass} header="Thread">
         <div class="content">
-          <ha-card header="Thread Border Router">
-            <div class="card-content">
-              ${!this._info
-                ? html`<ha-circular-progress active></ha-circular-progress>`
-                : html`
-                    <table>
-                      <tr>
-                        <td>URL</td>
-                        <td>${this._info.url}</td>
-                      </tr>
-                      <tr>
-                        <td>Active Dataset TLVs</td>
-                        <td>${this._info.active_dataset_tlvs || "-"}</td>
-                      </tr>
-                    </table>
-                  `}
-            </div>
+          <ha-card header="Open Thread Border Router">
+            ${isComponentLoaded(this.hass, "otbr")
+              ? html`
+                  <div class="card-content">
+                    ${!this._info
+                      ? html`<ha-circular-progress
+                          active
+                        ></ha-circular-progress>`
+                      : html`
+                          <table>
+                            <tr>
+                              <td>URL</td>
+                              <td>${this._info.url}</td>
+                            </tr>
+                            <tr>
+                              <td>Active Dataset TLVs</td>
+                              <td>${this._info.active_dataset_tlvs || "-"}</td>
+                            </tr>
+                          </table>
+                        `}
+                  </div>
+                `
+              : html`
+                  <div class="card-content">No border routers found.</div>
+                  <div class="card-actions">
+                    <mwc-button
+                      @click=${this._addOTBR}
+                      label="Add border router"
+                    ></mwc-button>
+                  </div>
+                `}
           </ha-card>
         </div>
       </hass-subpage>
@@ -45,8 +61,24 @@ export class ThreadConfigPanel extends LitElement {
   protected override firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
-    threadGetInfo(this.hass).then((info) => {
-      this._info = info;
+    this._refresh();
+  }
+
+  private _refresh() {
+    if (isComponentLoaded(this.hass, "otbr")) {
+      getOTBRInfo(this.hass).then((info) => {
+        this._info = info;
+      });
+    }
+  }
+
+  private _addOTBR() {
+    showConfigFlowDialog(this, {
+      dialogClosedCallback: () => {
+        this._refresh();
+      },
+      startFlowHandler: "otbr",
+      showAdvanced: this.hass.userData?.showAdvanced,
     });
   }