Changes before error encountered

Co-authored-by: wendevlin <12148533+wendevlin@users.noreply.github.com>

Author: Copilot

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

@@ -27,11 +27,9 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
-import { transform } from "../../../common/decorators/transform";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { goBack, navigate } from "../../../common/navigate";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
-import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
@@ -72,27 +70,24 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
-import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
 import { haStyle } from "../../../resources/styles";
 import type {
   Entries,
-  HomeAssistant,
-  Route,
   ValueChangedEvent,
 } from "../../../types";
 import { isMac } from "../../../util/is_mac";
 import { showToast } from "../../../util/toast";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
 import { showAutomationModeDialog } from "./automation-mode-dialog/show-dialog-automation-mode";
 import {
-  type EntityRegistryUpdate,
   showAutomationSaveDialog,
 } from "./automation-save-dialog/show-dialog-automation-save";
 import { showAutomationSaveTimeoutDialog } from "./automation-save-timeout-dialog/show-dialog-automation-save-timeout";
 import "./blueprint-automation-editor";
+import { AutomationScriptEditorMixin } from "./ha-automation-script-editor-mixin";
 import "./manual-automation-editor";
 import type { HaManualAutomationEditor } from "./manual-automation-editor";
 import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
@@ -119,53 +114,13 @@ declare global {
 }
 
 @customElement("ha-automation-editor")
-export class HaAutomationEditor extends PreventUnsavedMixin(
-  KeyboardShortcutMixin(LitElement)
+export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationConfig>(
+  PreventUnsavedMixin(KeyboardShortcutMixin(LitElement))
 ) {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public automationId: string | null = null;
 
-  @property({ attribute: false }) public entityId: string | null = null;
-
   @property({ attribute: false }) public automations!: AutomationEntity[];
 
-  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
-
-  @property({ type: Boolean }) public narrow = false;
-
-  @property({ attribute: false }) public route!: Route;
-
-  @state() private _config?: AutomationConfig;
-
-  @state() private _dirty = false;
-
-  @state() private _errors?: string;
-
-  @state() private _yamlErrors?: string;
-
-  @state() private _entityId?: string;
-
-  @state() private _mode: "gui" | "yaml" = "gui";
-
-  @state() private _readOnly = false;
-
-  @state() private _validationErrors?: (string | TemplateResult)[];
-
-  @state() private _blueprintConfig?: BlueprintAutomationConfig;
-
-  @state()
-  @consume({ context: fullEntitiesContext, subscribe: true })
-  @transform<EntityRegistryEntry[], EntityRegistryEntry>({
-    transformer: function (this: HaAutomationEditor, value) {
-      return value.find(({ entity_id }) => entity_id === this._entityId);
-    },
-    watch: ["_entityId"],
-  })
-  private _registryEntry?: EntityRegistryEntry;
-
-  @state() private _saving = false;
-
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityRegistry!: EntityRegistryEntry[];
@@ -180,14 +135,8 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
 
   private _configSubscriptionsId = 1;
 
-  private _entityRegistryUpdate?: EntityRegistryUpdate;
-
   private _newAutomationId?: string;
 
-  private _entityRegCreated?: (
-    value: PromiseLike<EntityRegistryEntry> | EntityRegistryEntry
-  ) => void;
-
   private _undoRedoController = new UndoRedoController<AutomationConfig>(this, {
     apply: (config) => this._applyUndoRedo(config),
     currentConfig: () => this._config!,
@@ -780,13 +729,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     fireEvent(this, "hass-more-info", { entityId: this._entityId });
   }
 
-  private _showSettings() {
-    showMoreInfoDialog(this, {
-      entityId: this._entityId!,
-      view: "settings",
-    });
-  }
-
   private _editCategory() {
     if (!this._registryEntry) {
       showAlertDialog(this, {
@@ -861,7 +803,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     this._errors = undefined;
   }
 
-  private async _confirmUnsavedChanged(): Promise<boolean> {
+  protected async _confirmUnsavedChanged(): Promise<boolean> {
     if (!this._dirty) {
       return true;
     }
@@ -906,13 +848,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     });
   }
 
-  private _backTapped = async () => {
-    const result = await this._confirmUnsavedChanged();
-    if (result) {
-      afterNextRender(() => goBack("/config"));
-    }
-  };
-
   private async _takeControl() {
     const config = this._config as BlueprintAutomationConfig;
 
@@ -943,21 +878,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     }
   }
 
-  private _revertBlueprint() {
-    this._config = this._blueprintConfig;
-    if (this._mode === "yaml") {
-      this.renderRoot.querySelector("ha-yaml-editor")?.setValue(this._config);
-    }
-    this._blueprintConfig = undefined;
-    this._readOnly = false;
-  }
-
-  private _takeControlSave() {
-    this._readOnly = false;
-    this._dirty = true;
-    this._blueprintConfig = undefined;
-  }
-
   private async _duplicate() {
     const result = this._readOnly
       ? await showConfirmationDialog(this, {
@@ -1001,28 +921,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     }
   }
 
-  private async _switchUiMode() {
-    if (this._yamlErrors) {
-      const result = await showConfirmationDialog(this, {
-        text: html`${this.hass.localize(
-            "ui.panel.config.automation.editor.switch_ui_yaml_error"
-          )}<br /><br />${this._yamlErrors}`,
-        confirmText: this.hass!.localize("ui.common.continue"),
-        destructive: true,
-        dismissText: this.hass!.localize("ui.common.cancel"),
-      });
-      if (!result) {
-        return;
-      }
-    }
-    this._yamlErrors = undefined;
-    this._mode = "gui";
-  }
-
-  private _switchYamlMode() {
-    this._mode = "yaml";
-  }
-
   private async _promptAutomationAlias(): Promise<boolean> {
     return new Promise((resolve) => {
       showAutomationSaveDialog(this, {
@@ -1173,14 +1071,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     };
   }
 
-  protected get isDirty() {
-    return this._dirty;
-  }
-
-  protected async promptDiscardChanges() {
-    return this._confirmUnsavedChanged();
-  }
-
   // @ts-ignore
   private _collapseAll() {
     this._manualEditor?.collapseAll();

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

@@ -0,0 +1,135 @@
+import { consume } from "@lit/context";
+import type { TemplateResult } from "lit";
+import { html, LitElement } from "lit";
+import { property, state } from "lit/decorators";
+import { transform } from "../../../common/decorators/transform";
+import { goBack } from "../../../common/navigate";
+import { afterNextRender } from "../../../common/util/render-status";
+import { fullEntitiesContext } from "../../../data/context";
+import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
+import {
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
+import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
+import type { Constructor, HomeAssistant, Route } from "../../../types";
+import type { EntityRegistryUpdate } from "./automation-save-dialog/show-dialog-automation-save";
+
+type BaseEditorConfig = { alias?: string };
+
+export const AutomationScriptEditorMixin = <
+  TConfig extends BaseEditorConfig,
+  T extends Constructor<LitElement>,
+>(
+  superClass: T
+) =>
+  class AutomationScriptEditorClass extends superClass {
+    @property({ attribute: false }) public hass!: HomeAssistant;
+
+    @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
+
+    @property({ type: Boolean }) public narrow = false;
+
+    @property({ attribute: false }) public route!: Route;
+
+    @property({ attribute: false }) public entityId: string | null = null;
+
+    @state() protected _dirty = false;
+
+    @state() protected _errors?: string;
+
+    @state() protected _yamlErrors?: string;
+
+    @state() protected _entityId?: string;
+
+    @state() protected _mode: "gui" | "yaml" = "gui";
+
+    @state() protected _readOnly = false;
+
+    @state() protected _saving = false;
+
+    @state() protected _validationErrors?: (string | TemplateResult)[];
+
+    @state() protected _config?: TConfig;
+
+    @state() protected _blueprintConfig?: TConfig;
+
+    @state()
+    @consume({ context: fullEntitiesContext, subscribe: true })
+    @transform<EntityRegistryEntry[], EntityRegistryEntry>({
+      transformer: function (this: { _entityId?: string }, value) {
+        return value.find(({ entity_id }) => entity_id === this._entityId);
+      },
+      watch: ["_entityId"],
+    })
+    protected _registryEntry?: EntityRegistryEntry;
+
+    protected _entityRegistryUpdate?: EntityRegistryUpdate;
+
+    protected _entityRegCreated?: (
+      value: PromiseLike<EntityRegistryEntry> | EntityRegistryEntry
+    ) => void;
+
+    protected _showSettings() {
+      showMoreInfoDialog(this, {
+        entityId: this._entityId!,
+        view: "settings",
+      });
+    }
+
+    protected async _switchUiMode() {
+      if (this._yamlErrors) {
+        const result = await showConfirmationDialog(this, {
+          text: html`${this.hass.localize(
+              "ui.panel.config.automation.editor.switch_ui_yaml_error"
+            )}<br /><br />${this._yamlErrors}`,
+          confirmText: this.hass!.localize("ui.common.continue"),
+          destructive: true,
+          dismissText: this.hass!.localize("ui.common.cancel"),
+        });
+        if (!result) {
+          return;
+        }
+      }
+      this._yamlErrors = undefined;
+      this._mode = "gui";
+    }
+
+    protected _switchYamlMode() {
+      this._mode = "yaml";
+    }
+
+    protected _takeControlSave() {
+      this._readOnly = false;
+      this._dirty = true;
+      this._blueprintConfig = undefined;
+    }
+
+    protected _revertBlueprint() {
+      this._config = this._blueprintConfig;
+      if (this._mode === "yaml") {
+        this.renderRoot.querySelector("ha-yaml-editor")?.setValue(this._config);
+      }
+      this._blueprintConfig = undefined;
+      this._readOnly = false;
+    }
+
+    protected _backTapped = async () => {
+      const result = await this._confirmUnsavedChanged();
+      if (result) {
+        afterNextRender(() => goBack("/config"));
+      }
+    };
+
+    protected get isDirty() {
+      return this._dirty;
+    }
+
+    protected async promptDiscardChanges() {
+      return this._confirmUnsavedChanged();
+    }
+
+    // eslint-disable-next-line @typescript-eslint/class-literal-property-style
+    protected _confirmUnsavedChanged(): Promise<boolean> {
+      return Promise.resolve(true);
+    }
+  };