Name maintenance problem tiles after the device and the entity (#55420)

Problem binary sensors were added to the maintenance view using the
battery tile builder, which names every tile after its device. A device
with several problem sensors (overheating, overvoltage, ...) then showed
identical tiles. Problem tiles now use a device plus entity name; the
entity part is dropped automatically when the sensor has no name of its
own, so single-sensor devices still read as just the device name.
Battery tiles keep the device-only name.

Fixes home-assistant/frontend#55413

src/panels/lovelace/cards/hui-entities-card.ts

@@ -310,11 +310,11 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         position: relative;
       }
 
-      #states > div:first-child > hui-section-row::part(divider) {
+      #states:first-child > div:first-child > hui-section-row::part(divider) {
         display: none;
       }
 
-      #states > div:first-child > hui-section-row::part(label) {
+      #states:first-child > div:first-child > hui-section-row::part(label) {
         margin-top: 0;
       }
 

src/panels/maintenance/strategies/maintenance-view-strategy.ts

@@ -92,16 +92,22 @@ export const filterUnavailableBatteryEntities = (
     return states[entityId]?.state === "unavailable";
   });
 
-const computeBatteryTileCard = (
+const computeMaintenanceTileCard = (
+  states: HomeAssistant["states"],
   entities: HomeAssistant["entities"],
   entityId: string
 ): TileCardConfig => {
-  const entity = entities[entityId];
-  const deviceId = entity?.device_id;
+  const deviceId = entities[entityId]?.device_id;
+  if (!deviceId) {
+    return { type: "tile", entity: entityId, name: { type: "entity" } };
+  }
+  const isProblem = states[entityId]?.attributes?.device_class === "problem";
   return {
     type: "tile",
     entity: entityId,
-    name: { type: deviceId ? "device" : "entity" },
+    name: isProblem
+      ? [{ type: "device" }, { type: "entity" }]
+      : { type: "device" },
   };
 };
 
@@ -130,7 +136,9 @@ const processAreasForBattery = (
     const areaCards: LovelaceCardConfig[] = [];
 
     for (const entityId of areaBatteryEntities) {
-      areaCards.push(computeBatteryTileCard(hass.entities, entityId));
+      areaCards.push(
+        computeMaintenanceTileCard(hass.states, hass.entities, entityId)
+      );
     }
 
     if (areaCards.length > 0) {
@@ -170,7 +178,9 @@ const processUnassignedEntities = (
   const cards: LovelaceCardConfig[] = [];
 
   for (const entityId of unassignedEntities) {
-    cards.push(computeBatteryTileCard(hass.entities, entityId));
+    cards.push(
+      computeMaintenanceTileCard(hass.states, hass.entities, entityId)
+    );
   }
 
   return cards;

test/panels/maintenance/strategies/maintenance-view-strategy.test.ts

@@ -2,8 +2,13 @@ import { describe, expect, it } from "vitest";
 import {
   filterLowBatteryEntities,
   filterProblemEntities,
+  MaintenanceViewStrategy,
 } from "../../../../src/panels/maintenance/strategies/maintenance-view-strategy";
-import { mockEntity } from "../../../common/entity/context/context-mock";
+import {
+  mockDevice,
+  mockEntity,
+} from "../../../common/entity/context/context-mock";
+import type { LovelaceSectionConfig } from "../../../../src/data/lovelace/config/section";
 import { createMockEntityState, createMockHass } from "../../../fixtures/hass";
 
 describe("filterLowBatteryEntities", () => {
@@ -209,3 +214,70 @@ describe("filterProblemEntities", () => {
     ).toEqual(["binary_sensor.has_problem"]);
   });
 });
+
+describe("MaintenanceViewStrategy.generate", () => {
+  it("names problem tiles after the device and the entity", async () => {
+    const hass = createMockHass(
+      {
+        "sensor.microwave_battery": createMockEntityState(
+          "sensor.microwave_battery",
+          "80",
+          { device_class: "battery" }
+        ),
+        "binary_sensor.microwave_overheating": createMockEntityState(
+          "binary_sensor.microwave_overheating",
+          "off",
+          { device_class: "problem" }
+        ),
+        "binary_sensor.standalone_problem": createMockEntityState(
+          "binary_sensor.standalone_problem",
+          "off",
+          { device_class: "problem" }
+        ),
+      },
+      {
+        devices: {
+          microwave: mockDevice({ id: "microwave", name: "Microwave" }),
+        },
+        entities: {
+          "sensor.microwave_battery": mockEntity({
+            entity_id: "sensor.microwave_battery",
+            device_id: "microwave",
+          }),
+          "binary_sensor.microwave_overheating": mockEntity({
+            entity_id: "binary_sensor.microwave_overheating",
+            device_id: "microwave",
+          }),
+          "binary_sensor.standalone_problem": mockEntity({
+            entity_id: "binary_sensor.standalone_problem",
+          }),
+        },
+      }
+    );
+
+    const view = await MaintenanceViewStrategy.generate(
+      { type: "maintenance" },
+      hass
+    );
+
+    const section = view.sections?.[0] as LovelaceSectionConfig;
+
+    expect(section.cards?.slice(1)).toEqual([
+      {
+        type: "tile",
+        entity: "sensor.microwave_battery",
+        name: { type: "device" },
+      },
+      {
+        type: "tile",
+        entity: "binary_sensor.microwave_overheating",
+        name: [{ type: "device" }, { type: "entity" }],
+      },
+      {
+        type: "tile",
+        entity: "binary_sensor.standalone_problem",
+        name: { type: "entity" },
+      },
+    ]);
+  });
+});