Add localization to ZHA panel (#3881)

* Add localization for ZHA config panel

* Additional ZHA panel localization

src/panels/config/zha/zha-add-devices-page.ts

@@ -72,7 +72,9 @@ class ZHAAddDevicesPage extends LitElement {
           : html`
               <div class="card-actions">
                 <mwc-button @click=${this._subscribe} class="search-button">
-                  Search again
+                  ${this.hass!.localize(
+                    "ui.panel.config.zha.add_device_page.search_again"
+                  )}
                 </mwc-button>
                 <paper-icon-button
                   class="toggle-help-icon"

src/panels/config/zha/zha-cluster-attributes.ts

@@ -85,7 +85,11 @@ export class ZHAClusterAttributes extends LitElement {
     return html`
       <ha-config-section .isWide="${this.isWide}">
         <div style="position: relative" slot="header">
-          <span>Cluster Attributes</span>
+          <span>
+            ${this.hass!.localize(
+              "ui.panel.config.zha.cluster_attributes.header"
+            )}
+          </span>
           <paper-icon-button
             class="toggle-help-icon"
             @click="${this._onHelpTap}"
@@ -93,12 +97,18 @@ export class ZHAClusterAttributes extends LitElement {
           >
           </paper-icon-button>
         </div>
-        <span slot="introduction">View and edit cluster attributes.</span>
+        <span slot="introduction">
+          ${this.hass!.localize(
+            "ui.panel.config.zha.cluster_attributes.introduction"
+          )}
+        </span>
 
         <ha-card class="content">
           <div class="attribute-picker">
             <paper-dropdown-menu
-              label="Attributes of the selected cluster"
+              label="${this.hass!.localize(
+                "ui.panel.config.zha.cluster_attributes.attributes_of_cluster"
+              )}"
               class="flex"
             >
               <paper-listbox
@@ -122,7 +132,9 @@ export class ZHAClusterAttributes extends LitElement {
           ${this.showHelp
             ? html`
                 <div class="help-text">
-                  Select an attribute to view or set its value
+                  ${this.hass!.localize(
+                    "ui.panel.config.zha.cluster_attributes.help_attribute_dropdown"
+                  )}
                 </div>
               `
             : ""}
@@ -138,30 +150,40 @@ export class ZHAClusterAttributes extends LitElement {
     return html`
       <div class="input-text">
         <paper-input
-          label="Value"
+          label="${this.hass!.localize("ui.panel.config.zha.common.value")}"
           type="string"
           .value="${this._attributeValue}"
           @value-changed="${this._onAttributeValueChanged}"
-          placeholder="Value"
+          placeholder="${this.hass!.localize(
+            "ui.panel.config.zha.common.value"
+          )}"
         ></paper-input>
       </div>
       <div class="input-text">
         <paper-input
-          label="Manufacturer code override"
+          label="${this.hass!.localize(
+            "ui.panel.config.zha.common.manufacturer_code_override"
+          )}"
           type="number"
           .value="${this._manufacturerCodeOverride}"
           @value-changed="${this._onManufacturerCodeOverrideChanged}"
-          placeholder="Value"
+          placeholder="${this.hass!.localize(
+            "ui.panel.config.zha.common.value"
+          )}"
         ></paper-input>
       </div>
       <div class="card-actions">
-        <mwc-button @click="${this._onGetZigbeeAttributeClick}"
+        <mwc-button @click="${this._onGetZigbeeAttributeClick}">
-          >Get Zigbee Attribute</mwc-button
+          ${this.hass!.localize(
-        >
+            "ui.panel.config.zha.cluster_attributes.get_zigbee_attribute"
+          )}
+        </mwc-button>
         ${this.showHelp
           ? html`
               <div class="help-text2">
-                Get the value for the selected attribute
+                ${this.hass!.localize(
+                  "ui.panel.config.zha.cluster_attributes.help_get_zigbee_attribute"
+                )}
               </div>
             `
           : ""}
@@ -170,8 +192,11 @@ export class ZHAClusterAttributes extends LitElement {
           domain="zha"
           service="set_zigbee_cluster_attribute"
           .serviceData="${this._setAttributeServiceData}"
-          >Set Zigbee Attribute</ha-call-service-button
         >
+          ${this.hass!.localize(
+            "ui.panel.config.zha.cluster_attributes.set_zigbee_attribute"
+          )}
+        </ha-call-service-button>
         ${this.showHelp
           ? html`
               <ha-service-description

src/panels/config/zha/zha-cluster-commands.ts

@@ -78,7 +78,11 @@ export class ZHAClusterCommands extends LitElement {
     return html`
       <ha-config-section .isWide="${this.isWide}">
         <div class="sectionHeader" slot="header">
-          <span>Cluster Commands</span>
+          <span>
+            ${this.hass!.localize(
+              "ui.panel.config.zha.cluster_commands.header"
+            )}
+          </span>
           <paper-icon-button
             class="toggle-help-icon"
             @click="${this._onHelpTap}"
@@ -86,12 +90,18 @@ export class ZHAClusterCommands extends LitElement {
           >
           </paper-icon-button>
         </div>
-        <span slot="introduction">View and issue cluster commands.</span>
+        <span slot="introduction">
+          ${this.hass!.localize(
+            "ui.panel.config.zha.cluster_commands.introduction"
+          )}
+        </span>
 
         <ha-card class="content">
           <div class="command-picker">
             <paper-dropdown-menu
-              label="Commands of the selected cluster"
+              label="${this.hass!.localize(
+                "ui.panel.config.zha.cluster_commands.commands_of_cluster"
+              )}"
               class="flex"
             >
               <paper-listbox
@@ -114,18 +124,26 @@ export class ZHAClusterCommands extends LitElement {
           </div>
           ${this._showHelp
             ? html`
-                <div class="help-text">Select a command to interact with</div>
+                <div class="help-text">
+                  ${this.hass!.localize(
+                    "ui.panel.config.zha.cluster_commands.help_command_dropdown"
+                  )}
+                </div>
               `
             : ""}
           ${this._selectedCommandIndex !== -1
             ? html`
                 <div class="input-text">
                   <paper-input
-                    label="Manufacturer code override"
+                    label="${this.hass!.localize(
+                      "ui.panel.config.zha.common.manufacturer_code_override"
+                    )}"
                     type="number"
                     .value="${this._manufacturerCodeOverride}"
                     @value-changed="${this._onManufacturerCodeOverrideChanged}"
-                    placeholder="Value"
+                    placeholder="${this.hass!.localize(
+                      "ui.panel.config.zha.common.value"
+                    )}"
                   ></paper-input>
                 </div>
                 <div class="card-actions">
@@ -134,8 +152,11 @@ export class ZHAClusterCommands extends LitElement {
                     domain="zha"
                     service="issue_zigbee_cluster_command"
                     .serviceData="${this._issueClusterCommandServiceData}"
-                    >Issue Zigbee Command</ha-call-service-button
                   >
+                    ${this.hass!.localize(
+                      "ui.panel.config.zha.cluster_commands.issue_zigbee_command"
+                    )}
+                  </ha-call-service-button>
                   ${this._showHelp
                     ? html`
                         <ha-service-description

src/panels/config/zha/zha-clusters.ts

@@ -79,7 +79,10 @@ export class ZHAClusters extends LitElement {
   protected render(): TemplateResult | void {
     return html`
       <div class="node-picker">
-        <paper-dropdown-menu label="Clusters" class="flex">
+        <paper-dropdown-menu
+          label="${this.hass!.localize("ui.panel.config.zha.common.clusters")}"
+          class="flex"
+        >
           <paper-listbox
             slot="dropdown-content"
             .selected="${this._selectedClusterIndex}"
@@ -96,7 +99,9 @@ export class ZHAClusters extends LitElement {
       ${this.showHelp
         ? html`
             <div class="help-text">
-              Select cluster to view attributes and commands
+              ${this.hass!.localize(
+                "ui.panel.config.zha.clusters.help_cluster_dropdown"
+              )}
             </div>
           `
         : ""}

src/panels/config/zha/zha-device-card.ts

@@ -155,17 +155,29 @@ class ZHADeviceCard extends LitElement {
             <dt>Nwk:</dt>
             <dd class="zha-info">${formatAsPaddedHex(this.device!.nwk)}</dd>
             <dt>LQI:</dt>
-            <dd class="zha-info">${this.device!.lqi || "Unknown"}</dd>
+            <dd class="zha-info">${this.device!.lqi ||
+              this.hass!.localize("ui.dialogs.zha_device_info.unknown")}</dd>
             <dt>RSSI:</dt>
-            <dd class="zha-info">${this.device!.rssi || "Unknown"}</dd>
+            <dd class="zha-info">${this.device!.rssi ||
-            <dt>Last Seen:</dt>
+              this.hass!.localize("ui.dialogs.zha_device_info.unknown")}</dd>
-            <dd class="zha-info">${this.device!.last_seen || "Unknown"}</dd>
+            <dt>${this.hass!.localize(
-            <dt>Power Source:</dt>
+              "ui.dialogs.zha_device_info.last_seen"
-            <dd class="zha-info">${this.device!.power_source || "Unknown"}</dd>
+            )}:</dt>
+            <dd class="zha-info">${this.device!.last_seen ||
+              this.hass!.localize("ui.dialogs.zha_device_info.unknown")}</dd>
+            <dt>${this.hass!.localize(
+              "ui.dialogs.zha_device_info.power_source"
+            )}:</dt>
+            <dd class="zha-info">${this.device!.power_source ||
+              this.hass!.localize("ui.dialogs.zha_device_info.unknown")}</dd>
             ${
               this.device!.quirk_applied
                 ? html`
-                    <dt>Quirk:</dt>
+                    <dt>
+                      ${this.hass!.localize(
+                        "ui.dialogs.zha_device_info.quirk"
+                      )}:
+                    </dt>
                     <dd class="zha-info">${this.device!.quirk_class}</dd>
                   `
                 : ""
@@ -238,9 +250,11 @@ class ZHADeviceCard extends LitElement {
           this.showActions
             ? html`
                 <div class="card-actions">
-                  <mwc-button @click="${this._onReconfigureNodeClick}"
+                  <mwc-button @click="${this._onReconfigureNodeClick}">
-                    >Reconfigure Device</mwc-button
+                    ${this.hass!.localize(
-                  >
+                      "ui.dialogs.zha_device_info.buttons.reconfigure"
+                    )}
+                  </mwc-button>
                   ${this.showHelp
                     ? html`
                         <div class="help-text">
@@ -256,8 +270,11 @@ class ZHADeviceCard extends LitElement {
                     domain="zha"
                     service="remove"
                     .serviceData="${this._serviceData}"
-                    >Remove Device</ha-call-service-button
                   >
+                    ${this.hass!.localize(
+                      "ui.dialogs.zha_device_info.buttons.remove"
+                    )}
+                  </ha-call-service-button>
                   ${this.showHelp
                     ? html`
                         <div class="help-text">
@@ -270,7 +287,9 @@ class ZHADeviceCard extends LitElement {
                   ${this.device!.power_source === "Mains"
                     ? html`
                         <mwc-button @click=${this._onAddDevicesClick}>
-                          Add Devices
+                          ${this.hass!.localize(
+                            "ui.panel.config.zha.common.add_devices"
+                          )}
                         </mwc-button>
                         ${this.showHelp
                           ? html`

src/panels/config/zha/zha-network.ts

@@ -41,19 +41,27 @@ export class ZHANetwork extends LitElement {
     return html`
       <ha-config-section .isWide="${this.isWide}">
         <div style="position: relative" slot="header">
-          <span>Network Management</span>
+          <span>
+            ${this.hass!.localize(
+              "ui.panel.config.zha.network_management.header"
+            )}
+          </span>
           <paper-icon-button
             class="toggle-help-icon"
             @click="${this._onHelpTap}"
             icon="hass:help-circle"
           ></paper-icon-button>
         </div>
-        <span slot="introduction">Commands that affect entire network</span>
+        <span slot="introduction">
+          ${this.hass!.localize(
+            "ui.panel.config.zha.network_management.introduction"
+          )}
+        </span>
 
         <ha-card class="content">
           <div class="card-actions">
             <mwc-button @click=${this._onAddDevicesClick}>
-              Add Devices
+              ${this.hass!.localize("ui.panel.config.zha.common.add_devices")}
             </mwc-button>
             ${this._showHelp
               ? html`

src/panels/config/zha/zha-node.ts

@@ -54,7 +54,11 @@ export class ZHANode extends LitElement {
     return html`
       <ha-config-section .isWide="${this.isWide}">
         <div class="sectionHeader" slot="header">
-          <span>Device Management</span>
+          <span
+            >${this.hass!.localize(
+              "ui.panel.config.zha.node_management.header"
+            )}</span
+          >
           <paper-icon-button
             class="toggle-help-icon"
             @click="${this._onHelpTap}"
@@ -62,18 +66,24 @@ export class ZHANode extends LitElement {
           ></paper-icon-button>
         </div>
         <span slot="introduction">
-          Run ZHA commands that affect a single device. Pick a device to see a
+          ${this.hass!.localize(
-          list of available commands. <br /><br />Note: Sleepy (battery powered)
+            "ui.panel.config.zha.node_management.introduction"
-          devices need to be awake when executing commands against them. You can
+          )}
-          generally wake a sleepy device by triggering it. <br /><br />Some
+          <br /><br />
-          devices such as Xiaomi sensors have a wake up button that you can
+          ${this.hass!.localize(
-          press at ~5 second intervals that keep devices awake while you
+            "ui.panel.config.zha.node_management.hint_battery_devices"
-          interact with them.
+          )}
+          <br /><br />
+          ${this.hass!.localize(
+            "ui.panel.config.zha.node_management.hint_wakeup"
+          )}
         </span>
         <ha-card class="content">
           <div class="node-picker">
             <paper-dropdown-menu
-              label="Devices"
+              label="${this.hass!.localize(
+                "ui.panel.config.zha.common.devices"
+              )}"
               class="flex"
               id="zha-device-selector"
             >
@@ -97,7 +107,9 @@ export class ZHANode extends LitElement {
           ${this._showHelp
             ? html`
                 <div class="help-text">
-                  Select device to view per-device options
+                  ${this.hass!.localize(
+                    "ui.panel.config.zha.node_management.help_node_dropdown"
+                  )}
                 </div>
               `
             : ""}

src/translations/en.json

@@ -566,11 +566,20 @@
       "zha_device_info": {
         "manuf": "by {manufacturer}",
         "no_area": "No Area",
+        "buttons": {
+          "add": "Add Devices",
+          "remove": "Remove Device",
+          "reconfigure": "Reconfigure Device"
+        },
         "services": {
           "reconfigure": "Reconfigure ZHA device (heal device). Use this if you are having issues with the device. If the device in question is a battery powered device please ensure it is awake and accepting commands when you use this service.",
           "updateDeviceName": "Set a custom name for this device in the device registry.",
           "remove": "Remove a device from the ZigBee network."
         },
+        "quirk": "Quirk",
+        "last_seen": "Last Seen",
+        "power_source": "Power Source",
+        "unknown": "Unknown",
         "zha_device_card": {
           "device_name_placeholder": "User given name",
           "area_picker_label": "Area",
@@ -1190,10 +1199,49 @@
         "zha": {
           "caption": "ZHA",
           "description": "Zigbee Home Automation network management",
+          "common": {
+            "add_devices": "Add Devices",
+            "clusters": "Clusters",
+            "devices": "Devices",
+            "manufacturer_code_override": "Manufacturer Code Override",
+            "value": "Value"
+          },
           "add_device_page": {
             "header": "Zigbee Home Automation - Add Devices",
             "spinner": "Searching for ZHA Zigbee devices...",
-            "discovery_text": "Discovered devices will show up here. Follow the instructions for your device(s) and place the device(s) in pairing mode."
+            "discovery_text": "Discovered devices will show up here. Follow the instructions for your device(s) and place the device(s) in pairing mode.",
+            "search_again": "Search Again"
+          },
+          "network_management": {
+            "header": "Network Management",
+            "introduction": "Commands that affect the entire network"
+          },
+          "node_management": {
+            "header": "Device Management",
+            "introduction": "Run ZHA commands that affect a single device. Pick a device to see a list of available commands.",
+            "hint_battery_devices": "Note: Sleepy (battery powered) devices need to be awake when executing commands against them. You can generally wake a sleepy device by triggering it.",
+            "hint_wakeup": "Some devices such as Xiaomi sensors have a wake up button that you can press at ~5 second intervals that keep devices awake while you interact with them.",
+            "help_node_dropdown": "Select a device to view per-device options."
+          },
+          "clusters": {
+            "help_cluster_dropdown": "Select a cluster to view attributes and commands."
+          },
+          "cluster_attributes": {
+            "header": "Cluster Attributes",
+            "introduction": "View and edit cluster attributes.",
+            "attributes_of_cluster": "Attributes of the selected cluster",
+            "get_zigbee_attribute": "Get Zigbee Attribute",
+            "set_zigbee_attribute": "Set Zigbee Attribute",
+            "help_attribute_dropdown": "Select an attribute to view or set its value.",
+            "help_get_zigbee_attribute": "Get the value for the selected attribute.",
+            "help_set_zigbee_attribute": "Set attribute value for the specified cluster on the specified entity."
+          },
+          "cluster_commands": {
+            "header": "Cluster Commands",
+            "introduction": "View and issue cluster commands.",
+            "commands_of_cluster": "Commands of the selected cluster",
+            "issue_zigbee_command": "Issue Zigbee Command",
+            "help_command_dropdown": "Select a command to interact with."
           }
         },
         "zwave": {