Fix Home security alert state handling

Author: timmo001

src/panels/home/ha-panel-home.ts

@@ -60,12 +60,15 @@ class PanelHome extends SubscribeMixin(LitElement) {
 
   private _loadConfigPromise?: Promise<void>;
 
+  private _securityConfigRevision = 0;
+
   public hassSubscribe() {
     return [
       subscribeFrontendSystemData(
         this.hass.connection,
         "security",
         ({ value }) => {
+          this._securityConfigRevision++;
           const config = value || {};
           if (deepEqual(config, this._securityConfig)) {
             return;
@@ -175,19 +178,40 @@ class PanelHome extends SubscribeMixin(LitElement) {
   }
 
   private async _loadConfig() {
-    try {
-      const [_, homeData, securityData] = await Promise.all([
+    const securityConfigRevision = this._securityConfigRevision;
+    const [translationsResult, homeResult, securityResult] =
+      await Promise.allSettled([
         this.hass.loadFragmentTranslation("lovelace"),
         fetchFrontendSystemData(this.hass.connection, "home"),
         fetchFrontendSystemData(this.hass.connection, "security"),
       ]);
-      this._config = homeData || {};
-      this._securityConfig = securityData || {};
-    } catch (err) {
+
+    if (translationsResult.status === "rejected") {
+      // eslint-disable-next-line no-console
+      console.error(
+        "Failed to load home configuration:",
+        translationsResult.reason
+      );
+      this._config = {};
+    } else if (homeResult.status === "rejected") {
       // eslint-disable-next-line no-console
-      console.error("Failed to load configuration:", err);
+      console.error("Failed to load home configuration:", homeResult.reason);
       this._config = {};
-      this._securityConfig = {};
+    } else {
+      this._config = homeResult.value || {};
+    }
+
+    if (securityResult.status === "rejected") {
+      // eslint-disable-next-line no-console
+      console.error(
+        "Failed to load security configuration:",
+        securityResult.reason
+      );
+      if (securityConfigRevision === this._securityConfigRevision) {
+        this._securityConfig = {};
+      }
+    } else if (securityConfigRevision === this._securityConfigRevision) {
+      this._securityConfig = securityResult.value || {};
     }
   }
 

src/panels/lovelace/strategies/home/home-overview-view-strategy.ts

@@ -24,6 +24,7 @@ import { resolveShortcutItems } from "../../../../data/home_shortcuts";
 import type { HomeAssistant } from "../../../../types";
 import type {
   AreaCardConfig,
+  ConditionalCardConfig,
   DiscoveredDevicesCardConfig,
   EmptyStateCardConfig,
   HeadingCardConfig,
@@ -35,6 +36,8 @@ import type {
   TileCardConfig,
   UpdatesCardConfig,
 } from "../../cards/types";
+import { computeDefaultSecurityAlertVisibility } from "../../cards/security-alerts/helpers";
+import { computeSecurityAlertCardEntityConfig } from "../../../security/strategies/security-alerts";
 import {
   LARGE_SCREEN_CONDITION,
   SMALL_SCREEN_CONDITION,
@@ -469,6 +472,10 @@ export class HomeOverviewViewStrategy extends ReactiveElement {
       }
     }
 
+    const hasVisibleSummaryCards = summaryCards.some(
+      (card) => !("hide_empty" in card && card.hide_empty)
+    );
+
     // Build summary cards for sidebar (full width: columns 12)
     const sidebarSummaryCards = summaryCards.map((card) => ({
       ...card,
@@ -515,77 +522,116 @@ export class HomeOverviewViewStrategy extends ReactiveElement {
           }
         : undefined;
 
-    const alertsSection: LovelaceSectionConfig | undefined = config
-      .alert_entities?.length
-      ? {
-          type: "grid",
-          column_span: maxColumns,
-          cards: [
-            {
-              type: "security-alerts",
-              alert_entities: config.alert_entities,
-              horizontal: true,
-              grid_options: { columns: "full" },
-            } satisfies SecurityAlertsCardConfig,
-          ],
-        }
-      : undefined;
+    const alertEntities = config.alert_entities?.map((alertEntity) =>
+      computeSecurityAlertCardEntityConfig(
+        hass.states[alertEntity.entity],
+        alertEntity
+      )
+    );
+
+    const alertsSection: LovelaceSectionConfig | undefined =
+      alertEntities?.length
+        ? {
+            type: "grid",
+            column_span: maxColumns,
+            cards: [
+              {
+                type: "security-alerts",
+                alert_entities: alertEntities,
+                horizontal: true,
+                grid_options: { columns: "full" },
+              } satisfies SecurityAlertsCardConfig,
+            ],
+          }
+        : undefined;
+
+    const emptyStateCard = {
+      type: "empty-state",
+      icon: "mdi:home-assistant",
+      content_only: true,
+      title: hass.localize("ui.panel.lovelace.strategy.home.welcome_title"),
+      content: hass.localize("ui.panel.lovelace.strategy.home.welcome_content"),
+      ...(config.home_panel && hass.user?.is_admin
+        ? {
+            buttons: [
+              {
+                icon: "mdi:plus",
+                text: hass.localize(
+                  "ui.panel.lovelace.strategy.home.welcome_add_device"
+                ),
+                appearance: "filled" as const,
+                variant: "brand" as const,
+                tap_action: {
+                  action: "fire-dom-event" as const,
+                  home_panel: {
+                    type: "add_integration",
+                  },
+                },
+              },
+              {
+                icon: "mdi:home-edit",
+                text: hass.localize(
+                  "ui.panel.lovelace.strategy.home.welcome_edit_areas"
+                ),
+                appearance: "plain" as const,
+                variant: "brand" as const,
+                tap_action: {
+                  action: "navigate" as const,
+                  navigation_path: "/config/areas/dashboard",
+                },
+              },
+            ],
+          }
+        : {}),
+    } as EmptyStateCardConfig;
 
     // No sections, show empty state
     if (floorsSections.length === 0 && !alertsSection) {
       return {
         type: "panel",
-        cards: [
-          {
-            type: "empty-state",
-            icon: "mdi:home-assistant",
-            content_only: true,
-            title: hass.localize(
-              "ui.panel.lovelace.strategy.home.welcome_title"
-            ),
-            content: hass.localize(
-              "ui.panel.lovelace.strategy.home.welcome_content"
-            ),
-            ...(config.home_panel && hass.user?.is_admin
-              ? {
-                  buttons: [
-                    {
-                      icon: "mdi:plus",
-                      text: hass.localize(
-                        "ui.panel.lovelace.strategy.home.welcome_add_device"
-                      ),
-                      appearance: "filled",
-                      variant: "brand",
-                      tap_action: {
-                        action: "fire-dom-event",
-                        home_panel: {
-                          type: "add_integration",
-                        },
-                      },
-                    },
-                    {
-                      icon: "mdi:home-edit",
-                      text: hass.localize(
-                        "ui.panel.lovelace.strategy.home.welcome_edit_areas"
-                      ),
-                      appearance: "plain",
-                      variant: "brand",
-                      tap_action: {
-                        action: "navigate",
-                        navigation_path: "/config/areas/dashboard",
-                      },
-                    },
-                  ],
-                }
-              : {}),
-          } as EmptyStateCardConfig,
-        ],
+        cards: [emptyStateCard],
       };
     }
 
+    const emptyStateSection: LovelaceSectionConfig | undefined =
+      floorsSections.length === 0 &&
+      !favoritesSection &&
+      !hasVisibleSummaryCards &&
+      alertEntities?.length
+        ? {
+            type: "grid",
+            column_span: maxColumns,
+            cards: [
+              {
+                type: "conditional",
+                conditions: [
+                  {
+                    condition: "not",
+                    conditions: [
+                      {
+                        condition: "or",
+                        conditions: alertEntities.map((alertEntity) => ({
+                          condition: "and",
+                          conditions:
+                            alertEntity.visibility ??
+                            computeDefaultSecurityAlertVisibility(
+                              alertEntity.entity
+                            ),
+                        })),
+                      },
+                    ],
+                  },
+                ],
+                card: emptyStateCard,
+              } satisfies ConditionalCardConfig,
+            ],
+          }
+        : undefined;
+
     const sections = (
       [
         alertsSection,
+        emptyStateSection,
         favoritesSection,
         mobileSummarySection,
         ...floorsSections,

test/panels/home/ha-panel-home.test.ts

@@ -0,0 +1,115 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { Connection } from "home-assistant-js-websocket";
+import type {
+  HomeFrontendSystemData,
+  SecurityFrontendSystemData,
+} from "../../../src/data/frontend";
+import type { HomeAssistant } from "../../../src/types";
+import "../../../src/panels/home/ha-panel-home";
+import { createMockHass } from "../../fixtures/hass";
+
+vi.hoisted(() => {
+  Object.assign(globalThis, {
+    __STATIC_PATH__: "/",
+    __HASS_URL__: "",
+    __BUILD__: "modern",
+    __VERSION__: "test",
+    __BACKWARDS_COMPAT__: false,
+    __SUPERVISOR__: false,
+    __NAMESPACE__: "frontend",
+  });
+});
+
+type TestPanelHome = HTMLElement & {
+  hass: HomeAssistant;
+  hassSubscribe(): unknown[];
+  _config: HomeFrontendSystemData;
+  _securityConfig: SecurityFrontendSystemData;
+} & Record<"_loadConfig", () => Promise<void>>;
+
+const deferred = <T>() => {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((promiseResolve) => {
+    resolve = promiseResolve;
+  });
+  return { promise, resolve };
+};
+
+describe("ha-panel-home configuration loading", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("does not overwrite a newer security subscription update", async () => {
+    const translations = deferred<HomeAssistant["localize"] | undefined>();
+    let securityChanged:
+      | ((data: { value: SecurityFrontendSystemData | null }) => void)
+      | undefined;
+    const hass = createMockHass();
+    hass.loadFragmentTranslation = () => translations.promise;
+    hass.connection = {
+      sendMessagePromise: vi.fn(async (message: { key: string }) => ({
+        value:
+          message.key === "home"
+            ? {}
+            : { alert_entities: [{ entity: "binary_sensor.old" }] },
+      })),
+      subscribeMessage: vi.fn(
+        (
+          callback: (data: { value: SecurityFrontendSystemData | null }) => void
+        ) => {
+          securityChanged = callback;
+          return Promise.resolve(() => undefined);
+        }
+      ),
+    } as unknown as Connection;
+
+    const element = document.createElement(
+      "ha-panel-home"
+    ) as unknown as TestPanelHome;
+    element.hass = hass;
+    element.hassSubscribe();
+    const loading = element._loadConfig();
+
+    securityChanged!({
+      value: { alert_entities: [{ entity: "binary_sensor.new" }] },
+    });
+    translations.resolve(undefined);
+    await loading;
+
+    expect(element._securityConfig.alert_entities).toEqual([
+      { entity: "binary_sensor.new" },
+    ]);
+  });
+
+  it("preserves loaded Home config when security loading fails", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => undefined);
+    const homeConfig: HomeFrontendSystemData = {
+      favorite_entities: ["light.kitchen"],
+      hide_suggested_entities: true,
+      shortcuts: [{ type: "custom", path: "/test", label: "Test" }],
+    };
+    const hass = createMockHass();
+    hass.loadFragmentTranslation = async () => undefined;
+    hass.connection = {
+      sendMessagePromise: vi.fn(async (message: { key: string }) => {
+        if (message.key === "security") {
+          throw new Error("Security unavailable");
+        }
+        return { value: homeConfig };
+      }),
+    } as unknown as Connection;
+
+    const element = document.createElement(
+      "ha-panel-home"
+    ) as unknown as TestPanelHome;
+    element.hass = hass;
+    element._securityConfig = {
+      alert_entities: [{ entity: "binary_sensor.old" }],
+    };
+    await element._loadConfig();
+
+    expect(element._config).toEqual(homeConfig);
+    expect(element._securityConfig).toEqual({});
+  });
+});