diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index fdfd8d63b1..e7891ca7c6 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -184,6 +184,8 @@ export default class HaAutomationActionRow extends LitElement { @state() private _warnings?: string[]; + @state() private _uiSupported = false; + @query("ha-automation-action-editor") private _actionEditor?: HaAutomationActionEditor; @@ -215,6 +217,25 @@ export default class HaAutomationActionRow extends LitElement { if (!this._uiModeAvailable && !this._yamlMode) { this._yamlMode = true; } + + if (changedProperties.has("action") || !this.hasUpdated) { + const uiSupported = this._checkUiSupport(type); + if (uiSupported !== this._uiSupported || !this.hasUpdated) { + this._uiSupported = uiSupported; + } + } + } + + protected override updated(changedProps: PropertyValues): void { + super.updated(changedProps); + if ( + changedProps.has("_uiSupported") && + this._selected && + this.optionsInSidebar + ) { + // update sidebar if uiSupported changed + this.openSidebar(); + } } private _renderOverflowLabel(label: string, shortcut?: TemplateResult) { @@ -467,7 +488,7 @@ export default class HaAutomationActionRow extends LitElement { .disabled=${this.disabled} .yamlMode=${this._yamlMode} .narrow=${this.narrow} - .uiSupported=${this._uiSupported(type!)} + .uiSupported=${this._uiSupported} @ui-mode-not-available=${this._handleUiModeNotAvailable} >` : nothing} @@ -539,7 +560,7 @@ export default class HaAutomationActionRow extends LitElement { .action=${this.action} .narrow=${this.narrow} .disabled=${this.disabled} - .uiSupported=${this._uiSupported(type!)} + .uiSupported=${this._uiSupported} indent .selected=${this._selected} @value-changed=${this._onValueChange} @@ -769,7 +790,6 @@ export default class HaAutomationActionRow extends LitElement { public openSidebar(action?: Action): void { const sidebarAction = action ?? this.action; - const actionType = getAutomationActionType(sidebarAction); fireEvent(this, "open-sidebar", { save: (value) => { @@ -799,7 +819,7 @@ export default class HaAutomationActionRow extends LitElement { config: { action: sidebarAction, }, - uiSupported: actionType ? this._uiSupported(actionType) : false, + uiSupported: this._uiSupported, yamlMode: this._yamlMode, } satisfies ActionSidebarConfig); this._selected = true; @@ -849,9 +869,10 @@ export default class HaAutomationActionRow extends LitElement { this._actionEditor?.collapseAll(); } - private _uiSupported = memoizeOne( - (type: string) => - customElements.get(`ha-automation-action-${type}`) !== undefined + private _checkUiSupport = memoizeOne((type?: string) => + type + ? customElements.get(`ha-automation-action-${type}`) !== undefined + : false ); private _toggleCollapse() { diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 0330a024d2..3a960f7ba0 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -52,6 +52,7 @@ import type { ConditionDescriptions } from "../../../../data/condition"; import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition"; import { validateConfig } from "../../../../data/config"; import { fullEntitiesContext } from "../../../../data/context"; +import type { DeviceCondition } from "../../../../data/device/device_automation"; import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry"; import { showAlertDialog, @@ -76,7 +77,6 @@ import "./types/ha-automation-condition-template"; import "./types/ha-automation-condition-time"; import "./types/ha-automation-condition-trigger"; import "./types/ha-automation-condition-zone"; -import type { DeviceCondition } from "../../../../data/device/device_automation"; export interface ConditionElement extends LitElement { condition: Condition; @@ -156,6 +156,8 @@ export default class HaAutomationConditionRow extends LitElement { @state() private _selected = false; + @state() private _uiSupported = false; + @state() @consume({ context: fullEntitiesContext, subscribe: true }) _entityReg!: EntityRegistryEntry[]; @@ -395,9 +397,7 @@ export default class HaAutomationConditionRow extends LitElement { ]} .disabled=${this.disabled} .yamlMode=${this._yamlMode} - .uiSupported=${this._uiSupported( - this._getType(this.condition, this.conditionDescriptions) - )} + .uiSupported=${this._uiSupported} .narrow=${this.narrow} @ui-mode-not-available=${this._handleUiModeNotAvailable} >` @@ -476,9 +476,7 @@ export default class HaAutomationConditionRow extends LitElement { .hass=${this.hass} .condition=${this.condition} .disabled=${this.disabled} - .uiSupported=${this._uiSupported( - this._getType(this.condition, this.conditionDescriptions) - )} + .uiSupported=${this._uiSupported} indent .selected=${this._selected} .narrow=${this.narrow} @@ -509,6 +507,27 @@ export default class HaAutomationConditionRow extends LitElement { if (changedProperties.has("yamlMode")) { this._warnings = undefined; } + + if (changedProperties.has("condition") || !this.hasUpdated) { + const type = this._getType(this.condition, this.conditionDescriptions); + const uiSupported = this._checkUiSupport(type); + if (uiSupported !== this._uiSupported || !this.hasUpdated) { + this._uiSupported = uiSupported; + } + } + } + + protected override updated(changedProps: PropertyValues): void { + super.updated(changedProps); + + if ( + changedProps.has("_uiSupported") && + this._selected && + this.optionsInSidebar + ) { + // update sidebar if uiSupported changed + this.openSidebar(); + } } private _onValueChange(event: CustomEvent) { @@ -796,9 +815,7 @@ export default class HaAutomationConditionRow extends LitElement { cut: this._cutCondition, test: this._testCondition, config: sidebarCondition, - uiSupported: this._uiSupported( - this._getType(sidebarCondition, this.conditionDescriptions) - ), + uiSupported: this._uiSupported, description: this.conditionDescriptions[sidebarCondition.condition], yamlMode: this._yamlMode, } satisfies ConditionSidebarConfig); @@ -825,7 +842,7 @@ export default class HaAutomationConditionRow extends LitElement { } ); - private _uiSupported = memoizeOne( + private _checkUiSupport = memoizeOne( (type: string) => customElements.get(`ha-automation-condition-${type}`) !== undefined ); diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index fb1719a686..db761d5f90 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -147,6 +147,8 @@ export default class HaAutomationTriggerRow extends LitElement { @state() private _warnings?: string[]; + @state() private _uiSupported = false; + @property({ attribute: false }) public triggerDescriptions: TriggerDescriptions = {}; @@ -193,9 +195,7 @@ export default class HaAutomationTriggerRow extends LitElement { private _renderRow() { const type = this._getType(this.trigger, this.triggerDescriptions); - const supported = this._uiSupported(type); - - const yamlMode = this._yamlMode || !supported; + const yamlMode = this._yamlMode || !this._uiSupported; const target = type === "platform" && @@ -333,7 +333,7 @@ export default class HaAutomationTriggerRow extends LitElement { ${this._renderOverflowLabel( @@ -412,7 +412,7 @@ export default class HaAutomationTriggerRow extends LitElement { : undefined} .disabled=${this.disabled} .yamlMode=${this._yamlMode} - .uiSupported=${supported} + .uiSupported=${this._uiSupported} @ui-mode-not-available=${this._handleUiModeNotAvailable} >` : nothing} @@ -479,13 +479,30 @@ export default class HaAutomationTriggerRow extends LitElement { if (changedProperties.has("yamlMode")) { this._warnings = undefined; } + + if (changedProperties.has("trigger") || !this.hasUpdated) { + const type = this._getType(this.trigger, this.triggerDescriptions); + const uiSupported = this._checkUiSupport(type); + if (uiSupported !== this._uiSupported || !this.hasUpdated) { + this._uiSupported = uiSupported; + } + } } - protected override updated(changedProps: PropertyValues): void { + protected override updated(changedProps: PropertyValues): void { super.updated(changedProps); if (changedProps.has("trigger")) { this._subscribeTrigger(); } + + if ( + changedProps.has("_uiSupported") && + this._selected && + this.optionsInSidebar + ) { + // update sidebar if uiSupported changed + this.openSidebar(); + } } public connectedCallback(): void { @@ -603,9 +620,7 @@ export default class HaAutomationTriggerRow extends LitElement { cut: this._cutTrigger, insertAfter: this._insertAfter, config: trigger, - uiSupported: this._uiSupported( - this._getType(trigger, this.triggerDescriptions) - ), + uiSupported: this._uiSupported, description: "trigger" in trigger ? this.triggerDescriptions[trigger.trigger] @@ -805,7 +820,7 @@ export default class HaAutomationTriggerRow extends LitElement { } ); - private _uiSupported = memoizeOne( + private _checkUiSupport = memoizeOne( (type: string) => customElements.get(`ha-automation-trigger-${type}`) !== undefined );