Allow yaml in script and automation (#3862)

* Allow yaml in script and automation

* Restore defaults

* Rename class

* Catch errors in constructor

* Update yaml_textarea.tsx

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

@@ -1,7 +1,7 @@
 import { h, Component } from "preact";
 import "../../../../components/ha-service-picker";
 
-import JSONTextArea from "../json_textarea";
+import YAMLTextArea from "../yaml_textarea";
 
 export default class CallServiceAction extends Component<any> {
   constructor() {
@@ -32,7 +32,7 @@ export default class CallServiceAction extends Component<any> {
           value={service}
           onChange={this.serviceChanged}
         />
-        <JSONTextArea
+        <YAMLTextArea
           label={localize(
             "ui.panel.config.automation.editor.actions.type.service.service_data"
           )}

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

@@ -1,7 +1,7 @@
 import { h, Component } from "preact";
 import "@polymer/paper-input/paper-input";
 
-import JSONTextArea from "../json_textarea";
+import YAMLTextArea from "../yaml_textarea";
 import { onChangeEvent } from "../../../../common/preact/event";
 import { LocalizeFunc } from "../../../../common/translations/localize";
 import { EventAction } from "../../../../data/script";
@@ -45,7 +45,7 @@ export default class EventActionForm extends Component<Props> {
           value={event}
           onvalue-changed={this.onChange}
         />
-        <JSONTextArea
+        <YAMLTextArea
           label={localize(
             "ui.panel.config.automation.editor.actions.type.event.service_data"
           )}

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

@@ -1,7 +1,7 @@
 import { h, Component } from "preact";
 import "@polymer/paper-input/paper-input";
 
-import JSONTextArea from "../json_textarea";
+import YAMLTextArea from "../yaml_textarea";
 import { onChangeEvent } from "../../../../common/preact/event";
 
 export default class EventTrigger extends Component<any> {
@@ -34,7 +34,7 @@ export default class EventTrigger extends Component<any> {
           value={event_type}
           onvalue-changed={this.onChange}
         />
-        <JSONTextArea
+        <YAMLTextArea
           label={localize(
             "ui.panel.config.automation.editor.triggers.type.event.event_data"
           )}

src/panels/config/js/yaml_textarea.tsx

@@ -0,0 +1,80 @@
+import { h, Component } from "preact";
+import yaml from "js-yaml";
+import "../../../components/ha-textarea";
+
+const isEmpty = (obj: object) => {
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      return false;
+    }
+  }
+  return true;
+};
+
+export default class YAMLTextArea extends Component<any, any> {
+  constructor(props) {
+    super(props);
+
+    let value: string | undefined;
+    try {
+      value =
+        props.value && !isEmpty(props.value)
+          ? yaml.safeDump(props.value)
+          : undefined;
+    } catch (err) {
+      alert(`There was an error converting to YAML: ${err}`);
+    }
+
+    this.state = {
+      isvalid: true,
+      value,
+    };
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  public onChange(ev) {
+    const value = ev.target.value;
+    let parsed;
+    let isValid = true;
+
+    if (value) {
+      try {
+        parsed = yaml.safeLoad(value);
+        isValid = true;
+      } catch (err) {
+        // Invalid YAML
+        isValid = false;
+      }
+    } else {
+      parsed = {};
+    }
+
+    this.setState({
+      value,
+      isValid,
+    });
+    if (isValid) {
+      this.props.onChange(parsed);
+    }
+  }
+
+  public render({ label }, { value, isValid }) {
+    const style: any = {
+      minWidth: 300,
+      width: "100%",
+    };
+    if (!isValid) {
+      style.border = "1px solid red";
+    }
+    return (
+      <ha-textarea
+        label={label}
+        value={value}
+        style={style}
+        onvalue-changed={this.onChange}
+        dir="ltr"
+      />
+    );
+  }
+}