Fix automation sidebar ui supported check (#29219)

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}
             ></ha-automation-action-editor>`
         : 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() {

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}
             ></ha-automation-condition-editor>`
@@ -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
   );

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 {
 
         <ha-dropdown-item
           value="toggle_yaml_mode"
-          .disabled=${!supported || !!this._warnings}
+          .disabled=${!this._uiSupported || !!this._warnings}
         >
           <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
           ${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}
             ></ha-automation-trigger-editor>`
         : 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<this>): 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
   );