From 7af77e5f7951858afc8c75fa5f0408070f808683 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Tue, 8 Feb 2022 15:04:24 -0600
Subject: [PATCH 01/11] Script editor to ha-form

---
 src/components/ha-form/ha-form.ts             |  22 +-
 .../ha-selector/ha-selector-icon.ts           |  41 ++
 .../ha-selector/ha-selector-select.ts         |  16 +-
 src/components/ha-selector/ha-selector.ts     |   4 +
 src/data/selector.ts                          |  15 +-
 src/panels/config/script/ha-script-editor.ts  | 412 ++++++++++--------
 6 files changed, 322 insertions(+), 188 deletions(-)
 create mode 100644 src/components/ha-selector/ha-selector-icon.ts

diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts
index af97f2dffbb8..610d2d2de5b1 100644
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -32,7 +32,12 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property() public computeError?: (schema: HaFormSchema, error) => string;
 
-  @property() public computeLabel?: (schema: HaFormSchema) => string;
+  @property() public computeLabel?: (
+    schema: HaFormSchema,
+    data?: HaFormDataContainer
+  ) => string;
+
+  @property() public computeHelper?: (schema: HaFormSchema) => string;
 
   public focus() {
     const root = this.shadowRoot?.querySelector(".root");
@@ -71,6 +76,7 @@ export class HaForm extends LitElement implements HaFormElement {
           : ""}
         ${this.schema.map((item) => {
           const error = getValue(this.error, item);
+
           return html`
             ${error
               ? html`
@@ -85,14 +91,15 @@ export class HaForm extends LitElement implements HaFormElement {
                   .hass=${this.hass}
                   .selector=${item.selector}
                   .value=${getValue(this.data, item)}
-                  .label=${this._computeLabel(item)}
+                  .label=${this._computeLabel(item, this.data)}
                   .disabled=${this.disabled}
+                  .helper=${this._computeHelper(item)}
                   .required=${item.required || false}
                 ></ha-selector>`
               : dynamicElement(`ha-form-${item.type}`, {
                   schema: item,
                   data: getValue(this.data, item),
-                  label: this._computeLabel(item),
+                  label: this._computeLabel(item, this.data),
                   disabled: this.disabled,
                 })}
           `;
@@ -107,6 +114,7 @@ export class HaForm extends LitElement implements HaFormElement {
     root.addEventListener("value-changed", (ev) => {
       ev.stopPropagation();
       const schema = (ev.target as HaFormElement).schema as HaFormSchema;
+
       fireEvent(this, "value-changed", {
         value: { ...this.data, [schema.name]: ev.detail.value },
       });
@@ -114,14 +122,18 @@ export class HaForm extends LitElement implements HaFormElement {
     return root;
   }
 
-  private _computeLabel(schema: HaFormSchema) {
+  private _computeLabel(schema: HaFormSchema, data: HaFormDataContainer) {
     return this.computeLabel
-      ? this.computeLabel(schema)
+      ? this.computeLabel(schema, data)
       : schema
       ? schema.name
       : "";
   }
 
+  private _computeHelper(schema: HaFormSchema) {
+    return this.computeHelper ? this.computeHelper(schema) : "";
+  }
+
   private _computeError(error, schema: HaFormSchema | HaFormSchema[]) {
     return this.computeError ? this.computeError(error, schema) : error;
   }
diff --git a/src/components/ha-selector/ha-selector-icon.ts b/src/components/ha-selector/ha-selector-icon.ts
new file mode 100644
index 000000000000..b9e940121b41
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-icon.ts
@@ -0,0 +1,41 @@
+import "../ha-icon-picker";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { HomeAssistant } from "../../types";
+import { IconSelector } from "../../data/selector";
+import { fireEvent } from "../../common/dom/fire_event";
+
+@customElement("ha-selector-icon")
+export class HaIconSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: IconSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  protected render() {
+    return html`
+      <ha-icon-picker
+        .label=${this.hass.localize("ui.panel.config.script.editor.icon")}
+        .name=${"icon"}
+        .value=${this.value}
+        @value-changed=${this._valueChanged}
+      >
+      </ha-icon-picker>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    fireEvent(this, "value-changed", { value: ev.detail.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-icon": HaIconSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index eaaca5a6ea09..5c1cc3e91b60 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
-import { SelectSelector } from "../../data/selector";
+import { SelectOption, SelectSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "@material/mwc-select/mwc-select";
 import "@material/mwc-list/mwc-list-item";
@@ -17,6 +17,8 @@ export class HaSelectSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
@@ -25,15 +27,17 @@ export class HaSelectSelector extends LitElement {
       naturalMenuWidth
       .label=${this.label}
       .value=${this.value}
+      .helper=${this.helper}
       .disabled=${this.disabled}
       @closed=${stopPropagation}
       @selected=${this._valueChanged}
     >
-      ${this.selector.select.options.map(
-        (item: string) => html`
-          <mwc-list-item .value=${item}>${item}</mwc-list-item>
-        `
-      )}
+      ${this.selector.select.options.map((item: string | SelectOption) => {
+        const value = typeof item === "object" ? item.value : item;
+        const label = typeof item === "object" ? item.label : item;
+
+        return html`<mwc-list-item .value=${value}>${label}</mwc-list-item>`;
+      })}
     </mwc-select>`;
   }
 
diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts
index 145991228f54..53aaa6a841ec 100644
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -17,6 +17,7 @@ import "./ha-selector-select";
 import "./ha-selector-target";
 import "./ha-selector-text";
 import "./ha-selector-time";
+import "./ha-selector-icon";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
@@ -28,6 +29,8 @@ export class HaSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property() public placeholder?: any;
 
   @property({ type: Boolean }) public disabled = false;
@@ -52,6 +55,7 @@ export class HaSelector extends LitElement {
         placeholder: this.placeholder,
         disabled: this.disabled,
         required: this.required,
+        helper: this.helper,
         id: "selector",
       })}
     `;
diff --git a/src/data/selector.ts b/src/data/selector.ts
index 4ed8f9dd7b01..458a84235a3d 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -12,7 +12,8 @@ export type Selector =
   | ActionSelector
   | StringSelector
   | ObjectSelector
-  | SelectSelector;
+  | SelectSelector
+  | IconSelector;
 
 export interface EntitySelector {
   entity: {
@@ -133,8 +134,18 @@ export interface ObjectSelector {
   object: {};
 }
 
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
 export interface SelectSelector {
   select: {
-    options: string[];
+    options: string[] | SelectOption[];
   };
 }
+
+export interface IconSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  icon: {};
+}
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index 75f57c0c8486..0d176d26d41a 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -10,7 +10,6 @@ import {
 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";
-import { PaperListboxElement } from "@polymer/paper-listbox";
 import {
   css,
   CSSResultGroup,
@@ -29,6 +28,10 @@ import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
+import {
+  HaFormDataContainer,
+  HaFormSelector,
+} from "../../../components/ha-form/types";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-svg-icon";
@@ -52,12 +55,28 @@ import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
-import "../automation/action/ha-automation-action";
 import { HaDeviceAction } from "../automation/action/types/ha-automation-action-device_id";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./blueprint-script-editor";
 
+const BASE_GUI_SCHEMA: HaFormSelector[] = [
+  {
+    name: "alias",
+    selector: {
+      text: {
+        type: "text",
+      },
+    },
+  },
+  {
+    name: "icon",
+    selector: {
+      icon: {},
+    },
+  },
+];
+
 export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -83,7 +102,75 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   @query("ha-yaml-editor", true) private _editor?: HaYamlEditor;
 
+  private _schema?: HaFormSelector[];
+
+  protected willUpdate(): void {
+    if (this._mode !== "gui" || !this._config) {
+      return;
+    }
+
+    const schema = BASE_GUI_SCHEMA;
+    if (!this.scriptEntityId) {
+      schema!.push({
+        name: "id",
+        selector: {
+          text: {
+            type: "text",
+          },
+        },
+      });
+    }
+
+    if (!("use_blueprint" in this._config)) {
+      schema!.push({
+        name: "mode",
+        selector: {
+          select: {
+            options: MODES.map((mode) => ({
+              label: `
+                ${
+                  this.hass.localize(
+                    `ui.panel.config.script.editor.modes.${mode}`
+                  ) || mode
+                }
+              `,
+              value: mode,
+            })),
+          },
+        },
+      });
+    }
+
+    if (this._config.mode && MODES_MAX.includes(this._config.mode)) {
+      schema!.push({
+        name: "max",
+        selector: {
+          text: {
+            type: "number",
+          },
+        },
+      });
+    }
+
+    this._schema = schema;
+  }
+
   protected render(): TemplateResult {
+    if (!this._config) {
+      return html``;
+    }
+
+    const data = {
+      mode: MODES[0],
+      max:
+        this._config.mode && MODES_MAX.includes(this._config.mode)
+          ? 10
+          : undefined,
+      icon: undefined,
+      ...this._config,
+      id: this._entityId,
+    };
+
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -113,11 +200,13 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           >
             ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
             ${this._mode === "gui"
-              ? html` <ha-svg-icon
-                  class="selected_menu_item"
-                  slot="graphic"
-                  .path=${mdiCheck}
-                ></ha-svg-icon>`
+              ? html`
+                  <ha-svg-icon
+                    class="selected_menu_item"
+                    slot="graphic"
+                    .path=${mdiCheck}
+                  ></ha-svg-icon>
+                `
               : ``}
           </mwc-list-item>
           <mwc-list-item
@@ -129,11 +218,13 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           >
             ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
             ${this._mode === "yaml"
-              ? html` <ha-svg-icon
-                  class="selected_menu_item"
-                  slot="graphic"
-                  .path=${mdiCheck}
-                ></ha-svg-icon>`
+              ? html`
+                  <ha-svg-icon
+                    class="selected_menu_item"
+                    slot="graphic"
+                    .path=${mdiCheck}
+                  ></ha-svg-icon>
+                `
               : ``}
           </mwc-list-item>
 
@@ -173,16 +264,14 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           </mwc-list-item>
         </ha-button-menu>
         ${this.narrow
-          ? html` <span slot="header">${this._config?.alias}</span> `
+          ? html`<span slot="header">${this._config?.alias}</span>`
           : ""}
         <div
           class="content ${classMap({
             "yaml-mode": this._mode === "yaml",
           })}"
         >
-          ${this._errors
-            ? html` <div class="errors">${this._errors}</div> `
-            : ""}
+          ${this._errors ? html`<div class="errors">${this._errors}</div>` : ""}
           ${this._mode === "gui"
             ? html`
                 <div
@@ -205,95 +294,14 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                           </span>
                           <ha-card>
                             <div class="card-content">
-                              <paper-input
-                                .label=${this.hass.localize(
-                                  "ui.panel.config.script.editor.alias"
-                                )}
-                                name="alias"
-                                .value=${this._config.alias}
-                                @value-changed=${this._valueChanged}
-                                @change=${this._aliasChanged}
-                              >
-                              </paper-input>
-                              <ha-icon-picker
-                                .label=${this.hass.localize(
-                                  "ui.panel.config.script.editor.icon"
-                                )}
-                                .name=${"icon"}
-                                .value=${this._config.icon}
+                              <ha-form
+                                .schema=${this._schema}
+                                .data=${data}
+                                .hass=${this.hass}
+                                .computeLabel=${this._computeLabelCallback}
+                                .computeHelper=${this._computeHelperCallback}
                                 @value-changed=${this._valueChanged}
-                              >
-                              </ha-icon-picker>
-                              ${!this.scriptEntityId
-                                ? html`<paper-input
-                                    .label=${this.hass.localize(
-                                      "ui.panel.config.script.editor.id"
-                                    )}
-                                    .errorMessage=${this.hass.localize(
-                                      "ui.panel.config.script.editor.id_already_exists"
-                                    )}
-                                    .invalid=${this._idError}
-                                    .value=${this._entityId}
-                                    @value-changed=${this._idChanged}
-                                  >
-                                  </paper-input>`
-                                : ""}
-                              ${"use_blueprint" in this._config
-                                ? ""
-                                : html`<p>
-                                      ${this.hass.localize(
-                                        "ui.panel.config.script.editor.modes.description",
-                                        "documentation_link",
-                                        html`<a
-                                          href=${documentationUrl(
-                                            this.hass,
-                                            "/integrations/script/#script-modes"
-                                          )}
-                                          target="_blank"
-                                          rel="noreferrer"
-                                          >${this.hass.localize(
-                                            "ui.panel.config.script.editor.modes.documentation"
-                                          )}</a
-                                        >`
-                                      )}
-                                    </p>
-                                    <paper-dropdown-menu-light
-                                      .label=${this.hass.localize(
-                                        "ui.panel.config.script.editor.modes.label"
-                                      )}
-                                      no-animations
-                                    >
-                                      <paper-listbox
-                                        slot="dropdown-content"
-                                        .selected=${this._config.mode
-                                          ? MODES.indexOf(this._config.mode)
-                                          : 0}
-                                        @iron-select=${this._modeChanged}
-                                      >
-                                        ${MODES.map(
-                                          (mode) => html`
-                                            <paper-item .mode=${mode}>
-                                              ${this.hass.localize(
-                                                `ui.panel.config.script.editor.modes.${mode}`
-                                              ) || mode}
-                                            </paper-item>
-                                          `
-                                        )}
-                                      </paper-listbox>
-                                    </paper-dropdown-menu-light>
-                                    ${this._config.mode &&
-                                    MODES_MAX.includes(this._config.mode)
-                                      ? html`<paper-input
-                                          .label=${this.hass.localize(
-                                            `ui.panel.config.script.editor.max.${this._config.mode}`
-                                          )}
-                                          type="number"
-                                          name="max"
-                                          .value=${this._config.max || "10"}
-                                          @value-changed=${this._valueChanged}
-                                        >
-                                        </paper-input>`
-                                      : html``} `}
+                              ></ha-form>
                             </div>
                             ${this.scriptEntityId
                               ? html`
@@ -328,47 +336,51 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                         </ha-config-section>
 
                         ${"use_blueprint" in this._config
-                          ? html`<blueprint-script-editor
-                              .hass=${this.hass}
-                              .narrow=${this.narrow}
-                              .isWide=${this.isWide}
-                              .config=${this._config}
-                              @value-changed=${this._configChanged}
-                            ></blueprint-script-editor>`
-                          : html`<ha-config-section
-                              vertical
-                              .isWide=${this.isWide}
-                            >
-                              <span slot="header">
-                                ${this.hass.localize(
-                                  "ui.panel.config.script.editor.sequence"
-                                )}
-                              </span>
-                              <span slot="introduction">
-                                <p>
-                                  ${this.hass.localize(
-                                    "ui.panel.config.script.editor.sequence_sentence"
-                                  )}
-                                </p>
-                                <a
-                                  href=${documentationUrl(
-                                    this.hass,
-                                    "/docs/scripts/"
-                                  )}
-                                  target="_blank"
-                                  rel="noreferrer"
-                                >
+                          ? html`
+                              <blueprint-script-editor
+                                .hass=${this.hass}
+                                .narrow=${this.narrow}
+                                .isWide=${this.isWide}
+                                .config=${this._config}
+                                @value-changed=${this._configChanged}
+                              ></blueprint-script-editor>
+                            `
+                          : html`
+                              <ha-config-section
+                                vertical
+                                .isWide=${this.isWide}
+                              >
+                                <span slot="header">
                                   ${this.hass.localize(
-                                    "ui.panel.config.script.editor.link_available_actions"
+                                    "ui.panel.config.script.editor.sequence"
                                   )}
-                                </a>
-                              </span>
-                              <ha-automation-action
-                                .actions=${this._config.sequence}
-                                @value-changed=${this._sequenceChanged}
-                                .hass=${this.hass}
-                              ></ha-automation-action>
-                            </ha-config-section>`}
+                                </span>
+                                <span slot="introduction">
+                                  <p>
+                                    ${this.hass.localize(
+                                      "ui.panel.config.script.editor.sequence_sentence"
+                                    )}
+                                  </p>
+                                  <a
+                                    href=${documentationUrl(
+                                      this.hass,
+                                      "/docs/scripts/"
+                                    )}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                  >
+                                    ${this.hass.localize(
+                                      "ui.panel.config.script.editor.link_available_actions"
+                                    )}
+                                  </a>
+                                </span>
+                                <ha-automation-action
+                                  .actions=${this._config.sequence}
+                                  @value-changed=${this._sequenceChanged}
+                                  .hass=${this.hass}
+                                ></ha-automation-action>
+                              </ha-config-section>
+                            `}
                       `
                     : ""}
                 </div>
@@ -495,7 +507,46 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     }
   }
 
-  private async _runScript(ev) {
+  private _computeLabelCallback(
+    schema: HaFormSelector,
+    data: HaFormDataContainer
+  ): string {
+    switch (schema.name) {
+      case "mode":
+        return this.hass.localize("ui.panel.config.script.editor.modes.label");
+      case "max":
+        return this.hass.localize(
+          `ui.panel.config.script.editor.max.${data.mode}`
+        );
+      default:
+        return this.hass.localize(
+          `ui.panel.config.script.editor.${schema.name}`
+        );
+    }
+  }
+
+  private _computeHelperCallback(schema: HaFormSelector): string | undefined {
+    if (schema.name === "mode") {
+      return this.hass.localize(
+        "ui.panel.config.script.editor.modes.description",
+        "documentation_link",
+        html`<a
+          href=${documentationUrl(
+            this.hass,
+            "/integrations/script/#script-modes"
+          )}
+          target="_blank"
+          rel="noreferrer"
+          >${this.hass.localize(
+            "ui.panel.config.script.editor.modes.documentation"
+          )}</a
+        >`
+      );
+    }
+    return undefined;
+  }
+
+  private async _runScript(ev: CustomEvent) {
     ev.stopPropagation();
     await triggerScript(this.hass, this.scriptEntityId as string);
     showToast(this, {
@@ -507,14 +558,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     });
   }
 
-  private _modeChanged(ev: CustomEvent) {
-    const mode = ((ev.target as PaperListboxElement)?.selectedItem as any)
-      ?.mode;
-
-    if (mode === this._config!.mode) {
-      return;
-    }
-
+  private _modeChanged(mode) {
     this._config = { ...this._config!, mode };
     if (!MODES_MAX.includes(mode)) {
       delete this._config.max;
@@ -522,23 +566,23 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     this._dirty = true;
   }
 
-  private _aliasChanged(ev: CustomEvent) {
+  private _aliasChanged(alias: string) {
     if (this.scriptEntityId || this._entityId) {
       return;
     }
-    const aliasSlugify = slugify((ev.target as any).value);
+    const aliasSlugify = slugify(alias);
     let id = aliasSlugify;
     let i = 2;
     while (this.hass.states[`script.${id}`]) {
       id = `${aliasSlugify}_${i}`;
       i++;
     }
+
     this._entityId = id;
   }
 
-  private _idChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    this._entityId = (ev.target as any).value;
+  private _idChanged(id: string) {
+    this._entityId = id;
     if (this.hass.states[`script.${this._entityId}`]) {
       this._idError = true;
     } else {
@@ -548,24 +592,39 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   private _valueChanged(ev: CustomEvent) {
     ev.stopPropagation();
-    const target = ev.target as any;
-    const name = target.name;
-    if (!name) {
-      return;
-    }
-    let newVal = ev.detail.value;
-    if (target.type === "number") {
-      newVal = Number(newVal);
-    }
-    if ((this._config![name] || "") === newVal) {
-      return;
-    }
-    if (!newVal) {
-      delete this._config![name];
-      this._config = { ...this._config! };
-    } else {
-      this._config = { ...this._config!, [name]: newVal };
+    const values = ev.detail.value as any;
+
+    for (const key of Object.keys(values)) {
+      if (key === "sequence") {
+        continue;
+      }
+
+      const value = values[key];
+
+      if (value === this._config![key]) {
+        continue;
+      }
+
+      switch (key) {
+        case "id":
+          this._idChanged(value);
+          return;
+        case "alias":
+          this._aliasChanged(value);
+          break;
+        case "mode":
+          this._modeChanged(value);
+          return;
+      }
+
+      if (values[key] === undefined) {
+        delete this._config![key];
+        this._config = { ...this._config! };
+      } else {
+        this._config = { ...this._config!, [key]: value };
+      }
     }
+
     this._dirty = true;
   }
 
@@ -575,7 +634,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   }
 
   private _sequenceChanged(ev: CustomEvent): void {
-    this._config = { ...this._config!, sequence: ev.detail.value as Action[] };
+    this._config = {
+      ...this._config!,
+      sequence: ev.detail.value as Action[],
+    };
     this._errors = undefined;
     this._dirty = true;
   }

From 77ec46550a48ea4089bd73de24eb2b9029d548d4 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 9 Feb 2022 09:31:54 -0600
Subject: [PATCH 02/11] review

---
 .../ha-selector/ha-selector-icon.ts           |  3 +-
 src/panels/config/script/ha-script-editor.ts  | 97 ++++++++++---------
 2 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/src/components/ha-selector/ha-selector-icon.ts b/src/components/ha-selector/ha-selector-icon.ts
index b9e940121b41..6e360573be82 100644
--- a/src/components/ha-selector/ha-selector-icon.ts
+++ b/src/components/ha-selector/ha-selector-icon.ts
@@ -20,8 +20,7 @@ export class HaIconSelector extends LitElement {
   protected render() {
     return html`
       <ha-icon-picker
-        .label=${this.hass.localize("ui.panel.config.script.editor.icon")}
-        .name=${"icon"}
+        .label=${this.label}
         .value=${this.value}
         @value-changed=${this._valueChanged}
       >
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index 0d176d26d41a..99613ced9091 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -20,6 +20,7 @@ import {
 } from "lit";
 import { property, state, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
 import { computeObjectId } from "../../../common/entity/compute_object_id";
 import { navigate } from "../../../common/navigate";
 import { slugify } from "../../../common/string/slugify";
@@ -30,6 +31,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import {
   HaFormDataContainer,
+  HaFormSchema,
   HaFormSelector,
 } from "../../../components/ha-form/types";
 import "../../../components/ha-icon-button";
@@ -102,64 +104,67 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   @query("ha-yaml-editor", true) private _editor?: HaYamlEditor;
 
-  private _schema?: HaFormSelector[];
+  private _schema = memoizeOne(
+    (hasID: boolean, useBluePrint?: boolean, currentMode?: string) => {
+      const schema: HaFormSchema[] = [];
 
-  protected willUpdate(): void {
-    if (this._mode !== "gui" || !this._config) {
-      return;
-    }
-
-    const schema = BASE_GUI_SCHEMA;
-    if (!this.scriptEntityId) {
-      schema!.push({
-        name: "id",
-        selector: {
-          text: {
-            type: "text",
+      if (!hasID) {
+        schema!.push({
+          name: "id",
+          selector: {
+            text: {},
           },
-        },
-      });
-    }
+        });
+      }
 
-    if (!("use_blueprint" in this._config)) {
-      schema!.push({
-        name: "mode",
-        selector: {
-          select: {
-            options: MODES.map((mode) => ({
-              label: `
-                ${
-                  this.hass.localize(
-                    `ui.panel.config.script.editor.modes.${mode}`
-                  ) || mode
-                }
-              `,
-              value: mode,
-            })),
+      if (!useBluePrint) {
+        schema!.push({
+          name: "mode",
+          selector: {
+            select: {
+              options: MODES.map((mode) => ({
+                label: `
+                  ${
+                    this.hass.localize(
+                      `ui.panel.config.script.editor.modes.${mode}`
+                    ) || mode
+                  }
+                `,
+                value: mode,
+              })),
+            },
           },
-        },
-      });
-    }
+        });
+      }
 
-    if (this._config.mode && MODES_MAX.includes(this._config.mode)) {
-      schema!.push({
-        name: "max",
-        selector: {
-          text: {
-            type: "number",
+      if (currentMode && MODES_MAX.includes(currentMode)) {
+        schema!.push({
+          name: "max",
+          selector: {
+            text: {
+              type: "number",
+            },
           },
-        },
-      });
-    }
+        });
+      }
 
-    this._schema = schema;
-  }
+      schema.unshift(...BASE_GUI_SCHEMA);
+
+      return schema;
+    }
+  );
 
   protected render(): TemplateResult {
     if (!this._config) {
       return html``;
     }
 
+    const schema = this._schema(
+      !!this.scriptEntityId,
+      "use_blueprint" in this._config,
+      this._config.mode
+    );
+
     const data = {
       mode: MODES[0],
       max:
@@ -295,7 +300,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                           <ha-card>
                             <div class="card-content">
                               <ha-form
-                                .schema=${this._schema}
+                                .schema=${schema}
                                 .data=${data}
                                 .hass=${this.hass}
                                 .computeLabel=${this._computeLabelCallback}

From bf6c945ae7e2b7246a004f2c34e1d242a6bdeca9 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 9 Feb 2022 09:58:58 -0600
Subject: [PATCH 03/11] Fix Supervisor build?

---
 build-scripts/bundle.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js
index 61dc06f74c05..456248969928 100644
--- a/build-scripts/bundle.js
+++ b/build-scripts/bundle.js
@@ -31,7 +31,8 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
       require.resolve(
-        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
+        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts"),
+        path.resolve(paths.polymer_dir, "src/components/ha-icon-picker.ts")
       ),
   ].filter(Boolean);
 

From 48fa23a207fb8efaaf3fbbffc34507a50df1f9ca Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 9 Feb 2022 10:07:25 -0600
Subject: [PATCH 04/11] fix supervisor?

---
 build-scripts/bundle.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js
index 456248969928..8102bf14320c 100644
--- a/build-scripts/bundle.js
+++ b/build-scripts/bundle.js
@@ -32,7 +32,7 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
     isHassioBuild &&
       require.resolve(
         path.resolve(paths.polymer_dir, "src/components/ha-icon.ts"),
-        path.resolve(paths.polymer_dir, "src/components/ha-icon-picker.ts")
+        path.resolve(paths.polymer_dir, "src/data/custom_icons.ts")
       ),
   ].filter(Boolean);
 

From 440f83a89f92732d589396fc269dc75ac34ff305 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Wed, 9 Feb 2022 10:19:32 -0600
Subject: [PATCH 05/11] fix freaking supervisor

---
 build-scripts/bundle.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js
index 8102bf14320c..00e6eead9e28 100644
--- a/build-scripts/bundle.js
+++ b/build-scripts/bundle.js
@@ -32,7 +32,7 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
     isHassioBuild &&
       require.resolve(
         path.resolve(paths.polymer_dir, "src/components/ha-icon.ts"),
-        path.resolve(paths.polymer_dir, "src/data/custom_icons.ts")
+        path.resolve(paths.polymer_dir, "src/build/mdi/iconList.json")
       ),
   ].filter(Boolean);
 

From f57eb4eecf57aab6ca0c2c2c9c2d128b674f239c Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Thu, 10 Feb 2022 19:20:20 -0600
Subject: [PATCH 06/11] clean up

---
 gallery/src/pages/components/ha-form.ts      |  6 +++
 gallery/src/pages/components/ha-selector.ts  |  1 +
 src/panels/config/script/ha-script-editor.ts | 44 ++++++++++----------
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/gallery/src/pages/components/ha-form.ts b/gallery/src/pages/components/ha-form.ts
index a49cf9f1313f..dac1320a3791 100644
--- a/gallery/src/pages/components/ha-form.ts
+++ b/gallery/src/pages/components/ha-form.ts
@@ -61,6 +61,12 @@ const SCHEMAS: {
           select: { options: ["Everyone Home", "Some Home", "All gone"] },
         },
       },
+      {
+        name: "icon",
+        selector: {
+          icon: {},
+        },
+      },
     ],
   },
   {
diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
index b4fc18f11830..60890a3e4dcc 100644
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -72,6 +72,7 @@ const SCHEMAS: {
         name: "Select",
         selector: { select: { options: ["Option 1", "Option 2"] } },
       },
+      icon: { name: "Icon", selector: { icon: {} } },
     },
   },
 ];
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index 99613ced9091..f03b52087758 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -1,4 +1,4 @@
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import {
   mdiCheck,
@@ -9,7 +9,6 @@ import {
 } 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";
 import {
   css,
   CSSResultGroup,
@@ -29,13 +28,12 @@ import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
-import {
+import type {
   HaFormDataContainer,
   HaFormSchema,
   HaFormSelector,
 } from "../../../components/ha-form/types";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-icon-picker";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
@@ -54,7 +52,7 @@ import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box
 import "../../../layouts/ha-app-layout";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { haStyle } from "../../../resources/styles";
-import { HomeAssistant, Route } from "../../../types";
+import type { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import { HaDeviceAction } from "../automation/action/types/ha-automation-action-device_id";
@@ -512,10 +510,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     }
   }
 
-  private _computeLabelCallback(
+  private _computeLabelCallback = (
     schema: HaFormSelector,
     data: HaFormDataContainer
-  ): string {
+  ): string => {
     switch (schema.name) {
       case "mode":
         return this.hass.localize("ui.panel.config.script.editor.modes.label");
@@ -528,28 +526,32 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           `ui.panel.config.script.editor.${schema.name}`
         );
     }
-  }
+  };
 
-  private _computeHelperCallback(schema: HaFormSelector): string | undefined {
+  private _computeHelperCallback = (
+    schema: HaFormSelector
+  ): string | undefined => {
     if (schema.name === "mode") {
       return this.hass.localize(
         "ui.panel.config.script.editor.modes.description",
         "documentation_link",
-        html`<a
-          href=${documentationUrl(
-            this.hass,
-            "/integrations/script/#script-modes"
-          )}
-          target="_blank"
-          rel="noreferrer"
-          >${this.hass.localize(
-            "ui.panel.config.script.editor.modes.documentation"
-          )}</a
-        >`
+        html`
+          <a
+            href=${documentationUrl(
+              this.hass,
+              "/integrations/script/#script-modes"
+            )}
+            target="_blank"
+            rel="noreferrer"
+            >${this.hass.localize(
+              "ui.panel.config.script.editor.modes.documentation"
+            )}</a
+          >
+        `
       );
     }
     return undefined;
-  }
+  };
 
   private async _runScript(ev: CustomEvent) {
     ev.stopPropagation();

From 16014b337c7a00b691f5db4988f0dda43c674899 Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Thu, 10 Feb 2022 21:03:19 -0600
Subject: [PATCH 07/11] fix build

---
 build-scripts/bundle.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js
index 00e6eead9e28..2205196266d2 100644
--- a/build-scripts/bundle.js
+++ b/build-scripts/bundle.js
@@ -31,8 +31,11 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
       require.resolve(
-        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts"),
-        path.resolve(paths.polymer_dir, "src/build/mdi/iconList.json")
+        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
+      ),
+    isHassioBuild &&
+      require.resolve(
+        path.resolve(paths.polymer_dir, "src/components/ha-icon-picker.ts")
       ),
   ].filter(Boolean);
 

From fd077fe0b94aa9951ec19447d10c20381bde1caa Mon Sep 17 00:00:00 2001
From: Zack <zackbarett@hey.com>
Date: Mon, 14 Feb 2022 11:06:10 -0600
Subject: [PATCH 08/11] Reviews

---
 .../ha-selector/ha-selector-icon.ts           |  3 +-
 src/panels/config/script/ha-script-editor.ts  | 36 +++++++++----------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/src/components/ha-selector/ha-selector-icon.ts b/src/components/ha-selector/ha-selector-icon.ts
index 6e360573be82..046a612d5e6f 100644
--- a/src/components/ha-selector/ha-selector-icon.ts
+++ b/src/components/ha-selector/ha-selector-icon.ts
@@ -23,8 +23,7 @@ export class HaIconSelector extends LitElement {
         .label=${this.label}
         .value=${this.value}
         @value-changed=${this._valueChanged}
-      >
-      </ha-icon-picker>
+      ></ha-icon-picker>
     `;
   }
 
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index f03b52087758..026c7cd44894 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -60,23 +60,6 @@ import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./blueprint-script-editor";
 
-const BASE_GUI_SCHEMA: HaFormSelector[] = [
-  {
-    name: "alias",
-    selector: {
-      text: {
-        type: "text",
-      },
-    },
-  },
-  {
-    name: "icon",
-    selector: {
-      icon: {},
-    },
-  },
-];
-
 export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -104,7 +87,22 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   private _schema = memoizeOne(
     (hasID: boolean, useBluePrint?: boolean, currentMode?: string) => {
-      const schema: HaFormSchema[] = [];
+      const schema: HaFormSchema[] = [
+        {
+          name: "alias",
+          selector: {
+            text: {
+              type: "text",
+            },
+          },
+        },
+        {
+          name: "icon",
+          selector: {
+            icon: {},
+          },
+        },
+      ];
 
       if (!hasID) {
         schema!.push({
@@ -146,8 +144,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         });
       }
 
-      schema.unshift(...BASE_GUI_SCHEMA);
-
       return schema;
     }
   );

From d4891625878c23aa75191c102517f5bf236fedd7 Mon Sep 17 00:00:00 2001
From: Zack Barett <zackbarett@hey.com>
Date: Mon, 14 Feb 2022 11:13:00 -0600
Subject: [PATCH 09/11] Update src/panels/config/script/ha-script-editor.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/panels/config/script/ha-script-editor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index 026c7cd44894..a938a1d33658 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -134,7 +134,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
       }
 
       if (currentMode && MODES_MAX.includes(currentMode)) {
-        schema!.push({
+        schema.push({
           name: "max",
           selector: {
             text: {

From 1a4cd69320b998b8df11140117236f93e835337c Mon Sep 17 00:00:00 2001
From: Zack Barett <zackbarett@hey.com>
Date: Mon, 14 Feb 2022 11:13:06 -0600
Subject: [PATCH 10/11] Update src/panels/config/script/ha-script-editor.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/panels/config/script/ha-script-editor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index a938a1d33658..c31c07cec014 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -105,7 +105,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
       ];
 
       if (!hasID) {
-        schema!.push({
+        schema.push({
           name: "id",
           selector: {
             text: {},

From 3f3c32e62aa9b56adb6c751104d04ff3c3a09bb6 Mon Sep 17 00:00:00 2001
From: Zack Barett <zackbarett@hey.com>
Date: Mon, 14 Feb 2022 11:13:11 -0600
Subject: [PATCH 11/11] Update src/panels/config/script/ha-script-editor.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/panels/config/script/ha-script-editor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index c31c07cec014..c4ce09a6b00c 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -114,7 +114,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
       }
 
       if (!useBluePrint) {
-        schema!.push({
+        schema.push({
           name: "mode",
           selector: {
             select: {