Translated developer tools mqtt page

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

@@ -19,7 +19,7 @@ import "./mqtt-subscribe-card";
 
 @customElement("developer-tools-mqtt")
 class HaPanelDevMqtt extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property() public hass!: HomeAssistant;
 
   @property() private topic = "";
 
@@ -40,23 +40,37 @@ class HaPanelDevMqtt extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="content">
-        <ha-card header="Publish a packet">
+        <ha-card
+          header="${this.hass.localize(
+            "ui.panel.developer-tools.tabs.mqtt.description_publish"
+          )}"
+        >
           <div class="card-content">
             <paper-input
-              label="topic"
+              label="${this.hass.localize(
+                "ui.panel.developer-tools.tabs.mqtt.topic"
+              )}"
               .value=${this.topic}
               @value-changed=${this._handleTopic}
             ></paper-input>
 
-            <p>Payload (template allowed)</p>
+            <p>
+              ${this.hass.localize(
+                "ui.panel.developer-tools.tabs.mqtt.payload"
+              )}
+            </p>
             <ha-code-editor
               mode="jinja2"
               .value="${this.payload}"
               @value-changed=${this._handlePayload}
             ></ha-code-editor>
           </div>
           <div class="card-actions">
-            <mwc-button @click=${this._publish}>Publish</mwc-button>
+            <mwc-button @click=${this._publish}
+              >${this.hass.localize(
+                "ui.panel.developer-tools.tabs.mqtt.publish"
+              )}</mwc-button
+            >
           </div>
         </ha-card>
 

src/panels/developer-tools/mqtt/mqtt-subscribe-card.ts

@@ -17,7 +17,7 @@ import { subscribeMQTTTopic, MQTTMessage } from "../../../data/mqtt";
 
 @customElement("mqtt-subscribe-card")
 class MqttSubscribeCard extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property() public hass!: HomeAssistant;
 
   @property() private _topic = "";
 
@@ -42,12 +42,20 @@ class MqttSubscribeCard extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-card header="Listen to a topic">
+      <ha-card
+        header="${this.hass.localize(
+          "ui.panel.developer-tools.tabs.mqtt.description_listen"
+        )}"
+      >
         <form>
           <paper-input
             .label=${this._subscribed
-              ? "Listening to"
-              : "Topic to subscribe to"}
+              ? this.hass.localize(
+                  "ui.panel.developer-tools.tabs.mqtt.listening_to"
+                )
+              : this.hass.localize(
+                  "ui.panel.developer-tools.tabs.mqtt.subscribe_to"
+                )}
             .disabled=${this._subscribed !== undefined}
             .value=${this._topic}
             @value-changed=${this._valueChanged}
@@ -57,15 +65,28 @@ class MqttSubscribeCard extends LitElement {
             @click=${this._handleSubmit}
             type="submit"
           >
-            ${this._subscribed ? "Stop listening" : "Start listening"}
+            ${this._subscribed
+              ? this.hass.localize(
+                  "ui.panel.developer-tools.tabs.mqtt.stop_listening"
+                )
+              : this.hass.localize(
+                  "ui.panel.developer-tools.tabs.mqtt.start_listening"
+                )}
           </mwc-button>
         </form>
         <div class="events">
           ${this._messages.map(
             (msg) => html`
               <div class="event">
-                Message ${msg.id} received on <b>${msg.message.topic}</b> at
-                ${format_time(msg.time, this.hass!.language)}:
+                ${this.hass.localize(
+                  "ui.panel.developer-tools.tabs.mqtt.message_received",
+                  "id",
+                  msg.id,
+                  "topic",
+                  msg.message.topic,
+                  "time",
+                  format_time(msg.time, this.hass!.language)
+                )}
                 <pre>${msg.payload}</pre>
                 <div class="bottom">
                   QoS: ${msg.message.qos} - Retain:

src/translations/en.json

@@ -1818,7 +1818,17 @@
             "notification_event_fired": "Event {type} successful fired!"
           },
           "mqtt": {
-            "title": "MQTT"
+            "title": "MQTT",
+            "description_publish": "Publish a packet",
+            "topic": "topic",
+            "payload": "Payload (template allowed)",
+            "publish": "Publish",
+            "description_listen": "Listen to a topic",
+            "listening_to": "Listening to",
+            "subscribe_to": "Topic to subscribe to",
+            "start_listening": "Start listening",
+            "stop_listening": "Stop listening",
+            "message_received": "Message {id} received on {topic} at {time}:"
           },
           "services": {
             "title": "Services"