Default to yaml editing when there are multiple states in condition (#10481)

src/data/automation.ts

@@ -179,7 +179,7 @@ export interface StateCondition extends BaseCondition {
   condition: "state";
   entity_id: string;
   attribute?: string;
-  state: string | number;
+  state: string | number | string[];
   for?: string | number | ForDict;
 }
 

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

@@ -5,6 +5,7 @@ import "@polymer/paper-item/paper-item";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
@@ -51,6 +52,8 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @state() private _yamlMode = false;
 
+  @state() private _warnings?: string[];
+
   protected render() {
     if (!this.condition) {
       return html``;
@@ -87,7 +90,25 @@ export default class HaAutomationConditionRow extends LitElement {
               </mwc-list-item>
             </ha-button-menu>
           </div>
+          ${this._warnings
+            ? html`<ha-alert
+                alert-type="warning"
+                .title=${this.hass.localize(
+                  "ui.errors.config.editor_not_supported"
+                )}
+              >
+                ${this._warnings!.length > 0 && this._warnings![0] !== undefined
+                  ? html` <ul>
+                      ${this._warnings!.map(
+                        (warning) => html`<li>${warning}</li>`
+                      )}
+                    </ul>`
+                  : ""}
+                ${this.hass.localize("ui.errors.config.edit_in_yaml_supported")}
+              </ha-alert>`
+            : ""}
           <ha-automation-condition-editor
+            @ui-mode-not-available=${this._handleUiModeNotAvailable}
             .yamlMode=${this._yamlMode}
             .hass=${this.hass}
             .condition=${this.condition}
@@ -97,6 +118,15 @@ export default class HaAutomationConditionRow extends LitElement {
     `;
   }
 
+  private _handleUiModeNotAvailable(ev: CustomEvent) {
+    // Prevent possible parent action-row from switching to yamlMode
+    ev.stopPropagation();
+    this._warnings = handleStructError(this.hass, ev.detail).warnings;
+    if (!this._yamlMode) {
+      this._yamlMode = true;
+    }
+  }
+
   private _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
@@ -125,6 +155,7 @@ export default class HaAutomationConditionRow extends LitElement {
   }
 
   private _switchYamlMode() {
+    this._warnings = undefined;
     this._yamlMode = !this._yamlMode;
   }
 

src/panels/config/automation/condition/types/ha-automation-condition-state.ts

@@ -1,5 +1,5 @@
 import "@polymer/paper-input/paper-input";
-import { html, LitElement } from "lit";
+import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import { createDurationData } from "../../../../../common/datetime/create_duration_data";
 import "../../../../../components/entity/ha-entity-attribute-picker";
@@ -11,6 +11,7 @@ import {
   handleChangeEvent,
 } from "../ha-automation-condition-row";
 import "../../../../../components/ha-duration-input";
+import { fireEvent } from "../../../../../common/dom/fire_event";
 
 @customElement("ha-automation-condition-state")
 export class HaStateCondition extends LitElement implements ConditionElement {
@@ -22,6 +23,23 @@ export class HaStateCondition extends LitElement implements ConditionElement {
     return { entity_id: "", state: "" };
   }
 
+  public willUpdate(changedProperties: PropertyValues): boolean {
+    if (
+      changedProperties.has("condition") &&
+      Array.isArray(this.condition?.state)
+    ) {
+      fireEvent(
+        this,
+        "ui-mode-not-available",
+        Error(this.hass.localize("ui.errors.config.no_state_array_support"))
+      );
+      // We have to stop the update if state is an array.
+      // Otherwise the state will be changed to a comma-separated string by the input element.
+      return false;
+    }
+    return true;
+  }
+
   protected render() {
     const { entity_id, attribute, state } = this.condition;
     const forTime = createDurationData(this.condition.for);

src/translations/en.json

@@ -864,7 +864,8 @@
         "key_missing": "Required key ''{key}'' is missing.",
         "key_not_expected": "Key ''{key}'' is not expected or not supported by the visual editor.",
         "key_wrong_type": "The provided value for ''{key}'' is not supported by the visual editor. We support ({type_correct}) but received ({type_wrong}).",
-        "no_template_editor_support": "Templates not supported in visual editor"
+        "no_template_editor_support": "Templates not supported in visual editor",
+        "no_state_array_support": "Multiple state values not supported in visual editor"
       },
       "supervisor": {
         "title": "Could not load the Supervisor panel!",