Use automation descriptions instead of target ui

src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts

@@ -13,11 +13,15 @@ import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { ensureArray } from "../../../../common/array/ensure-array";
 import { ConditionListenersController } from "../../../../common/controllers/condition-listeners-controller";
 import { storage } from "../../../../common/decorators/storage";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
+import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
+import { formatListWithOrs } from "../../../../common/string/format-list";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/automation/ha-automation-row-event-chip";
 import "../../../../components/automation/ha-automation-row-live-test";
@@ -41,7 +45,9 @@ import type {
   Condition,
   LegacyCondition,
   NotCondition,
+  NumericStateCondition,
   OrCondition,
+  StateCondition,
 } from "../../common/validate-condition";
 import {
   checkConditionsMet,
@@ -219,6 +225,84 @@ export class HaCardConditionEditor extends LitElement {
     };
   }
 
+  private _describeCondition(
+    condition: Condition,
+    entityId?: string
+  ): string | undefined {
+    const stateObj = entityId ? this.hass.states[entityId] : undefined;
+    const entity = stateObj ? computeStateName(stateObj) : entityId;
+    if (!entity) {
+      return undefined;
+    }
+
+    if (condition.condition === "state") {
+      const value = condition.state ?? condition.state_not;
+      const values = ensureArray(value ?? []).filter((v) => v !== "");
+      if (!values.length) {
+        return undefined;
+      }
+      const attribute =
+        condition.attribute && stateObj
+          ? computeAttributeNameDisplay(
+              this.hass.localize,
+              stateObj,
+              this.hass.entities,
+              condition.attribute
+            )
+          : condition.attribute;
+      const states = formatListWithOrs(
+        this.hass.locale,
+        values.map((v) =>
+          stateObj
+            ? condition.attribute
+              ? this.hass
+                  .formatEntityAttributeValue(stateObj, condition.attribute, v)
+                  .toString()
+              : this.hass.formatEntityState(stateObj, v)
+            : v
+        )
+      );
+      const invert = condition.state_not !== undefined;
+      const variant = invert ? "is_not" : "is";
+      return this.hass.localize(
+        `ui.panel.lovelace.editor.condition-editor.condition.state.description.${
+          attribute ? `${variant}_attribute` : variant
+        }`,
+        { entity, state: states, attribute }
+      );
+    }
+
+    if (condition.condition === "numeric_state") {
+      const { above, below } = condition;
+      if (above === undefined && below === undefined) {
+        return undefined;
+      }
+      const attribute =
+        condition.attribute && stateObj
+          ? computeAttributeNameDisplay(
+              this.hass.localize,
+              stateObj,
+              this.hass.entities,
+              condition.attribute
+            )
+          : condition.attribute;
+      const variant =
+        above !== undefined && below !== undefined
+          ? "above_below"
+          : above !== undefined
+            ? "above"
+            : "below";
+      return this.hass.localize(
+        `ui.panel.lovelace.editor.condition-editor.condition.numeric_state.description.${
+          attribute ? `${variant}_attribute` : variant
+        }`,
+        { entity, above, below, attribute }
+      );
+    }
+
+    return undefined;
+  }
+
   protected render() {
     const condition = this._condition;
 
@@ -228,6 +312,16 @@ export class HaCardConditionEditor extends LitElement {
       isNoEntityCondition(condition.condition, this._noEntity) ||
       containsNoEntityCondition(condition, this._noEntity);
 
+    const contextEntityId =
+      condition.condition === "state" || condition.condition === "numeric_state"
+        ? (condition as StateCondition | NumericStateCondition).entity ||
+          (this._entityContext?.mode === "current"
+            ? this._entityContext.entityId
+            : undefined)
+        : undefined;
+
+    const description = this._describeCondition(condition, contextEntityId);
+
     return html`
       <div class="container">
         <ha-expansion-panel left-chevron>
@@ -254,9 +348,11 @@ export class HaCardConditionEditor extends LitElement {
               >`
             : nothing}
           <h3 slot="header">
-            ${this.hass.localize(
+            ${description ||
+            this.hass.localize(
               `ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label`
-            ) || condition.condition}
+            ) ||
+            condition.condition}
           </h3>
           <ha-automation-row-event-chip
             .show=${this._testingResult !== undefined}

src/translations/en.json

@@ -9270,7 +9270,15 @@
                 "label": "Entity numeric state",
                 "attribute": "[%key:ui::panel::lovelace::editor::condition-editor::condition::state::attribute%]",
                 "above": "Above",
-                "below": "Below"
+                "below": "Below",
+                "description": {
+                  "above": "{entity} is above {above}",
+                  "below": "{entity} is below {below}",
+                  "above_below": "{entity} is above {above} and below {below}",
+                  "above_attribute": "{entity} {attribute} is above {above}",
+                  "below_attribute": "{entity} {attribute} is below {below}",
+                  "above_below_attribute": "{entity} {attribute} is above {above} and below {below}"
+                }
               },
               "screen": {
                 "label": "Screen",
@@ -9288,7 +9296,13 @@
                 "attribute": "Attribute (optional)",
                 "current_entity": "Current entity",
                 "state_equal": "State is equal to",
-                "state_not_equal": "State is not equal to"
+                "state_not_equal": "State is not equal to",
+                "description": {
+                  "is": "{entity} is {state}",
+                  "is_not": "{entity} is not {state}",
+                  "is_attribute": "{entity} {attribute} is {state}",
+                  "is_not_attribute": "{entity} {attribute} is not {state}"
+                }
               },
               "time": {
                 "label": "Time",