Add Fields to Script UI (#18250)

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

@@ -1,15 +1,17 @@
 import "@material/mwc-button/mwc-button";
 import { mdiHelpCircle } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
-import { Action, ScriptConfig } from "../../../data/script";
+import { Action, Fields, ScriptConfig } from "../../../data/script";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import "../automation/action/ha-automation-action";
+import "./ha-script-fields";
+import type HaScriptFields from "./ha-script-fields";
 
 @customElement("manual-script-editor")
 export class HaManualScriptEditor extends LitElement {
@@ -23,6 +25,37 @@ export class HaManualScriptEditor extends LitElement {
 
   @property({ attribute: false }) public config!: ScriptConfig;
 
+  @query("ha-script-fields")
+  private _scriptFields?: HaScriptFields;
+
+  private _openFields = false;
+
+  public addFields() {
+    this._openFields = true;
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.config,
+        fields: {
+          [this.hass.localize("ui.panel.config.script.editor.field.field") ||
+          "field"]: {
+            selector: {
+              text: null,
+            },
+          },
+        },
+      },
+    });
+  }
+
+  protected updated(changedProps) {
+    if (this._openFields && changedProps.has("config")) {
+      this._openFields = false;
+      this._scriptFields?.updateComplete.then(
+        () => this._scriptFields?.focusLastField()
+      );
+    }
+  }
+
   protected render() {
     return html`
       ${this.disabled
@@ -33,6 +66,40 @@ export class HaManualScriptEditor extends LitElement {
             </mwc-button>
           </ha-alert>`
         : ""}
+      ${this.config.fields
+        ? html`<div class="header">
+              <h2 id="fields-heading" class="name">
+                ${this.hass.localize(
+                  "ui.panel.config.script.editor.field.fields"
+                )}
+              </h2>
+              <a
+                href=${documentationUrl(
+                  this.hass,
+                  "/integrations/script/#fields"
+                )}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <ha-icon-button
+                  .path=${mdiHelpCircle}
+                  .label=${this.hass.localize(
+                    "ui.panel.config.script.editor.field.link_help_fields"
+                  )}
+                ></ha-icon-button>
+              </a>
+            </div>
+
+            <ha-script-fields
+              role="region"
+              aria-labelledby="fields-heading"
+              .fields=${this.config.fields}
+              @value-changed=${this._fieldsChanged}
+              .hass=${this.hass}
+              .disabled=${this.disabled}
+            ></ha-script-fields>`
+        : nothing}
+
       <div class="header">
         <h2 id="sequence-heading" class="name">
           ${this.hass.localize("ui.panel.config.script.editor.sequence")}
@@ -63,6 +130,13 @@ export class HaManualScriptEditor extends LitElement {
     `;
   }
 
+  private _fieldsChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: { ...this.config!, fields: ev.detail.value as Fields },
+    });
+  }
+
   private _sequenceChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     fireEvent(this, "value-changed", {