From ac90bb70883975b3001ea290b0d2c108bee1e925 Mon Sep 17 00:00:00 2001
From: Zack Barett <zackbarett@hey.com>
Date: Thu, 10 Feb 2022 16:11:45 -0600
Subject: [PATCH] MQTT Trigger to Ha-Form (#11643)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
---
 .../types/ha-automation-trigger-mqtt.ts       | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts
index e3e997771f..95941c85b2 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts
@@ -1,12 +1,15 @@
-import "@polymer/paper-input/paper-input";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import { MqttTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
-import {
-  handleChangeEvent,
-  TriggerElement,
-} from "../ha-automation-trigger-row";
+import type { TriggerElement } from "../ha-automation-trigger-row";
+
+const SCHEMA: HaFormSchema[] = [
+  { name: "topic", required: true, selector: { text: {} } },
+  { name: "payload", selector: { text: {} } },
+];
 
 @customElement("ha-automation-trigger-mqtt")
 export class HaMQTTTrigger extends LitElement implements TriggerElement {
@@ -19,30 +22,27 @@ export class HaMQTTTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
-    const { topic, payload } = this.trigger;
     return html`
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.mqtt.topic"
-        )}
-        name="topic"
-        .value=${topic}
+      <ha-form
+        .schema=${SCHEMA}
+        .data=${this.trigger}
+        .hass=${this.hass}
+        .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
-      ></paper-input>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.mqtt.payload"
-        )}
-        name="payload"
-        .value=${payload}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
+      ></ha-form>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
+    ev.stopPropagation();
+    const newTrigger = ev.detail.value;
+    fireEvent(this, "value-changed", { value: newTrigger });
   }
+
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.triggers.type.mqtt.${schema.name}`
+    );
 }
 
 declare global {