Translated developer tools info page (#4054)

* Translated developer tools info page

* Added set or remove as a variable in translation of key default_ui

src/panels/developer-tools/info/developer-tools-info.ts

@@ -31,12 +31,18 @@ class HaPanelDevInfo extends LitElement {
 
     const nonDefaultLinkText =
       localStorage.defaultPage === OPT_IN_PANEL && OPT_IN_PANEL === "states"
-        ? "Go to the Lovelace UI"
-        : "Go to the states UI";
+        ? this.hass.localize("ui.panel.developer-tools.tabs.info.lovelace_ui")
+        : this.hass.localize("ui.panel.developer-tools.tabs.info.states_ui");
 
-    const defaultPageText = `${
-      localStorage.defaultPage === OPT_IN_PANEL ? "Remove" : "Set"
-    } ${OPT_IN_PANEL} as default page on this device`;
+    const defaultPageText = `${this.hass.localize(
+      "ui.panel.developer-tools.tabs.info.default_ui",
+      "action",
+      localStorage.defaultPage === OPT_IN_PANEL
+        ? this.hass.localize("ui.panel.developer-tools.tabs.info.remove")
+        : this.hass.localize("ui.panel.developer-tools.tabs.info.set"),
+      "name",
+      OPT_IN_PANEL
+    )}`;
 
     return html`
       <div class="about">
@@ -45,42 +51,58 @@ class HaPanelDevInfo extends LitElement {
             ><img
               src="/static/icons/favicon-192x192.png"
               height="192"
-              alt="Home Assistant logo"
+              alt="${this.hass.localize(
+                "ui.panel.developer-tools.tabs.info.home_assistant_logo"
+              )}"
           /></a>
           <br />
           <h2>Home Assistant ${hass.config.version}</h2>
         </p>
         <p>
-          Path to configuration.yaml: ${hass.config.config_dir}
+          ${this.hass.localize(
+            "ui.panel.developer-tools.tabs.info.path_configuration",
+            "path",
+            hass.config.config_dir
+          )}
         </p>
         <p class="develop">
           <a
             href="https://www.home-assistant.io/developers/credits/"
             target="_blank"
           >
-            Developed by a bunch of awesome people.
+            ${this.hass.localize(
+              "ui.panel.developer-tools.tabs.info.developed_by"
+            )}
           </a>
         </p>
         <p>
-          Published under the Apache 2.0 license<br />
-          Source:
+          ${this.hass.localize(
+            "ui.panel.developer-tools.tabs.info.license"
+          )}<br />
+          ${this.hass.localize("ui.panel.developer-tools.tabs.info.source")}
           <a
             href="https://github.com/home-assistant/home-assistant"
             target="_blank"
-            >server</a
+            >${this.hass.localize(
+              "ui.panel.developer-tools.tabs.info.server"
+            )}</a
           >
           &mdash;
           <a
             href="https://github.com/home-assistant/home-assistant-polymer"
             target="_blank"
-            >frontend-ui</a
+            >${this.hass.localize(
+              "ui.panel.developer-tools.tabs.info.frontend"
+            )}</a
           >
         </p>
         <p>
-          Built using
+          ${this.hass.localize(
+            "ui.panel.developer-tools.tabs.info.built_using"
+          )}
           <a href="https://www.python.org">Python 3</a>,
           <a href="https://www.polymer-project.org" target="_blank">Polymer</a>,
-          Icons by
+          ${this.hass.localize("ui.panel.developer-tools.tabs.info.icons_by")}
           <a href="https://www.google.com/design/icons/" target="_blank"
             >Google</a
           >
@@ -90,12 +112,20 @@ class HaPanelDevInfo extends LitElement {
           >.
         </p>
         <p>
-          Frontend version: ${JS_VERSION} - ${JS_TYPE}
+          ${this.hass.localize(
+            "ui.panel.developer-tools.tabs.info.frontend_version",
+            "version",
+            JS_VERSION,
+            "type",
+            JS_TYPE
+          )}
           ${
             customUiList.length > 0
               ? html`
                   <div>
-                    Custom UIs:
+                    ${this.hass.localize(
+                      "ui.panel.developer-tools.tabs.info.custom_uis"
+                    )}
                     ${customUiList.map(
                       (item) => html`
                         <div>

src/panels/developer-tools/info/system-health-card.ts

@@ -32,7 +32,7 @@ const sortKeys = (a: string, b: string) => {
 };
 
 class SystemHealthCard extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property() public hass!: HomeAssistant;
   @property() private _info?: SystemHealthInfo;
 
   protected render(): TemplateResult | void {
@@ -78,7 +78,7 @@ class SystemHealthCard extends LitElement {
     }
 
     return html`
-      <ha-card header="System Health">
+      <ha-card header="${this.hass.localize("domain.system_health")}">
         <div class="card-content">${sections}</div>
       </ha-card>
     `;
@@ -98,8 +98,9 @@ class SystemHealthCard extends LitElement {
     } catch (err) {
       this._info = {
         system_health: {
-          error:
-            "System Health component is not loaded. Add 'system_health:' to configuration.yaml",
+          error: this.hass.localize(
+            "ui.panel.developer-tools.tabs.info.system_health_error"
+          ),
         },
       };
     }

src/translations/en.json

@@ -1793,7 +1793,24 @@
       "developer-tools": {
         "tabs": {
           "info": {
-            "title": "Info"
+            "title": "Info",
+            "remove": "Remove",
+            "set": "Set",
+            "default_ui": "{action} {name} as default page on this device",
+            "lovelace_ui": "Go to the Lovelace UI",
+            "states_ui": "Go to the states UI",
+            "home_assistant_logo": "Home Assistant logo",
+            "path_configuration": "Path to configuration.yaml: {path}",
+            "developed_by": "Developed by a bunch of awesome people.",
+            "license": "Published under the Apache 2.0 license",
+            "source": "Source:",
+            "server": "server",
+            "frontend": "frontend-ui",
+            "built_using": "Built using",
+            "icons_by": "Icons by",
+            "frontend_version": "Frontend version: {version} - {type}",
+            "custom_uis": "Custom UIs:",
+            "system_health_error": "System Health component is not loaded. Add 'system_health:' to configuration.yaml"
           },
           "logs": {
             "title": "Logs",