Automation editor: fix yaml editor and editor switch (#26772)

src/data/automation.ts

@@ -556,7 +556,6 @@ export interface AutomationClipboard {
 }
 
 export interface BaseSidebarConfig {
-  toggleYamlMode: () => boolean;
   delete: () => void;
   close: (focus?: boolean) => void;
 }
@@ -568,6 +567,7 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig {
   duplicate: () => void;
   cut: () => void;
   copy: () => void;
+  toggleYamlMode: () => void;
   config: Trigger;
   yamlMode: boolean;
   uiSupported: boolean;
@@ -581,6 +581,7 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig {
   duplicate: () => void;
   cut: () => void;
   copy: () => void;
+  toggleYamlMode: () => void;
   config: Condition;
   yamlMode: boolean;
   uiSupported: boolean;
@@ -594,6 +595,7 @@ export interface ActionSidebarConfig extends BaseSidebarConfig {
   cut: () => void;
   copy: () => void;
   run: () => void;
+  toggleYamlMode: () => void;
   config: {
     action: Action;
   };
@@ -615,6 +617,7 @@ export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
     key: string;
     excludeKeys: string[];
   };
+  toggleYamlMode: () => void;
   yamlMode: boolean;
 }
 

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

@@ -97,7 +97,7 @@ export default class HaAutomationActionEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    fireEvent(this, "value-changed", {
+    fireEvent(this, "yaml-changed", {
       value: migrateAutomationAction(ev.detail.value),
     });
   }

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -688,7 +688,7 @@ export default class HaAutomationActionRow extends LitElement {
       },
       toggleYamlMode: () => {
         this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
       },
       disable: this._onDisable,
       delete: this._onDelete,

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

@@ -103,8 +103,7 @@ export default class HaAutomationConditionEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    // @ts-ignore
+    fireEvent(this, "yaml-changed", { value: ev.detail.value });
-    fireEvent(this, "value-changed", { value: ev.detail.value, yaml: true });
   }
 
   private _onUiChanged(ev: CustomEvent) {

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -660,7 +660,7 @@ export default class HaAutomationConditionRow extends LitElement {
       },
       toggleYamlMode: () => {
         this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
       },
       disable: this._onDisable,
       delete: this._onDelete,

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

@@ -1,6 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-bottom-sheet";
 import type { HaBottomSheet } from "../../../components/ha-bottom-sheet";
 import {
@@ -34,6 +33,8 @@ export default class HaAutomationSidebar extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _yamlMode = false;
 
   @query("ha-bottom-sheet") private _bottomSheetElement?: HaBottomSheet;
@@ -52,6 +53,7 @@ export default class HaAutomationSidebar extends LitElement {
           .narrow=${this.narrow}
           .disabled=${this.disabled}
           .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
           @close-sidebar=${this._handleCloseSidebar}
         ></ha-automation-sidebar-trigger>
@@ -67,6 +69,7 @@ export default class HaAutomationSidebar extends LitElement {
           .narrow=${this.narrow}
           .disabled=${this.disabled}
           .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
           @close-sidebar=${this._handleCloseSidebar}
         ></ha-automation-sidebar-condition>
@@ -82,6 +85,7 @@ export default class HaAutomationSidebar extends LitElement {
           .narrow=${this.narrow}
           .disabled=${this.disabled}
           .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
           @close-sidebar=${this._handleCloseSidebar}
         ></ha-automation-sidebar-action>
@@ -110,6 +114,7 @@ export default class HaAutomationSidebar extends LitElement {
           .narrow=${this.narrow}
           .disabled=${this.disabled}
           .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
           @close-sidebar=${this._handleCloseSidebar}
         ></ha-automation-sidebar-script-field-selector>
@@ -125,6 +130,7 @@ export default class HaAutomationSidebar extends LitElement {
           .narrow=${this.narrow}
           .disabled=${this.disabled}
           .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
           @close-sidebar=${this._handleCloseSidebar}
         ></ha-automation-sidebar-script-field>
@@ -197,13 +203,7 @@ export default class HaAutomationSidebar extends LitElement {
   }
 
   private _toggleYamlMode = () => {
-    this._yamlMode = this.config!.toggleYamlMode();
+    (this.config as ActionSidebarConfig)?.toggleYamlMode();
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.config,
-        yamlMode: this._yamlMode,
-      },
-    });
   };
 
   static styles = css`
@@ -235,5 +235,8 @@ declare global {
 
   interface HASSDomEvents {
     "toggle-yaml-mode": undefined;
+    "yaml-changed": {
+      value: unknown;
+    };
   }
 }

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

@@ -92,6 +92,8 @@ export class HaManualAutomationEditor extends LitElement {
 
   @state() private _sidebarConfig?: SidebarConfig;
 
+  @state() private _sidebarKey?: string;
+
   @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
 
   private _previousConfig?: ManualAutomationConfig;
@@ -287,6 +289,7 @@ export class HaManualAutomationEditor extends LitElement {
             .config=${this._sidebarConfig}
             @value-changed=${this._sidebarConfigChanged}
             .disabled=${this.disabled}
+            .sidebarKey=${this._sidebarKey}
           ></ha-automation-sidebar>
         </div>
       </div>
@@ -314,6 +317,7 @@ export class HaManualAutomationEditor extends LitElement {
     // deselect previous selected row
     this._sidebarConfig?.close?.();
     this._sidebarConfig = ev.detail;
+    this._sidebarKey = JSON.stringify(this._sidebarConfig);
 
     await this._sidebarElement?.updateComplete;
     this._sidebarElement?.focus();

src/panels/config/automation/option/ha-automation-option-row.ts

@@ -395,7 +395,6 @@ export default class HaAutomationOptionRow extends LitElement {
       rename: () => {
         this._renameOption();
       },
-      toggleYamlMode: () => false, // no yaml mode for options
       delete: this._removeOption,
       duplicate: this._duplicateOption,
       defaultOption: !!this.defaultActions,

src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts

@@ -11,6 +11,7 @@ import {
 } from "@mdi/js";
 import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
@@ -41,6 +42,8 @@ export default class HaAutomationSidebarAction extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _warnings?: string[];
 
   @query(".sidebar-editor")
@@ -181,18 +184,22 @@ export default class HaAutomationSidebarAction extends LitElement {
       </ha-md-menu-item>
       ${description && !this.yamlMode
         ? html`<div class="description">${description}</div>`
-        : html`<ha-automation-action-editor
+        : keyed(
-            class="sidebar-editor"
+            this.sidebarKey,
-            .hass=${this.hass}
+            html`<ha-automation-action-editor
-            .action=${actionConfig}
+              class="sidebar-editor"
-            .yamlMode=${this.yamlMode}
+              .hass=${this.hass}
-            .uiSupported=${this.config.uiSupported}
+              .action=${actionConfig}
-            @value-changed=${this._valueChangedSidebar}
+              .yamlMode=${this.yamlMode}
-            sidebar
+              .uiSupported=${this.config.uiSupported}
-            narrow
+              @value-changed=${this._valueChangedSidebar}
-            .disabled=${this.disabled}
+              @yaml-changed=${this._yamlChangedSidebar}
-            @ui-mode-not-available=${this._handleUiModeNotAvailable}
+              sidebar
-          ></ha-automation-action-editor>`}
+              narrow
+              .disabled=${this.disabled}
+              @ui-mode-not-available=${this._handleUiModeNotAvailable}
+            ></ha-automation-action-editor>`
+          )}
     </ha-automation-sidebar-card>`;
   }
 
@@ -220,6 +227,12 @@ export default class HaAutomationSidebarAction extends LitElement {
     }
   }
 
+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
   private _toggleYamlMode = () => {
     fireEvent(this, "toggle-yaml-mode");
   };

src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts

@@ -11,6 +11,7 @@ import {
 } from "@mdi/js";
 import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { ConditionSidebarConfig } from "../../../../data/automation";
@@ -35,6 +36,8 @@ export default class HaAutomationSidebarCondition extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _warnings?: string[];
 
   @query(".sidebar-editor")
@@ -173,17 +176,21 @@ export default class HaAutomationSidebarCondition extends LitElement {
       </ha-md-menu-item>
       ${description && !this.yamlMode
         ? html`<div class="description">${description}</div>`
-        : html`<ha-automation-condition-editor
+        : keyed(
-            class="sidebar-editor"
+            this.sidebarKey,
-            .hass=${this.hass}
+            html`<ha-automation-condition-editor
-            .condition=${this.config.config}
+              class="sidebar-editor"
-            .yamlMode=${this.yamlMode}
+              .hass=${this.hass}
-            .uiSupported=${this.config.uiSupported}
+              .condition=${this.config.config}
-            @value-changed=${this._valueChangedSidebar}
+              .yamlMode=${this.yamlMode}
-            .disabled=${this.disabled}
+              .uiSupported=${this.config.uiSupported}
-            @ui-mode-not-available=${this._handleUiModeNotAvailable}
+              @value-changed=${this._valueChangedSidebar}
-            sidebar
+              @yaml-changed=${this._yamlChangedSidebar}
-          ></ha-automation-condition-editor> `}
+              .disabled=${this.disabled}
+              @ui-mode-not-available=${this._handleUiModeNotAvailable}
+              sidebar
+            ></ha-automation-condition-editor>`
+          )}
     </ha-automation-sidebar-card>`;
   }
 
@@ -209,6 +216,12 @@ export default class HaAutomationSidebarCondition extends LitElement {
     }
   }
 
+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
   private _toggleYamlMode = () => {
     fireEvent(this, "toggle-yaml-mode");
   };

src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts

@@ -1,6 +1,7 @@
 import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
 import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
 import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
@@ -24,6 +25,8 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _warnings?: string[];
 
   @query(".sidebar-editor")
@@ -81,14 +84,18 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
         )}
         <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
       </ha-md-menu-item>
-      <ha-script-field-selector-editor
+      ${keyed(
-        class="sidebar-editor"
+        this.sidebarKey,
-        .hass=${this.hass}
+        html`<ha-script-field-selector-editor
-        .field=${this.config.config.field}
+          class="sidebar-editor"
-        .disabled=${this.disabled}
+          .hass=${this.hass}
-        @value-changed=${this._valueChangedSidebar}
+          .field=${this.config.config.field}
-        .yamlMode=${this.yamlMode}
+          .disabled=${this.disabled}
-      ></ha-script-field-selector-editor>
+          @value-changed=${this._valueChangedSidebar}
+          @yaml-changed=${this._yamlChangedSidebar}
+          .yamlMode=${this.yamlMode}
+        ></ha-script-field-selector-editor>`
+      )}
     </ha-automation-sidebar-card>`;
   }
 
@@ -116,6 +123,12 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
     }
   }
 
+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
   private _toggleYamlMode = () => {
     fireEvent(this, "toggle-yaml-mode");
   };

src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts

@@ -1,6 +1,7 @@
 import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
 import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
@@ -23,6 +24,8 @@ export default class HaAutomationSidebarScriptField extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _warnings?: string[];
 
   @query(".sidebar-editor")
@@ -74,16 +77,20 @@ export default class HaAutomationSidebarScriptField extends LitElement {
         )}
         <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
       </ha-md-menu-item>
-      <ha-script-field-editor
+      ${keyed(
-        class="sidebar-editor"
+        this.sidebarKey,
-        .hass=${this.hass}
+        html`<ha-script-field-editor
-        .field=${this.config.config.field}
+          class="sidebar-editor"
-        .key=${this.config.config.key}
+          .hass=${this.hass}
-        .excludeKeys=${this.config.config.excludeKeys}
+          .field=${this.config.config.field}
-        .disabled=${this.disabled}
+          .key=${this.config.config.key}
-        .yamlMode=${this.yamlMode}
+          .excludeKeys=${this.config.config.excludeKeys}
-        @value-changed=${this._valueChangedSidebar}
+          .disabled=${this.disabled}
-      ></ha-script-field-editor>
+          .yamlMode=${this.yamlMode}
+          @value-changed=${this._valueChangedSidebar}
+          @yaml-changed=${this._yamlChangedSidebar}
+        ></ha-script-field-editor>`
+      )}
     </ha-automation-sidebar-card>`;
   }
 
@@ -110,6 +117,12 @@ export default class HaAutomationSidebarScriptField extends LitElement {
     }
   }
 
+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
   private _toggleYamlMode = () => {
     fireEvent(this, "toggle-yaml-mode");
   };

src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts

@@ -11,6 +11,7 @@ import {
 } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { TriggerSidebarConfig } from "../../../../data/automation";
@@ -35,6 +36,8 @@ export default class HaAutomationSidebarTrigger extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
+
   @state() private _requestShowId = false;
 
   @state() private _warnings?: string[];
@@ -183,18 +186,22 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           )}
           <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
         </ha-md-menu-item>
-        <ha-automation-trigger-editor
+        ${keyed(
-          class="sidebar-editor"
+          this.sidebarKey,
-          .hass=${this.hass}
+          html`<ha-automation-trigger-editor
-          .trigger=${this.config.config}
+            class="sidebar-editor"
-          @value-changed=${this._valueChangedSidebar}
+            .hass=${this.hass}
-          .uiSupported=${this.config.uiSupported}
+            .trigger=${this.config.config}
-          .showId=${this._requestShowId}
+            @value-changed=${this._valueChangedSidebar}
-          .yamlMode=${this.yamlMode}
+            @yaml-changed=${this._yamlChangedSidebar}
-          .disabled=${this.disabled}
+            .uiSupported=${this.config.uiSupported}
-          @ui-mode-not-available=${this._handleUiModeNotAvailable}
+            .showId=${this._requestShowId}
-          sidebar
+            .yamlMode=${this.yamlMode}
-        ></ha-automation-trigger-editor>
+            .disabled=${this.disabled}
+            @ui-mode-not-available=${this._handleUiModeNotAvailable}
+            sidebar
+          ></ha-automation-trigger-editor>`
+        )}
       </ha-automation-sidebar-card>
     `;
   }
@@ -221,6 +228,12 @@ export default class HaAutomationSidebarTrigger extends LitElement {
     }
   }
 
+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
   private _toggleYamlMode = () => {
     fireEvent(this, "toggle-yaml-mode");
   };

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

@@ -121,7 +121,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
     if (!ev.detail.isValid) {
       return;
     }
-    fireEvent(this, "value-changed", {
+    fireEvent(this, "yaml-changed", {
       value: migrateAutomationTrigger(ev.detail.value),
     });
   }

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -494,7 +494,7 @@ export default class HaAutomationTriggerRow extends LitElement {
       },
       toggleYamlMode: () => {
         this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
       },
       disable: this._onDisable,
       delete: this._onDelete,

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

@@ -152,7 +152,12 @@ export default class HaScriptFieldEditor extends LitElement {
     ev.stopPropagation();
     const value = { ...ev.detail.value };
 
-    if (typeof value !== "object" || Object.keys(value).length !== 1) {
+    if (
+      typeof value !== "object" ||
+      Object.keys(value).length !== 1 ||
+      !value[Object.keys(value)[0]] ||
+      !value[Object.keys(value)[0]].selector
+    ) {
       this._yamlError = "yaml_error";
       return;
     }
@@ -165,7 +170,7 @@ export default class HaScriptFieldEditor extends LitElement {
 
     const newValue = { ...value[key], key };
 
-    fireEvent(this, "value-changed", { value: newValue });
+    fireEvent(this, "yaml-changed", { value: newValue });
   }
 
   private _computeLabelCallback = (

src/panels/config/script/ha-script-field-row.ts

@@ -218,7 +218,7 @@ export default class HaScriptFieldRow extends LitElement {
       },
       toggleYamlMode: () => {
         this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
       },
       delete: this._onDelete,
       config: {

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

@@ -132,7 +132,7 @@ export default class HaScriptFieldSelectorEditor extends LitElement {
       return;
     }
 
-    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "yaml-changed", { value });
   }
 
   private _computeLabelCallback = (

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

@@ -73,6 +73,8 @@ export class HaManualScriptEditor extends LitElement {
 
   @state() private _sidebarConfig?: SidebarConfig;
 
+  @state() private _sidebarKey?: string;
+
   @query("ha-script-fields")
   private _scriptFields?: HaScriptFields;
 
@@ -223,6 +225,7 @@ export class HaManualScriptEditor extends LitElement {
         </div>
         <div class="sidebar-positioner">
           <ha-automation-sidebar
+            .sidebarKey=${this._sidebarKey}
             tabindex="-1"
             class=${classMap({ hidden: !this._sidebarConfig })}
             .narrow=${this.narrow}
@@ -463,6 +466,7 @@ export class HaManualScriptEditor extends LitElement {
     // deselect previous selected row
     this._sidebarConfig?.close?.();
     this._sidebarConfig = ev.detail;
+    this._sidebarKey = JSON.stringify(this._sidebarConfig);
 
     await this._sidebarElement?.updateComplete;
     this._sidebarElement?.focus();