Make JSON formatting optional when using MQTT subscribe from config entry page (#14830)

src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts

@@ -9,6 +9,8 @@ import { MQTTMessage, subscribeMQTTTopic } from "../../../../../data/mqtt";
 import { HomeAssistant } from "../../../../../types";
 import "@material/mwc-list/mwc-list-item";
 import { LocalStorage } from "../../../../../common/decorators/local-storage";
+import "../../../../../components/ha-formfield";
+import "../../../../../components/ha-switch";
 
 const qosLevel = ["0", "1", "2"];
 
@@ -22,6 +24,9 @@ class MqttSubscribeCard extends LitElement {
   @LocalStorage("panel-dev-mqtt-qos-subscribe", true, false)
   private _qos = "0";
 
+  @LocalStorage("panel-dev-mqtt-json-format", true, false)
+  private _json_format = false;
+
   @state() private _subscribed?: () => void;
 
   @state() private _messages: Array<{
@@ -47,6 +52,18 @@ class MqttSubscribeCard extends LitElement {
         header=${this.hass.localize("ui.panel.config.mqtt.description_listen")}
       >
         <form>
+          <p>
+            <ha-formfield
+              label=${this.hass!.localize(
+                "ui.panel.config.mqtt.json_formatting"
+              )}
+            >
+              <ha-switch
+                @change=${this._handleJSONFormat}
+                .checked=${this._json_format}
+              ></ha-switch>
+            </ha-formfield>
+          </p>
           <div class="panel-dev-mqtt-subscribe-fields">
             <ha-textfield
               .label=${this._subscribed
@@ -114,6 +131,10 @@ class MqttSubscribeCard extends LitElement {
     }
   }
 
+  private _handleJSONFormat(ev: CustomEvent) {
+    this._json_format = (ev.target! as any).checked;
+  }
+
   private async _handleSubmit(): Promise<void> {
     if (this._subscribed) {
       this._subscribed();
@@ -132,9 +153,13 @@ class MqttSubscribeCard extends LitElement {
     const tail =
       this._messages.length > 30 ? this._messages.slice(0, 29) : this._messages;
     let payload: string;
-    try {
-      payload = JSON.stringify(JSON.parse(message.payload), null, 4);
-    } catch (err: any) {
+    if (this._json_format) {
+      try {
+        payload = JSON.stringify(JSON.parse(message.payload), null, 4);
+      } catch (err: any) {
+        payload = message.payload;
+      }
+    } else {
       payload = message.payload;
     }
     this._messages = [

src/translations/en.json

@@ -3217,6 +3217,7 @@
           "payload": "Payload (template allowed)",
           "publish": "Publish",
           "description_listen": "Listen to a topic",
+          "json_formatting": "Format JSON content",
           "listening_to": "Listening to",
           "subscribe_to": "Topic to subscribe to",
           "start_listening": "Start listening",