From cfd4445a45eb47b02836c89ecd84330be8f612e3 Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Mon, 12 Oct 2020 20:14:06 +0200
Subject: [PATCH] Add documentation link to "customize" dialog

---
 .../config/customize/ha-config-customize.js      | 16 ++++++++++++++++
 src/panels/config/customize/ha-form-customize.js | 16 ++++++++--------
 src/translations/en.json                         |  1 +
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/panels/config/customize/ha-config-customize.js b/src/panels/config/customize/ha-config-customize.js
index 2f2b3eb37fc3..d008085d2bac 100644
--- a/src/panels/config/customize/ha-config-customize.js
+++ b/src/panels/config/customize/ha-config-customize.js
@@ -11,6 +11,7 @@ import "../ha-config-section";
 import "../ha-entity-config";
 import { configSections } from "../ha-panel-config";
 import "./ha-form-customize";
+import { documentationUrl } from "../../../util/documentation-url";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -34,6 +35,14 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
             </span>
             <span slot="introduction">
               [[localize('ui.panel.config.customize.picker.introduction')]]
+              <br />
+              <a
+                href="[[_computeDocumentationUrl(hass)]]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                [[localize("ui.panel.config.customize.picker.documentation")]]
+              </a>
             </span>
             <ha-entity-config
               hass="[[hass]]"
@@ -91,5 +100,12 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
       .map((key) => hass.states[key])
       .sort(sortStatesByName);
   }
+
+  _computeDocumentationUrl(hass) {
+    return documentationUrl(
+      hass,
+      "/docs/configuration/customizing-devices/#customization-using-the-ui"
+    );
+  }
 }
 customElements.define("ha-config-customize", HaConfigCustomize);
diff --git a/src/panels/config/customize/ha-form-customize.js b/src/panels/config/customize/ha-form-customize.js
index 2ad523125d5b..4df81153df1d 100644
--- a/src/panels/config/customize/ha-form-customize.js
+++ b/src/panels/config/customize/ha-form-customize.js
@@ -40,35 +40,35 @@ class HaFormCustomize extends LocalizeMixin(PolymerElement) {
         </div>
       </template>
       <template is="dom-if" if="[[hasLocalAttributes]]">
-        <h4 class="attributes-text">
+        <p class="attributes-text">
           [[localize('ui.panel.config.customize.attributes_customize')]]<br />
-        </h4>
+        </p>
         <ha-form-customize-attributes
           attributes="{{localAttributes}}"
         ></ha-form-customize-attributes>
       </template>
       <template is="dom-if" if="[[hasGlobalAttributes]]">
-        <h4 class="attributes-text">
+        <p class="attributes-text">
           [[localize('ui.panel.config.customize.attributes_outside')]]<br />
           [[localize('ui.panel.config.customize.different_include')]]
-        </h4>
+        </p>
         <ha-form-customize-attributes
           attributes="{{globalAttributes}}"
         ></ha-form-customize-attributes>
       </template>
       <template is="dom-if" if="[[hasExistingAttributes]]">
-        <h4 class="attributes-text">
+        <p class="attributes-text">
           [[localize('ui.panel.config.customize.attributes_set')]]<br />
           [[localize('ui.panel.config.customize.attributes_override')]]
-        </h4>
+        </p>
         <ha-form-customize-attributes
           attributes="{{existingAttributes}}"
         ></ha-form-customize-attributes>
       </template>
       <template is="dom-if" if="[[hasNewAttributes]]">
-        <h4 class="attributes-text">
+        <p class="attributes-text">
           [[localize('ui.panel.config.customize.attributes_not_set')]]
-        </h4>
+        </p>
         <ha-form-customize-attributes
           attributes="{{newAttributes}}"
         ></ha-form-customize-attributes>
diff --git a/src/translations/en.json b/src/translations/en.json
index c0cfbd2c53e3..7b4619bcbd06 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -998,6 +998,7 @@
           "picker": {
             "header": "Customizations",
             "introduction": "Tweak per-entity attributes. Added/edited customizations will take effect immediately. Removed customizations will take effect when the entity is updated.",
+            "documentation": "Customization documentation",
             "entity": "Entity"
           },
           "warning": {