Fix a bunch of translation strings (#5597)

* Fix a bunch of translation strings

* Fallback on default if no device class translations

src/common/entity/compute_state_display.ts

@@ -96,7 +96,6 @@ export const computeStateDisplay = (
     return legacyComputeStateDisplay(localize, stateObj, language);
   }
 
-  // Real code.
   if (stateObj.state === UNKNOWN || stateObj.state === UNAVAILABLE) {
     return localize(`state.default.${stateObj.state}`);
   }
@@ -141,9 +140,15 @@ export const computeStateDisplay = (
     return formatDateTime(date, language);
   }
 
-  const deviceClass = stateObj.attributes.device_class || "_";
   return (
-    localize(`component.${domain}.state.${deviceClass}.${stateObj.state}`) ||
+    // Return device class translation
+    (stateObj.attributes.device_class &&
+      localize(
+        `component.${domain}.state.${stateObj.attributes.device_class}.${stateObj.state}`
+      )) ||
+    // Return default translation
+    localize(`component.${domain}.state._.${stateObj.state}`) ||
+    // We don't know! Return the raw state.
     stateObj.state
   );
 };

src/components/ha-climate-state.js

@@ -110,7 +110,7 @@ class HaClimateState extends LocalizeMixin(PolymerElement) {
   }
 
   _localizeState(localize, stateObj) {
-    const stateString = localize(`state.climate.${stateObj.state}`);
+    const stateString = localize(`component.climate.state._.${stateObj.state}`);
     return stateObj.attributes.hvac_action
       ? `${localize(
           `state_attributes.climate.hvac_action.${stateObj.attributes.hvac_action}`

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(`state.vacuum.${state}`);
+      : this.localize(`component.vacuum._.${state}`);
   }
 
   _callService(ev) {

src/components/ha-water_heater-state.js

@@ -2,6 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import LocalizeMixin from "../mixins/localize-mixin";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -32,7 +33,7 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
       </style>
 
       <div class="target">
-        <span class="state-label"> [[_localizeState(stateObj.state)]] </span>
+        <span class="state-label"> [[_localizeState(stateObj)]] </span>
         [[computeTarget(hass, stateObj)]]
       </div>
 
@@ -67,8 +68,8 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
     return "";
   }
 
-  _localizeState(state) {
+  _localizeState(stateObj) {
-    return this.localize(`state.water_heater.${state}`) || state;
+    return computeStateDisplay(this.hass.localize, stateObj);
   }
 }
 customElements.define("ha-water_heater-state", HaWaterHeaterState);

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

@@ -185,7 +185,7 @@ class MoreInfoClimate extends LitElement {
                   .map(
                     (mode) => html`
                       <paper-item item-name=${mode}>
-                        ${hass.localize(`state.climate.${mode}`)}
+                        ${hass.localize(`component.climate.state._.${mode}`)}
                       </paper-item>
                     `
                   )}

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

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

src/dialogs/notifications/configurator-notification-item.ts

@@ -11,6 +11,7 @@ import { PersitentNotificationEntity } from "../../data/persistent_notification"
 import { HomeAssistant } from "../../types";
 import "./notification-item-template";
 import { domainToName } from "../../data/integration";
+import { computeStateDisplay } from "../../common/entity/compute_state_display";
 
 @customElement("configurator-notification-item")
 export class HuiConfiguratorNotificationItem extends LitElement {
@@ -38,8 +39,10 @@ export class HuiConfiguratorNotificationItem extends LitElement {
         </div>
 
         <mwc-button slot="actions" @click="${this._handleClick}"
-          >${this.hass.localize(
+          >${computeStateDisplay(
-            `state.configurator.${this.notification.state}`
+            this.hass.localize,
+            this.notification,
+            this.hass.language
           )}</mwc-button
         >
       </notification-item-template>

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

@@ -165,7 +165,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       <ha-card
         .header="${this._config.name ||
         stateObj.attributes.friendly_name ||
-        this._label(stateObj.state)}"
+        this._stateDisplay(stateObj.state)}"
       >
         <ha-label-badge
           class="${classMap({ [stateObj.state]: true })}"
@@ -184,7 +184,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
                 @click="${this._handleActionClick}"
                 outlined
               >
-                ${this._label(state)}
+                ${this._stateDisplay(state)}
               </mwc-button>
             `;
           })}
@@ -212,7 +212,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
                           outlined
                         >
                           ${value === "clear"
-                            ? this._label("clear_code")
+                            ? this.hass!.localize(
+                                `ui.card.alarm_control_panel.clear_code`
+                              )
                             : value}
                         </mwc-button>
                       `;
@@ -232,10 +234,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       : stateLabel;
   }
 
-  private _label(state: string): string {
+  private _stateDisplay(state: string): string {
-    return (
+    return this.hass!.localize(
-      this.hass!.localize(`state.alarm_control_panel.${state}`) ||
+      `component.alarm_control_panel.state._.${state}`
-      this.hass!.localize(`ui.card.alarm_control_panel.${state}`)
     );
   }
 

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

@@ -29,6 +29,7 @@ import {
 } from "../types";
 import { HuiErrorCard } from "./hui-error-card";
 import { EntityCardConfig } from "./types";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 
 @customElement("hui-entity-card")
 export class HuiEntityCard extends LitElement implements LovelaceCard {
@@ -128,13 +129,11 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
               >${"attribute" in this._config
                 ? stateObj.attributes[this._config.attribute!] ||
                   this.hass.localize("state.default.unknown")
-                : this.hass.localize(`state.default.${stateObj.state}`) ||
+                : computeStateDisplay(
-                  this.hass.localize(
+                    this.hass.localize,
-                    `state.${this._config.entity.split(".")[0]}.${
+                    stateObj,
-                      stateObj.state
+                    this.hass.language
-                    }`
+                  )}</span
-                  ) ||
-                  stateObj.state}</span
             >${showUnit
               ? html`
                   <span class="measurement"

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

@@ -30,6 +30,7 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { LightCardConfig } from "./types";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 
 @customElement("hui-light-card")
 export class HuiLightCard extends LitElement implements LovelaceCard {
@@ -154,8 +155,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
             ${UNAVAILABLE_STATES.includes(stateObj.state)
               ? html`
                   <div>
-                    ${this.hass.localize(`state.default.${stateObj.state}`) ||
+                    ${computeStateDisplay(
-                    stateObj.state}
+                      this.hass.localize,
+                      stateObj,
+                      this.hass.language
+                    )}
                   </div>
                 `
               : html`

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

@@ -195,7 +195,9 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
                 ? this.hass!.localize(
                     `state_attributes.climate.hvac_action.${stateObj.attributes.hvac_action}`
                   )
-                : this.hass!.localize(`state.climate.${stateObj.state}`)
+                : this.hass!.localize(
+                    `component.climate.state._.${stateObj.state}`
+                  )
             }
             ${
               stateObj.attributes.preset_mode &&

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -32,6 +32,7 @@ import {
   weatherImages,
 } from "../../../data/weather";
 import { stateIcon } from "../../../common/entity/state_icon";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 
 const DAY_IN_MILLISECONDS = 86400000;
 
@@ -185,8 +186,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                 ${this._config.name || computeStateName(stateObj)}
               </div>
               <div class="state">
-                ${this.hass.localize(`state.weather.${stateObj.state}`) ||
+                ${computeStateDisplay(
-                stateObj.state}
+                  this.hass.localize,
+                  stateObj,
+                  this.hass.language
+                )}
               </div>
             </div>
           </div>

src/panels/lovelace/entity-rows/hui-weather-entity-row.ts

@@ -20,6 +20,7 @@ import { HomeAssistant, WeatherEntity } from "../../../types";
 import { EntitiesCardEntityConfig } from "../cards/types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { LovelaceRow } from "./types";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 
 @customElement("hui-weather-entity-row")
 class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
@@ -69,8 +70,11 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
         <div class="attributes">
           <div>
             ${UNAVAILABLE_STATES.includes(stateObj.state)
-              ? this.hass.localize(`state.default.${stateObj.state}`) ||
+              ? computeStateDisplay(
-                stateObj.state
+                  this.hass.localize,
+                  stateObj,
+                  this.hass.language
+                )
               : html`
                   ${stateObj.attributes.temperature}
                   ${getWeatherUnit(this.hass, "temperature")}

src/state-summary/state-card-configurator.js

@@ -5,6 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../components/entity/state-info";
 import LocalizeMixin from "../mixins/localize-mixin";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -24,7 +25,7 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
         <mwc-button hidden$="[[inDialog]]"
-          >[[_localizeState(stateObj.state)]]</mwc-button
+          >[[_localizeState(stateObj)]]</mwc-button
         >
       </div>
 
@@ -56,8 +57,12 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
     };
   }
 
-  _localizeState(state) {
+  _localizeState(stateObj) {
-    return this.localize(`state.configurator.${state}`);
+    return computeStateDisplay(
+      this.hass.localize,
+      stateObj,
+      this.hass.language
+    );
   }
 }
 customElements.define("state-card-configurator", StateCardConfigurator);

src/state-summary/state-card-media_player.js

@@ -5,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../components/entity/state-info";
 import LocalizeMixin from "../mixins/localize-mixin";
 import HassMediaPlayerEntity from "../util/hass-media-player-model";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -85,9 +86,7 @@ class StateCardMediaPlayer extends LocalizeMixin(PolymerElement) {
   computePrimaryText(localize, playerObj) {
     return (
       playerObj.primaryTitle ||
-      localize(`state.media_player.${playerObj.stateObj.state}`) ||
+      computeStateDisplay(localize, playerObj.stateObj, this.hass.language)
-      localize(`state.default.${playerObj.stateObj.state}`) ||
-      playerObj.stateObj.state
     );
   }
 }