Script editor updates (match automation editor) (#20791)

* Show descriptions in script editor * Script editor updates (match automation editor) * review feedback
home-assistant · May 21, 2024 · 9b28c7c · 9b28c7c
1 parent d9bac06
commit 9b28c7c
Show file tree

Hide file tree

Showing 7 changed files with 370 additions and 488 deletions.
diff --git a/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts b/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts
@@ -138,7 +138,7 @@ class DialogAutomationMode extends LitElement implements HassDialog {
   }
 
   private _save(): void {
-    this._params.updateAutomation({
+    this._params.updateConfig({
       ...this._params.config,
       mode: this._newMode,
       max: this._newMax,

diff --git a/src/panels/config/automation/automation-mode-dialog/show-dialog-automation-mode.ts b/src/panels/config/automation/automation-mode-dialog/show-dialog-automation-mode.ts
@@ -1,18 +1,25 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { AutomationConfig } from "../../../../data/automation";
+import type { ScriptConfig } from "../../../../data/script";
 
 export const loadAutomationModeDialog = () =>
   import("./dialog-automation-mode");
 
 export interface AutomationModeDialog {
   config: AutomationConfig;
-  updateAutomation: (config: AutomationConfig) => void;
+  updateConfig: (config: AutomationConfig) => void;
+  onClose: () => void;
+}
+
+export interface ScriptModeDialog {
+  config: ScriptConfig;
+  updateConfig: (config: ScriptConfig) => void;
   onClose: () => void;
 }
 
 export const showAutomationModeDialog = (
   element: HTMLElement,
-  dialogParams: AutomationModeDialog
+  dialogParams: AutomationModeDialog | ScriptModeDialog
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "ha-dialog-automation-mode",

diff --git a/src/panels/config/automation/automation-rename-dialog/dialog-automation-rename.ts b/src/panels/config/automation/automation-rename-dialog/dialog-automation-rename.ts
@@ -124,7 +124,7 @@ class DialogAutomationRename extends LitElement implements HassDialog {
       this._error = "Name is required";
       return;
     }
-    this._params.updateAutomation({
+    this._params.updateConfig({
       ...this._params.config,
       alias: this._newName,
       description: this._newDescription,

diff --git a/src/panels/config/automation/automation-rename-dialog/show-dialog-automation-rename.ts b/src/panels/config/automation/automation-rename-dialog/show-dialog-automation-rename.ts
@@ -1,18 +1,25 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { AutomationConfig } from "../../../../data/automation";
+import type { ScriptConfig } from "../../../../data/script";
 
 export const loadAutomationRenameDialog = () =>
   import("./dialog-automation-rename");
 
 export interface AutomationRenameDialog {
   config: AutomationConfig;
-  updateAutomation: (config: AutomationConfig) => void;
+  updateConfig: (config: AutomationConfig) => void;
+  onClose: () => void;
+}
+
+export interface ScriptRenameDialog {
+  config: ScriptConfig;
+  updateConfig: (config: ScriptConfig) => void;
   onClose: () => void;
 }
 
 export const showAutomationRenameDialog = (
   element: HTMLElement,
-  dialogParams: AutomationRenameDialog
+  dialogParams: AutomationRenameDialog | ScriptRenameDialog
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "ha-dialog-automation-rename",

diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
@@ -28,6 +28,7 @@ import { property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
+import { computeRTL } from "../../../common/util/compute_rtl";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-fab";
@@ -117,22 +118,24 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   private _configSubscriptionsId = 1;
 
-  protected render(): TemplateResult {
+  protected render(): TemplateResult | typeof nothing {
+    if (!this._config) {
+      return nothing;
+    }
+
     const stateObj = this._entityId
       ? this.hass.states[this._entityId]
       : undefined;
+
+    const useBlueprint = "use_blueprint" in this._config;
     return html`
       <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .header=${!this._config
-          ? ""
-          : this._config.alias ||
-            this.hass.localize(
-              "ui.panel.config.automation.editor.default_name"
-            )}
+        .header=${this._config.alias ||
+        this.hass.localize("ui.panel.config.automation.editor.default_name")}
       >
         ${this._config?.id && !this.narrow
           ? html`
@@ -171,7 +174,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
           </ha-list-item>
 
-          ${stateObj && this._config && this.narrow
+          ${stateObj && this.narrow
             ? html`<a
                 href="/config/automation/trace/${encodeURIComponent(
                   this._config.id!
@@ -187,7 +190,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                   ></ha-svg-icon>
                 </ha-list-item>
               </a>`
-            : ""}
+            : nothing}
 
           <ha-list-item
             graphic="icon"
@@ -197,8 +200,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             ${this.hass.localize("ui.panel.config.automation.editor.rename")}
             <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
           </ha-list-item>
-
-          ${this._config && !("use_blueprint" in this._config)
+          ${!useBlueprint
             ? html`
                 <ha-list-item
                   graphic="icon"
@@ -214,7 +216,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                   ></ha-svg-icon>
                 </ha-list-item>
               `
-            : ""}
+            : nothing}
 
           <ha-list-item
             .disabled=${!this._readOnly && !this.automationId}
@@ -288,35 +290,38 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             </ha-svg-icon>
           </ha-list-item>
         </ha-button-menu>
-
-        ${this._config
-          ? html`
-              <div
-                class="content ${classMap({
-                  "yaml-mode": this._mode === "yaml",
-                })}"
-                @subscribe-automation-config=${this._subscribeAutomationConfig}
+        <div
+          class="content ${classMap({
+            "yaml-mode": this._mode === "yaml",
+          })}"
+          @subscribe-automation-config=${this._subscribeAutomationConfig}
+        >
+          ${this._errors || stateObj?.state === UNAVAILABLE
+            ? html`<ha-alert
+                alert-type="error"
+                .title=${stateObj?.state === UNAVAILABLE
+                  ? this.hass.localize(
+                      "ui.panel.config.automation.editor.unavailable"
+                    )
+                  : undefined}
               >
-                ${this._errors || stateObj?.state === UNAVAILABLE
-                  ? html`<ha-alert
-                      alert-type="error"
-                      .title=${stateObj?.state === UNAVAILABLE
-                        ? this.hass.localize(
-                            "ui.panel.config.automation.editor.unavailable"
-                          )
-                        : undefined}
-                    >
-                      ${this._errors || this._validationErrors}
-                      ${stateObj?.state === UNAVAILABLE
-                        ? html`<ha-svg-icon
-                            slot="icon"
-                            .path=${mdiRobotConfused}
-                          ></ha-svg-icon>`
-                        : nothing}
-                    </ha-alert>`
-                  : ""}
-                ${this._mode === "gui"
-                  ? "use_blueprint" in this._config
+                ${this._errors || this._validationErrors}
+                ${stateObj?.state === UNAVAILABLE
+                  ? html`<ha-svg-icon
+                      slot="icon"
+                      .path=${mdiRobotConfused}
+                    ></ha-svg-icon>`
+                  : nothing}
+              </ha-alert>`
+            : ""}
+          ${this._mode === "gui"
+            ? html`
+                <div
+                  class=${classMap({
+                    rtl: computeRTL(this.hass),
+                  })}
+                >
+                  ${useBlueprint
                     ? html`
                         <blueprint-automation-editor
                           .hass=${this.hass}
@@ -340,51 +345,45 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                           @value-changed=${this._valueChanged}
                           @duplicate=${this._duplicate}
                         ></manual-automation-editor>
-                      `
-                  : this._mode === "yaml"
-                    ? html` ${this._readOnly
-                          ? html`<ha-alert alert-type="warning">
-                              ${this.hass.localize(
-                                "ui.panel.config.automation.editor.read_only"
-                              )}
-                              <mwc-button
-                                slot="action"
-                                @click=${this._duplicate}
-                              >
-                                ${this.hass.localize(
-                                  "ui.panel.config.automation.editor.migrate"
-                                )}
-                              </mwc-button>
-                            </ha-alert>`
-                          : ""}
-                        ${stateObj?.state === "off"
-                          ? html`
-                              <ha-alert alert-type="info">
-                                ${this.hass.localize(
-                                  "ui.panel.config.automation.editor.disabled"
-                                )}
-                                <mwc-button
-                                  slot="action"
-                                  @click=${this._toggle}
-                                >
-                                  ${this.hass.localize(
-                                    "ui.panel.config.automation.editor.enable"
-                                  )}
-                                </mwc-button>
-                              </ha-alert>
-                            `
-                          : ""}
-                        <ha-yaml-editor
-                          copyClipboard
-                          .hass=${this.hass}
-                          .defaultValue=${this._preprocessYaml()}
-                          .readOnly=${this._readOnly}
-                          @value-changed=${this._yamlChanged}
-                        ></ha-yaml-editor>`
+                      `}
+                </div>
+              `
+            : this._mode === "yaml"
+              ? html` ${this._readOnly
+                    ? html`<ha-alert alert-type="warning">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.editor.read_only"
+                        )}
+                        <mwc-button slot="action" @click=${this._duplicate}>
+                          ${this.hass.localize(
+                            "ui.panel.config.automation.editor.migrate"
+                          )}
+                        </mwc-button>
+                      </ha-alert>`
                     : nothing}
-              </div>
-            `
-          : ""}
+                  ${stateObj?.state === "off"
+                    ? html`
+                        <ha-alert alert-type="info">
+                          ${this.hass.localize(
+                            "ui.panel.config.automation.editor.disabled"
+                          )}
+                          <mwc-button slot="action" @click=${this._toggle}>
+                            ${this.hass.localize(
+                              "ui.panel.config.automation.editor.enable"
+                            )}
+                          </mwc-button>
+                        </ha-alert>
+                      `
+                    : ""}
+                  <ha-yaml-editor
+                    copyClipboard
+                    .hass=${this.hass}
+                    .defaultValue=${this._preprocessYaml()}
+                    .readOnly=${this._readOnly}
+                    @value-changed=${this._yamlChanged}
+                  ></ha-yaml-editor>`
+              : nothing}
+        </div>
         <ha-fab
           slot="fab"
           class=${classMap({ dirty: this._dirty })}
@@ -689,7 +688,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     return new Promise((resolve) => {
       showAutomationRenameDialog(this, {
         config: this._config!,
-        updateAutomation: (config) => {
+        updateConfig: (config) => {
           this._config = config;
           this._dirty = true;
           this.requestUpdate();
@@ -704,7 +703,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     return new Promise((resolve) => {
       showAutomationModeDialog(this, {
         config: this._config!,
-        updateAutomation: (config) => {
+        updateConfig: (config) => {
           this._config = config;
           this._dirty = true;
           this.requestUpdate();