Add a warning for improper usage of the template selector (#21545)

* Add a warning when adding template yaml in the template selector

* refinement

src/components/ha-selector/ha-selector-template.ts

@@ -1,9 +1,18 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { css, html, nothing, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
+import { documentationUrl } from "../../util/documentation-url";
 import "../ha-code-editor";
 import "../ha-input-helper-text";
+import "../ha-alert";
+
+const WARNING_STRINGS = [
+  "template:",
+  "sensor:",
+  "state:",
+  "platform: template",
+];
 
 @customElement("ha-selector-template")
 export class HaTemplateSelector extends LitElement {
@@ -19,9 +28,33 @@ export class HaTemplateSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @state() private warn: string | undefined = undefined;
+
   protected render() {
     return html`
-      ${this.label ? html`<p>${this.label}${this.required ? "*" : ""}</p>` : ""}
+      ${this.warn
+        ? html`<ha-alert alert-type="warning"
+            >${this.hass.localize(
+              "ui.components.selectors.template.yaml_warning",
+              { string: this.warn }
+            )}
+            <br />
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href=${documentationUrl(
+                this.hass,
+                "/docs/configuration/templating/"
+              )}
+              >${this.hass.localize(
+                "ui.components.selectors.template.learn_more"
+              )}</a
+            ></ha-alert
+          >`
+        : nothing}
+      ${this.label
+        ? html`<p>${this.label}${this.required ? "*" : ""}</p>`
+        : nothing}
       <ha-code-editor
         mode="jinja2"
         .hass=${this.hass}
@@ -36,7 +69,7 @@ export class HaTemplateSelector extends LitElement {
       ></ha-code-editor>
       ${this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
+        : nothing}
     `;
   }
 
@@ -45,6 +78,7 @@ export class HaTemplateSelector extends LitElement {
     if (this.value === value) {
       return;
     }
+    this.warn = WARNING_STRINGS.find((str) => value.includes(str));
     fireEvent(this, "value-changed", { value });
   }
 

src/translations/en.json

@@ -420,6 +420,10 @@
             "manual": "Manual Entry"
           }
         },
+        "template": {
+          "yaml_warning": "It appears you may be writing YAML into this template field (saw ''{string}''), which is likely incorrect. This field is intended for templates only (e.g. '{{ states(sensor.test) > 0 }}' ).",
+          "learn_more": "Learn more about templating."
+        },
         "text": {
           "show_password": "Show password",
           "hide_password": "Hide password"