jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make config flow previews more generic (#21382)

Browse Source 
* Make config flow previews more generic
This commit is contained in:
karwosts 2024-07-14 08:01:21 -07:00 committed by GitHub
parent 29aa57229c
commit dbc2db2591
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 23 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/data/group.ts
View File

@ -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,
});

14
src/data/threshold.ts → src/data/preview.ts
View File

@ -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";

21
src/data/time_date.ts
View File

@ -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,
});

19
src/dialogs/config-flow/previews/flow-preview-threshold.ts → src/dialogs/config-flow/previews/flow-preview-generic.ts
View File

@ -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 {
ThresholdPreview,
subscribePreviewThreshold,
} from "../../../data/threshold";
import { GenericPreview, subscribePreviewGeneric } from "../../../data/preview";
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")
class FlowPreviewThreshold extends LitElement {
@customElement("flow-preview-generic")
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;
}
}

90
src/dialogs/config-flow/previews/flow-preview-group.ts
View File

@ -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;
}
}

94
src/dialogs/config-flow/previews/flow-preview-time_date.ts
View File

@ -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;
}
}

6
src/dialogs/config-flow/step-flow-form.ts
View File

@ -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)}`);
}
}