Refactor out our localize custom variant (#743)

js/common/util/compute_state_display.js

@@ -3,17 +3,17 @@ import formatDateTime from './format_date_time.js';
 import formatDate from './format_date.js';
 import formatTime from './format_time.js';
 
-export default function computeStateDisplay(haLocalize, stateObj, language) {
+export default function computeStateDisplay(localize, stateObj, language) {
   if (!stateObj._stateDisplay) {
     const domain = computeStateDomain(stateObj);
     if (domain === 'binary_sensor') {
       // Try device class translation, then default binary sensor translation
       if (stateObj.attributes.device_class) {
         stateObj._stateDisplay =
-          haLocalize(`state.${domain}.${stateObj.attributes.device_class}`, stateObj.state);
+          localize(`state.${domain}.${stateObj.attributes.device_class}.${stateObj.state}`);
       }
       if (!stateObj._stateDisplay) {
-        stateObj._stateDisplay = haLocalize(`state.${domain}.default`, stateObj.state);
+        stateObj._stateDisplay = localize(`state.${domain}.default.${stateObj.state}`);
       }
     } else if (stateObj.attributes.unit_of_measurement) {
       stateObj._stateDisplay = stateObj.state + ' ' + stateObj.attributes.unit_of_measurement;
@@ -43,16 +43,16 @@ export default function computeStateDisplay(haLocalize, stateObj, language) {
       }
     } else if (domain === 'zwave') {
       if (['initializing', 'dead'].includes(stateObj.state)) {
-        stateObj._stateDisplay = haLocalize('state.zwave.query_stage', stateObj.state, 'query_stage', stateObj.attributes.query_stage);
+        stateObj._stateDisplay = localize(`state.zwave.query_stage.${stateObj.state}`, 'query_stage', stateObj.attributes.query_stage);
       } else {
-        stateObj._stateDisplay = haLocalize('state.zwave.default', stateObj.state);
+        stateObj._stateDisplay = localize(`state.zwave.default.${stateObj.state}`);
       }
     } else {
-      stateObj._stateDisplay = haLocalize(`state.${domain}`, stateObj.state);
+      stateObj._stateDisplay = localize(`state.${domain}.${stateObj.state}`);
     }
     // Fall back to default or raw state if nothing else matches.
     stateObj._stateDisplay = stateObj._stateDisplay
-      || haLocalize('state.default', stateObj.state) || stateObj.state;
+      || localize(`state.default.${stateObj.state}`) || stateObj.state;
   }
 
   return stateObj._stateDisplay;

panels/shopping-list/ha-panel-shopping-list.html

@@ -66,7 +66,7 @@
       <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-          <div main-title>[[haLocalize('panel', 'shopping_list')]]</div>
+          <div main-title>[[localize('panel.shopping_list')]]</div>
           <ha-start-voice-button hass='[[hass]]' can-listen='{{canListen}}'></ha-start-voice-button>
           <paper-menu-button
             horizontal-align="right"
@@ -80,7 +80,7 @@
             <paper-listbox slot="dropdown-content">
               <paper-item
                 on-tap="_clearCompleted"
-              >[[haLocalize('ui.panel.shopping-list', 'clear_completed')]]</paper-item>
+              >[[localize('ui.panel.shopping-list.clear_completed')]]</paper-item>
             </paper-listbox>
           </paper-menu-button>
         </app-toolbar>
@@ -97,7 +97,7 @@
             <paper-item-body>
               <paper-input
                 id='addBox'
-                placeholder="[[haLocalize('ui.panel.shopping-list', 'add_item')]]"
+                placeholder="[[localize('ui.panel.shopping-list.add_item')]]"
                 on-keydown='_addKeyPress'
                 no-label-float
               ></paper-input>
@@ -124,7 +124,7 @@
           </template>
         </paper-card>
         <div class='tip' hidden$='[[!canListen]]'>
-          [[haLocalize('ui.panel.shopping-list', 'microphone_tip')]]
+          [[localize('ui.panel.shopping-list.microphone_tip')]]
         </div>
       </div>
     </app-header-layout>

src/cards/ha-entities-card.html

@@ -72,17 +72,17 @@ class HaEntitiesCard extends
       groupEntity: Object,
       title: {
         type: String,
-        computed: 'computeTitle(states, groupEntity, haLocalize)',
+        computed: 'computeTitle(states, groupEntity, localize)',
       },
     };
   }
 
-  computeTitle(states, groupEntity, haLocalize) {
+  computeTitle(states, groupEntity, localize) {
     if (groupEntity) {
       return window.hassUtil.computeStateName(groupEntity).trim();
     }
     const domain = window.hassUtil.computeDomain(states[0]);
-    return (haLocalize && haLocalize('domain', domain)) || domain.replace(/_/g, ' ');
+    return (localize && localize(`domain.${domain}`)) || domain.replace(/_/g, ' ');
   }
 
   computeTitleClass(groupEntity) {

src/cards/ha-media_player-card.html

@@ -153,7 +153,7 @@
 
       <div class='caption'>
         [[computeStateName(stateObj)]]
-        <div class='title'>[[computePrimaryText(haLocalize, playerObj)]]</div>
+        <div class='title'>[[computePrimaryText(localize, playerObj)]]</div>
         [[playerObj.secondaryTitle]]<br />
       </div>
     </div>
@@ -310,10 +310,10 @@ class HaMediaPlayerCard extends
     return new window.MediaPlayerEntity(hass, stateObj);
   }
 
-  computePrimaryText(haLocalize, playerObj) {
+  computePrimaryText(localize, playerObj) {
     return playerObj.primaryTitle
-      || haLocalize('state.media_player', playerObj.stateObj.state)
+      || localize(`state.media_player.${playerObj.stateObj.state}`)
-      || haLocalize('state.default', playerObj.stateObj.state) || playerObj.stateObj.state;
+      || localize(`state.default.${playerObj.stateObj.state}`) || playerObj.stateObj.state;
   }
 
   computePlaybackControlIcon(playerObj) {

src/components/entity/ha-state-label-badge.html

@@ -40,7 +40,7 @@
       value='[[computeValue(state)]]'
       icon='[[computeIcon(state)]]'
       image='[[computeImage(state)]]'
-      label='[[computeLabel(haLocalize, state)]]'
+      label='[[computeLabel(localize, state)]]'
       description='[[computeDescription(state)]]'
     ></ha-label-badge>
   </template>
@@ -137,14 +137,14 @@ class HaStateLabelBadge extends
     return state.attributes.entity_picture || null;
   }
 
-  computeLabel(haLocalize, state) {
+  computeLabel(localize, state) {
     const domain = window.hassUtil.computeDomain(state);
     if (state.state === 'unavailable' ||
         ['device_tracker', 'alarm_control_panel'].includes(domain)) {
       // Localize the state with a special state_badge namespace, which has variations of
       // the state translations that are truncated to fit within the badge label. Translations
       // are only added for device_tracker and alarm_control_panel.
-      return haLocalize(`state_badge.${domain}`, state.state) || haLocalize('state_badge.default', state.state) || state.state;
+      return localize(`state_badge.${domain}.${state.state}`) || localize(`state_badge.default.${state.state}`) || state.state;
     }
     return state.attributes.unit_of_measurement || null;
   }

src/components/ha-sidebar.html

@@ -104,53 +104,53 @@
     <paper-listbox attr-for-selected='data-panel' selected='[[hass.panelUrl]]'>
       <paper-icon-item on-tap='menuClicked' data-panel='states'>
         <iron-icon slot="item-icon" icon='mdi:apps'></iron-icon>
-        <span class='item-text'>[[haLocalize('panel', 'states')]]</span>
+        <span class='item-text'>[[localize('panel.states')]]</span>
       </paper-icon-item>
 
       <template is='dom-repeat' items='[[panels]]'>
         <paper-icon-item on-tap='menuClicked' data-panel$='[[item.url_path]]'>
           <iron-icon slot="item-icon" icon='[[item.icon]]'></iron-icon>
-          <span class='item-text'>[[computePanelName(haLocalize, item)]]</span>
+          <span class='item-text'>[[computePanelName(localize, item)]]</span>
         </paper-icon-item>
       </template>
 
       <paper-icon-item on-tap='menuClicked' data-panel='logout' class='logout'>
         <iron-icon slot="item-icon" icon='mdi:exit-to-app'></iron-icon>
-        <span class='item-text'>[[haLocalize('ui.sidebar', 'log_out')]]</span>
+        <span class='item-text'>[[localize('ui.sidebar.log_out')]]</span>
       </paper-icon-item>
     </paper-listbox>
 
     <div>
       <div class='divider'></div>
 
-      <div class='subheader'>[[haLocalize('ui.sidebar', 'developer_tools')]]</div>
+      <div class='subheader'>[[localize('ui.sidebar.developer_tools')]]</div>
 
       <div class='dev-tools layout horizontal justified'>
         <paper-icon-button
           icon='mdi:remote' data-panel='dev-service'
-          alt="[[haLocalize('panel', 'dev-services')]]" title="[[haLocalize('panel', 'dev-services')]]"
+          alt="[[localize('panel.dev-services')]]" title="[[localize('panel.dev-services')]]"
           on-tap='menuClicked'></paper-icon-button>
         <paper-icon-button
           icon='mdi:code-tags' data-panel='dev-state'
-          alt="[[haLocalize('panel', 'dev-states')]]" title="[[haLocalize('panel', 'dev-states')]]"
+          alt="[[localize('panel.dev-states')]]" title="[[localize('panel.dev-states')]]"
           on-tap='menuClicked'></paper-icon-button>
         <paper-icon-button
           icon='mdi:radio-tower' data-panel='dev-event'
-          alt="[[haLocalize('panel', 'dev-events')]]" title="[[haLocalize('panel', 'dev-events')]]"
+          alt="[[localize('panel.dev-events')]]" title="[[localize('panel.dev-events')]]"
           on-tap='menuClicked'></paper-icon-button>
         <paper-icon-button
           icon='mdi:file-xml' data-panel='dev-template'
-          alt="[[haLocalize('panel', 'dev-templates')]]" title="[[haLocalize('panel', 'dev-templates')]]"
+          alt="[[localize('panel.dev-templates')]]" title="[[localize('panel.dev-templates')]]"
           on-tap='menuClicked'></paper-icon-button>
         <template is='dom-if' if='[[_mqttLoaded(hass)]]'>
           <paper-icon-button
             icon='mdi:altimeter' data-panel='dev-mqtt'
-            alt="[[haLocalize('panel', 'dev-mqtt')]]" title="[[haLocalize('panel', 'dev-mqtt')]]"
+            alt="[[localize('panel.dev-mqtt')]]" title="[[localize('panel.dev-mqtt')]]"
             on-tap='menuClicked'></paper-icon-button>
         </template>
         <paper-icon-button
           icon='mdi:information-outline' data-panel='dev-info'
-          alt="[[haLocalize('panel', 'dev-info')]]" title="[[haLocalize('panel', 'dev-info')]]"
+          alt="[[localize('panel.dev-info')]]" title="[[localize('panel.dev-info')]]"
           on-tap='menuClicked'></paper-icon-button>
       </div>
     </div>
@@ -189,8 +189,8 @@ class HaSidebar extends
     return hass.config.core.components.indexOf('mqtt') !== -1;
   }
 
-  computePanelName(haLocalize, panel) {
+  computePanelName(localize, panel) {
-    return haLocalize('panel', panel.title) || panel.title;
+    return localize(`panel.${panel.title}`) || panel.title;
   }
 
   computePanels(hass) {

src/state-summary/state-card-display.html

@@ -22,7 +22,7 @@
 
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
-      <div class='state'>[[computeStateDisplay(haLocalize, stateObj, language)]]</div>
+      <div class='state'>[[computeStateDisplay(localize, stateObj, language)]]</div>
     </div>
   </template>
 </dom-module>
@@ -42,8 +42,8 @@ class StateCardDisplay extends window.hassMixins.LocalizeMixin(Polymer.Element)
     };
   }
 
-  computeStateDisplay(haLocalize, stateObj, language) {
+  computeStateDisplay(localize, stateObj, language) {
-    return window.hassUtil.computeStateDisplay(haLocalize, stateObj, language);
+    return window.hassUtil.computeStateDisplay(localize, stateObj, language);
   }
 }
 customElements.define(StateCardDisplay.is, StateCardDisplay);

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

@@ -38,7 +38,7 @@
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
-        <div class='main-text' take-height$='[[!playerObj.secondaryTitle]]'>[[computePrimaryText(haLocalize, playerObj)]]</div>
+        <div class='main-text' take-height$='[[!playerObj.secondaryTitle]]'>[[computePrimaryText(localize, playerObj)]]</div>
         <div class='secondary-text'>[[playerObj.secondaryTitle]]</div>
       </div>
     </div>
@@ -68,10 +68,10 @@ class StateCardMediaPlayer extends window.hassMixins.LocalizeMixin(Polymer.Eleme
     return new window.MediaPlayerEntity(hass, stateObj);
   }
 
-  computePrimaryText(haLocalize, playerObj) {
+  computePrimaryText(localize, playerObj) {
     return playerObj.primaryTitle
-      || haLocalize('state.media_player', playerObj.stateObj.state)
+      || localize(`state.media_player.${playerObj.stateObj.state}`)
-      || haLocalize('state.default', playerObj.stateObj.state) || playerObj.stateObj.state;
+      || localize(`state.default.${playerObj.stateObj.state}`) || playerObj.stateObj.state;
   }
 }
 customElements.define(StateCardMediaPlayer.is, StateCardMediaPlayer);

src/util/hass-mixins.html

@@ -79,7 +79,10 @@ window.hassMixins.NavigateMixin = Polymer.dedupingMixin(superClass =>
     }
   });
 
-/* @polymerMixin */
+/**
+ * @polymerMixin
+ * @appliesMixin Polymer.AppLocalizeBehavior
+ */
 window.hassMixins.LocalizeMixin = Polymer.dedupingMixin(superClass =>
   class extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], superClass) {
     static get properties() {
@@ -93,10 +96,6 @@ window.hassMixins.LocalizeMixin = Polymer.dedupingMixin(superClass =>
           type: Object,
           computed: 'computeResources(hass)',
         },
-        haLocalize: {
-          type: Function,
-          computed: 'computeHaLocalize(localize)',
-        },
       };
     }
 
@@ -107,10 +106,6 @@ window.hassMixins.LocalizeMixin = Polymer.dedupingMixin(superClass =>
     computeResources(hass) {
       return hass && hass.resources;
     }
-
-    computeHaLocalize(localize) {
-      return (namespace, message, ...args) => localize(namespace + '.' + message, ...args);
-    }
   });
 
 </script>

test-mocha/common/util/compute_state_display.js

@@ -3,9 +3,9 @@ import { assert } from 'chai';
 import computeStateDisplay from '../../../js/common/util/compute_state_display';
 
 describe('computeStateDisplay', () => {
-  const haLocalize = function (namespace, message, ...args) {
+  const localize = function (message, ...args) {
     // Mock Localize function for testing
-    return namespace + '.' + message + (args.length ? ': ' + args.join(',') : '');
+    return message + (args.length ? ': ' + args.join(',') : '');
   };
 
   it('Localizes binary sensor defaults', () => {
@@ -15,7 +15,7 @@ describe('computeStateDisplay', () => {
       attributes: {
       },
     };
-    assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.binary_sensor.default.off');
+    assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.binary_sensor.default.off');
   });
 
   it('Localizes binary sensor device class', () => {
@@ -26,13 +26,13 @@ describe('computeStateDisplay', () => {
         device_class: 'moisture',
       },
     };
-    assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.binary_sensor.moisture.off');
+    assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.binary_sensor.moisture.off');
   });
 
   it('Localizes binary sensor invalid device class', () => {
-    const altHaLocalize = function (namespace, message, ...args) {
+    const altLocalize = function (message, ...args) {
-      if (namespace === 'state.binary_sensor.invalid_device_class') return null;
+      if (message === 'state.binary_sensor.invalid_device_class.off') return null;
-      return haLocalize(namespace, message, ...args);
+      return localize(message, ...args);
     };
     const stateObj = {
       entity_id: 'binary_sensor.test',
@@ -41,7 +41,7 @@ describe('computeStateDisplay', () => {
         device_class: 'invalid_device_class',
       },
     };
-    assert.strictEqual(computeStateDisplay(altHaLocalize, stateObj, 'en'), 'state.binary_sensor.default.off');
+    assert.strictEqual(computeStateDisplay(altLocalize, stateObj, 'en'), 'state.binary_sensor.default.off');
   });
 
   it('Localizes sensor value with units', () => {
@@ -52,7 +52,7 @@ describe('computeStateDisplay', () => {
         unit_of_measurement: 'm',
       },
     };
-    assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), '123 m');
+    assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), '123 m');
   });
 
   it('Localizes input_datetime with full date time', () => {
@@ -70,7 +70,7 @@ describe('computeStateDisplay', () => {
         second: 13,
       },
     };
-    assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'November 18, 2017, 11:12 AM');
+    assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'November 18, 2017, 11:12 AM');
   });
 
   it('Localizes input_datetime with date', () => {
@@ -88,7 +88,7 @@ describe('computeStateDisplay', () => {
         second: 13,
       },
     };
-    assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'November 18, 2017');
+    assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'November 18, 2017');
   });
 
   it('Localizes input_datetime with time', () => {
@@ -106,7 +106,7 @@ describe('computeStateDisplay', () => {
         second: 13,
       },
     };
-    assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), '11:12 AM');
+    assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), '11:12 AM');
   });
 
   it('Localizes zwave ready', () => {
@@ -117,7 +117,7 @@ describe('computeStateDisplay', () => {
         query_stage: 'Complete',
       },
     };
-    assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.zwave.default.ready');
+    assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.zwave.default.ready');
   });
 
   it('Localizes zwave initializing', () => {
@@ -128,7 +128,7 @@ describe('computeStateDisplay', () => {
         query_stage: 'Probe',
       },
     };
-    assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.zwave.query_stage.initializing: query_stage,Probe');
+    assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.zwave.query_stage.initializing: query_stage,Probe');
   });
 
   it('Localizes cover open', () => {
@@ -138,13 +138,13 @@ describe('computeStateDisplay', () => {
       attributes: {
       },
     };
-    assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.cover.open');
+    assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.cover.open');
   });
 
   it('Localizes unavailable', () => {
-    const altHaLocalize = function (namespace, message, ...args) {
+    const altLocalize = function (message, ...args) {
-      if (namespace === 'state.sensor') return null;
+      if (message === 'state.sensor.unavailable') return null;
-      return haLocalize(namespace, message, ...args);
+      return localize(message, ...args);
     };
     const stateObj = {
       entity_id: 'sensor.test',
@@ -152,11 +152,11 @@ describe('computeStateDisplay', () => {
       attributes: {
       },
     };
-    assert.strictEqual(computeStateDisplay(altHaLocalize, stateObj, 'en'), 'state.default.unavailable');
+    assert.strictEqual(computeStateDisplay(altLocalize, stateObj, 'en'), 'state.default.unavailable');
   });
 
   it('Localizes custom state', () => {
-    const altHaLocalize = function () {
+    const altLocalize = function () {
       // No matches can be found
       return null;
     };
@@ -166,7 +166,7 @@ describe('computeStateDisplay', () => {
       attributes: {
       },
     };
-    assert.strictEqual(computeStateDisplay(altHaLocalize, stateObj, 'en'), 'My Custom State');
+    assert.strictEqual(computeStateDisplay(altLocalize, stateObj, 'en'), 'My Custom State');
   });
 
   it('Only calculates state display once per immutable state object', () => {
@@ -176,9 +176,9 @@ describe('computeStateDisplay', () => {
       attributes: {
       },
     };
-    assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.cover.open');
+    assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.cover.open');
 
     stateObj.state = 'closing';
-    assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.cover.open');
+    assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.cover.open');
   });
 });