Use backend translation for config entries (#980)

* Use backend translation for config entries

* Accept label/error callbacks on ha-form

* Add hassMixins import to ha-form

panels/config/config-entries/ha-config-entries.html

@@ -32,7 +32,7 @@
           <template is='dom-repeat' items='[[_entries]]'>
             <paper-card heading='[[item.title]]'>
               <div class='card-content'>
-                Integration: [[item.domain]]<br>
+                Integration: [[_computeIntegrationTitle(localize, item.domain)]]<br>
                 State: [[item.state]]<br>
                 Added by: [[item.source]]
               </div>
@@ -47,7 +47,7 @@
           <h1>To be finished</h1>
           <div class='entries layout horizontal wrap'>
             <template is='dom-repeat' items='[[_progress]]'>
-              <paper-card heading='[[item.domain]]'>
+              <paper-card heading='[[_computeIntegrationTitle(localize, item.domain)]]'>
                 <div class="card-actions">
                   <paper-button on-click='_continueFlow'>Configure</paper-button>
                 </div>
@@ -59,7 +59,7 @@
         <h1>Add integration</h1>
         <div class='entries layout horizontal wrap'>
           <template is='dom-repeat' items='[[_handlers]]'>
-            <paper-card heading='[[item]]'>
+            <paper-card heading='[[_computeIntegrationTitle(localize, item)]]'>
               <!-- <div class="card-content">Some content</div> -->
               <div class="card-actions">
                 <paper-button on-click='_createFlow'>Configure</paper-button>
@@ -81,7 +81,12 @@
 
 <script>
 {
-  class HaConfigManager extends window.hassMixins.NavigateMixin(Polymer.Element) {
+  /*
+   * @appliesMixin window.hassMixins.LocalizeMixin
+   * @appliesMixin window.hassMixins.EventsMixin
+   */
+  class HaConfigManager extends
+    window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
     static get is() { return 'ha-config-entries'; }
 
     static get properties() {
@@ -179,6 +184,10 @@
       this.hass.callApi('get', 'config/config_entries/flow')
         .then((progress) => { this._progress = progress; });
     }
+
+    _computeIntegrationTitle(localize, integration) {
+      return localize(`component.${integration}.config.title`);
+    }
   }
 
   customElements.define(HaConfigManager.is, HaConfigManager);

panels/config/config-entries/ha-config-flow.html

@@ -36,7 +36,7 @@
           Success!
         </template>
         <template is='dom-if' if='[[_equals(step.type, "form")]]'>
-          [[step.title]]
+          [[_computeStepTitle(localize, step)]]
         </template>
       </h2>
       <paper-dialog-scrollable>
@@ -45,7 +45,7 @@
         </template>
         <template is='dom-if' if='[[step]]'>
           <template is='dom-if' if='[[_equals(step.type, "abort")]]'>
-            <p>[[step.reason]]</p>
+            <p>[[_computeStepAbortedReason(localize, step)]]</p>
           </template>
 
           <template is='dom-if' if='[[_equals(step.type, "create_entry")]]'>
@@ -53,18 +53,20 @@
           </template>
 
           <template is='dom-if' if='[[_equals(step.type, "form")]]'>
-            <template is='dom-if' if='[[step.description]]'>
+            <template is='dom-if' if='[[_computeStepDescription(localize, step)]]'>
-              <ha-markdown content='[[step.description]]'></ha-markdown>
+              <ha-markdown content='[[_computeStepDescription(localize, step)]]'></ha-markdown>
             </template>
 
             <template is='dom-if' if='[[step.errors.base]]'>
-              <div class='error'>[[step.errors.base]]</div>
+              <div class='error'>[[_computeBaseError(localize, step)]]</div>
             </template>
 
             <ha-form
               data='{{stepData}}'
               schema='[[step.data_schema]]'
               error='[[step.errors]]'
+              compute-label='[[_computeLabelCallback(localize, step)]]'
+              compute-error='[[_computeErrorCallback(localize, step)]]'
             ></ha-form>
           </template>
         </template>
@@ -85,7 +87,12 @@
 </dom-module>
 
 <script>
-class HaConfigFlow extends window.hassMixins.EventsMixin(Polymer.Element) {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ * @appliesMixin window.hassMixins.EventsMixin
+ */
+class HaConfigFlow extends
+  window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
   static get is() { return 'ha-config-flow'; }
 
   static get properties() {
@@ -176,6 +183,32 @@ class HaConfigFlow extends window.hassMixins.EventsMixin(Polymer.Element) {
       });
     }
   }
+
+  _computeStepAbortedReason(localize, step) {
+    return localize(`component.${step.domain}.config.abort.${step.reason}`);
+  }
+
+  _computeStepTitle(localize, step) {
+    return localize(`component.${step.domain}.config.step.${step.step_id}.title`);
+  }
+
+  _computeStepDescription(localize, step) {
+    return localize(`component.${step.domain}.config.step.${step.step_id}.description`);
+  }
+
+  _computeBaseError(localize, step) {
+    return localize(`component.${step.domain}.config.error.${step.errors.base}`);
+  }
+
+  _computeLabelCallback(localize, step) {
+    // Returns a callback for ha-form to calculate labels per schema object
+    return schema => localize(`component.${step.domain}.config.step.${step.step_id}.data.${schema.name}`);
+  }
+
+  _computeErrorCallback(localize, step) {
+    // Returns a callback for ha-form to calculate error messages
+    return error => localize(`component.${step.domain}.config.error.${error}`);
+  }
 }
 
 customElements.define(HaConfigFlow.is, HaConfigFlow);

panels/config/config-entries/ha-form.html

@@ -7,6 +7,8 @@
 <link rel='import' href='../../../bower_components/paper-listbox/paper-listbox.html'>
 <link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <dom-module id="ha-form">
   <template>
     <style>
@@ -21,17 +23,19 @@
           schema='[[item]]'
           error='[[_getValue(error, item)]]'
           on-data-changed='_valueChanged'
+          compute-label='[[computeLabel]]'
+          compute-error='[[computeError]]'
         ></ha-form>
       </template>
     </template>
     <template is='dom-if' if='[[!_isArray(schema)]]' restamp>
       <template is='dom-if' if='[[error]]'>
-        <div class='error'>[[error]]</div>
+        <div class='error'>[[computeError(error, schema)]]</div>
       </template>
 
       <template is='dom-if' if='[[_equals(schema.type, "string")]]' restamp>
         <paper-input
-          label='[[schema.name]]'
+          label='[[computeLabel(schema)]]'
           value='{{data}}'
         ></paper-input>
       </template>
@@ -39,7 +43,7 @@
       <template is='dom-if' if='[[_equals(schema.type, "integer")]]' restamp>
         <template is='dom-if' if='[[_isRange(schema)]]' restamp>
           <div>
-            [[schema.name]]
+            [[computeLabel(schema)]]
             <paper-slider
               pin
               value='{{data}}'
@@ -50,7 +54,7 @@
         </template>
         <template is='dom-if' if='[[!_isRange(schema)]]' restamp>
           <paper-input
-            label='[[schema.name]]'
+            label='[[computeLabel(schema)]]'
             value='{{data}}'
             type='number'
           ></paper-input>
@@ -60,7 +64,7 @@
       <template is='dom-if' if='[[_equals(schema.type, "float")]]' restamp>
         <!--TODO-->
         <paper-input
-          label='[[schema.name]]'
+          label='[[computeLabel(schema)]]'
           value='{{data}}'
         ></paper-input>
       </template>
@@ -68,11 +72,11 @@
       <template is='dom-if' if='[[_equals(schema.type, "boolean")]]' restamp>
         <paper-checkbox
           checked='{{data}}'
-        >[[schema.name]]</paper-checkbox>
+        >[[computeLabel(schema)]]</paper-checkbox>
       </template>
 
       <template is='dom-if' if='[[_equals(schema.type, "select")]]' restamp>
-        <paper-dropdown-menu label='[[schema.name]]'>
+        <paper-dropdown-menu label='[[computeLabel(schema)]]'>
           <paper-listbox
             slot="dropdown-content"
             attr-for-selected="item-name"
@@ -102,6 +106,20 @@ class HaForm extends window.hassMixins.EventsMixin(Polymer.Element) {
       },
       schema: Object,
       error: Object,
+
+      // A function that will computes the label to be displayed for a given
+      // schema object.
+      computeLabel: {
+        type: Function,
+        value: schema => schema && schema.name,
+      },
+
+      // A function that will computes an error message to be displayed for a
+      // given error ID, and relevant schema object
+      computeError: {
+        type: Function,
+        value: (error, schema) => error, // eslint-disable-line no-unused-vars
+      },
     };
   }