From 767b2b6b9c289db00b2a36160ce20abb59dadd41 Mon Sep 17 00:00:00 2001
From: Cody C <50791984+codyc1515@users.noreply.github.com>
Date: Wed, 31 Jan 2024 01:39:57 +1300
Subject: [PATCH] Add documentation link to ZHA pairing mode page (#19518)

Add pairing instructions docs link to ZHA Add Devices page

While we ask people to refer to the instructions of their device, they may need some further support to locate this. We can direct them to the ZHA documentation.
---
 .../zha/zha-add-devices-page.ts               | 21 +++++++++++++++++--
 src/translations/en.json                      |  3 ++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
index cd88f87114..c33ea1a61c 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
@@ -17,6 +17,7 @@ import {
 import "../../../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant, Route } from "../../../../../types";
+import { documentationUrl } from "../../../../../util/documentation-url";
 import { zhaTabs } from "./zha-config-dashboard";
 import "./zha-device-pairing-status-card";
 import "../../../../../components/ha-textarea";
@@ -118,8 +119,24 @@ class ZHAAddDevicesPage extends LitElement {
             ? html`
                 <div class="discovery-text">
                   <h4>
-                    ${this.hass!.localize(
-                      "ui.panel.config.zha.add_device_page.pairing_mode"
+                    ${this.hass.localize(
+                      "ui.panel.config.zha.add_device_page.pairing_mode",
+                      {
+                        documentation_link: html`
+                          <a
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            href=${documentationUrl(
+                              this.hass,
+                              "/integrations/zha#adding-devices"
+                            )}
+                          >
+                            ${this.hass.localize(
+                              "ui.panel.config.zha.add_device_page.pairing_mode_link"
+                            )}
+                          </a>
+                        `,
+                      }
                     )}
                   </h4>
                   <h4>
diff --git a/src/translations/en.json b/src/translations/en.json
index d2468dde7c..35d4934e84 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -4157,7 +4157,8 @@
           },
           "add_device_page": {
             "spinner": "Searching for Zigbee devices…",
-            "pairing_mode": "Make sure your devices are in pairing mode. Check the instructions of your device on how to do this.",
+            "pairing_mode": "Make sure your devices are in pairing mode. Check the instructions of your device or {documentation_link} on how to do this.",
+            "pairing_mode_link": "the documentation",
             "discovered_text": "Devices will show up here once discovered.",
             "no_devices_found": "No devices were found, make sure they are in pairing mode and keep them awake while Home Assistant is searching.",
             "search_again": "Search again"