Add listeners to template helper preview (#17833)

src/data/ws-templates.ts

@@ -6,7 +6,7 @@ export interface RenderTemplateResult {
   listeners: TemplateListeners;
 }
 
-interface TemplateListeners {
+export interface TemplateListeners {
   all: boolean;
   domains: string[];
   entities: string[];
@@ -18,6 +18,7 @@ export type TemplatePreview = TemplatePreviewState | TemplatePreviewError;
 interface TemplatePreviewState {
   state: string;
   attributes: Record<string, any>;
+  listeners: TemplateListeners;
 }
 
 interface TemplatePreviewError {

src/dialogs/config-flow/previews/flow-preview-template.ts

@@ -1,9 +1,10 @@
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { LitElement, html } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { debounce } from "../../../common/util/debounce";
 import { FlowType } from "../../../data/data_entry_flow";
 import {
+  TemplateListeners,
   TemplatePreview,
   subscribePreviewTemplate,
 } from "../../../data/ws-templates";
@@ -27,6 +28,8 @@ class FlowPreviewTemplate extends LitElement {
 
   @state() private _preview?: HassEntity;
 
+  @state() private _listeners?: TemplateListeners;
+
   @state() private _error?: string;
 
   private _unsub?: Promise<UnsubscribeFunc>;
@@ -50,9 +53,69 @@ class FlowPreviewTemplate extends LitElement {
       return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
     }
     return html`<entity-preview-row
-      .hass=${this.hass}
-      .stateObj=${this._preview}
-    ></entity-preview-row>`;
+        .hass=${this.hass}
+        .stateObj=${this._preview}
+      ></entity-preview-row>
+      ${this._listeners?.time
+        ? html`
+            <p>
+              ${this.hass.localize("ui.dialogs.helper_settings.template.time")}
+            </p>
+          `
+        : nothing}
+      ${!this._listeners
+        ? nothing
+        : this._listeners.all
+        ? html`
+            <p class="all_listeners">
+              ${this.hass.localize(
+                "ui.dialogs.helper_settings.template.all_listeners"
+              )}
+            </p>
+          `
+        : this._listeners.domains.length || this._listeners.entities.length
+        ? html`
+            <p>
+              ${this.hass.localize(
+                "ui.dialogs.helper_settings.template.listeners"
+              )}
+            </p>
+            <ul>
+              ${this._listeners.domains
+                .sort()
+                .map(
+                  (domain) => html`
+                    <li>
+                      <b
+                        >${this.hass.localize(
+                          "ui.dialogs.helper_settings.template.domain"
+                        )}</b
+                      >: ${domain}
+                    </li>
+                  `
+                )}
+              ${this._listeners.entities
+                .sort()
+                .map(
+                  (entity_id) => html`
+                    <li>
+                      <b
+                        >${this.hass.localize(
+                          "ui.dialogs.helper_settings.template.entity"
+                        )}</b
+                      >: ${entity_id}
+                    </li>
+                  `
+                )}
+            </ul>
+          `
+        : !this._listeners.time
+        ? html`<span class="all_listeners">
+            ${this.hass.localize(
+              "ui.dialogs.helper_settings.template.no_listeners"
+            )}
+          </span>`
+        : nothing} `;
   }
 
   private _setPreview = (preview: TemplatePreview) => {
@@ -62,13 +125,15 @@ class FlowPreviewTemplate extends LitElement {
       return;
     }
     this._error = undefined;
+    this._listeners = preview.listeners;
     const now = new Date().toISOString();
     this._preview = {
       entity_id: `${this.stepId}.flow_preview`,
       last_changed: now,
       last_updated: now,
       context: { id: "", parent_id: null, user_id: null },
-      ...preview,
+      attributes: preview.attributes,
+      state: preview.state,
     };
   };
 

src/panels/developer-tools/template/developer-tools-template.ts

@@ -180,9 +180,9 @@ class HaPanelDevTemplate extends LitElement {
                   )}
                 </p>
               `
-            : ""}
+            : nothing}
           ${!this._templateResult?.listeners
-            ? ""
+            ? nothing
             : this._templateResult.listeners.all
             ? html`
                 <p class="all_listeners">
@@ -229,7 +229,7 @@ class HaPanelDevTemplate extends LitElement {
                 </ul>
               `
             : !this._templateResult?.listeners.time
-            ? html` <span class="all_listeners">
+            ? html`<span class="all_listeners">
                 ${this.hass.localize(
                   "ui.panel.developer-tools.tabs.templates.no_listeners"
                 )}

src/translations/en.json

@@ -1280,6 +1280,14 @@
         "schedule": {
           "delete": "Delete item?",
           "confirm_delete": "Do you want to delete this item?"
+        },
+        "template": {
+          "time": "[%key:ui::panel::developer-tools::tabs::templates::time%]",
+          "all_listeners": "[%key:ui::panel::developer-tools::tabs::templates::all_listeners%]",
+          "no_listeners": "[%key:ui::panel::developer-tools::tabs::templates::no_listeners%]",
+          "listeners": "[%key:ui::panel::developer-tools::tabs::templates::listeners%]",
+          "entity": "[%key:ui::panel::developer-tools::tabs::templates::entity%]",
+          "domain": "[%key:ui::panel::developer-tools::tabs::templates::domain%]"
         }
       },
       "options_flow": {