Evaluate condition shorthands in editors (#12473)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/data/automation.ts

@@ -235,6 +235,10 @@ export interface TriggerCondition extends BaseCondition {
 
 type ShorthandBaseCondition = Omit<BaseCondition, "condition">;
 
+export interface ShorthandAndConditionList extends ShorthandBaseCondition {
+  condition: Condition[];
+}
+
 export interface ShorthandAndCondition extends ShorthandBaseCondition {
   and: Condition[];
 }
@@ -260,10 +264,33 @@ export type Condition =
 
 export type ConditionWithShorthand =
   | Condition
+  | ShorthandAndConditionList
   | ShorthandAndCondition
   | ShorthandOrCondition
   | ShorthandNotCondition;
 
+export const expandConditionWithShorthand = (
+  cond: ConditionWithShorthand
+): Condition => {
+  if ("condition" in cond && Array.isArray(cond.condition)) {
+    return {
+      condition: "and",
+      conditions: cond.condition,
+    };
+  }
+
+  for (const condition of ["and", "or", "not"]) {
+    if (condition in cond) {
+      return {
+        condition,
+        conditions: cond[condition],
+      } as Condition;
+    }
+  }
+
+  return cond as Condition;
+};
+
 export const triggerAutomationActions = (
   hass: HomeAssistant,
   entityId: string

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -10,6 +10,7 @@ import "../../../../components/ha-select";
 import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-yaml-editor";
 import type { Condition } from "../../../../data/automation";
+import { expandConditionWithShorthand } from "../../../../data/automation";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "./types/ha-automation-condition-and";
@@ -42,10 +43,14 @@ const OPTIONS = [
 export default class HaAutomationConditionEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public condition!: Condition;
+  @property() condition!: Condition;
 
   @property() public yamlMode = false;
 
+  private _processedCondition = memoizeOne((condition) =>
+    expandConditionWithShorthand(condition)
+  );
+
   private _processedTypes = memoizeOne(
     (localize: LocalizeFunc): [string, string][] =>
       OPTIONS.map(
@@ -60,7 +65,8 @@ export default class HaAutomationConditionEditor extends LitElement {
   );
 
   protected render() {
-    const selected = OPTIONS.indexOf(this.condition.condition);
+    const condition = this._processedCondition(this.condition);
+    const selected = OPTIONS.indexOf(condition.condition);
     const yamlMode = this.yamlMode || selected === -1;
     return html`
       ${yamlMode
@@ -70,7 +76,7 @@ export default class HaAutomationConditionEditor extends LitElement {
                   ${this.hass.localize(
                     "ui.panel.config.automation.editor.conditions.unsupported_condition",
                     "condition",
-                    this.condition.condition
+                    condition.condition
                   )}
                 `
               : ""}
@@ -90,7 +96,7 @@ export default class HaAutomationConditionEditor extends LitElement {
               .label=${this.hass.localize(
                 "ui.panel.config.automation.editor.conditions.type_select"
               )}
-              .value=${this.condition.condition}
+              .value=${condition.condition}
               naturalMenuWidth
               @selected=${this._typeChanged}
             >
@@ -103,8 +109,8 @@ export default class HaAutomationConditionEditor extends LitElement {
 
             <div>
               ${dynamicElement(
-                `ha-automation-condition-${this.condition.condition}`,
+                `ha-automation-condition-${condition.condition}`,
-                { hass: this.hass, condition: this.condition }
+                { hass: this.hass, condition: condition }
               )}
             </div>
           `}
@@ -124,7 +130,7 @@ export default class HaAutomationConditionEditor extends LitElement {
       defaultConfig: Omit<Condition, "condition">;
     };
 
-    if (type !== this.condition.condition) {
+    if (type !== this._processedCondition(this.condition).condition) {
       fireEvent(this, "value-changed", {
         value: {
           condition: type,