Use translation keys for Network configuration pages (#17261)

* Network labels

* Remove quotes

* Update translations to include data and linting

* IPV6 => IPv6

src/panels/config/network/dialog-ip-detail.ts

@@ -41,20 +41,49 @@ class DialogIPDetail extends LitElement {
         @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
-        .heading=${createCloseHeading(this.hass, "IP Information")}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.dialogs.dialog-ip-detail.ip_information")
+        )}
       >
         ${ipv4
           ? html`
               <div>
-                <h3>IPv4</h3>
+                <h3>
+                  ${this.hass.localize("ui.dialogs.dialog-ip-detail.ipv4")}
+                </h3>
                 ${ipv4.address
-                  ? html`<div>IP Address: ${ipv4.address?.join(", ")}</div>`
+                  ? html`<div>
+                      ${this.hass.localize(
+                        "ui.dialogs.dialog-ip-detail.ip_address",
+                        { address: ipv4.address?.join(", ") }
+                      )}
+                    </div>`
+                  : ""}
+                ${ipv4.gateway
+                  ? html`<div>
+                      ${this.hass.localize(
+                        "ui.dialogs.dialog-ip-detail.gateway",
+                        { gateway: ipv4.gateway }
+                      )}
+                    </div>`
+                  : ""}
+                ${ipv4.method
+                  ? html`<div>
+                      ${this.hass.localize(
+                        "ui.dialogs.dialog-ip-detail.method",
+                        { method: ipv4.method }
+                      )}
+                    </div>`
                   : ""}
-                ${ipv4.gateway ? html`<div>Gateway: ${ipv4.gateway}</div>` : ""}
-                ${ipv4.method ? html`<div>Method: ${ipv4.method}</div>` : ""}
                 ${ipv4.nameservers?.length
                   ? html`
-                      <div>Name Servers: ${ipv4.nameservers?.join(", ")}</div>
+                      <div>
+                        ${this.hass.localize(
+                          "ui.dialogs.dialog-ip-detail.nameservers",
+                          { nameservers: ipv4.nameservers?.join(", ") }
+                        )}
+                      </div>
                     `
                   : ""}
               </div>
@@ -63,15 +92,41 @@ class DialogIPDetail extends LitElement {
         ${ipv6
           ? html`
               <div>
-                <h3>IPv6</h3>
+                <h3>
+                  ${this.hass.localize("ui.dialogs.dialog-ip-detail.ipv6")}
+                </h3>
                 ${ipv6.address
-                  ? html`<div>IP Address: ${ipv6.address?.join(", ")}</div>`
+                  ? html`<div>
+                      ${this.hass.localize(
+                        "ui.dialogs.dialog-ip-detail.ip_address",
+                        { address: ipv6.address?.join(", ") }
+                      )}
+                    </div>`
+                  : ""}
+                ${ipv6.gateway
+                  ? html`<div>
+                      ${this.hass.localize(
+                        "ui.dialogs.dialog-ip-detail.gateway",
+                        { gateway: ipv6.gateway }
+                      )}
+                    </div>`
+                  : ""}
+                ${ipv6.method
+                  ? html`<div>
+                      ${this.hass.localize(
+                        "ui.dialogs.dialog-ip-detail.method",
+                        { method: ipv6.method }
+                      )}
+                    </div>`
                   : ""}
-                ${ipv6.gateway ? html`<div>Gateway: ${ipv6.gateway}</div>` : ""}
-                ${ipv6.method ? html`<div>Method: ${ipv6.method}</div>` : ""}
                 ${ipv6.nameservers?.length
                   ? html`
-                      <div>Name Servers: ${ipv6.nameservers?.join(", ")}</div>
+                      <div>
+                        ${this.hass.localize(
+                          "ui.dialogs.dialog-ip-detail.nameservers",
+                          { nameservers: ipv6.nameservers?.join(", ") }
+                        )}
+                      </div>
                     `
                   : ""}
               </div>

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

@@ -40,7 +40,10 @@ class ConfigNetwork extends LitElement {
     }
 
     return html`
-      <ha-card outlined header="Network Adapter">
+      <ha-card
+        outlined
+        header=${this.hass.localize("ui.panel.config.network.network_adapter")}
+      >
         <div class="card-content">
           ${this._error
             ? html`
@@ -50,9 +53,9 @@ class ConfigNetwork extends LitElement {
               `
             : ""}
           <p>
-            Configure which network adapters integrations will use. Currently
-            this setting only affects multicast traffic. A restart is required
-            for these settings to apply.
+            ${this.hass.localize(
+              "ui.panel.config.network.network_adapter_info"
+            )}
           </p>
           <ha-network
             @network-config-changed=${this._configChanged}

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

@@ -254,7 +254,11 @@ export class HassioNetwork extends LitElement {
             .label=${"ui.common.menu"}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
-          <mwc-list-item>IP Information</mwc-list-item>
+          <mwc-list-item
+            >${this.hass.localize(
+              "ui.panel.config.network.ip_information"
+            )}</mwc-list-item
+          >
         </ha-button-menu>
       </div>`;
   }

src/translations/en.json

@@ -1385,6 +1385,15 @@
         "message_example": "Hello. How can I assist?",
         "message_placeholder": "Enter a sentence to speak.",
         "play": "Play"
+      },
+      "dialog-ip-detail": {
+        "ip_information": "[%key:ui::panel::config::network::ip_information%]",
+        "ipv4": "IPv4",
+        "ipv6": "IPv6",
+        "ip_address": "IP Address: {address}",
+        "gateway": "Gateway: {gateway}",
+        "method": "Method: {method}",
+        "nameservers": "Name Servers: {nameservers}"
       }
     },
     "duration": {
@@ -4193,7 +4202,10 @@
               "description": "The name your instance will have on your network",
               "failed_to_set_hostname": "Setting hostname failed"
             }
-          }
+          },
+          "network_adapter": "Network Adapter",
+          "network_adapter_info": "Configure which network adapters integrations will use. Currently this setting only affects multicast traffic. A restart is required for these settings to apply.",
+          "ip_information": "IP Information"
         },
         "storage": {
           "caption": "Storage",