Add yaml editor to automation actions and scripts (#4306)

* Add yaml editor to automation actions and scripts

* Add types

* Update event.tsx

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

@@ -1,6 +1,6 @@
 import { h, Component, ComponentChild } from "preact";
 
-export class AutomationComponent extends Component<any, any> {
+export class AutomationComponent<P = {}, S = {}> extends Component<P, S> {
   // @ts-ignore
   protected initialized: boolean;
 

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

@@ -11,7 +11,7 @@ import {
 
 import { AutomationComponent } from "../automation-component";
 
-export default class DeviceCondition extends AutomationComponent {
+export default class DeviceCondition extends AutomationComponent<any, any> {
   private _origCondition;
 
   constructor() {

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

@@ -3,7 +3,7 @@ import { h } from "preact";
 import Condition from "./index";
 import { AutomationComponent } from "../automation-component";
 
-export default class LogicalCondition extends AutomationComponent {
+export default class LogicalCondition extends AutomationComponent<any> {
   constructor() {
     super();
     this.conditionChanged = this.conditionChanged.bind(this);

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

@@ -6,7 +6,7 @@ import "../../../../components/entity/ha-entity-picker";
 import { onChangeEvent } from "../../../../common/preact/event";
 import { AutomationComponent } from "../automation-component";
 
-export default class NumericStateCondition extends AutomationComponent {
+export default class NumericStateCondition extends AutomationComponent<any> {
   private onChange: (obj: any) => void;
   constructor() {
     super();

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

@@ -5,7 +5,7 @@ import "../../../../components/entity/ha-entity-picker";
 import { onChangeEvent } from "../../../../common/preact/event";
 import { AutomationComponent } from "../automation-component";
 
-export default class StateCondition extends AutomationComponent {
+export default class StateCondition extends AutomationComponent<any> {
   private onChange: (obj: any) => void;
   constructor() {
     super();

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

@@ -6,7 +6,7 @@ import "@polymer/paper-radio-group/paper-radio-group";
 import { onChangeEvent } from "../../../../common/preact/event";
 import { AutomationComponent } from "../automation-component";
 
-export default class SunCondition extends AutomationComponent {
+export default class SunCondition extends AutomationComponent<any> {
   private onChange: (obj: any) => void;
   private afterPicked: (obj: any) => void;
   private beforePicked: (obj: any) => void;

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

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

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

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

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

@@ -9,7 +9,7 @@ function zoneAndLocationFilter(stateObj) {
   return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone";
 }
 
-export default class ZoneCondition extends AutomationComponent {
+export default class ZoneCondition extends AutomationComponent<any> {
   constructor() {
     super();
 

src/panels/config/js/script/action_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 CallServiceAction from "./call_service";
 import ConditionAction from "./condition";
 import DelayAction from "./delay";
@@ -39,6 +41,7 @@ export default class Action extends Component<any> {
     super();
 
     this.typeChanged = this.typeChanged.bind(this);
+    this.onYamlChange = this.onYamlChange.bind(this);
   }
 
   public typeChanged(ev) {
@@ -50,25 +53,30 @@ export default class Action extends Component<any> {
     }
   }
 
-  public render({ index, action, onChange, hass, localize }) {
+  public render({ index, action, onChange, hass, localize, yamlMode }) {
     const type = getType(action);
     // tslint:disable-next-line: variable-name
     const Comp = type && TYPES[type];
     // @ts-ignore
     const selected = OPTIONS.indexOf(type);
 
-    if (!Comp) {
+    if (yamlMode || !Comp) {
       return (
-        <div>
+        <div style="margin-right: 24px;">
-          {localize(
+          {!Comp && (
-            "ui.panel.config.automation.editor.actions.unsupported_action",
+            <div>
-            "action",
+              {localize(
-            type
+                "ui.panel.config.automation.editor.actions.unsupported_action",
+                "action",
+                type
+              )}
+            </div>
           )}
-          <pre>{JSON.stringify(action, null, 2)}</pre>
+          <YAMLTextArea value={action} onChange={this.onYamlChange} />
         </div>
       );
     }
+
     return (
       <div>
         <paper-dropdown-menu-light
@@ -101,4 +109,8 @@ export default class Action extends Component<any> {
       </div>
     );
   }
+
+  private onYamlChange(condition) {
+    this.props.onChange(this.props.index, condition);
+  }
 }

src/panels/config/js/script/action_row.tsx

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

src/panels/config/js/script/call_service.tsx

@@ -1,9 +1,10 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 import "../../../../components/ha-service-picker";
 
 import YAMLTextArea from "../yaml_textarea";
+import { AutomationComponent } from "../automation-component";
 
-export default class CallServiceAction extends Component<any> {
+export default class CallServiceAction extends AutomationComponent<any> {
   constructor() {
     super();
 
@@ -12,6 +13,9 @@ export default class CallServiceAction extends Component<any> {
   }
 
   public serviceChanged(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.action,
       service: ev.target.value,
@@ -19,6 +23,9 @@ export default class CallServiceAction extends Component<any> {
   }
 
   public serviceDataChanged(data) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, { ...this.props.action, data });
   }
 

src/panels/config/js/script/delay.tsx

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

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

@@ -1,8 +1,9 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 
 import "../../../../components/device/ha-device-picker";
 import "../../../../components/device/ha-device-action-picker";
 import "../../../../components/ha-form/ha-form";
+import { AutomationComponent } from "../automation-component";
 
 import {
   fetchDeviceActionCapabilities,
@@ -11,7 +12,7 @@ import {
 import { DeviceAction } from "../../../../data/script";
 import { HomeAssistant } from "../../../../types";
 
-export default class DeviceActionEditor extends Component<
+export default class DeviceActionEditor extends AutomationComponent<
   {
     index: number;
     action: DeviceAction;
@@ -78,6 +79,7 @@ export default class DeviceActionEditor extends Component<
   }
 
   public componentDidMount() {
+    this.initialized = true;
     if (!this.state.capabilities) {
       this._getCapabilities();
     }
@@ -93,10 +95,16 @@ export default class DeviceActionEditor extends Component<
   }
 
   private devicePicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.setState({ ...this.state, device_id: ev.target.value });
   }
 
   private deviceActionPicked(ev) {
+    if (!this.initialized) {
+      return;
+    }
     let deviceAction = ev.target.value;
     if (
       this._origAction &&
@@ -117,6 +125,9 @@ export default class DeviceActionEditor extends Component<
   }
 
   private _extraFieldsChanged(ev) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.action,
       ...ev.detail.value,

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

@@ -1,4 +1,4 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 import "@polymer/paper-input/paper-input";
 
 import YAMLTextArea from "../yaml_textarea";
@@ -6,6 +6,8 @@ import { onChangeEvent } from "../../../../common/preact/event";
 import { LocalizeFunc } from "../../../../common/translations/localize";
 import { EventAction } from "../../../../data/script";
 
+import { AutomationComponent } from "../automation-component";
+
 interface Props {
   index: number;
   action: EventAction;
@@ -13,7 +15,7 @@ interface Props {
   onChange: (index: number, action: EventAction) => void;
 }
 
-export default class EventActionForm extends Component<Props> {
+export default class EventActionForm extends AutomationComponent<Props> {
   private onChange: (event: Event) => void;
 
   static get defaultConfig(): EventAction {
@@ -57,6 +59,9 @@ export default class EventActionForm extends Component<Props> {
   }
 
   private serviceDataChanged(eventData) {
+    if (!this.initialized) {
+      return;
+    }
     this.props.onChange(this.props.index, {
       ...this.props.action,
       event_data: eventData,

src/panels/config/js/script/scene.tsx

@@ -1,7 +1,8 @@
-import { h, Component } from "preact";
+import { h } from "preact";
 import "../../../../components/entity/ha-entity-picker";
+import { AutomationComponent } from "../automation-component";
 
-export default class SceneAction extends Component<any> {
+export default class SceneAction extends AutomationComponent<any> {
   constructor() {
     super();
 

src/panels/config/js/script/wait.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 { onChangeEvent } from "../../../../common/preact/event";
+import { AutomationComponent } from "../automation-component";
 
-export default class WaitAction extends Component<any> {
+export default class WaitAction extends AutomationComponent<any> {
   private onChange: (obj: any) => void;
   constructor() {
     super();

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

@@ -11,7 +11,7 @@ import {
 
 import { AutomationComponent } from "../automation-component";
 
-export default class DeviceTrigger extends AutomationComponent {
+export default class DeviceTrigger extends AutomationComponent<any, any> {
   private _origTrigger;
 
   constructor() {

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

@@ -6,7 +6,7 @@ import YAMLTextArea from "../yaml_textarea";
 import { onChangeEvent } from "../../../../common/preact/event";
 import { AutomationComponent } from "../automation-component";
 
-export default class EventTrigger extends AutomationComponent {
+export default class EventTrigger extends AutomationComponent<any> {
   private onChange: (obj: any) => void;
   constructor() {
     super();

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

@@ -7,7 +7,7 @@ import "../../../../components/entity/ha-entity-picker";
 import { onChangeEvent } from "../../../../common/preact/event";
 import { AutomationComponent } from "../automation-component";
 
-export default class GeolocationTrigger extends AutomationComponent {
+export default class GeolocationTrigger extends AutomationComponent<any> {
   private onChange: (obj: any) => void;
   constructor() {
     super();

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

@@ -5,7 +5,7 @@ import "@polymer/paper-radio-group/paper-radio-group";
 
 import { AutomationComponent } from "../automation-component";
 
-export default class HassTrigger extends AutomationComponent {
+export default class HassTrigger extends AutomationComponent<any> {
   constructor() {
     super();
 

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

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

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

@@ -8,7 +8,7 @@ import "../../../../components/entity/ha-entity-picker";
 import { onChangeEvent } from "../../../../common/preact/event";
 import { AutomationComponent } from "../automation-component";
 
-export default class NumericStateTrigger extends AutomationComponent {
+export default class NumericStateTrigger extends AutomationComponent<any> {
   private onChange: (obj: any) => void;
   constructor(props) {
     super(props);

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

@@ -6,7 +6,7 @@ import "../../../../components/entity/ha-entity-picker";
 import { onChangeEvent } from "../../../../common/preact/event";
 import { AutomationComponent } from "../automation-component";
 
-export default class StateTrigger extends AutomationComponent {
+export default class StateTrigger extends AutomationComponent<any> {
   private onChange: (obj: any) => void;
   constructor(props) {
     super(props);

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

@@ -7,7 +7,7 @@ import "@polymer/paper-radio-group/paper-radio-group";
 import { onChangeEvent } from "../../../../common/preact/event";
 import { AutomationComponent } from "../automation-component";
 
-export default class SunTrigger extends AutomationComponent {
+export default class SunTrigger extends AutomationComponent<any> {
   private onChange: (obj: any) => void;
   constructor() {
     super();

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

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

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

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

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

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

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

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

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

@@ -12,7 +12,7 @@ function zoneAndLocationFilter(stateObj) {
   return hasLocation(stateObj) && computeStateDomain(stateObj) !== "zone";
 }
 
-export default class ZoneTrigger extends AutomationComponent {
+export default class ZoneTrigger extends AutomationComponent<any> {
   constructor() {
     super();