Allow testing describe functionality in the gallery (#13398)

gallery/src/pages/automation/describe-action.ts

@@ -1,7 +1,9 @@
 import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-yaml-editor";
+import { Action } from "../../../../src/data/script";
 import { describeAction } from "../../../../src/data/script_i18n";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -103,16 +105,38 @@ const ACTIONS = [
   },
 ];
 
+const initialAction: Action = {
+  service: "light.turn_on",
+  target: {
+    entity_id: "light.kitchen",
+  },
+};
+
 @customElement("demo-automation-describe-action")
 export class DemoAutomationDescribeAction extends LitElement {
   @property({ attribute: false }) hass!: HomeAssistant;
 
+  @state() _action = initialAction;
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
     }
     return html`
       <ha-card header="Actions">
+        <div class="action">
+          <span>
+            ${this._action
+              ? describeAction(this.hass, this._action)
+              : "<invalid YAML>"}
+          </span>
+          <ha-yaml-editor
+            label="Action Config"
+            .defaultValue=${initialAction}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>
+        </div>
+
         ${ACTIONS.map(
           (conf) => html`
             <div class="action">
@@ -132,6 +156,11 @@ export class DemoAutomationDescribeAction extends LitElement {
     hass.addEntities(ENTITIES);
   }
 
+  private _dataChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    this._action = ev.detail.isValid ? ev.detail.value : undefined;
+  }
+
   static get styles() {
     return css`
       ha-card {
@@ -147,6 +176,9 @@ export class DemoAutomationDescribeAction extends LitElement {
       span {
         margin-right: 16px;
       }
+      ha-yaml-editor {
+        width: 50%;
+      }
     `;
   }
 }

gallery/src/pages/automation/describe-condition.ts

@@ -1,7 +1,9 @@
 import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-yaml-editor";
+import { Condition } from "../../../../src/data/automation";
 import { describeCondition } from "../../../../src/data/automation_i18n";
 
 const conditions = [
@@ -17,11 +19,32 @@ const conditions = [
   { condition: "template" },
 ];
 
+const initialCondition: Condition = {
+  condition: "state",
+  entity_id: "light.kitchen",
+  state: "on",
+};
+
 @customElement("demo-automation-describe-condition")
 export class DemoAutomationDescribeCondition extends LitElement {
+  @state() _condition = initialCondition;
+
   protected render(): TemplateResult {
     return html`
       <ha-card header="Conditions">
+        <div class="condition">
+          <span>
+            ${this._condition
+              ? describeCondition(this._condition)
+              : "<invalid YAML>"}
+          </span>
+          <ha-yaml-editor
+            label="Condition Config"
+            .defaultValue=${initialCondition}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>
+        </div>
+
         ${conditions.map(
           (conf) => html`
             <div class="condition">
@@ -34,6 +57,11 @@ export class DemoAutomationDescribeCondition extends LitElement {
     `;
   }
 
+  private _dataChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    this._condition = ev.detail.isValid ? ev.detail.value : undefined;
+  }
+
   static get styles() {
     return css`
       ha-card {
@@ -49,6 +77,9 @@ export class DemoAutomationDescribeCondition extends LitElement {
       span {
         margin-right: 16px;
       }
+      ha-yaml-editor {
+        width: 50%;
+      }
     `;
   }
 }

gallery/src/pages/automation/describe-trigger.ts

@@ -1,7 +1,9 @@
 import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-yaml-editor";
+import { Trigger } from "../../../../src/data/automation";
 import { describeTrigger } from "../../../../src/data/automation_i18n";
 
 const triggers = [
@@ -20,11 +22,28 @@ const triggers = [
   { platform: "event" },
 ];
 
+const initialTrigger: Trigger = {
+  platform: "state",
+  entity_id: "light.kitchen",
+};
+
 @customElement("demo-automation-describe-trigger")
 export class DemoAutomationDescribeTrigger extends LitElement {
+  @state() _trigger = initialTrigger;
+
   protected render(): TemplateResult {
     return html`
       <ha-card header="Triggers">
+        <div class="trigger">
+          <span>
+            ${this._trigger ? describeTrigger(this._trigger) : "<invalid YAML>"}
+          </span>
+          <ha-yaml-editor
+            label="Trigger Config"
+            .defaultValue=${initialTrigger}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>
+        </div>
         ${triggers.map(
           (conf) => html`
             <div class="trigger">
@@ -37,6 +56,11 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     `;
   }
 
+  private _dataChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    this._trigger = ev.detail.isValid ? ev.detail.value : undefined;
+  }
+
   static get styles() {
     return css`
       ha-card {
@@ -52,6 +76,9 @@ export class DemoAutomationDescribeTrigger extends LitElement {
       span {
         margin-right: 16px;
       }
+      ha-yaml-editor {
+        width: 50%;
+      }
     `;
   }
 }