Make script editor translatable (#3866)

* Make script editor's script picker translatable (home-assistant/home-assistant-polymer#3848)

* Make script editor translatable (home-assistant/home-assistant-polymer#3848)

* Fix linting errors (home-assistant/home-assistant-polymer#3866)

* Fix linting errors (home-assistant/home-assistant-polymer#3866)

* Move unsaved_confirm translation key to common section (home-assistant/home-assistant-polymer#3866)

Instead of adding the same text multiple times for every section, add a common section to indicate reusable translations.

* Add variable to localization text

* Use JavaScript instead of Polymer data binding

src/panels/config/script/ha-script-editor.js

@@ -100,7 +100,10 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
             <ha-paper-icon-button-arrow-prev
               on-click="backTapped"
             ></ha-paper-icon-button-arrow-prev>
-            <div main-title>Script [[computeName(script)]]</div>
+            <div main-title>
+              [[localize('ui.panel.config.script.caption'), 'name',
+              computeName(script)]]
+            </div>
             <template is="dom-if" if="[[!creatingNew]]">
               <paper-icon-button
                 icon="hass:delete"
@@ -120,7 +123,7 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
           is-wide$="[[isWide]]"
           dirty$="[[dirty]]"
           icon="hass:content-save"
-          title="Save"
+          title="[[localize('ui.common.save')]]"
           on-click="saveScript"
           rtl$="[[rtl]]"
         ></ha-fab>
@@ -232,7 +235,11 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
           this._updateComponent();
         },
         () => {
-          alert("Only scripts inside scripts.yaml are editable.");
+          alert(
+            this.hass.localize(
+              "ui.panel.config.script.editor.load_error_not_editable"
+            )
+          );
           history.back();
         }
       );
@@ -244,7 +251,7 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
     }
     this.dirty = false;
     this.config = {
-      alias: "New Script",
+      alias: this.hass.localize("ui.panel.config.script.editor.default_name"),
       sequence: [{ service: "", data: {} }],
     };
     this._updateComponent();
@@ -254,7 +261,7 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
     if (
       this.dirty &&
       // eslint-disable-next-line
-      !confirm("You have unsaved changes. Are you sure you want to leave?")
+      !confirm(this.hass.localize("ui.panel.config.common.editor.confirm_unsaved"))
     ) {
       return;
     }
@@ -281,7 +288,11 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
   }
 
   async _delete() {
-    if (!confirm("Are you sure you want to delete this script?")) {
+    if (
+      !confirm(
+        this.hass.localize("ui.panel.config.script.editor.delete_confirm")
+      )
+    ) {
       return;
     }
     await deleteScript(this.hass, computeObjectId(this.script.entity_id));

src/panels/config/script/ha-script-picker.ts

@@ -38,22 +38,36 @@ class HaScriptPicker extends LitElement {
         .header=${this.hass.localize("ui.panel.config.script.caption")}
       >
         <ha-config-section .isWide=${this.isWide}>
-          <div slot="header">Script Editor</div>
+          <div slot="header">
+            ${this.hass.localize("ui.panel.config.script.picker.header")}
+          </div>
           <div slot="introduction">
-            The script editor allows you to create and edit scripts. Please read
+            ${this.hass.localize("ui.panel.config.script.picker.introduction")}
+            <p>
               <a
                 href="https://home-assistant.io/docs/scripts/editor/"
                 target="_blank"
-              >the instructions</a
               >
-            to make sure that you have configured Home Assistant correctly.
+                ${this.hass.localize(
+                  "ui.panel.config.script.picker.learn_more"
+                )}
+              </a>
+            </p>
           </div>
 
-          <ha-card header="Pick script to edit">
+          <ha-card
+            header="${this.hass.localize(
+              "ui.panel.config.script.picker.pick_script"
+            )}"
+          >
             ${this.scripts.length === 0
               ? html`
                   <div class="card-content">
-                    <p>We couldn't find any scripts.</p>
+                    <p>
+                      ${this.hass.localize(
+                        "ui.panel.config.script.picker.no_scripts"
+                      )}
+                    </p>
                   </div>
                 `
               : this.scripts.map(
@@ -85,7 +99,9 @@ class HaScriptPicker extends LitElement {
             slot="fab"
             ?is-wide=${this.isWide}
             icon="hass:plus"
-            title="Add Script"
+            title="${this.hass.localize(
+              "ui.panel.config.script.picker.add_script"
+            )}"
             ?rtl=${computeRTL(this.hass)}
           ></ha-fab>
         </a>
@@ -97,7 +113,11 @@ class HaScriptPicker extends LitElement {
     const script = ev.currentTarget.script as HassEntity;
     await triggerScript(this.hass, script.entity_id);
     showToast(this, {
-      message: `Triggered ${computeStateName(script)}`,
+      message: `${this.hass.localize(
+        "ui.dialogs.notification_toast.triggered",
+        "name",
+        computeStateName(script)
+      )}`,
     });
   }
 

src/translations/en.json

@@ -597,7 +597,8 @@
     },
     "notification_toast": {
       "service_call_failed": "Failed to call service {service}.",
-      "connection_lost": "Connection lost. Reconnecting…"
+      "connection_lost": "Connection lost. Reconnecting…",
+      "triggered": "Triggered {name}"
     },
     "sidebar": {
       "external_app_configuration": "App Configuration"
@@ -606,6 +607,11 @@
       "config": {
         "header": "Configure Home Assistant",
         "introduction": "Here it is possible to configure your components and Home Assistant. Not everything is possible to configure from the UI yet, but we're working on it.",
+        "common": {
+          "editor": {
+            "confirm_unsaved": "You have unsaved changes. Are you sure you want to leave?"
+          }
+        },
         "area_registry": {
           "caption": "Area Registry",
           "description": "Overview of all areas in your home.",
@@ -890,8 +896,21 @@
           }
         },
         "script": {
-          "caption": "Script",
+          "caption": "Script {name}",
-          "description": "Create and edit scripts"
+          "description": "Create and edit scripts",
+          "picker": {
+            "header": "Script Editor",
+            "introduction": "The script editor allows you to create and edit scripts. Please follow the link below to read the instructions to make sure that you have configured Home Assistant correctly.",
+            "learn_more": "Learn more about scripts",
+            "pick_script": "Pick script to edit",
+            "no_scripts": "We couldn’t find any editable scripts",
+            "add_script": "Add script"
+          },
+          "editor": {
+            "default_name": "New Script",
+            "load_error_not_editable": "Only scripts inside scripts.yaml are editable.",
+            "delete_confirm": "Are you sure you want to delete this script?"
+          }
         },
         "cloud": {
           "caption": "Home Assistant Cloud",