Use 1 element for all group previews (#17693)

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

@@ -2,19 +2,20 @@ import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { FlowType } from "../../../data/data_entry_flow";
-import { subscribePreviewGroupBinarySensor } from "../../../data/group";
+import { GroupPreview, subscribePreviewGroup } from "../../../data/group";
 import { HomeAssistant } from "../../../types";
 import "./entity-preview-row";
+import { debounce } from "../../../common/util/debounce";
 
-@customElement("flow-preview-group_binary_sensor")
-class FlowPreviewGroupBinarySensor extends LitElement {
+@customElement("flow-preview-group")
+class FlowPreviewGroup extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public flowType!: FlowType;
 
   public handler!: string;
 
-  public stepId!: string;
+  @property() public stepId!: string;
 
   @property() public flowId!: string;
 
@@ -34,7 +35,7 @@ class FlowPreviewGroupBinarySensor extends LitElement {
 
   willUpdate(changedProps) {
     if (changedProps.has("stepData")) {
-      this._subscribePreview();
+      this._debouncedSubscribePreview();
     }
   }
 
@@ -45,13 +46,10 @@ class FlowPreviewGroupBinarySensor extends LitElement {
     ></entity-preview-row>`;
   }
 
-  private _setPreview = (preview: {
-    state: string;
-    attributes: Record<string, any>;
-  }) => {
+  private _setPreview = (preview: GroupPreview) => {
     const now = new Date().toISOString();
     this._preview = {
-      entity_id: "binary_sensor.flow_preview",
+      entity_id: `${this.stepId}.flow_preview`,
       last_changed: now,
       last_updated: now,
       context: { id: "", parent_id: null, user_id: null },
@@ -59,6 +57,10 @@ class FlowPreviewGroupBinarySensor extends LitElement {
     };
   };
 
+  private _debouncedSubscribePreview = debounce(() => {
+    this._subscribePreview();
+  }, 250);
+
   private async _subscribePreview() {
     if (this._unsub) {
       (await this._unsub)();
@@ -68,7 +70,7 @@ class FlowPreviewGroupBinarySensor extends LitElement {
       return;
     }
     try {
-      this._unsub = subscribePreviewGroupBinarySensor(
+      this._unsub = subscribePreviewGroup(
         this.hass,
         this.flowId,
         this.flowType,
@@ -83,6 +85,6 @@ class FlowPreviewGroupBinarySensor extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "flow-preview-group_binary_sensor": FlowPreviewGroupBinarySensor;
+    "flow-preview-group": FlowPreviewGroup;
   }
 }

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

@@ -1,92 +0,0 @@
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { LitElement, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { FlowType } from "../../../data/data_entry_flow";
-import { subscribePreviewGroupSensor } from "../../../data/group";
-import { HomeAssistant } from "../../../types";
-import "./entity-preview-row";
-
-@customElement("flow-preview-group_sensor")
-class FlowPreviewGroupSensor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public flowType!: FlowType;
-
-  public handler!: string;
-
-  public stepId!: string;
-
-  @property() public flowId!: string;
-
-  @property() public stepData!: Record<string, any>;
-
-  @state() private _preview?: HassEntity;
-
-  private _unsub?: Promise<UnsubscribeFunc>;
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this._unsub) {
-      this._unsub.then((unsub) => unsub());
-      this._unsub = undefined;
-    }
-  }
-
-  willUpdate(changedProps) {
-    if (changedProps.has("stepData")) {
-      this._subscribePreview();
-    }
-  }
-
-  protected render() {
-    return html`<entity-preview-row
-      .hass=${this.hass}
-      .stateObj=${this._preview}
-    ></entity-preview-row>`;
-  }
-
-  private _setPreview = (preview: {
-    state: string;
-    attributes: Record<string, any>;
-  }) => {
-    const now = new Date().toISOString();
-    this._preview = {
-      entity_id: "sensor.flow_preview",
-      last_changed: now,
-      last_updated: now,
-      context: { id: "", parent_id: null, user_id: null },
-      ...preview,
-    };
-  };
-
-  private async _subscribePreview() {
-    if (this._unsub) {
-      (await this._unsub)();
-      this._unsub = undefined;
-    }
-    if (this.flowType === "repair_flow") {
-      return;
-    }
-    if (!this.stepData.type) {
-      this._preview = undefined;
-      return;
-    }
-    try {
-      this._unsub = subscribePreviewGroupSensor(
-        this.hass,
-        this.flowId,
-        this.flowType,
-        this.stepData,
-        this._setPreview
-      );
-    } catch (err) {
-      this._preview = undefined;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "flow-preview-group_sensor": FlowPreviewGroupSensor;
-  }
-}