Scriptomation yaml editor (#7273)

src/components/ha-yaml-editor.ts

@@ -105,6 +105,10 @@ export class HaYamlEditor extends LitElement {
 
     fireEvent(this, "value-changed", { value: parsed, isValid } as any);
   }
+
+  get yaml() {
+    return this._editor?.value;
+  }
 }
 
 declare global {

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

@@ -1,5 +1,6 @@
 import "@material/mwc-fab";
 import {
+  mdiCheck,
   mdiContentDuplicate,
   mdiContentSave,
   mdiDelete,
@@ -21,6 +22,7 @@ import {
   property,
   PropertyValues,
   TemplateResult,
+  query,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { navigate } from "../../../common/navigate";
@@ -28,6 +30,8 @@ import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-yaml-editor";
+import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
 import {
   AutomationConfig,
   AutomationEntity,
@@ -89,6 +93,10 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   @internalProperty() private _entityId?: string;
 
+  @internalProperty() private _mode: "gui" | "yaml" = "gui";
+
+  @query("ha-yaml-editor", true) private _editor?: HaYamlEditor;
+
   protected render(): TemplateResult {
     const stateObj = this._entityId
       ? this.hass.states[this._entityId]
@@ -105,6 +113,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
           corner="BOTTOM_START"
           slot="toolbar-icon"
           @action=${this._handleMenuAction}
+          activatable
         >
           <mwc-icon-button
             slot="trigger"
@@ -113,6 +122,39 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
 
+          <mwc-list-item
+            aria-label=${this.hass.localize(
+              "ui.panel.config.automation.editor.edit_ui"
+            )}
+            graphic="icon"
+            ?activated=${this._mode === "gui"}
+          >
+            ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
+            ${this._mode === "gui"
+              ? html`<ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiCheck}
+                ></ha-svg-icon>`
+              : ``}
+          </mwc-list-item>
+          <mwc-list-item
+            aria-label=${this.hass.localize(
+              "ui.panel.config.automation.editor.edit_yaml"
+            )}
+            graphic="icon"
+            ?activated=${this._mode === "yaml"}
+          >
+            ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
+            ${this._mode === "yaml"
+              ? html`<ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiCheck}
+                ></ha-svg-icon>`
+              : ``}
+          </mwc-list-item>
+
+          <li divider role="separator"></li>
+
           <mwc-list-item
             .disabled=${!this.automationId}
             aria-label=${this.hass.localize(
@@ -152,9 +194,13 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                 ${this._errors
                   ? html` <div class="errors">${this._errors}</div> `
                   : ""}
+                ${this._mode === "gui"
+                  ? html`
                       <ha-config-section .isWide=${this.isWide}>
                         ${!this.narrow
-                    ? html` <span slot="header">${this._config.alias}</span> `
+                          ? html`
+                              <span slot="header">${this._config.alias}</span>
+                            `
                           : ""}
                         <span slot="introduction">
                           ${this.hass.localize(
@@ -361,6 +407,57 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                           .hass=${this.hass}
                         ></ha-automation-action>
                       </ha-config-section>
+                    `
+                  : this._mode === "yaml"
+                  ? html`
+                      <ha-config-section .isWide=${false}>
+                        ${!this.narrow
+                          ? html`
+                              <span slot="header">${this._config.alias}</span>
+                            `
+                          : ``}
+                        <ha-card>
+                          <div class="card-content">
+                            <ha-yaml-editor
+                              .defaultValue=${this._preprocessYaml()}
+                              @value-changed=${this._yamlChanged}
+                            ></ha-yaml-editor>
+                            <mwc-button @click=${this._copyYaml}>
+                              ${this.hass.localize(
+                                "ui.panel.config.automation.editor.copy_to_clipboard"
+                              )}
+                            </mwc-button>
+                          </div>
+                          ${stateObj
+                            ? html`
+                                <div
+                                  class="card-actions layout horizontal justified center"
+                                >
+                                  <div class="layout horizontal center">
+                                    <ha-entity-toggle
+                                      .hass=${this.hass}
+                                      .stateObj=${stateObj}
+                                    ></ha-entity-toggle>
+                                    ${this.hass.localize(
+                                      "ui.panel.config.automation.editor.enable_disable"
+                                    )}
+                                  </div>
+                                  <mwc-button
+                                    @click=${this._excuteAutomation}
+                                    .stateObj=${stateObj}
+                                  >
+                                    ${this.hass.localize(
+                                      "ui.card.automation.trigger"
+                                    )}
+                                  </mwc-button>
+                                </div>
+                              `
+                            : ""}
+                        </ha-card>
+                        <ha-config-section> </ha-config-section
+                      ></ha-config-section>
+                    `
+                  : ``}
               </div>
             `
           : ""}
@@ -512,6 +609,33 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     triggerAutomation(this.hass, (ev.target as any).stateObj.entity_id);
   }
 
+  private _preprocessYaml() {
+    const cleanConfig = this._config;
+    if (!cleanConfig) {
+      return {};
+    }
+
+    delete cleanConfig.id;
+
+    return cleanConfig;
+  }
+
+  private async _copyYaml() {
+    if (this._editor?.yaml) {
+      navigator.clipboard.writeText(this._editor.yaml);
+    }
+  }
+
+  private _yamlChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    if (!ev.detail.isValid) {
+      return;
+    }
+    this._config = ev.detail.value;
+    this._errors = undefined;
+    this._dirty = true;
+  }
+
   private _backTapped(): void {
     if (this._dirty) {
       showConfirmationDialog(this, {
@@ -571,9 +695,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._duplicate();
+        this._mode = "gui";
         break;
       case 1:
+        this._mode = "yaml";
+        break;
+      case 2:
+        this._duplicate();
+        break;
+      case 3:
         this._deleteConfirm();
         break;
     }

src/panels/config/script/ha-script-editor.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-fab";
-import { mdiContentSave, mdiDelete, mdiDotsVertical } from "@mdi/js";
+import { mdiCheck, mdiContentSave, mdiDelete, mdiDotsVertical } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
@@ -15,6 +15,7 @@ import {
   property,
   PropertyValues,
   TemplateResult,
+  query,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { computeObjectId } from "../../../common/entity/compute_object_id";
@@ -26,6 +27,8 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-input";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-yaml-editor";
+import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
 import {
   Action,
   deleteScript,
@@ -68,6 +71,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   @internalProperty() private _errors?: string;
 
+  @internalProperty() private _mode: "gui" | "yaml" = "gui";
+
+  @query("ha-yaml-editor", true) private _editor?: HaYamlEditor;
+
   protected render(): TemplateResult {
     return html`
       <hass-tabs-subpage
@@ -81,6 +88,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           corner="BOTTOM_START"
           slot="toolbar-icon"
           @action=${this._handleMenuAction}
+          activatable
         >
           <mwc-icon-button
             slot="trigger"
@@ -89,17 +97,48 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
 
+          <mwc-list-item
+            aria-label=${this.hass.localize(
+              "ui.panel.config.automation.editor.edit_ui"
+            )}
+            graphic="icon"
+            ?activated=${this._mode === "gui"}
+          >
+            ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
+            ${this._mode === "gui"
+              ? html`<ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiCheck}
+                ></ha-svg-icon>`
+              : ``}
+          </mwc-list-item>
+          <mwc-list-item
+            aria-label=${this.hass.localize(
+              "ui.panel.config.automation.editor.edit_yaml"
+            )}
+            graphic="icon"
+            ?activated=${this._mode === "yaml"}
+          >
+            ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
+            ${this._mode === "yaml"
+              ? html`<ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiCheck}
+                ></ha-svg-icon>`
+              : ``}
+          </mwc-list-item>
+
+          <li divider role="separator"></li>
+
           <mwc-list-item
             .disabled=${!this.scriptEntityId}
             aria-label=${this.hass.localize(
-              "ui.panel.config.automation.picker.delete_automation"
+              "ui.panel.config.script.editor.delete_script"
             )}
             class=${classMap({ warning: this.scriptEntityId })}
             graphic="icon"
           >
-            ${this.hass.localize(
+            ${this.hass.localize("ui.panel.config.script.editor.delete_script")}
-              "ui.panel.config.automation.picker.delete_automation"
-            )}
             <ha-svg-icon slot="graphic" .path=${mdiDelete}></ha-svg-icon>
           </mwc-list-item>
         </ha-button-menu>
@@ -110,16 +149,20 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           ${this._errors
             ? html` <div class="errors">${this._errors}</div> `
             : ""}
+          ${this._mode === "gui"
+            ? html`
                 <div
-            class="${classMap({
+                  class=${classMap({
                     rtl: computeRTL(this.hass),
-            })}"
+                  })}
                 >
                   ${this._config
                     ? html`
                         <ha-config-section .isWide=${this.isWide}>
                           ${!this.narrow
-                      ? html` <span slot="header">${this._config.alias}</span> `
+                            ? html`
+                                <span slot="header">${this._config.alias}</span>
+                              `
                             : ""}
                           <span slot="introduction">
                             ${this.hass.localize(
@@ -229,7 +272,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                                       )}"
                                       ?disabled=${this._dirty}
                                     >
-                                ${this.hass.localize("ui.card.script.execute")}
+                                      ${this.hass.localize(
+                                        "ui.card.script.execute"
+                                      )}
                                     </mwc-button>
                                   </div>
                                 `
@@ -250,7 +295,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                               )}
                             </p>
                             <a
-                        href="${documentationUrl(this.hass, "/docs/scripts/")}"
+                              href="${documentationUrl(
+                                this.hass,
+                                "/docs/scripts/"
+                              )}"
                               target="_blank"
                               rel="noreferrer"
                             >
@@ -268,6 +316,47 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                       `
                     : ""}
                 </div>
+              `
+            : this._mode === "yaml"
+            ? html`
+                <ha-config-section .isWide=${false}>
+                  ${!this.narrow
+                    ? html`<span slot="header">${this._config?.alias}</span>`
+                    : ``}
+                  <ha-card>
+                    <div class="card-content">
+                      <ha-yaml-editor
+                        .defaultValue=${this._preprocessYaml()}
+                        @value-changed=${this._yamlChanged}
+                      ></ha-yaml-editor>
+                      <mwc-button @click=${this._copyYaml}>
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.editor.copy_to_clipboard"
+                        )}
+                      </mwc-button>
+                    </div>
+                    ${this.scriptEntityId
+                      ? html`
+                          <div
+                            class="card-actions layout horizontal justified center"
+                          >
+                            <span></span>
+                            <mwc-button
+                              @click=${this._runScript}
+                              title="${this.hass.localize(
+                                "ui.panel.config.script.picker.activate_script"
+                              )}"
+                              ?disabled=${this._dirty}
+                            >
+                              ${this.hass.localize("ui.card.script.execute")}
+                            </mwc-button>
+                          </div>
+                        `
+                      : ``}
+                  </ha-card>
+                </ha-config-section>
+              `
+            : ``}
         </div>
         <mwc-fab
           slot="fab"
@@ -419,6 +508,26 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     this._dirty = true;
   }
 
+  private _preprocessYaml() {
+    return this._config;
+  }
+
+  private async _copyYaml() {
+    if (this._editor?.yaml) {
+      navigator.clipboard.writeText(this._editor.yaml);
+    }
+  }
+
+  private _yamlChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    if (!ev.detail.isValid) {
+      return;
+    }
+    this._config = ev.detail.value;
+    this._errors = undefined;
+    this._dirty = true;
+  }
+
   private _backTapped(): void {
     if (this._dirty) {
       showConfirmationDialog(this, {
@@ -451,6 +560,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
+        this._mode = "gui";
+        break;
+      case 1:
+        this._mode = "yaml";
+        break;
+      case 2:
         this._deleteConfirm();
         break;
     }

src/translations/en.json

@@ -1064,6 +1064,7 @@
             },
             "edit_yaml": "Edit as YAML",
             "edit_ui": "Edit with UI",
+            "copy_to_clipboard": "Copy to Clipboard",
             "triggers": {
               "name": "Trigger",
               "header": "Triggers",