Add yaml editor to automation conditions (#4305)

src/panels/config/js/condition/condition_edit.tsx

@@ -3,6 +3,8 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-item/paper-item";
 
+import YAMLTextArea from "../yaml_textarea";
+
 import DeviceCondition from "./device";
 import LogicalCondition from "./logical";
 import NumericStateCondition from "./numeric_state";
@@ -31,6 +33,7 @@ export default class ConditionEdit extends Component<any> {
     super();
 
     this.typeChanged = this.typeChanged.bind(this);
+    this.onYamlChange = this.onYamlChange.bind(this);
   }
 
   public typeChanged(ev) {
@@ -44,20 +47,24 @@ export default class ConditionEdit extends Component<any> {
     }
   }
 
-  public render({ index, condition, onChange, hass, localize }) {
+  public render({ index, condition, onChange, hass, localize, yamlMode }) {
     // tslint:disable-next-line: variable-name
     const Comp = TYPES[condition.condition];
     const selected = OPTIONS.indexOf(condition.condition);
 
-    if (!Comp) {
+    if (yamlMode || !Comp) {
       return (
-        <div>
-          {localize(
-            "ui.panel.config.automation.editor.conditions.unsupported_condition",
-            "condition",
-            condition.condition
+        <div style="margin-right: 24px;">
+          {!Comp && (
+            <div>
+              {localize(
+                "ui.panel.config.automation.editor.conditions.unsupported_condition",
+                "condition",
+                condition.condition
+              )}
+            </div>
           )}
-          <pre>{JSON.stringify(condition, null, 2)}</pre>
+          <YAMLTextArea value={condition} onChange={this.onYamlChange} />
         </div>
       );
     }
@@ -94,4 +101,8 @@ export default class ConditionEdit extends Component<any> {
       </div>
     );
   }
+
+  private onYamlChange(condition) {
+    this.props.onChange(this.props.index, condition);
+  }
 }

src/panels/config/js/condition/condition_row.tsx

@@ -8,10 +8,16 @@ import "../../../../components/ha-card";
 import ConditionEdit from "./condition_edit";
 
 export default class ConditionRow 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 onDelete() {
@@ -27,22 +33,32 @@ export default class ConditionRow extends Component<any> {
     }
   }
 
-  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.conditions.duplicate"
@@ -56,9 +72,15 @@ export default class ConditionRow extends Component<any> {
               </paper-listbox>
             </paper-menu-button>
           </div>
-          <ConditionEdit {...props} />
+          <ConditionEdit {...props} yamlMode={yamlMode} />
         </div>
       </ha-card>
     );
   }
+
+  private switchYamlMode() {
+    this.setState({
+      yamlMode: !this.state.yamlMode,
+    });
+  }
 }

src/panels/config/js/condition/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-condition-picker";
@@ -8,7 +8,10 @@ import {
   fetchDeviceConditionCapabilities,
   deviceAutomationsEqual,
 } from "../../../../data/device_automation";
-export default class DeviceCondition extends Component<any, any> {
+
+import { AutomationComponent } from "../automation-component";
+
+export default class DeviceCondition extends AutomationComponent {
   private _origCondition;
 
   constructor() {
@@ -20,10 +23,16 @@ export default class DeviceCondition extends Component<any, any> {
   }
 
   public devicePicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.setState({ ...this.state, device_id: ev.target.value });
   }
 
   public deviceConditionPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     let condition = ev.target.value;
     if (
       this._origCondition &&
@@ -74,6 +83,7 @@ export default class DeviceCondition extends Component<any, any> {
   }
 
   public componentDidMount() {
+    this.initialized = true;
     if (!this.state.capabilities) {
       this._getCapabilities();
     }
@@ -98,6 +108,9 @@ export default class DeviceCondition extends Component<any, any> {
   }
 
   private _extraFieldsChanged(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.condition,
       ...ev.detail.value,

src/panels/config/js/condition/logical.tsx

@@ -1,29 +1,22 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import Condition from "./index";
+import { AutomationComponent } from "../automation-component";
 
-export default class LogicalCondition extends Component<any, any> {
-  private _mounted = false;
+export default class LogicalCondition extends AutomationComponent {
   constructor() {
     super();
     this.conditionChanged = this.conditionChanged.bind(this);
   }
 
   public conditionChanged(conditions) {
-    if (this._mounted) {
-      this.props.onChange(this.props.index, {
-        ...this.props.condition,
-        conditions,
-      });
+    if (!this.initialized) {
+      return;
     }
-  }
-
-  public componentWillMount() {
-    this._mounted = true;
-  }
-
-  public componentWillUnmount() {
-    this._mounted = false;
+    this.props.onChange(this.props.index, {
+      ...this.props.condition,
+      conditions,
+    });
   }
 
   /* eslint-disable camelcase */

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

@@ -1,11 +1,12 @@
-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 NumericStateCondition extends Component<any> {
+export default class NumericStateCondition extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();
@@ -15,6 +16,9 @@ export default class NumericStateCondition extends Component<any> {
   }
 
   public entityPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.condition,
       entity_id: ev.target.value,

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

@@ -1,10 +1,11 @@
-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 StateCondition extends Component<any> {
+export default class StateCondition extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();
@@ -14,6 +15,9 @@ export default class StateCondition extends Component<any> {
   }
 
   public entityPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.condition,
       entity_id: ev.target.value,

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

@@ -1,11 +1,12 @@
-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 SunCondition extends Component<any> {
+export default class SunCondition extends AutomationComponent {
   private onChange: (obj: any) => void;
   private afterPicked: (obj: any) => void;
   private beforePicked: (obj: any) => void;
@@ -19,6 +20,9 @@ export default class SunCondition extends Component<any> {
   }
 
   public radioGroupPicked(key, ev) {
+    if (!this.initialized) {
+      return;
+    }
     const condition = { ...this.props.condition };
 
     if (ev.target.selected) {

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

@@ -1,9 +1,10 @@
-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 TemplateCondition extends Component<any> {
+export default class TemplateCondition extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

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

@@ -1,9 +1,10 @@
-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 TimeCondition extends Component<any> {
+export default class TimeCondition extends AutomationComponent {
   private onChange: (obj: any) => void;
   constructor() {
     super();

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

@@ -1,13 +1,15 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 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 ZoneCondition extends Component<any> {
+export default class ZoneCondition extends AutomationComponent {
   constructor() {
     super();
 
@@ -16,6 +18,9 @@ export default class ZoneCondition extends Component<any> {
   }
 
   public entityPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.condition,
       entity_id: ev.target.value,
@@ -23,6 +28,9 @@ export default class ZoneCondition extends Component<any> {
   }
 
   public zonePicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.condition,
       zone: ev.target.value,