Make config flow previews more generic (#21382)

* Make config flow previews more generic

src/data/group.ts

@@ -1,10 +1,8 @@
 import {
   HassEntityAttributeBase,
   HassEntityBase,
-  UnsubscribeFunc,
 } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
-import { HomeAssistant } from "../types";
 
 interface GroupEntityAttributes extends HassEntityAttributeBase {
   entity_id: string[];
@@ -17,11 +15,6 @@ export interface GroupEntity extends HassEntityBase {
   attributes: GroupEntityAttributes;
 }
 
-export interface GroupPreview {
-  state: string;
-  attributes: Record<string, any>;
-}
-
 export const computeGroupDomain = (
   stateObj: GroupEntity
 ): string | undefined => {
@@ -31,17 +24,3 @@ export const computeGroupDomain = (
   ];
   return uniqueDomains.length === 1 ? uniqueDomains[0] : undefined;
 };
-
-export const subscribePreviewGroup = (
-  hass: HomeAssistant,
-  flow_id: string,
-  flow_type: "config_flow" | "options_flow",
-  user_input: Record<string, any>,
-  callback: (preview: GroupPreview) => void
-): Promise<UnsubscribeFunc> =>
-  hass.connection.subscribeMessage(callback, {
-    type: "group/start_preview",
-    flow_id,
-    flow_type,
-    user_input,
-  });

src/data/preview.ts

@@ -1,21 +1,27 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 
-export interface ThresholdPreview {
+const HAS_CUSTOM_PREVIEW = ["template"];
+
+export interface GenericPreview {
   state: string;
   attributes: Record<string, any>;
 }
 
-export const subscribePreviewThreshold = (
+export const subscribePreviewGeneric = (
   hass: HomeAssistant,
+  domain: string,
   flow_id: string,
   flow_type: "config_flow" | "options_flow",
   user_input: Record<string, any>,
-  callback: (preview: ThresholdPreview) => void
+  callback: (preview: GenericPreview) => void
 ): Promise<UnsubscribeFunc> =>
   hass.connection.subscribeMessage(callback, {
-    type: "threshold/start_preview",
+    type: `${domain}/start_preview`,
     flow_id,
     flow_type,
     user_input,
   });
+
+export const previewModule = (domain: string): string =>
+  HAS_CUSTOM_PREVIEW.includes(domain) ? domain : "generic";

src/data/time_date.ts

@@ -1,21 +0,0 @@
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { HomeAssistant } from "../types";
-
-export interface TimeDatePreview {
-  state: string;
-  attributes: Record<string, any>;
-}
-
-export const subscribePreviewTimeDate = (
-  hass: HomeAssistant,
-  flow_id: string,
-  flow_type: "config_flow" | "options_flow",
-  user_input: Record<string, any>,
-  callback: (preview: TimeDatePreview) => void
-): Promise<UnsubscribeFunc> =>
-  hass.connection.subscribeMessage(callback, {
-    type: "time_date/start_preview",
-    flow_id,
-    flow_type,
-    user_input,
-  });

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

@@ -2,23 +2,22 @@ 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 {
+import { GenericPreview, subscribePreviewGeneric } from "../../../data/preview";
-  ThresholdPreview,
-  subscribePreviewThreshold,
-} from "../../../data/threshold";
 import { HomeAssistant } from "../../../types";
 import "./entity-preview-row";
 import { debounce } from "../../../common/util/debounce";
 import { fireEvent } from "../../../common/dom/fire_event";
 
-@customElement("flow-preview-threshold")
+@customElement("flow-preview-generic")
-class FlowPreviewThreshold extends LitElement {
+class FlowPreviewGeneric extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public flowType!: FlowType;
 
   public handler!: string;
 
+  @property() public domain!: string;
+
   @property() public stepId!: string;
 
   @property() public flowId!: string;
@@ -55,7 +54,7 @@ class FlowPreviewThreshold extends LitElement {
     ></entity-preview-row>`;
   }
 
-  private _setPreview = (preview: ThresholdPreview) => {
+  private _setPreview = (preview: GenericPreview) => {
     const now = new Date().toISOString();
     this._preview = {
       entity_id: `${this.stepId}.___flow_preview___`,
@@ -79,14 +78,14 @@ class FlowPreviewThreshold extends LitElement {
       return;
     }
     try {
-      this._unsub = subscribePreviewThreshold(
+      this._unsub = subscribePreviewGeneric(
         this.hass,
+        this.domain,
         this.flowId,
         this.flowType,
         this.stepData,
         this._setPreview
       );
-      await this._unsub;
       fireEvent(this, "set-flow-errors", { errors: {} });
     } catch (err: any) {
       if (typeof err.message === "string") {
@@ -103,6 +102,6 @@ class FlowPreviewThreshold extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "flow-preview-threshold": FlowPreviewThreshold;
+    "flow-preview-generic": FlowPreviewGeneric;
   }
 }

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

@@ -1,90 +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 { GroupPreview, subscribePreviewGroup } from "../../../data/group";
-import { HomeAssistant } from "../../../types";
-import "./entity-preview-row";
-import { debounce } from "../../../common/util/debounce";
-
-@customElement("flow-preview-group")
-class FlowPreviewGroup extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public flowType!: FlowType;
-
-  public handler!: string;
-
-  @property() public stepId!: string;
-
-  @property() public flowId!: string;
-
-  @property({ attribute: false }) 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._debouncedSubscribePreview();
-    }
-  }
-
-  protected render() {
-    return html`<entity-preview-row
-      .hass=${this.hass}
-      .stateObj=${this._preview}
-    ></entity-preview-row>`;
-  }
-
-  private _setPreview = (preview: GroupPreview) => {
-    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,
-    };
-  };
-
-  private _debouncedSubscribePreview = debounce(() => {
-    this._subscribePreview();
-  }, 250);
-
-  private async _subscribePreview() {
-    if (this._unsub) {
-      (await this._unsub)();
-      this._unsub = undefined;
-    }
-    if (this.flowType === "repair_flow") {
-      return;
-    }
-    try {
-      this._unsub = subscribePreviewGroup(
-        this.hass,
-        this.flowId,
-        this.flowType,
-        this.stepData,
-        this._setPreview
-      );
-    } catch (err) {
-      this._preview = undefined;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "flow-preview-group": FlowPreviewGroup;
-  }
-}

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

@@ -1,94 +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 {
-  TimeDatePreview,
-  subscribePreviewTimeDate,
-} from "../../../data/time_date";
-import { HomeAssistant } from "../../../types";
-import "./entity-preview-row";
-import { debounce } from "../../../common/util/debounce";
-
-@customElement("flow-preview-time_date")
-class FlowPreviewTimeDate extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public flowType!: FlowType;
-
-  public handler!: string;
-
-  @property() 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._debouncedSubscribePreview();
-    }
-  }
-
-  protected render() {
-    return html`<entity-preview-row
-      .hass=${this.hass}
-      .stateObj=${this._preview}
-    ></entity-preview-row>`;
-  }
-
-  private _setPreview = (preview: TimeDatePreview) => {
-    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,
-    };
-  };
-
-  private _debouncedSubscribePreview = debounce(() => {
-    this._subscribePreview();
-  }, 250);
-
-  private async _subscribePreview() {
-    if (this._unsub) {
-      (await this._unsub)();
-      this._unsub = undefined;
-    }
-    if (this.flowType === "repair_flow") {
-      return;
-    }
-    try {
-      this._unsub = subscribePreviewTimeDate(
-        this.hass,
-        this.flowId,
-        this.flowType,
-        this.stepData,
-        this._setPreview
-      );
-      await this._unsub;
-    } catch (err) {
-      this._preview = undefined;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "flow-preview-time_date": FlowPreviewTimeDate;
-  }
-}

src/dialogs/config-flow/step-flow-form.ts

@@ -25,6 +25,7 @@ import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
 import { haStyle } from "../../resources/styles";
+import { previewModule } from "../../data/preview";
 
 @customElement("step-flow-form")
 class StepFlowForm extends LitElement {
@@ -76,8 +77,9 @@ class StepFlowForm extends LitElement {
                 "ui.panel.config.integrations.config_flow.preview"
               )}:
             </h3>
-            ${dynamicElement(`flow-preview-${this.step.preview}`, {
+            ${dynamicElement(`flow-preview-${previewModule(step.preview)}`, {
               hass: this.hass,
+              domain: step.preview,
               flowType: this.flowConfig.flowType,
               handler: step.handler,
               stepId: step.step_id,
@@ -120,7 +122,7 @@ class StepFlowForm extends LitElement {
   protected willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
     if (changedProps.has("step") && this.step?.preview) {
-      import(`./previews/flow-preview-${this.step.preview}`);
+      import(`./previews/flow-preview-${previewModule(this.step.preview)}`);
     }
   }