Handle delay templates properly + error handling tweaks (#8578)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/data/script.ts

@@ -55,7 +55,7 @@ export interface DelayActionParts {
   days?: number;
 }
 export interface DelayAction {
-  delay: number | Partial<DelayActionParts>;
+  delay: number | Partial<DelayActionParts> | string;
 }
 
 export interface SceneAction {

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

@@ -193,12 +193,16 @@ export default class HaAutomationActionRow extends LitElement {
           </div>
           ${this._warnings
             ? html`<div class="warning">
-                UI editor is not supported for this config:
+                ${this.hass.localize("ui.errors.config.editor_not_supported")}:
                 <br />
-                <ul>
+                ${this._warnings!.length > 0 && this._warnings![0] !== undefined
-                  ${this._warnings.map((warning) => html`<li>${warning}</li>`)}
+                  ? html` <ul>
-                </ul>
+                      ${this._warnings!.map(
-                You can still edit your config in YAML.
+                        (warning) => html`<li>${warning}</li>`
+                      )}
+                    </ul>`
+                  : ""}
+                ${this.hass.localize("ui.errors.config.edit_in_yaml_supported")}
               </div>`
             : ""}
           ${yamlMode
@@ -212,7 +216,11 @@ export default class HaAutomationActionRow extends LitElement {
                       )}
                     `
                   : ""}
-                <h2>Edit in YAML</h2>
+                <h2>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.edit_yaml"
+                  )}
+                </h2>
                 <ha-yaml-editor
                   .defaultValue=${this.action}
                   @value-changed=${this._onYamlChange}
@@ -329,6 +337,7 @@ export default class HaAutomationActionRow extends LitElement {
   }
 
   private _switchYamlMode() {
+    this._warnings = undefined;
     this._yamlMode = !this._yamlMode;
   }
 

src/panels/config/automation/action/types/ha-automation-action-delay.ts

@@ -1,6 +1,13 @@
 import "@polymer/paper-input/paper-input";
-import { customElement, html, LitElement, property } from "lit-element";
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+} from "lit-element";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import { hasTemplate } from "../../../../../common/string/has-template";
 import "../../../../../components/entity/ha-entity-picker";
 import { HaFormTimeData } from "../../../../../components/ha-form/ha-form";
 import "../../../../../components/ha-service-picker";
@@ -14,45 +21,57 @@ export class HaDelayAction extends LitElement implements ActionElement {
 
   @property() public action!: DelayAction;
 
+  @property() public _timeData!: HaFormTimeData;
+
   public static get defaultConfig() {
     return { delay: "" };
   }
 
-  protected render() {
+  protected updated(changedProperties: PropertyValues) {
-    let data: HaFormTimeData = {};
+    if (!changedProperties.has("action")) {
+      return;
+    }
+    // Check for templates in action. If found, revert to YAML mode.
+    if (this.action && hasTemplate(this.action)) {
+      fireEvent(
+        this,
+        "ui-mode-not-available",
+        Error(this.hass.localize("ui.errors.config.no_template_editor_support"))
+      );
+      return;
+    }
 
     if (typeof this.action.delay !== "object") {
-      if (isNaN(this.action.delay)) {
+      if (typeof this.action.delay === "string" || isNaN(this.action.delay)) {
         const parts = this.action.delay?.toString().split(":") || [];
-        data = {
+        this._timeData = {
           hours: Number(parts[0]) || 0,
           minutes: Number(parts[1]) || 0,
           seconds: Number(parts[2]) || 0,
           milliseconds: Number(parts[3]) || 0,
         };
       } else {
-        data = { seconds: this.action.delay };
+        this._timeData = { seconds: this.action.delay };
       }
-    } else {
+      return;
-      const { days, minutes, seconds, milliseconds } = this.action.delay;
-      let { hours } = this.action.delay || 0;
-      hours = (hours || 0) + (days || 0) * 24;
-      data = {
-        hours: hours,
-        minutes: minutes,
-        seconds: seconds,
-        milliseconds: milliseconds,
-      };
     }
+    const { days, minutes, seconds, milliseconds } = this.action.delay;
+    let { hours } = this.action.delay || 0;
+    hours = (hours || 0) + (days || 0) * 24;
+    this._timeData = {
+      hours: hours,
+      minutes: minutes,
+      seconds: seconds,
+      milliseconds: milliseconds,
+    };
+  }
 
-    return html`
+  protected render() {
-      <ha-time-input
+    return html`<ha-time-input
-        .data=${data}
+      .data=${this._timeData}
-        enableMillisecond
+      enableMillisecond
-        @value-changed=${this._valueChanged}
+      @value-changed=${this._valueChanged}
-      >
+    ></ha-time-input>`;
-      </ha-time-input>
-    `;
   }
 
   private _valueChanged(ev: CustomEvent) {

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

@@ -63,7 +63,11 @@ export default class HaAutomationConditionEditor extends LitElement {
                   )}
                 `
               : ""}
-            <h2>Edit in YAML</h2>
+            <h2>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.edit_yaml"
+              )}
+            </h2>
             <ha-yaml-editor
               .defaultValue=${this.condition}
               @value-changed=${this._onYamlChange}

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

@@ -136,7 +136,11 @@ export default class HaAutomationTriggerRow extends LitElement {
                       )}
                     `
                   : ""}
-                <h2>Edit in YAML</h2>
+                <h2>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.edit_yaml"
+                  )}
+                </h2>
                 <ha-yaml-editor
                   .defaultValue=${this.trigger}
                   @value-changed=${this._onYamlChange}

src/panels/lovelace/editor/hui-element-editor.ts

@@ -234,9 +234,13 @@ export abstract class HuiElementEditor<T> extends LitElement {
               <div class="warning">
                 ${this.hass.localize("ui.errors.config.editor_not_supported")}:
                 <br />
-                <ul>
+                ${this._warnings!.length > 0 && this._warnings![0] !== undefined
-                  ${this._warnings!.map((warning) => html`<li>${warning}</li>`)}
+                  ? html` <ul>
-                </ul>
+                      ${this._warnings!.map(
+                        (warning) => html`<li>${warning}</li>`
+                      )}
+                    </ul>`
+                  : ""}
                 ${this.hass.localize("ui.errors.config.edit_in_yaml_supported")}
               </div>
             `

src/translations/en.json

@@ -800,7 +800,8 @@
         "edit_in_yaml_supported": "You can still edit your config in YAML.",
         "key_missing": "Required key \"{key}\" is missing.",
         "key_not_expected": "Key \"{key}\" is not expected or not supported by the visual editor.",
-        "key_wrong_type": "The provided value for \"{key}\" is not supported by the visual editor. We support ({type_correct}) but received ({type_wrong})."
+        "key_wrong_type": "The provided value for \"{key}\" is not supported by the visual editor. We support ({type_correct}) but received ({type_wrong}).",
+        "no_template_editor_support": "Templates not supported in visual editor"
       }
     },
     "login-form": {
@@ -1235,8 +1236,8 @@
               "queued": "Queue length",
               "parallel": "Max number of parallel runs"
             },
-            "edit_yaml": "Edit as YAML",
+            "edit_yaml": "Edit in YAML",
-            "edit_ui": "Edit with UI",
+            "edit_ui": "Edit in visual editor",
             "copy_to_clipboard": "Copy to Clipboard",
             "triggers": {
               "name": "Trigger",
@@ -1247,7 +1248,7 @@
               "duplicate": "Duplicate",
               "delete": "[%key:ui::panel::mailbox::delete_button%]",
               "delete_confirm": "Are you sure you want to delete this?",
-              "unsupported_platform": "No UI support for platform: {platform}",
+              "unsupported_platform": "No visual editor support for platform: {platform}",
               "type_select": "Trigger type",
               "type": {
                 "device": {
@@ -1349,7 +1350,7 @@
               "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
               "delete": "[%key:ui::panel::mailbox::delete_button%]",
               "delete_confirm": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm%]",
-              "unsupported_condition": "No UI support for condition: {condition}",
+              "unsupported_condition": "No visual editor support for condition: {condition}",
               "type_select": "Condition type",
               "type": {
                 "and": {
@@ -1425,7 +1426,7 @@
               "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
               "delete": "[%key:ui::panel::mailbox::delete_button%]",
               "delete_confirm": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm%]",
-              "unsupported_action": "No UI support for action: {action}",
+              "unsupported_action": "No visual editor support for action: {action}",
               "type_select": "Action type",
               "type": {
                 "service": {