HA Trigger to HA Form (#11645)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts

@@ -1,11 +1,12 @@
+import "../../../../../components/ha-form/ha-form";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import type { HaRadio } from "../../../../../components/ha-radio";
 import type { HassTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
-import "../../../../../components/ha-formfield";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
-import "../../../../../components/ha-radio";
+import type { LocalizeFunc } from "../../../../../common/translations/localize";
 
 @customElement("ha-automation-trigger-homeassistant")
 export class HaHassTrigger extends LitElement {
@@ -13,6 +14,28 @@ export class HaHassTrigger extends LitElement {
 
   @property({ attribute: false }) public trigger!: HassTrigger;
 
+  private _schema = memoizeOne((localize: LocalizeFunc) => [
+    {
+      name: "event",
+      type: "select",
+      required: true,
+      options: [
+        [
+          "start",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
+          ),
+        ],
+        [
+          "shutdown",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
+          ),
+        ],
+      ],
+    },
+  ]);
+
   public static get defaultConfig() {
     return {
       event: "start" as HassTrigger["event"],
@@ -20,50 +43,28 @@ export class HaHassTrigger extends LitElement {
   }
 
   protected render() {
-    const { event } = this.trigger;
     return html`
-      <label id="eventlabel">
+      <ha-form
-        ${this.hass.localize(
+        .schema=${this._schema(this.hass.localize)}
-          "ui.panel.config.automation.editor.triggers.type.homeassistant.event"
+        .data=${this.trigger}
-        )}
+        .hass=${this.hass}
-        <ha-formfield
+        .computeLabel=${this._computeLabelCallback}
-          .label=${this.hass.localize(
+        @value-changed=${this._valueChanged}
-            "ui.panel.config.automation.editor.triggers.type.homeassistant.start"
+      ></ha-form>
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="start"
-            .checked=${event === "start"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.homeassistant.shutdown"
-          )}
-        >
-          <ha-radio
-            name="event"
-            value="shutdown"
-            .checked=${event === "shutdown"}
-            @change=${this._radioGroupPicked}
-          ></ha-radio>
-        </ha-formfield>
-      </label>
     `;
   }
 
-  private _radioGroupPicked(ev) {
+  private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    fireEvent(this, "value-changed", {
+    const newTrigger = ev.detail.value;
-      value: {
+    fireEvent(this, "value-changed", { value: newTrigger });
-        ...this.trigger,
-        event: (ev.target as HaRadio).value,
-      },
-    });
   }
 
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.triggers.type.geo_location.${schema.name}`
+    );
+
   static styles = css`
     label {
       display: flex;