Convert Hass.io add-on options to YAML (#4717)

* Convert Hass.io options to YAML

* Fix yaml editors on other places

* Update ha-automation-action-service.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

hassio/src/addon-view/hassio-addon-config.ts

@@ -10,6 +10,7 @@ import {
   property,
   PropertyValues,
   TemplateResult,
+  query,
 } from "lit-element";
 
 import { HomeAssistant } from "../../../src/types";
@@ -20,30 +21,41 @@ import {
 } from "../../../src/data/hassio/addon";
 import { hassioStyle } from "../resources/hassio-style";
 import { haStyle } from "../../../src/resources/styles";
-import { PolymerChangedEvent } from "../../../src/polymer-types";
 import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/ha-yaml-editor";
+// tslint:disable-next-line: no-duplicate-imports
+import { HaYamlEditor } from "../../../src/components/ha-yaml-editor";
 
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public addon!: HassioAddonDetails;
   @property() private _error?: string;
-  @property() private _config!: string;
   @property({ type: Boolean }) private _configHasChanged = false;
 
+  @query("ha-yaml-editor") private _editor!: HaYamlEditor;
+
   protected render(): TemplateResult {
+    const editor = this._editor;
+    // If editor not rendered, don't show the error.
+    const valid = editor ? editor.isValid : true;
+
     return html`
       <paper-card heading="Config">
         <div class="card-content">
+          <ha-yaml-editor
+            @value-changed=${this._configChanged}
+          ></ha-yaml-editor>
           ${this._error
             ? html`
                 <div class="errors">${this._error}</div>
               `
             : ""}
-          <iron-autogrow-textarea
+          ${valid
-            @value-changed=${this._configChanged}
+            ? ""
-            .value=${this._config}
+            : html`
-          ></iron-autogrow-textarea>
+                <div class="errors">Invalid YAML</div>
+              `}
         </div>
         <div class="card-actions">
           <mwc-button class="warning" @click=${this._resetTapped}>
@@ -51,7 +63,7 @@ class HassioAddonConfig extends LitElement {
           </mwc-button>
           <mwc-button
             @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged}
+            .disabled=${!this._configHasChanged || !valid}
           >
             Save
           </mwc-button>
@@ -77,7 +89,7 @@ class HassioAddonConfig extends LitElement {
         }
         .errors {
           color: var(--google-red-500);
-          margin-bottom: 16px;
+          margin-top: 16px;
         }
         iron-autogrow-textarea {
           width: 100%;
@@ -93,15 +105,13 @@ class HassioAddonConfig extends LitElement {
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (changedProperties.has("addon")) {
-      this._config = JSON.stringify(this.addon.options, null, 2);
+      this._editor.setValue(this.addon.options);
     }
   }
 
-  private _configChanged(ev: PolymerChangedEvent<string>): void {
+  private _configChanged(): void {
-    this._config =
+    this._configHasChanged = true;
-      ev.detail.value || JSON.stringify(this.addon.options, null, 2);
+    this.requestUpdate();
-    this._configHasChanged =
-      this._config !== JSON.stringify(this.addon.options, null, 2);
   }
 
   private async _resetTapped(): Promise<void> {
@@ -129,7 +139,7 @@ class HassioAddonConfig extends LitElement {
     this._error = undefined;
     try {
       data = {
-        options: JSON.parse(this._config),
+        options: this._editor.value,
       };
     } catch (err) {
       this._error = err;

src/components/ha-yaml-editor.ts

@@ -21,9 +21,10 @@ const isEmpty = (obj: object) => {
 @customElement("ha-yaml-editor")
 export class HaYamlEditor extends LitElement {
   @property() public value?: any;
+  @property() public defaultValue?: any;
   @property() public isValid = true;
   @property() public label?: string;
-  @property() private _yaml?: string;
+  @property() private _yaml: string = "";
   @query("ha-code-editor") private _editor?: HaCodeEditor;
 
   public setValue(value) {
@@ -40,7 +41,9 @@ export class HaYamlEditor extends LitElement {
   }
 
   protected firstUpdated() {
-    this.setValue(this.value);
+    if (this.defaultValue) {
+      this.setValue(this.defaultValue);
+    }
   }
 
   protected render() {
@@ -71,7 +74,6 @@ export class HaYamlEditor extends LitElement {
     if (value) {
       try {
         parsed = safeLoad(value);
-        isValid = true;
       } catch (err) {
         // Invalid YAML
         isValid = false;
@@ -83,9 +85,7 @@ export class HaYamlEditor extends LitElement {
     this.value = parsed;
     this.isValid = isValid;
 
-    if (isValid) {
+    fireEvent(this, "value-changed", { value: parsed, isValid } as any);
-      fireEvent(this, "value-changed", { value: parsed });
-    }
   }
 }
 

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -157,7 +157,7 @@ export default class HaAutomationActionRow extends LitElement {
                       `
                     : ""}
                   <ha-yaml-editor
-                    .value=${this.action}
+                    .defaultValue=${this.action}
                     @value-changed=${this._onYamlChange}
                   ></ha-yaml-editor>
                 </div>
@@ -238,6 +238,9 @@ export default class HaAutomationActionRow extends LitElement {
 
   private _onYamlChange(ev: CustomEvent) {
     ev.stopPropagation();
+    if (!ev.detail.isValid) {
+      return;
+    }
     fireEvent(this, "value-changed", { value: ev.detail.value });
   }
 

src/panels/config/automation/action/types/ha-automation-action-event.ts

@@ -57,13 +57,17 @@ export class HaEventAction extends LitElement implements ActionElement {
           "ui.panel.config.automation.editor.actions.type.event.service_data"
         )}
         .name=${"event_data"}
-        .value=${event_data}
+        .defaultValue=${event_data}
         @value-changed=${this._dataChanged}
       ></ha-yaml-editor>
     `;
   }
 
   private _dataChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    if (!ev.detail.isValid) {
+      return;
+    }
     this._actionData = ev.detail.value;
     handleChangeEvent(this, ev);
   }

src/panels/config/automation/action/types/ha-automation-action-service.ts

@@ -94,13 +94,17 @@ export class HaServiceAction extends LitElement implements ActionElement {
           "ui.panel.config.automation.editor.actions.type.service.service_data"
         )}
         .name=${"data"}
-        .value=${data}
+        .defaultValue=${data}
         @value-changed=${this._dataChanged}
       ></ha-yaml-editor>
     `;
   }
 
   private _dataChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    if (!ev.detail.isValid) {
+      return;
+    }
     this._actionData = ev.detail.value;
     handleChangeEvent(this, ev);
   }

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -54,7 +54,7 @@ export default class HaAutomationConditionEditor extends LitElement {
                   `
                 : ""}
               <ha-yaml-editor
-                .value=${this.condition}
+                .defaultValue=${this.condition}
                 @value-changed=${this._onYamlChange}
               ></ha-yaml-editor>
             </div>
@@ -114,6 +114,9 @@ export default class HaAutomationConditionEditor extends LitElement {
 
   private _onYamlChange(ev: CustomEvent) {
     ev.stopPropagation();
+    if (!ev.detail.isValid) {
+      return;
+    }
     fireEvent(this, "value-changed", { value: ev.detail.value });
   }
 }

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -139,7 +139,7 @@ export default class HaAutomationTriggerRow extends LitElement {
                       `
                     : ""}
                   <ha-yaml-editor
-                    .value=${this.trigger}
+                    .defaultValue=${this.trigger}
                     @value-changed=${this._onYamlChange}
                   ></ha-yaml-editor>
                 </div>
@@ -213,6 +213,9 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   private _onYamlChange(ev: CustomEvent) {
     ev.stopPropagation();
+    if (!ev.detail.isValid) {
+      return;
+    }
     fireEvent(this, "value-changed", { value: ev.detail.value });
   }
 

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

@@ -35,13 +35,17 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
           "ui.panel.config.automation.editor.triggers.type.event.event_data"
         )}
         .name=${"event_data"}
-        .value=${event_data}
+        .defaultValue=${event_data}
         @value-changed=${this._valueChanged}
       ></ha-yaml-editor>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    if (!ev.detail.isValid) {
+      return;
+    }
     handleChangeEvent(this, ev);
   }
 }

src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts

@@ -84,7 +84,9 @@ export class HuiDialogSuggestCard extends LitElement {
           ${this._yamlMode && this._cardConfig
             ? html`
                 <div class="editor">
-                  <ha-yaml-editor .value=${this._cardConfig}></ha-yaml-editor>
+                  <ha-yaml-editor
+                    .defaultValue=${this._cardConfig}
+                  ></ha-yaml-editor>
                 </div>
               `
             : ""}