YAML support for automation triggers (#4289)

* WIP: Add yaml editors to automation

* Fix form overwriting yaml on switching back

* Finish triggers

* prettier

src/common/preact/event.ts

@@ -7,8 +7,11 @@
 
 // export function onChangeEvent(this: OnChangeComponent, prop, ev) {
 export function onChangeEvent(this: any, prop, ev) {
-  const origData = this.props[prop];
+  if (!this.initialized) {
+    return;
+  }
 
+  const origData = this.props[prop];
   if (ev.target.value === origData[ev.target.name]) {
     return;
   }

src/panels/config/js/automation-component.tsx

@@ -0,0 +1,23 @@
+import { h, Component, ComponentChild } from "preact";
+
+export class AutomationComponent extends Component<any, any> {
+  // @ts-ignore
+  protected initialized: boolean;
+
+  constructor(props?, context?) {
+    super(props, context);
+    this.initialized = false;
+  }
+
+  public componentDidMount() {
+    this.initialized = true;
+  }
+
+  public componentWillUnmount() {
+    this.initialized = false;
+  }
+
+  public render(_props?, _state?, _context?: any): ComponentChild {
+    return <div />;
+  }
+}

src/panels/config/js/trigger/device.tsx

@@ -1,4 +1,4 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "../../../../components/device/ha-device-picker";
 import "../../../../components/device/ha-device-trigger-picker";
@@ -9,7 +9,9 @@ import {
   deviceAutomationsEqual,
 } from "../../../../data/device_automation";
 
-export default class DeviceTrigger extends Component<any, any> {
+import { AutomationComponent } from "../automation-component";
+
+export default class DeviceTrigger extends AutomationComponent {
   private _origTrigger;
 
   constructor() {
@@ -21,10 +23,16 @@ export default class DeviceTrigger extends Component<any, any> {
   }
 
   public devicePicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.setState({ ...this.state, device_id: ev.target.value });
   }
 
   public deviceTriggerPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     let trigger = ev.target.value;
     if (
       this._origTrigger &&
@@ -75,6 +83,7 @@ export default class DeviceTrigger extends Component<any, any> {
   }
 
   public componentDidMount() {
+    this.initialized = true;
     if (!this.state.capabilities) {
       this._getCapabilities();
     }
@@ -99,6 +108,9 @@ export default class DeviceTrigger extends Component<any, any> {
   }
 
   private _extraFieldsChanged(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.trigger,
       ...ev.detail.value,

src/panels/config/js/trigger/event.tsx

@@ -1,10 +1,12 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-input/paper-input";
 
 import YAMLTextArea from "../yaml_textarea";
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class EventTrigger extends Component<any> {
+export default class EventTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

src/panels/config/js/trigger/geo_location.tsx

@@ -1,11 +1,13 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 import "../../../../components/entity/ha-entity-picker";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class GeolocationTrigger extends Component<any> {
+export default class GeolocationTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

src/panels/config/js/trigger/homeassistant.tsx

@@ -1,8 +1,11 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 
-export default class HassTrigger extends Component<any> {
+import { AutomationComponent } from "../automation-component";
+
+export default class HassTrigger extends AutomationComponent {
   constructor() {
     super();
 
@@ -10,6 +13,9 @@ export default class HassTrigger extends Component<any> {
   }
 
   public radioGroupPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.trigger,
       event: ev.target.selected,

src/panels/config/js/trigger/mqtt.tsx

@@ -1,12 +1,14 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class MQTTTrigger extends Component<any> {
+export default class MQTTTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.onChange = onChangeEvent.bind(this, "trigger");
   }

src/panels/config/js/trigger/numeric_state.tsx

@@ -1,15 +1,17 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-input/paper-input";
 import "../../../../components/ha-textarea";
 
 import "../../../../components/entity/ha-entity-picker";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class NumericStateTrigger extends Component<any> {
+export default class NumericStateTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.onChange = onChangeEvent.bind(this, "trigger");
     this.entityPicked = this.entityPicked.bind(this);

src/panels/config/js/trigger/state.tsx

@@ -1,20 +1,23 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "@polymer/paper-input/paper-input";
 import "../../../../components/entity/ha-entity-picker";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class StateTrigger extends Component<any> {
+export default class StateTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
-  constructor() {
-    super();
-
+  constructor(props) {
+    super(props);
     this.onChange = onChangeEvent.bind(this, "trigger");
     this.entityPicked = this.entityPicked.bind(this);
   }
 
   public entityPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.trigger,
       entity_id: ev.target.value,
@@ -23,8 +26,7 @@ export default class StateTrigger extends Component<any> {
 
   /* eslint-disable camelcase */
   public render({ trigger, hass, localize }) {
-    const { entity_id, to } = trigger;
-    const trgFrom = trigger.from;
+    const { entity_id, to, from } = trigger;
     let trgFor = trigger.for;
 
     if (trgFor && (trgFor.hours || trgFor.minutes || trgFor.seconds)) {
@@ -50,7 +52,7 @@ export default class StateTrigger extends Component<any> {
             "ui.panel.config.automation.editor.triggers.type.state.from"
           )}
           name="from"
-          value={trgFrom}
+          value={from}
           onvalue-changed={this.onChange}
         />
         <paper-input

src/panels/config/js/trigger/sun.tsx

@@ -1,12 +1,13 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class SunTrigger extends Component<any> {
+export default class SunTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();
@@ -16,6 +17,9 @@ export default class SunTrigger extends Component<any> {
   }
 
   public radioGroupPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.trigger,
       event: ev.target.selected,

src/panels/config/js/trigger/template.tsx

@@ -1,10 +1,11 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "../../../../components/ha-textarea";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class TemplateTrigger extends Component<any> {
+export default class TemplateTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

src/panels/config/js/trigger/time.tsx

@@ -1,10 +1,11 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class TimeTrigger extends Component<any> {
+export default class TimeTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

src/panels/config/js/trigger/time_pattern.tsx

@@ -1,10 +1,11 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class TimePatternTrigger extends Component<any> {
+export default class TimePatternTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

src/panels/config/js/trigger/trigger_edit.tsx

@@ -4,6 +4,10 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 
+import "../../../../components/ha-code-editor";
+
+import YAMLTextArea from "../yaml_textarea";
+
 import DeviceTrigger from "./device";
 import EventTrigger from "./event";
 import GeolocationTrigger from "./geo_location";
@@ -41,25 +45,31 @@ export default class TriggerEdit extends Component<any> {
     super();
 
     this.typeChanged = this.typeChanged.bind(this);
+    this.onYamlChange = this.onYamlChange.bind(this);
   }
 
-  public render({ index, trigger, onChange, hass, localize }) {
+  public render({ index, trigger, onChange, hass, localize, yamlMode }) {
     // tslint:disable-next-line: variable-name
     const Comp = TYPES[trigger.platform];
     const selected = OPTIONS.indexOf(trigger.platform);
 
-    if (!Comp) {
+    if (yamlMode || !Comp) {
       return (
-        <div>
-          {localize(
-            "ui.panel.config.automation.editor.triggers.unsupported_platform",
-            "platform",
-            trigger.platform
+        <div style="margin-right: 24px;">
+          {!Comp && (
+            <div>
+              {localize(
+                "ui.panel.config.automation.editor.triggers.unsupported_platform",
+                "platform",
+                trigger.platform
+              )}
+            </div>
           )}
-          <pre>{JSON.stringify(trigger, null, 2)}</pre>
+          <YAMLTextArea value={trigger} onChange={this.onYamlChange} />
         </div>
       );
     }
+
     return (
       <div>
         <paper-dropdown-menu-light
@@ -103,4 +113,8 @@ export default class TriggerEdit extends Component<any> {
       });
     }
   }
+
+  private onYamlChange(trigger) {
+    this.props.onChange(this.props.index, trigger);
+  }
 }

src/panels/config/js/trigger/trigger_row.tsx

@@ -8,28 +8,44 @@ import "../../../../components/ha-card";
 import TriggerEdit from "./trigger_edit";
 
 export default class TriggerRow extends Component<any> {
+  public state: { yamlMode: boolean };
   constructor() {
     super();
 
+    this.state = {
+      yamlMode: false,
+    };
+
     this.onDelete = this.onDelete.bind(this);
+    this.switchYamlMode = this.switchYamlMode.bind(this);
   }
 
-  public render(props) {
+  public render(props, { yamlMode }) {
     return (
       <ha-card>
         <div class="card-content">
-          <div class="card-menu">
+          <div class="card-menu" style="z-index: 3">
             <paper-menu-button
               no-animations
               horizontal-align="right"
               horizontal-offset="-5"
               vertical-offset="-5"
+              close-on-activate
             >
               <paper-icon-button
                 icon="hass:dots-vertical"
                 slot="dropdown-trigger"
               />
               <paper-listbox slot="dropdown-content">
+                <paper-item onTap={this.switchYamlMode}>
+                  {yamlMode
+                    ? props.localize(
+                        "ui.panel.config.automation.editor.edit_ui"
+                      )
+                    : props.localize(
+                        "ui.panel.config.automation.editor.edit_yaml"
+                      )}
+                </paper-item>
                 <paper-item disabled>
                   {props.localize(
                     "ui.panel.config.automation.editor.triggers.duplicate"
@@ -43,7 +59,7 @@ export default class TriggerRow extends Component<any> {
               </paper-listbox>
             </paper-menu-button>
           </div>
-          <TriggerEdit {...props} />
+          <TriggerEdit {...props} yamlMode={yamlMode} />
         </div>
       </ha-card>
     );
@@ -61,4 +77,10 @@ export default class TriggerRow extends Component<any> {
       this.props.onChange(this.props.index, null);
     }
   }
+
+  private switchYamlMode() {
+    this.setState({
+      yamlMode: !this.state.yamlMode,
+    });
+  }
 }

src/panels/config/js/trigger/webhook.tsx

@@ -1,8 +1,11 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-input/paper-input";
 
 import { onChangeEvent } from "../../../../common/preact/event";
-export default class WebhookTrigger extends Component<any> {
+import { AutomationComponent } from "../automation-component";
+
+export default class WebhookTrigger extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

src/panels/config/js/trigger/zone.tsx

@@ -1,16 +1,18 @@
-import { h, Component } from "preact";
+import { h } from "preact";
+
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 import "../../../../components/entity/ha-entity-picker";
 
 import { hasLocation } from "../../../../common/entity/has_location";
 import { computeStateDomain } from "../../../../common/entity/compute_state_domain";
+import { AutomationComponent } from "../automation-component";
 
 function zoneAndLocationFilter(stateObj) {
   return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone";
 }
 
-export default class ZoneTrigger extends Component<any> {
+export default class ZoneTrigger extends AutomationComponent {
   constructor() {
     super();
 
@@ -70,6 +72,9 @@ export default class ZoneTrigger extends Component<any> {
   }
 
   private entityPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.trigger,
       entity_id: ev.target.value,
@@ -77,6 +82,9 @@ export default class ZoneTrigger extends Component<any> {
   }
 
   private zonePicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.trigger,
       zone: ev.target.value,
@@ -84,6 +92,9 @@ export default class ZoneTrigger extends Component<any> {
   }
 
   private radioGroupPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.trigger,
       event: ev.target.selected,

src/panels/config/js/yaml_textarea.tsx

@@ -66,7 +66,7 @@ export default class YAMLTextArea extends Component<any, any> {
     };
     return (
       <div>
-        <p>{label}</p>
+        {label && <p>{label}</p>}
         <ha-code-editor
           mode="yaml"
           style={style}

src/translations/en.json

@@ -786,6 +786,8 @@
               "label": "Description",
               "placeholder": "Optional description"
             },
+            "edit_yaml": "Edit as YAML",
+            "edit_ui": "Edit with UI",
             "triggers": {
               "name": "Trigger",
               "header": "Triggers",