Better handling of multiple entities in numeric-state condition (#22021)

* Better handling of multiple entities in numeric-state condition

* update translations, fix infinite render loop in form

src/data/automation_i18n.ts

@@ -907,8 +907,14 @@ const tryDescribeCondition = (
 
   // Numeric State Condition
   if (condition.condition === "numeric_state" && condition.entity_id) {
-    const stateObj = hass.states[condition.entity_id];
+    const entity_ids = ensureArray(condition.entity_id);
-    const entity = stateObj ? computeStateName(stateObj) : condition.entity_id;
+    const stateObj = hass.states[entity_ids[0]];
+    const entity = formatListWithAnds(
+      hass.locale,
+      entity_ids.map((id) =>
+        hass.states[id] ? computeStateName(hass.states[id]) : id || ""
+      )
+    );
 
     const attribute = condition.attribute
       ? computeAttributeNameDisplay(
@@ -923,8 +929,9 @@ const tryDescribeCondition = (
       return hass.localize(
         `${conditionsTranslationBaseKey}.numeric_state.description.above-below`,
         {
-          attribute: attribute,
+          attribute,
-          entity: entity,
+          entity,
+          numberOfEntities: entity_ids.length,
           above: condition.above,
           below: condition.below,
         }
@@ -934,8 +941,9 @@ const tryDescribeCondition = (
       return hass.localize(
         `${conditionsTranslationBaseKey}.numeric_state.description.above`,
         {
-          attribute: attribute,
+          attribute,
-          entity: entity,
+          entity,
+          numberOfEntities: entity_ids.length,
           above: condition.above,
         }
       );
@@ -944,8 +952,9 @@ const tryDescribeCondition = (
       return hass.localize(
         `${conditionsTranslationBaseKey}.numeric_state.description.below`,
         {
-          attribute: attribute,
+          attribute,
-          entity: entity,
+          entity,
+          numberOfEntities: entity_ids.length,
           below: condition.below,
         }
       );

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

@@ -1,5 +1,15 @@
-import { html, LitElement } from "lit";
+import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import {
+  assert,
+  boolean,
+  literal,
+  number,
+  object,
+  optional,
+  string,
+  union,
+} from "superstruct";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
@@ -8,6 +18,17 @@ import type { SchemaUnion } from "../../../../../components/ha-form/types";
 import { NumericStateCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 
+const numericStateConditionStruct = object({
+  alias: optional(string()),
+  condition: literal("numeric_state"),
+  entity_id: optional(string()),
+  attribute: optional(string()),
+  above: optional(union([number(), string()])),
+  below: optional(union([number(), string()])),
+  value_template: optional(string()),
+  enabled: optional(boolean()),
+});
+
 @customElement("ha-automation-condition-numeric_state")
 export default class HaNumericStateCondition extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -27,6 +48,18 @@ export default class HaNumericStateCondition extends LitElement {
     };
   }
 
+  public shouldUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has("condition")) {
+      try {
+        assert(this.condition, numericStateConditionStruct);
+      } catch (e: any) {
+        fireEvent(this, "ui-mode-not-available", e);
+        return false;
+      }
+    }
+    return true;
+  }
+
   private _schema = memoizeOne(
     (
       localize: LocalizeFunc,
@@ -240,7 +273,7 @@ export default class HaNumericStateCondition extends LitElement {
 
   private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    const newCondition = ev.detail.value;
+    const newCondition = { ...ev.detail.value };
 
     this._inputAboveIsEntity = newCondition.mode_above === "input";
     this._inputBelowIsEntity = newCondition.mode_below === "input";

src/translations/en.json

@@ -3170,9 +3170,9 @@
                   "value_template": "[%key:ui::panel::config::automation::editor::triggers::type::numeric_state::value_template%]",
                   "description": {
                     "picker": "If the numeric value of an entity''s state (or attribute''s value) is above or below a given threshold.",
-                    "above": "When {attribute, select, \n undefined {} \n other {{attribute} from }\n }{entity} is above {above}",
+                    "above": "When {attribute, select, \n undefined {} \n other {{attribute} from }\n }{entity} {numberOfEntities, plural,\n one {is}\n other {are}\n} above {above}",
-                    "below": "When {attribute, select, \n undefined {} \n other {{attribute} from }\n }{entity} is below {below}",
+                    "below": "When {attribute, select, \n undefined {} \n other {{attribute} from }\n }{entity} {numberOfEntities, plural,\n one {is}\n other {are}\n} below {below}",
-                    "above-below": "When {attribute, select, \n undefined {} \n other {{attribute} from }\n }{entity} is above {above} and below {below}"
+                    "above-below": "When {attribute, select, \n undefined {} \n other {{attribute} from }\n }{entity} {numberOfEntities, plural,\n one {is}\n other {are}\n} above {above} and below {below}"
                   }
                 },
                 "or": {