Add QoS option for MQTT subscribe (#14565)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/data/mqtt.ts

@@ -37,11 +37,13 @@ export interface MQTTDeviceDebugInfo {
 export const subscribeMQTTTopic = (
   hass: HomeAssistant,
   topic: string,
-  callback: (message: MQTTMessage) => void
+  callback: (message: MQTTMessage) => void,
+  qos?: number
 ) =>
   hass.connection.subscribeMessage<MQTTMessage>(callback, {
     type: "mqtt/subscribe",
     topic,
+    qos,
   });
 
 export const fetchMQTTDebugInfo = (

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

@@ -1,17 +1,26 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { formatTime } from "../../../../../common/datetime/format_time";
 import "../../../../../components/ha-card";
+import "../../../../../components/ha-select";
+import "../../../../../components/ha-textfield";
+import { formatTime } from "../../../../../common/datetime/format_time";
 import { MQTTMessage, subscribeMQTTTopic } from "../../../../../data/mqtt";
 import { HomeAssistant } from "../../../../../types";
+import "@material/mwc-list/mwc-list-item";
+import { LocalStorage } from "../../../../../common/decorators/local-storage";
+
+const qosLevel = ["0", "1", "2"];
 
 @customElement("mqtt-subscribe-card")
 class MqttSubscribeCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _topic = "";
+  @LocalStorage("panel-dev-mqtt-topic-subscribe", true, false)
+  private _topic = "";
+
+  @LocalStorage("panel-dev-mqtt-qos-subscribe", true, false)
+  private _qos = "0";
 
   @state() private _subscribed?: () => void;
 
@@ -38,14 +47,23 @@ class MqttSubscribeCard extends LitElement {
         header=${this.hass.localize("ui.panel.config.mqtt.description_listen")}
       >
         <form>
-          <paper-input
+          <ha-textfield
             .label=${this._subscribed
               ? this.hass.localize("ui.panel.config.mqtt.listening_to")
               : this.hass.localize("ui.panel.config.mqtt.subscribe_to")}
             .disabled=${this._subscribed !== undefined}
             .value=${this._topic}
-            @value-changed=${this._valueChanged}
+            @change=${this._handleTopic}
-          ></paper-input>
+          ></ha-textfield>
+          <ha-select
+            .label=${this.hass.localize("ui.panel.config.mqtt.qos")}
+            .disabled=${this._subscribed !== undefined}
+            .value=${this._qos}
+            @selected=${this._handleQos}
+            >${qosLevel.map(
+              (qos) => html`<mwc-list-item .value=${qos}>${qos}</mwc-list-item>`
+            )}
+          </ha-select>
           <mwc-button
             .disabled=${this._topic === ""}
             @click=${this._handleSubmit}
@@ -82,8 +100,15 @@ class MqttSubscribeCard extends LitElement {
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _handleTopic(ev): void {
-    this._topic = ev.detail.value;
+    this._topic = ev.target.value;
+  }
+
+  private _handleQos(ev: CustomEvent): void {
+    const newValue = (ev.target! as any).value;
+    if (newValue >= 0 && newValue !== this._qos) {
+      this._qos = newValue;
+    }
   }
 
   private async _handleSubmit(): Promise<void> {
@@ -94,7 +119,8 @@ class MqttSubscribeCard extends LitElement {
       this._subscribed = await subscribeMQTTTopic(
         this.hass!,
         this._topic,
-        (message) => this._handleMessage(message)
+        (message) => this._handleMessage(message),
+        parseInt(this._qos)
       );
     }
   }
@@ -125,10 +151,6 @@ class MqttSubscribeCard extends LitElement {
         display: block;
         padding: 16px;
       }
-      paper-input {
-        display: inline-block;
-        width: 200px;
-      }
       .events {
         margin: -16px 0;
         padding: 0 16px;