Show YAML parsing errors in automation editor (#22753)

* Show YAML parsing errors in automation editor

* make dirty on error

* formatting

src/components/ha-yaml-editor.ts

@@ -130,6 +130,7 @@ export class HaYamlEditor extends LitElement {
     this._yaml = ev.detail.value;
     let parsed;
     let isValid = true;
+    let errorMsg;
 
     if (this._yaml) {
       try {
@@ -137,6 +138,7 @@ export class HaYamlEditor extends LitElement {
       } catch (err: any) {
         // Invalid YAML
         isValid = false;
+        errorMsg = `${this.hass.localize("ui.components.yaml-editor.error", { reason: err.reason })}${err.mark ? ` (${this.hass.localize("ui.components.yaml-editor.error_location", { line: err.mark.line + 1, column: err.mark.column + 1 })})` : ""}`;
       }
     } else {
       parsed = {};
@@ -145,7 +147,11 @@ export class HaYamlEditor extends LitElement {
     this.value = parsed;
     this.isValid = isValid;
 
-    fireEvent(this, "value-changed", { value: parsed, isValid } as any);
+    fireEvent(this, "value-changed", {
+      value: parsed,
+      isValid,
+      errorMsg,
+    } as any);
   }
 
   get yaml() {

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

@@ -103,6 +103,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   @state() private _errors?: string;
 
+  @state() private _yamlErrors?: string;
+
   @state() private _entityId?: string;
 
   @state() private _mode: "gui" | "yaml" = "gui";
@@ -629,15 +631,17 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   private _yamlChanged(ev: CustomEvent) {
     ev.stopPropagation();
+    this._dirty = true;
     if (!ev.detail.isValid) {
+      this._yamlErrors = ev.detail.errorMsg;
       return;
     }
+    this._yamlErrors = undefined;
     this._config = {
       id: this._config?.id,
       ...normalizeAutomationConfig(ev.detail.value),
     };
     this._errors = undefined;
-    this._dirty = true;
   }
 
   private async confirmUnsavedChanged(): Promise<boolean> {
@@ -753,6 +757,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   }
 
   private _switchUiMode() {
+    this._yamlErrors = undefined;
     this._mode = "gui";
   }
 
@@ -792,6 +797,13 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   }
 
   private async _saveAutomation(): Promise<void> {
+    if (this._yamlErrors) {
+      showToast(this, {
+        message: this._yamlErrors,
+      });
+      return;
+    }
+
     const id = this.automationId || String(Date.now());
     if (!this.automationId) {
       const saved = await this._promptAutomationAlias();

src/translations/en.json

@@ -1089,7 +1089,9 @@
         "temperature_down": "Decrease temperature"
       },
       "yaml-editor": {
-        "copy_to_clipboard": "[%key:ui::panel::config::automation::editor::copy_to_clipboard%]"
+        "copy_to_clipboard": "[%key:ui::panel::config::automation::editor::copy_to_clipboard%]",
+        "error": "Error in parsing YAML: {reason}",
+        "error_location": "line: {line}, column: {column}"
       },
       "state-content-picker": {
         "state": "State",