Adjust backend translations for entity components (#15820)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/common/entity/compute_attribute_display.ts

@@ -12,6 +12,7 @@ export const computeAttributeValueDisplay = (
   value?: any
 ): string => {
   const entityId = stateObj.entity_id;
+  const deviceClass = stateObj.attributes.device_class;
   const attributeValue =
     value !== undefined ? value : stateObj.attributes[attribute];
   const domain = computeDomain(entityId);
@@ -23,8 +24,12 @@ export const computeAttributeValueDisplay = (
       localize(
         `component.${entity.platform}.entity.${domain}.${translationKey}.state_attributes.${attribute}.state.${attributeValue}`
       )) ||
+    (deviceClass &&
+      localize(
+        `component.${domain}.entity_component.${deviceClass}.state_attributes.${attribute}.state.${attributeValue}`
+      )) ||
     localize(
-      `component.${domain}.state_attributes._.${attribute}.state.${attributeValue}`
+      `component.${domain}.entity_component._.state_attributes.${attribute}.state.${attributeValue}`
     ) ||
     attributeValue
   );
@@ -37,6 +42,7 @@ export const computeAttributeNameDisplay = (
   attribute: string
 ): string => {
   const entityId = stateObj.entity_id;
+  const deviceClass = stateObj.attributes.device_class;
   const domain = computeDomain(entityId);
   const entity = entities[entityId] as EntityRegistryDisplayEntry | undefined;
   const translationKey = entity?.translation_key;
@@ -46,7 +52,13 @@ export const computeAttributeNameDisplay = (
       localize(
         `component.${entity.platform}.entity.${domain}.${translationKey}.state_attributes.${attribute}.name`
       )) ||
-    localize(`component.${domain}.state_attributes._.${attribute}.name`) ||
+    (deviceClass &&
+      localize(
+        `component.${domain}.entity_component.${deviceClass}.state_attributes.${attribute}.name`
+      )) ||
+    localize(
+      `component.${domain}.entity_component._.state_attributes.${attribute}.name`
+    ) ||
     attribute
   );
 };

src/common/entity/compute_state_display.ts

@@ -214,10 +214,10 @@ export const computeStateDisplayFromEntityAttributes = (
     // Return device class translation
     (attributes.device_class &&
       localize(
-        `component.${domain}.state.${attributes.device_class}.${state}`
+        `component.${domain}.entity_component.${attributes.device_class}.state.${state}`
       )) ||
     // Return default translation
-    localize(`component.${domain}.state._.${state}`) ||
+    localize(`component.${domain}.entity_component._.state.${state}`) ||
     // We don't know! Return the raw state.
     state
   );

src/components/ha-vacuum-state.js

@@ -76,7 +76,7 @@ class HaVacuumState extends LocalizeMixin(PolymerElement) {
       ? this.localize(
           `ui.card.vacuum.actions.${STATES_INTERCEPTABLE[state].action}`
         )
-      : this.localize(`component.vacuum._.${state}`);
+      : this.localize(`component.vacuum.entity_component._.state.${state}`);
   }
 
   _callService(ev) {

src/data/translation.ts

@@ -44,8 +44,8 @@ declare global {
 export type TranslationCategory =
   | "title"
   | "state"
-  | "state_attributes"
   | "entity"
+  | "entity_component"
   | "config"
   | "config_panel"
   | "options"

src/dialogs/more-info/controls/more-info-vacuum.ts

@@ -115,7 +115,7 @@ class MoreInfoVacuum extends LitElement {
                       <strong>
                         ${stateObj.attributes.status ||
                         this.hass.localize(
-                          `component.vacuum.state._.${stateObj.state}`
+                          `component.vacuum.entity_component._.state.${stateObj.state}`
                         ) ||
                         stateObj.state}
                       </strong>

src/dialogs/more-info/controls/more-info-water_heater.js

@@ -225,7 +225,10 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
   }
 
   _localizeOperationMode(localize, mode) {
-    return localize(`component.water_heater.state._.${mode}`) || mode;
+    return (
+      localize(`component.water_heater.entity_component._.state.${mode}`) ||
+      mode
+    );
   }
 }
 

src/layouts/home-assistant.ts

@@ -136,12 +136,14 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
   protected hassConnected() {
     super.hassConnected();
     // @ts-ignore
-    this._loadHassTranslations(this.hass!.language, "state");
-    // @ts-ignore
-    this._loadHassTranslations(this.hass!.language, "state_attributes");
+    this._loadHassTranslations(this.hass!.language, "entity_component");
     // @ts-ignore
     this._loadHassTranslations(this.hass!.language, "entity");
 
+    // Backwards compatibility for custom integrations
+    // @ts-ignore
+    this._loadHassTranslations(this.hass!.language, "state");
+
     document.addEventListener(
       "visibilitychange",
       () => this._checkVisibility(),

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -236,7 +236,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     return entityState === UNAVAILABLE
       ? this.hass!.localize("state.default.unavailable")
       : this.hass!.localize(
-          `component.alarm_control_panel.state._.${entityState}`
+          `component.alarm_control_panel.entity_component._.state.${entityState}`
         ) || entityState;
   }
 

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

@@ -478,7 +478,9 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         @click=${this._handleAction}
         tabindex="0"
         .path=${modeIcons[mode]}
-        .label=${this.hass!.localize(`component.climate.state._.${mode}`)}
+        .label=${this.hass!.localize(
+          `component.climate.entity_component._.state.${mode}`
+        ) || mode}
       >
       </ha-icon-button>
     `;

test/common/entity/compute_state_display.ts

@@ -32,7 +32,7 @@ describe("computeStateDisplay", () => {
     };
     assert.strictEqual(
       computeStateDisplay(localize, stateObj, localeData, {}),
-      "component.binary_sensor.state._.off"
+      "component.binary_sensor.entity_component._.state.off"
     );
   });
 
@@ -154,7 +154,9 @@ describe("computeStateDisplay", () => {
 
   it("Localizes sensor value with component translation", () => {
     const altLocalize = (message, ...args) => {
-      if (message !== "component.sensor.state._.custom_state") {
+      if (
+        message !== "component.sensor.entity_component._.state.custom_state"
+      ) {
         return "";
       }
       return localize(message, ...args);
@@ -166,7 +168,7 @@ describe("computeStateDisplay", () => {
     };
     assert.strictEqual(
       computeStateDisplay(altLocalize, stateObj, localeData, {}),
-      "component.sensor.state._.custom_state"
+      "component.sensor.entity_component._.state.custom_state"
     );
   });