Lovelace condition live test (#52027)

* Add lovelace condition live test

* Add live card status

* Add empty text

Author: wendevlin

src/common/controllers/condition-listeners-controller.ts

@@ -0,0 +1,59 @@
+import type {
+  ReactiveController,
+  ReactiveControllerHost,
+} from "@lit/reactive-element/reactive-controller";
+import type {
+  Condition,
+  ConditionContext,
+} from "../../panels/lovelace/common/validate-condition";
+import type { HomeAssistant } from "../../types";
+import { setupConditionListeners } from "../condition/listeners";
+
+/**
+ * Reactive controller that manages the media-query and time-based listeners
+ * needed to keep a set of lovelace visibility conditions evaluated live.
+ *
+ * The host is responsible for the actual evaluation (e.g. computing visible /
+ * hidden / invalid state); the controller only triggers it via the supplied
+ * `onUpdate` callback when something the conditions depend on changes. Call
+ * `setup()` whenever the conditions change; the controller clears previous
+ * listeners and re-subscribes. Listeners are automatically released when the
+ * host disconnects.
+ */
+export class ConditionListenersController implements ReactiveController {
+  private _unsubs: (() => void)[] = [];
+
+  constructor(host: ReactiveControllerHost) {
+    host.addController(this);
+  }
+
+  public hostDisconnected(): void {
+    this.clear();
+  }
+
+  public setup(
+    conditions: Condition[],
+    hass: HomeAssistant,
+    onUpdate: () => void,
+    getContext?: () => ConditionContext
+  ): void {
+    this.clear();
+    if (!conditions.length) {
+      return;
+    }
+    setupConditionListeners(
+      conditions,
+      hass,
+      (unsub) => this._unsubs.push(unsub),
+      () => onUpdate(),
+      getContext
+    );
+  }
+
+  public clear(): void {
+    for (const unsub of this._unsubs) {
+      unsub();
+    }
+    this._unsubs = [];
+  }
+}

src/components/automation/ha-automation-row-live-test.ts

@@ -0,0 +1,91 @@
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../ha-tooltip";
+
+export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
+
+/**
+ * @element ha-automation-row-live-test
+ *
+ * @summary
+ * Small status indicator dot used in automation/condition rows to surface the
+ * live evaluation result. Renders an optional tooltip with details on hover.
+ *
+ * @attr {"pass"|"fail"|"invalid"|"unknown"} state - The current live-test state. Defaults to `unknown`.
+ * @attr {string} label - Accessible label announced by assistive technology.
+ * @attr {string} message - Optional tooltip body shown on hover/focus.
+ */
+@customElement("ha-automation-row-live-test")
+export class HaAutomationRowLiveTest extends LitElement {
+  @property({ reflect: true }) public state: LiveTestState = "unknown";
+
+  @property() public label = "";
+
+  @property() public message?: string;
+
+  protected render() {
+    return html`
+      <div
+        id="indicator"
+        role="status"
+        tabindex="0"
+        aria-label=${this.label}
+      ></div>
+      ${this.message
+        ? html`<ha-tooltip for="indicator">${this.message}</ha-tooltip>`
+        : nothing}
+    `;
+  }
+
+  static styles = css`
+    :host {
+      position: absolute;
+      inset-inline-end: -6px;
+      display: inline-block;
+    }
+    #indicator {
+      width: 12px;
+      height: 12px;
+      border-radius: var(--ha-border-radius-circle);
+      border: 3px solid;
+      box-sizing: border-box;
+      background-color: var(--card-background-color);
+      transition: all var(--ha-animation-duration-normal) ease-in-out;
+    }
+    :host([state="pass"]) #indicator {
+      background-color: var(--ha-color-fill-success-loud-resting);
+      border-color: var(--ha-color-fill-success-loud-resting);
+    }
+    :host([state="pass"]) #indicator:hover {
+      background-color: var(--ha-color-fill-success-loud-hover);
+      border-color: var(--ha-color-fill-success-loud-hover);
+    }
+    :host([state="fail"]) #indicator {
+      border-color: var(--ha-color-fill-warning-loud-resting);
+    }
+    :host([state="fail"]) #indicator:hover {
+      background-color: var(--ha-color-fill-warning-loud-hover);
+      border-color: var(--ha-color-fill-warning-loud-hover);
+    }
+    :host([state="invalid"]) #indicator {
+      border-color: var(--ha-color-fill-danger-loud-resting);
+    }
+    :host([state="invalid"]) #indicator:hover {
+      background-color: var(--ha-color-fill-danger-loud-hover);
+      border-color: var(--ha-color-fill-danger-loud-hover);
+    }
+    :host([state="unknown"]) #indicator {
+      border-color: var(--ha-color-fill-neutral-loud-resting);
+    }
+    :host([state="unknown"]) #indicator:hover {
+      background-color: var(--ha-color-fill-neutral-loud-hover);
+      border-color: var(--ha-color-fill-neutral-loud-hover);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-row-live-test": HaAutomationRowLiveTest;
+  }
+}

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

@@ -23,7 +23,7 @@ import type {
 } from "home-assistant-js-websocket";
 import { dump } from "js-yaml";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
@@ -39,14 +39,14 @@ import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/automation/ha-automation-row";
 import type { HaAutomationRow } from "../../../../components/automation/ha-automation-row";
 import "../../../../components/automation/ha-automation-row-event-chip";
+import "../../../../components/automation/ha-automation-row-live-test";
 import "../../../../components/ha-card";
 import "../../../../components/ha-condition-icon";
 import "../../../../components/ha-dropdown";
 import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-tooltip";
 import type {
   AutomationClipboard,
   Condition,
@@ -498,23 +498,15 @@ export default class HaAutomationConditionRow extends LitElement {
               @click=${this._toggleSidebar}
               @toggle-collapsed=${this._toggleCollapse}
               >${this._renderRow()}
-              <div
+              <ha-automation-row-live-test
                 slot="icons"
-                id="live-test"
-                class=${this._liveTestResult.state}
-                role="status"
-                tabindex="0"
-                aria-label=${this.hass.localize(
+                .state=${this._liveTestResult.state}
+                .label=${this.hass.localize(
                   `ui.panel.config.automation.editor.conditions.live_test_state.${this._liveTestResult.state}`
                 )}
-              >
-                ${this._liveTestResult.message
-                  ? html`<ha-tooltip for="live-test">
-                      ${this._liveTestResult.message}
-                    </ha-tooltip>`
-                  : nothing}
-              </div></ha-automation-row
-            >`
+                .message=${this._liveTestResult.message}
+              ></ha-automation-row-live-test
+            ></ha-automation-row>`
           : html`
               <ha-expansion-panel
                 left-chevron
@@ -1064,52 +1056,7 @@ export default class HaAutomationConditionRow extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [
-      rowStyles,
-      overflowStyles,
-      css`
-        #live-test {
-          position: absolute;
-          inset-inline-end: -6px;
-          width: 12px;
-          height: 12px;
-          border-radius: var(--ha-border-radius-circle);
-          border: 3px solid;
-          box-sizing: border-box;
-          background-color: var(--card-background-color);
-          transition: all var(--ha-animation-duration-normal) ease-in-out;
-        }
-        #live-test.pass {
-          background-color: var(--ha-color-fill-success-loud-resting);
-          border-color: var(--ha-color-fill-success-loud-resting);
-        }
-        #live-test.pass:hover {
-          background-color: var(--ha-color-fill-success-loud-hover);
-          border-color: var(--ha-color-fill-success-loud-hover);
-        }
-        #live-test.fail {
-          border-color: var(--ha-color-fill-warning-loud-resting);
-        }
-        #live-test.fail:hover {
-          background-color: var(--ha-color-fill-warning-loud-hover);
-          border-color: var(--ha-color-fill-warning-loud-hover);
-        }
-        #live-test.invalid {
-          border-color: var(--ha-color-fill-danger-loud-resting);
-        }
-        #live-test.invalid:hover {
-          background-color: var(--ha-color-fill-danger-loud-hover);
-          border-color: var(--ha-color-fill-danger-loud-hover);
-        }
-        #live-test.unknown {
-          border-color: var(--ha-color-fill-neutral-loud-resting);
-        }
-        #live-test.unknown:hover {
-          background-color: var(--ha-color-fill-neutral-loud-hover);
-          border-color: var(--ha-color-fill-neutral-loud-hover);
-        }
-      `,
-    ];
+    return [rowStyles, overflowStyles];
   }
 }
 

src/panels/lovelace/editor/badge-editor/hui-badge-visibility-editor.ts

@@ -3,12 +3,12 @@ import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-alert";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../../types";
 import type { Condition } from "../../common/validate-condition";
 import { conditionsEntityContext } from "../conditions/context";
 import "../conditions/ha-card-conditions-editor";
+import "../conditions/ha-visibility-status";
 
 @customElement("hui-badge-visibility-editor")
 export class HuiBadgeVisibilityEditor extends LitElement {
@@ -34,11 +34,10 @@ export class HuiBadgeVisibilityEditor extends LitElement {
   render() {
     const conditions = this.config.visibility ?? [];
     return html`
-      <p class="intro">
-        ${this.hass.localize(
-          `ui.panel.lovelace.editor.edit_badge.visibility.explanation`
-        )}
-      </p>
+      <ha-visibility-status
+        .hass=${this.hass}
+        .conditions=${conditions}
+      ></ha-visibility-status>
       <ha-card-conditions-editor
         .hass=${this.hass}
         .conditions=${conditions}
@@ -62,10 +61,8 @@ export class HuiBadgeVisibilityEditor extends LitElement {
   }
 
   static styles = css`
-    .intro {
-      margin: 0;
-      color: var(--secondary-text-color);
-      margin-bottom: 8px;
+    ha-visibility-status {
+      margin-bottom: var(--ha-space-3);
     }
   `;
 }

src/panels/lovelace/editor/card-editor/hui-card-visibility-editor.ts

@@ -3,12 +3,12 @@ import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-alert";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { HomeAssistant } from "../../../../types";
 import type { Condition } from "../../common/validate-condition";
 import { conditionsEntityContext } from "../conditions/context";
 import "../conditions/ha-card-conditions-editor";
+import "../conditions/ha-visibility-status";
 
 @customElement("hui-card-visibility-editor")
 export class HuiCardVisibilityEditor extends LitElement {
@@ -34,11 +34,10 @@ export class HuiCardVisibilityEditor extends LitElement {
   render() {
     const conditions = this.config.visibility ?? [];
     return html`
-      <p class="intro">
-        ${this.hass.localize(
-          `ui.panel.lovelace.editor.edit_card.visibility.explanation`
-        )}
-      </p>
+      <ha-visibility-status
+        .hass=${this.hass}
+        .conditions=${conditions}
+      ></ha-visibility-status>
       <ha-card-conditions-editor
         .hass=${this.hass}
         .conditions=${conditions}
@@ -62,10 +61,8 @@ export class HuiCardVisibilityEditor extends LitElement {
   }
 
   static styles = css`
-    .intro {
-      margin: 0;
-      color: var(--secondary-text-color);
-      margin-bottom: 8px;
+    ha-visibility-status {
+      margin-bottom: var(--ha-space-3);
     }
   `;
 }