From d4b257854da24716fa0ddb4834594b6e4c48167d Mon Sep 17 00:00:00 2001
From: Adam Mills <adam@armills.info>
Date: Mon, 26 Feb 2018 19:15:51 -0500
Subject: [PATCH] Add localization to the automation editor (#923)

* Add localization to the automation editor

* Unnest automation strings from `section`
---
 js/panel-config/automation.js                 |  38 ++--
 js/panel-config/condition/condition_edit.js   |  11 +-
 js/panel-config/condition/condition_row.js    |   6 +-
 js/panel-config/condition/index.js            |   5 +-
 js/panel-config/condition/numeric_state.js    |   8 +-
 js/panel-config/condition/state.js            |   4 +-
 js/panel-config/condition/sun.js              |  18 +-
 js/panel-config/condition/template.js         |   4 +-
 js/panel-config/condition/time.js             |   6 +-
 js/panel-config/condition/zone.js             |   6 +-
 js/panel-config/script.js                     |   3 +-
 js/panel-config/script/action_edit.js         |  23 +--
 js/panel-config/script/action_row.js          |   6 +-
 js/panel-config/script/call_service.js        |   5 +-
 js/panel-config/script/condition.js           |   4 +-
 js/panel-config/script/delay.js               |   5 +-
 js/panel-config/script/event.js               |   7 +-
 js/panel-config/script/index.js               |   5 +-
 js/panel-config/script/wait.js                |   7 +-
 js/panel-config/trigger/event.js              |   6 +-
 js/panel-config/trigger/homeassistant.js      |   8 +-
 js/panel-config/trigger/index.js              |   5 +-
 js/panel-config/trigger/mqtt.js               |   6 +-
 js/panel-config/trigger/numeric_state.js      |   8 +-
 js/panel-config/trigger/state.js              |   6 +-
 js/panel-config/trigger/sun.js                |  10 +-
 js/panel-config/trigger/template.js           |   4 +-
 js/panel-config/trigger/time.js               |   4 +-
 js/panel-config/trigger/trigger_edit.js       |  11 +-
 js/panel-config/trigger/trigger_row.js        |   6 +-
 js/panel-config/trigger/zone.js               |  12 +-
 .../automation/ha-automation-editor.html      |  25 ++-
 .../automation/ha-automation-picker.html      |  19 +-
 panels/config/script/ha-script-editor.html    |   6 +-
 src/components/entity/ha-entity-picker.html   |  16 +-
 src/components/ha-service-picker.html         |   7 +-
 src/translations/en.json                      | 166 +++++++++++++++++-
 37 files changed, 337 insertions(+), 159 deletions(-)

diff --git a/js/panel-config/automation.js b/js/panel-config/automation.js
index 0b9f9197f2..3793fd7830 100644
--- a/js/panel-config/automation.js
+++ b/js/panel-config/automation.js
@@ -42,7 +42,7 @@ export default class Automation extends Component {
     });
   }
 
-  render({ automation, isWide, hass }) {
+  render({ automation, isWide, hass, localize }) {
     const {
       alias, trigger, condition, action
     } = automation;
@@ -52,12 +52,12 @@ export default class Automation extends Component {
         <ha-config-section is-wide={isWide}>
           <span slot='header'>{alias}</span>
           <span slot='introduction'>
-            Use automations to bring your home alive.
+            {localize('ui.panel.config.automation.editor.introduction')}
           </span>
           <paper-card>
             <div class='card-content'>
               <paper-input
-                label="Name"
+                label={localize('ui.panel.config.automation.editor.alias')}
                 name="alias"
                 value={alias}
                 onvalue-changed={this.onChange}
@@ -67,55 +67,41 @@ export default class Automation extends Component {
         </ha-config-section>
 
         <ha-config-section is-wide={isWide}>
-          <span slot='header'>Triggers</span>
+          <span slot='header'>{localize('ui.panel.config.automation.editor.triggers.header')}</span>
           <span slot='introduction'>
-            Triggers are what starts the processing of an automation rule.
-            It is possible to specify multiple triggers for the same rule.
-            Once a trigger starts, Home Assistant will validate the conditions,
-            if any, and call the action.
-            <p><a href="https://home-assistant.io/docs/automation/trigger/" target="_blank">
-              Learn more about triggers.
-            </a></p>
+            <ha-markdown content={localize('ui.panel.config.automation.editor.triggers.introduction')} />
           </span>
           <Trigger
             trigger={trigger}
             onChange={this.triggerChanged}
             hass={hass}
+            localize={localize}
           />
         </ha-config-section>
 
         <ha-config-section is-wide={isWide}>
-          <span slot='header'>Conditions</span>
+          <span slot='header'>{localize('ui.panel.config.automation.editor.conditions.header')}</span>
           <span slot='introduction'>
-            Conditions are an optional part of an automation rule and can be used to prevent
-            an action from happening when triggered. Conditions look very similar to triggers
-            but are very different. A trigger will look at events happening in the system
-            while a condition only looks at how the system looks right now. A trigger can
-            observe that a switch is being turned on. A condition can only see if a switch
-            is currently on or off.
-            <p><a href="https://home-assistant.io/docs/scripts/conditions/" target="_blank">
-              Learn more about conditions.
-            </a></p>
+            <ha-markdown content={localize('ui.panel.config.automation.editor.conditions.introduction')} />
           </span>
           <Condition
             condition={condition || []}
             onChange={this.conditionChanged}
             hass={hass}
+            localize={localize}
           />
         </ha-config-section>
 
         <ha-config-section is-wide={isWide}>
-          <span slot='header'>Action</span>
+          <span slot='header'>{localize('ui.panel.config.automation.editor.actions.header')}</span>
           <span slot='introduction'>
-            The actions are what Home Assistant will do when the automation is triggered.
-            <p><a href="https://home-assistant.io/docs/scripts/" target="_blank">
-              Learn more about actions.
-            </a></p>
+            <ha-markdown content={localize('ui.panel.config.automation.editor.actions.introduction')} />
           </span>
           <Script
             script={action}
             onChange={this.actionChanged}
             hass={hass}
+            localize={localize}
           />
         </ha-config-section>
       </div>
diff --git a/js/panel-config/condition/condition_edit.js b/js/panel-config/condition/condition_edit.js
index 240244646c..cd4d5b323d 100644
--- a/js/panel-config/condition/condition_edit.js
+++ b/js/panel-config/condition/condition_edit.js
@@ -26,7 +26,7 @@ export default class ConditionRow extends Component {
   }
 
   typeChanged(ev) {
-    const type = ev.target.selectedItem.innerHTML;
+    const type = ev.target.selectedItem.attributes.condition.value;
 
     if (type !== this.props.condition.condition) {
       this.props.onChange(this.props.index, {
@@ -36,14 +36,14 @@ export default class ConditionRow extends Component {
     }
   }
 
-  render({ index, condition, onChange, hass }) {
+  render({ index, condition, onChange, hass, localize }) {
     const Comp = TYPES[condition.condition];
     const selected = OPTIONS.indexOf(condition.condition);
 
     if (!Comp) {
       return (
         <div>
-          Unsupported condition: {condition.condition}
+          {localize('ui.panel.config.automation.editor.conditions.unsupported_condition', 'condition', condition.condition)}
           <pre>{JSON.stringify(condition, null, 2)}</pre>
         </div>
       );
@@ -51,13 +51,13 @@ export default class ConditionRow extends Component {
 
     return (
       <div>
-        <paper-dropdown-menu-light label="Condition Type" no-animations>
+        <paper-dropdown-menu-light label={localize('ui.panel.config.automation.editor.conditions.type_select')} no-animations>
           <paper-listbox
             slot="dropdown-content"
             selected={selected}
             oniron-select={this.typeChanged}
           >
-            {OPTIONS.map(opt => <paper-item>{opt}</paper-item>)}
+            {OPTIONS.map(opt => <paper-item condition={opt}>{localize(`ui.panel.config.automation.editor.conditions.type.${opt}.label`)}</paper-item>)}
           </paper-listbox>
         </paper-dropdown-menu-light>
         <Comp
@@ -65,6 +65,7 @@ export default class ConditionRow extends Component {
           condition={condition}
           onChange={onChange}
           hass={hass}
+          localize={localize}
         />
       </div>
     );
diff --git a/js/panel-config/condition/condition_row.js b/js/panel-config/condition/condition_row.js
index 87c83f80d7..8dd1e40067 100644
--- a/js/panel-config/condition/condition_row.js
+++ b/js/panel-config/condition/condition_row.js
@@ -11,7 +11,7 @@ export default class ConditionRow extends Component {
 
   onDelete() {
     // eslint-disable-next-line
-    if (confirm('Sure you want to delete?')) {
+    if (confirm(this.props.localize('ui.panel.config.automation.editor.conditions.delete_confirm'))) {
       this.props.onChange(this.props.index, null);
     }
   }
@@ -31,8 +31,8 @@ export default class ConditionRow extends Component {
               slot="dropdown-trigger"
             />
             <paper-listbox slot="dropdown-content">
-              <paper-item disabled>Duplicate</paper-item>
-              <paper-item onTap={this.onDelete}>Delete</paper-item>
+              <paper-item disabled>{props.localize('ui.panel.config.automation.editor.conditions.duplicate')}</paper-item>
+              <paper-item onTap={this.onDelete}>{props.localize('ui.panel.config.automation.editor.conditions.delete')}</paper-item>
             </paper-listbox>
           </paper-menu-button>
         </div>
diff --git a/js/panel-config/condition/index.js b/js/panel-config/condition/index.js
index d3d3a5ebd8..6aa464c40e 100644
--- a/js/panel-config/condition/index.js
+++ b/js/panel-config/condition/index.js
@@ -30,7 +30,7 @@ export default class Condition extends Component {
     this.props.onChange(condition);
   }
 
-  render({ condition, hass }) {
+  render({ condition, hass, localize }) {
     return (
       <div class="triggers">
         {condition.map((cnd, idx) => (
@@ -39,10 +39,11 @@ export default class Condition extends Component {
             condition={cnd}
             onChange={this.conditionChanged}
             hass={hass}
+            localize={localize}
           />))}
         <paper-card>
           <div class='card-actions add-card'>
-            <paper-button onTap={this.addCondition}>Add condition</paper-button>
+            <paper-button onTap={this.addCondition}>{localize('ui.panel.config.automation.editor.conditions.add')}</paper-button>
           </div>
         </paper-card>
       </div>
diff --git a/js/panel-config/condition/numeric_state.js b/js/panel-config/condition/numeric_state.js
index a9b3a58879..2e52cf11d7 100644
--- a/js/panel-config/condition/numeric_state.js
+++ b/js/panel-config/condition/numeric_state.js
@@ -18,7 +18,7 @@ export default class NumericStateCondition extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ condition, hass }) {
+  render({ condition, hass, localize }) {
     const {
       value_template, entity_id, below, above
     } = condition;
@@ -31,19 +31,19 @@ export default class NumericStateCondition extends Component {
           allowCustomEntity
         />
         <paper-input
-          label="Above"
+          label={localize('ui.panel.config.automation.editor.conditions.type.numeric_state.above')}
           name="above"
           value={above}
           onvalue-changed={this.onChange}
         />
         <paper-input
-          label="Below"
+          label={localize('ui.panel.config.automation.editor.conditions.type.numeric_state.below')}
           name="below"
           value={below}
           onvalue-changed={this.onChange}
         />
         <paper-textarea
-          label="Value template (optional)"
+          label={localize('ui.panel.config.automation.editor.conditions.type.numeric_state.value_template')}
           name="value_template"
           value={value_template}
           onvalue-changed={this.onChange}
diff --git a/js/panel-config/condition/state.js b/js/panel-config/condition/state.js
index 2ae30ed2d3..362b6a8893 100644
--- a/js/panel-config/condition/state.js
+++ b/js/panel-config/condition/state.js
@@ -18,7 +18,7 @@ export default class StateCondition extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ condition, hass }) {
+  render({ condition, hass, localize }) {
     const { entity_id, state } = condition;
     const cndFor = condition.for;
     return (
@@ -30,7 +30,7 @@ export default class StateCondition extends Component {
           allowCustomEntity
         />
         <paper-input
-          label="State"
+          label={localize('ui.panel.config.automation.editor.conditions.type.state.state')}
           name="state"
           value={state}
           onvalue-changed={this.onChange}
diff --git a/js/panel-config/condition/sun.js b/js/panel-config/condition/sun.js
index 7b35692be4..087e7a00c3 100644
--- a/js/panel-config/condition/sun.js
+++ b/js/panel-config/condition/sun.js
@@ -23,45 +23,45 @@ export default class SunCondition extends Component {
     this.props.onChange(this.props.index, condition);
   }
 
-  render({ condition }) {
+  render({ condition, localize }) {
     /* eslint-disable camelcase */
     const {
       after, after_offset, before, before_offset
     } = condition;
     return (
       <div>
-        <label id="beforelabel">Before:</label>
+        <label id="beforelabel">{localize('ui.panel.config.automation.editor.conditions.type.sun.before')}</label>
         <paper-radio-group
           allow-empty-selection
           selected={before}
           aria-labelledby="beforelabel"
           onpaper-radio-group-changed={this.beforePicked}
         >
-          <paper-radio-button name="sunrise">Sunrise</paper-radio-button>
-          <paper-radio-button name="sunset">Sunset</paper-radio-button>
+          <paper-radio-button name="sunrise">{localize('ui.panel.config.automation.editor.conditions.type.sun.sunrise')}</paper-radio-button>
+          <paper-radio-button name="sunset">{localize('ui.panel.config.automation.editor.conditions.type.sun.sunset')}</paper-radio-button>
         </paper-radio-group>
 
         <paper-input
-          label="Before offset (optional)"
+          label={localize('ui.panel.config.automation.editor.conditions.type.sun.before_offset')}
           name="before_offset"
           value={before_offset}
           onvalue-changed={this.onChange}
           disabled={before === undefined}
         />
 
-        <label id="afterlabel">After:</label>
+        <label id="afterlabel">{localize('ui.panel.config.automation.editor.conditions.type.sun.after')}</label>
         <paper-radio-group
           allow-empty-selection
           selected={after}
           aria-labelledby="afterlabel"
           onpaper-radio-group-changed={this.afterPicked}
         >
-          <paper-radio-button name="sunrise">Sunrise</paper-radio-button>
-          <paper-radio-button name="sunset">Sunset</paper-radio-button>
+          <paper-radio-button name="sunrise">{localize('ui.panel.config.automation.editor.conditions.type.sun.sunrise')}</paper-radio-button>
+          <paper-radio-button name="sunset">{localize('ui.panel.config.automation.editor.conditions.type.sun.sunset')}</paper-radio-button>
         </paper-radio-group>
 
         <paper-input
-          label="After offset (optional)"
+          label={localize('ui.panel.config.automation.editor.conditions.type.sun.after_offset')}
           name="after_offset"
           value={after_offset}
           onvalue-changed={this.onChange}
diff --git a/js/panel-config/condition/template.js b/js/panel-config/condition/template.js
index 35582efbea..728274414d 100644
--- a/js/panel-config/condition/template.js
+++ b/js/panel-config/condition/template.js
@@ -9,13 +9,13 @@ export default class TemplateCondition extends Component {
     this.onChange = onChangeEvent.bind(this, 'condition');
   }
 
-  render({ condition }) {
+  render({ condition, localize }) {
     /* eslint-disable camelcase */
     const { value_template } = condition;
     return (
       <div>
         <paper-textarea
-          label="Value Template"
+          label={localize('ui.panel.config.automation.editor.conditions.type.template.value_template')}
           name="value_template"
           value={value_template}
           onvalue-changed={this.onChange}
diff --git a/js/panel-config/condition/time.js b/js/panel-config/condition/time.js
index 46cd12a6b9..57f1c614df 100644
--- a/js/panel-config/condition/time.js
+++ b/js/panel-config/condition/time.js
@@ -10,18 +10,18 @@ export default class TimeCondition extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ condition }) {
+  render({ condition, localize }) {
     const { after, before } = condition;
     return (
       <div>
         <paper-input
-          label="After"
+          label={localize('ui.panel.config.automation.editor.conditions.type.time.after')}
           name="after"
           value={after}
           onvalue-changed={this.onChange}
         />
         <paper-input
-          label="Before"
+          label={localize('ui.panel.config.automation.editor.conditions.type.time.before')}
           name="before"
           value={before}
           onvalue-changed={this.onChange}
diff --git a/js/panel-config/condition/zone.js b/js/panel-config/condition/zone.js
index 6bb045649f..ca6bc8ac23 100644
--- a/js/panel-config/condition/zone.js
+++ b/js/panel-config/condition/zone.js
@@ -32,12 +32,12 @@ export default class ZoneCondition extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ condition, hass }) {
+  render({ condition, hass, localize }) {
     const { entity_id, zone } = condition;
     return (
       <div>
         <ha-entity-picker
-          label='Entity with location'
+          label={localize('ui.panel.config.automation.editor.conditions.type.zone.entity')}
           value={entity_id}
           onChange={this.entityPicked}
           hass={hass}
@@ -45,7 +45,7 @@ export default class ZoneCondition extends Component {
           entityFilter={zoneAndLocationFilter}
         />
         <ha-entity-picker
-          label='Zone'
+          label={localize('ui.panel.config.automation.editor.conditions.type.zone.zone')}
           value={zone}
           onChange={this.zonePicked}
           hass={hass}
diff --git a/js/panel-config/script.js b/js/panel-config/script.js
index c724e5c741..26dec7873f 100644
--- a/js/panel-config/script.js
+++ b/js/panel-config/script.js
@@ -24,7 +24,7 @@ export default class ScriptEditor extends Component {
     });
   }
 
-  render({ script, isWide, hass }) {
+  render({ script, isWide, hass, localize }) {
     const { alias, sequence } = script;
 
     return (
@@ -58,6 +58,7 @@ export default class ScriptEditor extends Component {
             script={sequence}
             onChange={this.sequenceChanged}
             hass={hass}
+            localize={localize}
           />
         </ha-config-section>
       </div>
diff --git a/js/panel-config/script/action_edit.js b/js/panel-config/script/action_edit.js
index f87498404e..485075078a 100644
--- a/js/panel-config/script/action_edit.js
+++ b/js/panel-config/script/action_edit.js
@@ -7,11 +7,11 @@ import EventAction from './event.js';
 import WaitAction from './wait.js';
 
 const TYPES = {
-  'Call Service': CallServiceAction,
-  Delay: DelayAction,
-  Wait: WaitAction,
-  Condition: ConditionAction,
-  'Fire Event': EventAction,
+  service: CallServiceAction,
+  delay: DelayAction,
+  wait_template: WaitAction,
+  condition: ConditionAction,
+  event: EventAction,
 };
 
 const OPTIONS = Object.keys(TYPES).sort();
@@ -19,7 +19,7 @@ const OPTIONS = Object.keys(TYPES).sort();
 function getType(action) {
   const keys = Object.keys(TYPES);
   for (let i = 0; i < keys.length; i++) {
-    if (TYPES[keys[i]].configKey in action) {
+    if (keys[i] in action) {
       return keys[i];
     }
   }
@@ -34,7 +34,7 @@ export default class Action extends Component {
   }
 
   typeChanged(ev) {
-    const newType = ev.target.selectedItem.innerHTML;
+    const newType = ev.target.selectedItem.attributes.action.value;
     const oldType = getType(this.props.action);
 
     if (oldType !== newType) {
@@ -42,7 +42,7 @@ export default class Action extends Component {
     }
   }
 
-  render({ index, action, onChange, hass }) {
+  render({ index, action, onChange, hass, localize }) {
     const type = getType(action);
     const Comp = type && TYPES[type];
     const selected = OPTIONS.indexOf(type);
@@ -50,20 +50,20 @@ export default class Action extends Component {
     if (!Comp) {
       return (
         <div>
-          Unsupported action
+          {localize('ui.panel.config.automation.editor.actions.unsupported_action', 'action', type)}
           <pre>{JSON.stringify(action, null, 2)}</pre>
         </div>
       );
     }
     return (
       <div>
-        <paper-dropdown-menu-light label="Action Type" no-animations>
+        <paper-dropdown-menu-light label={localize('ui.panel.config.automation.editor.actions.type_select')} no-animations>
           <paper-listbox
             slot="dropdown-content"
             selected={selected}
             oniron-select={this.typeChanged}
           >
-            {OPTIONS.map(opt => <paper-item>{opt}</paper-item>)}
+            {OPTIONS.map(opt => <paper-item action={opt}>{localize(`ui.panel.config.automation.editor.actions.type.${opt}.label`)}</paper-item>)}
           </paper-listbox>
         </paper-dropdown-menu-light>
         <Comp
@@ -71,6 +71,7 @@ export default class Action extends Component {
           action={action}
           onChange={onChange}
           hass={hass}
+          localize={localize}
         />
       </div>
     );
diff --git a/js/panel-config/script/action_row.js b/js/panel-config/script/action_row.js
index 600106288b..286951fbd3 100644
--- a/js/panel-config/script/action_row.js
+++ b/js/panel-config/script/action_row.js
@@ -11,7 +11,7 @@ export default class Action extends Component {
 
   onDelete() {
     // eslint-disable-next-line
-    if (confirm('Sure you want to delete?')) {
+    if (confirm(this.props.localize('ui.panel.config.automation.editor.actions.delete_confirm'))) {
       this.props.onChange(this.props.index, null);
     }
   }
@@ -31,8 +31,8 @@ export default class Action extends Component {
               slot="dropdown-trigger"
             />
             <paper-listbox slot="dropdown-content">
-              <paper-item disabled>Duplicate</paper-item>
-              <paper-item onTap={this.onDelete}>Delete</paper-item>
+              <paper-item disabled>{props.localize('ui.panel.config.automation.editor.actions.duplicate')}</paper-item>
+              <paper-item onTap={this.onDelete}>{props.localize('ui.panel.config.automation.editor.actions.delete')}</paper-item>
             </paper-listbox>
           </paper-menu-button>
         </div>
diff --git a/js/panel-config/script/call_service.js b/js/panel-config/script/call_service.js
index 5375715e5e..246fab07ff 100644
--- a/js/panel-config/script/call_service.js
+++ b/js/panel-config/script/call_service.js
@@ -24,7 +24,7 @@ export default class CallServiceAction extends Component {
     });
   }
 
-  render({ action, hass }) {
+  render({ action, hass, localize }) {
     const { service, data } = action;
 
     return (
@@ -35,7 +35,7 @@ export default class CallServiceAction extends Component {
           onChange={this.serviceChanged}
         />
         <JSONTextArea
-          label="Service Data"
+          label={localize('ui.panel.config.automation.editor.actions.type.service.service_data')}
           value={data}
           onChange={this.serviceDataChanged}
         />
@@ -44,7 +44,6 @@ export default class CallServiceAction extends Component {
   }
 }
 
-CallServiceAction.configKey = 'service';
 CallServiceAction.defaultConfig = {
   alias: '',
   service: '',
diff --git a/js/panel-config/script/condition.js b/js/panel-config/script/condition.js
index 071eb91a56..3fcea7657c 100644
--- a/js/panel-config/script/condition.js
+++ b/js/panel-config/script/condition.js
@@ -5,19 +5,19 @@ import ConditionEdit from '../condition/condition_edit.js';
 
 export default class ConditionAction extends Component {
   // eslint-disable-next-line
-  render({ action, index, onChange, hass }) {
+  render({ action, index, onChange, hass, localize }) {
     return (
       <ConditionEdit
         condition={action}
         onChange={onChange}
         index={index}
         hass={hass}
+        localize={localize}
       />
     );
   }
 }
 
-ConditionAction.configKey = 'condition';
 ConditionAction.defaultConfig = {
   condition: 'state',
   ...StateCondition.defaultConfig,
diff --git a/js/panel-config/script/delay.js b/js/panel-config/script/delay.js
index cec32cba8d..02add9fe3f 100644
--- a/js/panel-config/script/delay.js
+++ b/js/panel-config/script/delay.js
@@ -8,12 +8,12 @@ export default class DelayAction extends Component {
     this.onChange = onChangeEvent.bind(this, 'action');
   }
 
-  render({ action }) {
+  render({ action, localize }) {
     const { delay } = action;
     return (
       <div>
         <paper-input
-          label="Delay"
+          label={localize('ui.panel.config.automation.editor.actions.type.delay.delay')}
           name="delay"
           value={delay}
           onvalue-changed={this.onChange}
@@ -23,7 +23,6 @@ export default class DelayAction extends Component {
   }
 }
 
-DelayAction.configKey = 'delay';
 DelayAction.defaultConfig = {
   delay: '',
 };
diff --git a/js/panel-config/script/event.js b/js/panel-config/script/event.js
index 8592363aef..1013ecf9db 100644
--- a/js/panel-config/script/event.js
+++ b/js/panel-config/script/event.js
@@ -18,19 +18,19 @@ export default class EventAction extends Component {
     });
   }
 
-  render({ action }) {
+  render({ action, localize }) {
     /* eslint-disable camelcase */
     const { event, event_data } = action;
     return (
       <div>
         <paper-input
-          label="Event"
+          label={localize('ui.panel.config.automation.editor.actions.type.event.event')}
           name="event"
           value={event}
           onvalue-changed={this.onChange}
         />
         <JSONTextArea
-          label="Service Data"
+          label={localize('ui.panel.config.automation.editor.actions.type.event.service_data')}
           value={event_data}
           onChange={this.serviceDataChanged}
         />
@@ -39,7 +39,6 @@ export default class EventAction extends Component {
   }
 }
 
-EventAction.configKey = 'event';
 EventAction.defaultConfig = {
   event: '',
   event_data: {},
diff --git a/js/panel-config/script/index.js b/js/panel-config/script/index.js
index 2d5ec54507..6c48e394ae 100644
--- a/js/panel-config/script/index.js
+++ b/js/panel-config/script/index.js
@@ -30,7 +30,7 @@ export default class Script extends Component {
     this.props.onChange(script);
   }
 
-  render({ script, hass }) {
+  render({ script, hass, localize }) {
     return (
       <div class="script">
         {script.map((act, idx) => (
@@ -39,10 +39,11 @@ export default class Script extends Component {
             action={act}
             onChange={this.actionChanged}
             hass={hass}
+            localize={localize}
           />))}
         <paper-card>
           <div class='card-actions add-card'>
-            <paper-button onTap={this.addAction}>Add action</paper-button>
+            <paper-button onTap={this.addAction}>{localize('ui.panel.config.automation.editor.actions.add')}</paper-button>
           </div>
         </paper-card>
       </div>
diff --git a/js/panel-config/script/wait.js b/js/panel-config/script/wait.js
index 6bf5d266eb..22ac63ba28 100644
--- a/js/panel-config/script/wait.js
+++ b/js/panel-config/script/wait.js
@@ -18,19 +18,19 @@ export default class WaitAction extends Component {
     });
   }
 
-  render({ action }) {
+  render({ action, localize }) {
     /* eslint-disable camelcase */
     const { wait_template, timeout } = action;
     return (
       <div>
         <paper-textarea
-          label="Wait Template"
+          label={localize('ui.panel.config.automation.editor.actions.type.wait_template.wait_template')}
           name="wait_template"
           value={wait_template}
           onvalue-changed={this.onTemplateChange}
         />
         <paper-input
-          label="Timeout (Optional)"
+          label={localize('ui.panel.config.automation.editor.actions.type.wait_template.timeout')}
           name="timeout"
           value={timeout}
           onvalue-changed={this.onChange}
@@ -40,7 +40,6 @@ export default class WaitAction extends Component {
   }
 }
 
-WaitAction.configKey = 'wait_template';
 WaitAction.defaultConfig = {
   wait_template: '',
   timeout: '',
diff --git a/js/panel-config/trigger/event.js b/js/panel-config/trigger/event.js
index e0a18d58d6..7c8b0a8219 100644
--- a/js/panel-config/trigger/event.js
+++ b/js/panel-config/trigger/event.js
@@ -19,18 +19,18 @@ export default class EventTrigger extends Component {
     });
   }
 
-  render({ trigger }) {
+  render({ trigger, localize }) {
     const { event_type, event_data } = trigger;
     return (
       <div>
         <paper-input
-          label="Event Type"
+          label={localize('ui.panel.config.automation.editor.triggers.type.event.event_type')}
           name="event_type"
           value={event_type}
           onvalue-changed={this.onChange}
         />
         <JSONTextArea
-          label="Event Data"
+          label={localize('ui.panel.config.automation.editor.triggers.type.event.event_data')}
           value={event_data}
           onChange={this.eventDataChanged}
         />
diff --git a/js/panel-config/trigger/homeassistant.js b/js/panel-config/trigger/homeassistant.js
index 6d43225a89..a27f96b61a 100644
--- a/js/panel-config/trigger/homeassistant.js
+++ b/js/panel-config/trigger/homeassistant.js
@@ -15,18 +15,18 @@ export default class HassTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger }) {
+  render({ trigger, localize }) {
     const { event } = trigger;
     return (
       <div>
-        <label id="eventlabel">Event:</label>
+        <label id="eventlabel">{localize('ui.panel.config.automation.editor.triggers.type.homeassistant.event')}</label>
         <paper-radio-group
           selected={event}
           aria-labelledby="eventlabel"
           onpaper-radio-group-changed={this.radioGroupPicked}
         >
-          <paper-radio-button name="start">Start</paper-radio-button>
-          <paper-radio-button name="shutdown">Shutdown</paper-radio-button>
+          <paper-radio-button name="start">{localize('ui.panel.config.automation.editor.triggers.type.homeassistant.start')}</paper-radio-button>
+          <paper-radio-button name="shutdown">{localize('ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown')}</paper-radio-button>
         </paper-radio-group>
       </div>
     );
diff --git a/js/panel-config/trigger/index.js b/js/panel-config/trigger/index.js
index 5f61fb2025..dcc453bea3 100644
--- a/js/panel-config/trigger/index.js
+++ b/js/panel-config/trigger/index.js
@@ -32,7 +32,7 @@ export default class Trigger extends Component {
     this.props.onChange(trigger);
   }
 
-  render({ trigger, hass }) {
+  render({ trigger, hass, localize }) {
     return (
       <div class="triggers">
         {trigger.map((trg, idx) => (
@@ -41,10 +41,11 @@ export default class Trigger extends Component {
             trigger={trg}
             onChange={this.triggerChanged}
             hass={hass}
+            localize={localize}
           />))}
         <paper-card>
           <div class='card-actions add-card'>
-            <paper-button onTap={this.addTrigger}>Add trigger</paper-button>
+            <paper-button onTap={this.addTrigger}>{localize('ui.panel.config.automation.editor.triggers.add')}</paper-button>
           </div>
         </paper-card>
       </div>
diff --git a/js/panel-config/trigger/mqtt.js b/js/panel-config/trigger/mqtt.js
index c475f1c0a4..fb66a8c803 100644
--- a/js/panel-config/trigger/mqtt.js
+++ b/js/panel-config/trigger/mqtt.js
@@ -10,18 +10,18 @@ export default class MQTTTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger }) {
+  render({ trigger, localize }) {
     const { topic, payload } = trigger;
     return (
       <div>
         <paper-input
-          label="Topic"
+          label={localize('ui.panel.config.automation.editor.triggers.type.mqtt.topic')}
           name="topic"
           value={topic}
           onvalue-changed={this.onChange}
         />
         <paper-input
-          label="Payload (Optional)"
+          label={localize('ui.panel.config.automation.editor.triggers.type.mqtt.payload')}
           name="payload"
           value={payload}
           onvalue-changed={this.onChange}
diff --git a/js/panel-config/trigger/numeric_state.js b/js/panel-config/trigger/numeric_state.js
index 583bbcaef9..ab20d86fdd 100644
--- a/js/panel-config/trigger/numeric_state.js
+++ b/js/panel-config/trigger/numeric_state.js
@@ -18,7 +18,7 @@ export default class NumericStateTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, hass }) {
+  render({ trigger, hass, localize }) {
     const {
       value_template, entity_id, below, above
     } = trigger;
@@ -32,19 +32,19 @@ export default class NumericStateTrigger extends Component {
           allowCustomEntity
         />
         <paper-input
-          label="Above"
+          label={localize('ui.panel.config.automation.editor.triggers.type.numeric_state.above')}
           name="above"
           value={above}
           onvalue-changed={this.onChange}
         />
         <paper-input
-          label="Below"
+          label={localize('ui.panel.config.automation.editor.triggers.type.numeric_state.below')}
           name="below"
           value={below}
           onvalue-changed={this.onChange}
         />
         <paper-textarea
-          label="Value template (optional)"
+          label={localize('ui.panel.config.automation.editor.triggers.type.numeric_state.value_template')}
           name="value_template"
           value={value_template}
           onvalue-changed={this.onChange}
diff --git a/js/panel-config/trigger/state.js b/js/panel-config/trigger/state.js
index 0b3d7b2e1b..dd16e626eb 100644
--- a/js/panel-config/trigger/state.js
+++ b/js/panel-config/trigger/state.js
@@ -18,7 +18,7 @@ export default class StateTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, hass }) {
+  render({ trigger, hass, localize }) {
     const { entity_id, to } = trigger;
     const trgFrom = trigger.from;
     const trgFor = trigger.for;
@@ -31,13 +31,13 @@ export default class StateTrigger extends Component {
           allowCustomEntity
         />
         <paper-input
-          label="From"
+          label={localize('ui.panel.config.automation.editor.triggers.type.state.from')}
           name="from"
           value={trgFrom}
           onvalue-changed={this.onChange}
         />
         <paper-input
-          label="To"
+          label={localize('ui.panel.config.automation.editor.triggers.type.state.to')}
           name="to"
           value={to}
           onvalue-changed={this.onChange}
diff --git a/js/panel-config/trigger/sun.js b/js/panel-config/trigger/sun.js
index 2722088f44..098940b2de 100644
--- a/js/panel-config/trigger/sun.js
+++ b/js/panel-config/trigger/sun.js
@@ -18,22 +18,22 @@ export default class SunTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger }) {
+  render({ trigger, localize }) {
     const { offset, event } = trigger;
     return (
       <div>
-        <label id="eventlabel">Event:</label>
+        <label id="eventlabel">{localize('ui.panel.config.automation.editor.triggers.type.sun.event')}</label>
         <paper-radio-group
           selected={event}
           aria-labelledby="eventlabel"
           onpaper-radio-group-changed={this.radioGroupPicked}
         >
-          <paper-radio-button name="sunrise">Sunrise</paper-radio-button>
-          <paper-radio-button name="sunset">Sunset</paper-radio-button>
+          <paper-radio-button name="sunrise">{localize('ui.panel.config.automation.editor.triggers.type.sun.sunrise')}</paper-radio-button>
+          <paper-radio-button name="sunset">{localize('ui.panel.config.automation.editor.triggers.type.sun.sunset')}</paper-radio-button>
         </paper-radio-group>
 
         <paper-input
-          label="Offset (optional)"
+          label={localize('ui.panel.config.automation.editor.triggers.type.sun.offset')}
           name="offset"
           value={offset}
           onvalue-changed={this.onChange}
diff --git a/js/panel-config/trigger/template.js b/js/panel-config/trigger/template.js
index a228053690..72f99e1613 100644
--- a/js/panel-config/trigger/template.js
+++ b/js/panel-config/trigger/template.js
@@ -9,13 +9,13 @@ export default class TemplateTrigger extends Component {
     this.onChange = onChangeEvent.bind(this, 'trigger');
   }
 
-  render({ trigger }) {
+  render({ trigger, localize }) {
     /* eslint-disable camelcase */
     const { value_template } = trigger;
     return (
       <div>
         <paper-textarea
-          label="Value Template"
+          label={localize('ui.panel.config.automation.editor.triggers.type.template.value_template')}
           name="value_template"
           value={value_template}
           onvalue-changed={this.onChange}
diff --git a/js/panel-config/trigger/time.js b/js/panel-config/trigger/time.js
index 038e76aae5..929adec240 100644
--- a/js/panel-config/trigger/time.js
+++ b/js/panel-config/trigger/time.js
@@ -10,12 +10,12 @@ export default class TimeTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger }) {
+  render({ trigger, localize }) {
     const { at } = trigger;
     return (
       <div>
         <paper-input
-          label="At"
+          label={localize('ui.panel.config.automation.editor.triggers.type.time.at')}
           name="at"
           value={at}
           onvalue-changed={this.onChange}
diff --git a/js/panel-config/trigger/trigger_edit.js b/js/panel-config/trigger/trigger_edit.js
index 85bd0cd3de..fbc13d566a 100644
--- a/js/panel-config/trigger/trigger_edit.js
+++ b/js/panel-config/trigger/trigger_edit.js
@@ -32,7 +32,7 @@ export default class TriggerEdit extends Component {
   }
 
   typeChanged(ev) {
-    const type = ev.target.selectedItem.innerHTML;
+    const type = ev.target.selectedItem.attributes.platform.value;
 
     if (type !== this.props.trigger.platform) {
       this.props.onChange(this.props.index, {
@@ -42,27 +42,27 @@ export default class TriggerEdit extends Component {
     }
   }
 
-  render({ index, trigger, onChange, hass }) {
+  render({ index, trigger, onChange, hass, localize }) {
     const Comp = TYPES[trigger.platform];
     const selected = OPTIONS.indexOf(trigger.platform);
 
     if (!Comp) {
       return (
         <div>
-          Unsupported platform: {trigger.platform}
+          {localize('ui.panel.config.automation.editor.triggers.unsupported_platform', 'platform', trigger.platform)}
           <pre>{JSON.stringify(trigger, null, 2)}</pre>
         </div>
       );
     }
     return (
       <div>
-        <paper-dropdown-menu-light label="Trigger Type" no-animations>
+        <paper-dropdown-menu-light label={localize('ui.panel.config.automation.editor.triggers.type_select')} no-animations>
           <paper-listbox
             slot="dropdown-content"
             selected={selected}
             oniron-select={this.typeChanged}
           >
-            {OPTIONS.map(opt => <paper-item>{opt}</paper-item>)}
+            {OPTIONS.map(opt => <paper-item platform={opt}>{localize(`ui.panel.config.automation.editor.triggers.type.${opt}.label`)}</paper-item>)}
           </paper-listbox>
         </paper-dropdown-menu-light>
         <Comp
@@ -70,6 +70,7 @@ export default class TriggerEdit extends Component {
           trigger={trigger}
           onChange={onChange}
           hass={hass}
+          localize={localize}
         />
       </div>
     );
diff --git a/js/panel-config/trigger/trigger_row.js b/js/panel-config/trigger/trigger_row.js
index 18195aabab..0cd1fe767d 100644
--- a/js/panel-config/trigger/trigger_row.js
+++ b/js/panel-config/trigger/trigger_row.js
@@ -11,7 +11,7 @@ export default class TriggerRow extends Component {
 
   onDelete() {
     // eslint-disable-next-line
-    if (confirm('Sure you want to delete?')) {
+    if (confirm(this.props.localize('ui.panel.config.automation.editor.triggers.delete_confirm'))) {
       this.props.onChange(this.props.index, null);
     }
   }
@@ -31,8 +31,8 @@ export default class TriggerRow extends Component {
               slot="dropdown-trigger"
             />
             <paper-listbox slot="dropdown-content">
-              <paper-item disabled>Duplicate</paper-item>
-              <paper-item onTap={this.onDelete}>Delete</paper-item>
+              <paper-item disabled>{props.localize('ui.panel.config.automation.editor.triggers.duplicate')}</paper-item>
+              <paper-item onTap={this.onDelete}>{props.localize('ui.panel.config.automation.editor.triggers.delete')}</paper-item>
             </paper-listbox>
           </paper-menu-button>
         </div>
diff --git a/js/panel-config/trigger/zone.js b/js/panel-config/trigger/zone.js
index 833274fa8c..47996cffa3 100644
--- a/js/panel-config/trigger/zone.js
+++ b/js/panel-config/trigger/zone.js
@@ -40,12 +40,12 @@ export default class ZoneTrigger extends Component {
   }
 
   /* eslint-disable camelcase */
-  render({ trigger, hass }) {
+  render({ trigger, hass, localize }) {
     const { entity_id, zone, event } = trigger;
     return (
       <div>
         <ha-entity-picker
-          label='Entity with location'
+          label={localize('ui.panel.config.automation.editor.triggers.type.zone.entity')}
           value={entity_id}
           onChange={this.entityPicked}
           hass={hass}
@@ -53,21 +53,21 @@ export default class ZoneTrigger extends Component {
           entityFilter={zoneAndLocationFilter}
         />
         <ha-entity-picker
-          label='Zone'
+          label={localize('ui.panel.config.automation.editor.triggers.type.zone.zone')}
           value={zone}
           onChange={this.zonePicked}
           hass={hass}
           allowCustomEntity
           domainFilter='zone'
         />
-        <label id="eventlabel">Event:</label>
+        <label id="eventlabel">{localize('ui.panel.config.automation.editor.triggers.type.zone.event')}</label>
         <paper-radio-group
           selected={event}
           aria-labelledby="eventlabel"
           onpaper-radio-group-changed={this.radioGroupPicked}
         >
-          <paper-radio-button name="enter">Enter</paper-radio-button>
-          <paper-radio-button name="leave">Leave</paper-radio-button>
+          <paper-radio-button name="enter">{localize('ui.panel.config.automation.editor.triggers.type.zone.enter')}</paper-radio-button>
+          <paper-radio-button name="leave">{localize('ui.panel.config.automation.editor.triggers.type.zone.leave')}</paper-radio-button>
         </paper-radio-group>
       </div>
     );
diff --git a/panels/config/automation/ha-automation-editor.html b/panels/config/automation/ha-automation-editor.html
index 65f260463f..b7cbd6497a 100644
--- a/panels/config/automation/ha-automation-editor.html
+++ b/panels/config/automation/ha-automation-editor.html
@@ -17,6 +17,7 @@
 
 <link rel='import' href='../../../src/components/entity/ha-entity-picker.html'>
 <link rel='import' href='../../../src/components/ha-combo-box.html'>
+<link rel='import' href='../../../src/components/ha-markdown.html'>
 <link rel='import' href='../../../src/components/ha-service-picker.html'>
 <link rel='import' href='../../../src/layouts/ha-app-layout.html'>
 <link rel='import' href='../../../src/util/hass-mixins.html'>
@@ -89,7 +90,7 @@
             icon='mdi:arrow-left'
             on-click='backTapped'
           ></paper-icon-button>
-          <div main-title>Automation [[name]]</div>
+          <div main-title>[[name]]</div>
         </app-toolbar>
       </app-header>
 
@@ -103,7 +104,7 @@
         is-wide$='[[isWide]]'
         dirty$='[[dirty]]'
         icon='mdi:content-save'
-        title='Save'
+        title="[[localize('ui.panel.config.automation.editor.save')]]"
         on-click='saveAutomation'
       ></paper-fab>
     </ha-app-layout>
@@ -112,7 +113,12 @@
 </dom-module>
 
 <script>
-class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ * @appliesMixin window.hassMixins.EventsMixin
+ */
+class HaAutomationEditor extends
+  window.hassMixins.LocalizeMixin(window.hassMixins.EventsMixin(Polymer.Element)) {
   static get is() { return 'ha-automation-editor'; }
 
   static get properties() {
@@ -158,7 +164,7 @@ class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element)
 
       name: {
         type: String,
-        computed: 'computeName(automation)'
+        computed: 'computeName(automation, localize)'
       },
 
       isWide: {
@@ -231,7 +237,7 @@ class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element)
     }
     this.dirty = false;
     this.config = {
-      alias: 'New Automation',
+      alias: this.localize('ui.panel.config.automation.editor.default_name'),
       trigger: [
         { platform: 'state' },
       ],
@@ -246,7 +252,7 @@ class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element)
   backTapped() {
     if (this.dirty &&
         // eslint-disable-next-line
-        !confirm('You have unsaved changes. Are you sure you want to leave?')) {
+        !confirm(this.localize('ui.panel.config.automation.editor.unsaved_confirm'))) {
       return;
     }
     history.back();
@@ -261,6 +267,7 @@ class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element)
         onChange: this.configChanged,
         isWide: this.isWide,
         hass: this.hass,
+        localize: this.localize,
       }, this._rendered);
       this._renderScheduled = false;
     });
@@ -281,8 +288,10 @@ class HaAutomationEditor extends window.hassMixins.EventsMixin(Polymer.Element)
     }.bind(this));
   }
 
-  computeName(automation) {
-    return automation && window.hassUtil.computeStateName(automation);
+  computeName(automation, localize) {
+    return automation
+      ? window.hassUtil.computeStateName(automation)
+      : localize('ui.panel.config.automation.editor.default_name');
   }
 }
 
diff --git a/panels/config/automation/ha-automation-picker.html b/panels/config/automation/ha-automation-picker.html
index b2f92beb88..8ce5084f1e 100644
--- a/panels/config/automation/ha-automation-picker.html
+++ b/panels/config/automation/ha-automation-picker.html
@@ -19,10 +19,6 @@
         display: block;
       }
 
-/*      .content {
-        padding: 16px;
-      }
-*/
       paper-item {
         cursor: pointer;
       }
@@ -42,6 +38,10 @@
       a {
         color: var(--primary-color);
       }
+
+      ha-markdown p {
+        margin: 0px;
+      }
     </style>
 
     <ha-app-layout has-scrolling-region>
@@ -58,16 +58,15 @@
       <ha-config-section
         is-wide='[[isWide]]'
       >
-        <div slot='header'>Automation Editor</div>
+        <div slot='header'>[[localize('ui.panel.config.automation.picker.header')]]</div>
         <div slot='introduction'>
-          The automation editor allows you to create and edit automations.
-          Please read <a href='https://home-assistant.io/docs/automation/editor/' target='_blank'>the instructions</a> to make sure that you have configured Home Assistant correctly.
+          <ha-markdown content="[[localize('ui.panel.config.automation.picker.introduction')]]"></ha-markdown>
         </div>
 
-        <paper-card heading='Pick automation to edit'>
+        <paper-card heading="[[localize('ui.panel.config.automation.picker.pick_automation')]]">
           <template is='dom-if' if='[[!automations.length]]'>
             <div class='card-content'>
-              <p>We couldn't find any editable automations.</p>
+              <p>[[localize('ui.panel.config.automation.picker.no_automations')]]</p>
             </div>
           </template>
           <template is='dom-repeat' items='[[automations]]' as='automation'>
@@ -85,7 +84,7 @@
       <paper-fab slot="fab"
         is-wide$='[[isWide]]'
         icon='mdi:plus'
-        title='Add Automation'
+        title="[[localize('ui.panel.config.automation.picker.add_automation')]]"
         on-click='addAutomation'
       ></paper-fab>
     </ha-app-layout>
diff --git a/panels/config/script/ha-script-editor.html b/panels/config/script/ha-script-editor.html
index 59450b008d..59c7560775 100644
--- a/panels/config/script/ha-script-editor.html
+++ b/panels/config/script/ha-script-editor.html
@@ -110,7 +110,10 @@
 </dom-module>
 
 <script>
-class HaScriptEditor extends window.hassMixins.NavigateMixin(Polymer.Element) {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ */
+class HaScriptEditor extends window.hassMixins.LocalizeMixin(Polymer.Element) {
   static get is() { return 'ha-script-editor'; }
 
   static get properties() {
@@ -256,6 +259,7 @@ class HaScriptEditor extends window.hassMixins.NavigateMixin(Polymer.Element) {
         onChange: this.configChanged,
         isWide: this.isWide,
         hass: this.hass,
+        localize: this.localize,
       }, this._rendered);
       this._renderScheduled = false;
     });
diff --git a/src/components/entity/ha-entity-picker.html b/src/components/entity/ha-entity-picker.html
index f56ef61293..3b3f235b5c 100644
--- a/src/components/entity/ha-entity-picker.html
+++ b/src/components/entity/ha-entity-picker.html
@@ -3,6 +3,8 @@
 <link rel="import" href="../../../bower_components/paper-item/paper-icon-item.html">
 <link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
 
+<link rel='import' href='../../../src/util/hass-mixins.html'>
+
 <link rel="import" href="./state-badge.html">
 
 <dom-module id="ha-entity-picker">
@@ -28,7 +30,7 @@
     >
       <paper-input
         autofocus="[[autofocus]]"
-        label="[[label]]"
+        label="[[_computeLabel(label, localize)]]"
         class="input"
         value='[[value]]'
         disabled='[[disabled]]'
@@ -66,7 +68,10 @@
 </dom-module>
 
 <script>
-class HaEntityPicker extends Polymer.Element {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ */
+class HaEntityPicker extends window.hassMixins.LocalizeMixin(Polymer.Element) {
   static get is() { return 'ha-entity-picker'; }
 
   static get properties() {
@@ -87,7 +92,6 @@ class HaEntityPicker extends Polymer.Element {
       autofocus: Boolean,
       label: {
         type: String,
-        value: 'Entity',
       },
       value: {
         type: String,
@@ -110,6 +114,12 @@ class HaEntityPicker extends Polymer.Element {
     };
   }
 
+  _computeLabel(label, localize) {
+    return label === undefined
+      ? localize('ui.components.entity.entity-picker.entity')
+      : label;
+  }
+
   _computeStates(hass, domainFilter, entityFilter) {
     if (!hass) return [];
 
diff --git a/src/components/ha-service-picker.html b/src/components/ha-service-picker.html
index c884f8d2d3..5bc0c3480d 100644
--- a/src/components/ha-service-picker.html
+++ b/src/components/ha-service-picker.html
@@ -5,7 +5,7 @@
 <dom-module id="ha-service-picker">
   <template>
     <ha-combo-box
-      label='Service'
+      label="[[localize('ui.components.service-picker.service')]]"
       items='[[_services]]'
       value='{{value}}'
       allow-custom-value
@@ -14,7 +14,10 @@
 </dom-module>
 
 <script>
-class HaServicePicker extends Polymer.Element {
+/*
+ * @appliesMixin window.hassMixins.LocalizeMixin
+ */
+class HaServicePicker extends window.hassMixins.LocalizeMixin(Polymer.Element) {
   static get is() { return 'ha-service-picker'; }
 
   static get properties() {
diff --git a/src/translations/en.json b/src/translations/en.json
index 3186bfcf02..d5c84192df 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -313,6 +313,16 @@
       "loading": "Loading",
       "cancel": "Cancel"
     },
+    "components": {
+      "entity": {
+        "entity-picker": {
+          "entity": "Entity"
+        }
+      },
+      "service-picker": {
+        "service": "Service"
+      }
+    },
     "duration": {
       "second": "{count} {count, plural,\n  one {second}\n  other {seconds}\n}",
       "day": "{count} {count, plural,\n  one {day}\n  other {days}\n}",
@@ -389,7 +399,161 @@
         },
         "automation": {
           "caption": "Automation",
-          "description": "Create and edit automations"
+          "description": "Create and edit automations",
+          "picker": {
+            "header": "Automation editor",
+            "introduction": "The automation editor allows you to create and edit automations. Please read [the instructions](https://home-assistant.io/docs/automation/editor/) to make sure that you have configured Home Assistant correctly.",
+            "pick_automation": "Pick automation to edit",
+            "no_automations": "We couldn’t find any editable automations",
+            "add_automation": "Add automation"
+          },
+          "editor": {
+            "introduction": "Use automations to bring your home alive",
+            "default_name": "New Automation",
+            "save": "Save",
+            "unsaved_confirm": "You have unsaved changes. Are you sure you want to leave?",
+            "alias": "Name",
+            "triggers": {
+              "header": "Triggers",
+              "introduction": "Triggers are what starts the processing of an automation rule. It is possible to specify multiple triggers for the same rule. Once a trigger starts, Home Assistant will validate the conditions, if any, and call the action.\n\n[Learn more about triggers.](https://home-assistant.io/docs/automation/trigger/)",
+              "add": "Add trigger",
+              "duplicate": "Duplicate",
+              "delete": "[%key:ui::panel::mailbox::delete_button%]",
+              "delete_confirm": "Sure you want to delete?",
+              "unsupported_platform": "Unsupported platform: {platform}",
+              "type_select": "Trigger type",
+              "type": {
+                "event": {
+                  "label": "Event",
+                  "event_type": "Event type",
+                  "event_data": "Event data"
+                },
+                "state": {
+                  "label": "State",
+                  "from": "From",
+                  "to": "To"
+                },
+                "homeassistant": {
+                  "label": "Home Assistant",
+                  "event": "Event:",
+                  "start": "Start",
+                  "shutdown": "Shutdown"
+                },
+                "mqtt": {
+                  "label": "MQTT",
+                  "topic": "Topic",
+                  "payload": "Payload (optional)"
+                },
+                "numeric_state": {
+                  "label": "Numeric state",
+                  "above": "Above",
+                  "below": "Below",
+                  "value_template": "Value template (optional)"
+                },
+                "sun": {
+                  "label": "Sun",
+                  "event": "[%key:ui::panel::config::automation::editor::triggers::type::homeassistant::event%]",
+                  "sunrise": "Sunrise",
+                  "sunset": "Sunset",
+                  "offset": "Offset (optional)"
+                },
+                "template": {
+                  "label": "Template",
+                  "value_template": "Value template"
+                },
+                "time": {
+                  "label": "Time",
+                  "at": "At"
+                },
+                "zone": {
+                  "label": "Zone",
+                  "entity": "Entity with location",
+                  "zone": "[%key:ui::panel::config::automation::editor::triggers::type::zone::label%]",
+                  "event": "[%key:ui::panel::config::automation::editor::triggers::type::homeassistant::event%]",
+                  "enter": "Enter",
+                  "leave": "Leave"
+                }
+              }
+            },
+            "conditions": {
+              "header": "Conditions",
+              "introduction": "Conditions are an optional part of an automation rule and can be used to prevent an action from happening when triggered. Conditions look very similar to triggers but are very different. A trigger will look at events happening in the system while a condition only looks at how the system looks right now. A trigger can observe that a switch is being turned on. A condition can only see if a switch is currently on or off.\n\n[Learn more about conditions.](https://home-assistant.io/docs/scripts/conditions/)",
+              "add": "Add condition",
+              "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
+              "delete": "[%key:ui::panel::mailbox::delete_button%]",
+              "delete_confirm": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm%]",
+              "unsupported_condition": "Unsupported condition: {condition}",
+              "type_select": "Condition type",
+              "type": {
+                "state": {
+                  "label": "[%key:ui::panel::config::automation::editor::triggers::type::state::label%]",
+                  "state": "[%key:ui::panel::config::automation::editor::triggers::type::state::label%]"
+                },
+                "numeric_state": {
+                  "label": "[%key:ui::panel::config::automation::editor::triggers::type::numeric_state::label%]",
+                  "above": "[%key:ui::panel::config::automation::editor::triggers::type::numeric_state::above%]",
+                  "below": "[%key:ui::panel::config::automation::editor::triggers::type::numeric_state::below%]",
+                  "value_template": "[%key:ui::panel::config::automation::editor::triggers::type::numeric_state::value_template%]"
+                },
+                "sun": {
+                  "label": "[%key:ui::panel::config::automation::editor::triggers::type::sun::label%]",
+                  "before": "Before:",
+                  "after": "After:",
+                  "before_offset": "Before offset (optional)",
+                  "after_offset": "After offset (optional)",
+                  "sunrise": "Sunrise",
+                  "sunset": "Sunset"
+                },
+                "template": {
+                  "label": "[%key:ui::panel::config::automation::editor::triggers::type::template::label%]",
+                  "value_template": "[%key:ui::panel::config::automation::editor::triggers::type::template::value_template%]"
+                },
+                "time": {
+                  "label": "[%key:ui::panel::config::automation::editor::triggers::type::time::label%]",
+                  "after": "After",
+                  "before": "Before"
+                },
+                "zone": {
+                  "label": "[%key:ui::panel::config::automation::editor::triggers::type::zone::label%]",
+                  "entity": "[%key:ui::panel::config::automation::editor::triggers::type::zone::entity%]",
+                  "zone": "[%key:ui::panel::config::automation::editor::triggers::type::zone::label%]"
+                }
+              }
+            },
+            "actions": {
+              "header": "Actions",
+              "introduction": "The actions are what Home Assistant will do when the automation is triggered.\n\n[Learn more about actions.](https://home-assistant.io/docs/automation/action/)",
+              "add": "Add action",
+              "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
+              "delete": "[%key:ui::panel::mailbox::delete_button%]",
+              "delete_confirm": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm%]",
+              "unsupported_action": "Unsupported action: {action}",
+              "type_select": "Action type",
+              "type": {
+                "service": {
+                  "label": "Call service",
+                  "service_data": "Service data"
+                },
+                "delay": {
+                  "label": "Delay",
+                  "delay": "[%key:ui::panel::config::automation::editor::actions::type::delay::label%]"
+                },
+                "wait_template": {
+                  "label": "Wait",
+                  "wait_template": "Wait Template",
+                  "timeout": "Timeout (optional)"
+                },
+                "condition": {
+                  "label": "Condition"
+                },
+                "event": {
+                  "label": "Fire event",
+                  "event": "[%key:ui::panel::config::automation::editor::triggers::type::homeassistant::event%]",
+                  "service_data": "[%key:ui::panel::config::automation::editor::actions::type::service::service_data%]"
+                }
+              }
+            }
+          }
         },
         "script": {
           "caption": "Script",