Use explicit default name in entity name picker and lovelace cards (#30189)

src/components/entity/ha-entity-name-picker.ts

@@ -6,7 +6,10 @@ import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { EntityNameItem } from "../../common/entity/compute_entity_name_display";
+import {
+  DEFAULT_ENTITY_NAME,
+  type EntityNameItem,
+} from "../../common/entity/compute_entity_name_display";
 import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import type { EntityNameType } from "../../common/translations/entity-state";
 import type { LocalizeKeys } from "../../common/translations/localize";
@@ -293,13 +296,13 @@ export class HaEntityNamePicker extends LitElement {
       }
       return [{ type: "text", text: value } satisfies EntityNameItem];
     }
-    return value ? ensureArray(value) : [];
+    return value ? ensureArray(value) : [...DEFAULT_ENTITY_NAME];
   });
 
   private _toValue = memoizeOne(
     (items: EntityNameItem[]): typeof this.value => {
       if (items.length === 0) {
-        return undefined;
+        return "";
       }
       if (items.length === 1) {
         const item = items[0];

src/panels/lovelace/common/entity/compute-lovelace-entity-name.ts

@@ -1,7 +1,9 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { ensureArray } from "../../../../common/array/ensure-array";
-import type { EntityNameItem } from "../../../../common/entity/compute_entity_name_display";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
+import {
+  DEFAULT_ENTITY_NAME,
+  type EntityNameItem,
+} from "../../../../common/entity/compute_entity_name_display";
 import type { HomeAssistant } from "../../../../types";
 
 /**
@@ -17,15 +19,14 @@ export const computeLovelaceEntityName = (
   stateObj: HassEntity | undefined,
   config: string | EntityNameItem | EntityNameItem[] | undefined
 ): string => {
-  // If no config is provided, fall back to the default state name
-  if (!config) {
-    return stateObj ? computeStateName(stateObj) : "";
-  }
-  if (typeof config !== "object") {
-    return String(config);
+  if (typeof config === "string") {
+    return config;
   }
   if (stateObj) {
-    return hass.formatEntityName(stateObj, config);
+    return hass.formatEntityName(stateObj, config ?? DEFAULT_ENTITY_NAME);
+  }
+  if (!config) {
+    return "";
   }
   // If entity is not found, fall back to text parts in config
   // This allows for static names even when the entity is missing

test/panels/lovelace/common/entity/compute-lovelace-entity-name.test.ts

@@ -22,7 +22,7 @@ describe("computeLovelaceEntityName", () => {
     expect(mockFormatEntityName).not.toHaveBeenCalled();
   });
 
-  it("return state name when nameConfig is empty string", () => {
+  it("returns empty string when nameConfig is empty string", () => {
     const mockFormatEntityName = vi.fn();
     const hass = createMockHass(mockFormatEntityName);
     const stateObj = mockStateObj({
@@ -32,11 +32,11 @@ describe("computeLovelaceEntityName", () => {
 
     const result = computeLovelaceEntityName(hass, stateObj, "");
 
-    expect(result).toBe("Kitchen Light");
+    expect(result).toBe("");
     expect(mockFormatEntityName).not.toHaveBeenCalled();
   });
 
-  it("return state name when nameConfig is undefined", () => {
+  it("calls formatEntityName with DEFAULT_ENTITY_NAME when nameConfig is undefined", () => {
     const mockFormatEntityName = vi.fn(() => "Formatted Name");
     const hass = createMockHass(mockFormatEntityName);
     const stateObj = mockStateObj({
@@ -46,8 +46,12 @@ describe("computeLovelaceEntityName", () => {
 
     const result = computeLovelaceEntityName(hass, stateObj, undefined);
 
-    expect(result).toBe("Kitchen Light");
-    expect(mockFormatEntityName).not.toHaveBeenCalled();
+    expect(result).toBe("Formatted Name");
+    expect(mockFormatEntityName).toHaveBeenCalledTimes(1);
+    expect(mockFormatEntityName).toHaveBeenCalledWith(stateObj, [
+      { type: "device" },
+      { type: "entity" },
+    ]);
   });
 
   it("calls formatEntityName with EntityNameItem config", () => {