Handle when choose is not an array (#9028)

src/components/trace/hat-script-graph.ts

@@ -143,7 +143,7 @@ class HatScriptGraph extends LitElement {
     const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
     const trace_path = trace?.[0].result
       ? trace[0].result.choice === "default"
-        ? [config.choose?.length || 0]
+        ? [Array.isArray(config.choose) ? config.choose.length : 0]
         : [trace[0].result.choice]
       : [];
     return html`
@@ -167,31 +167,33 @@ class HatScriptGraph extends LitElement {
           nofocus
         ></hat-graph-node>
 
-        ${config.choose?.map((branch, i) => {
-          const branch_path = `${path}/choose/${i}`;
-          const track_this =
-            trace !== undefined && trace[0].result?.choice === i;
-          if (track_this) {
-            this.trackedNodes[branch_path] = { config, path: branch_path };
-          }
-          return html`
-            <hat-graph>
-              <hat-graph-node
-                .iconPath=${!trace || track_this
-                  ? mdiCheckBoxOutline
-                  : mdiCheckboxBlankOutline}
-                @focus=${this.selectNode(config, branch_path)}
-                class=${classMap({
-                  active: this.selected === branch_path,
-                  track: track_this,
-                })}
-              ></hat-graph-node>
-              ${ensureArray(branch.sequence).map((action, j) =>
-                this.render_node(action, `${branch_path}/sequence/${j}`)
-              )}
-            </hat-graph>
-          `;
-        })}
+        ${config.choose
+          ? ensureArray(config.choose)?.map((branch, i) => {
+              const branch_path = `${path}/choose/${i}`;
+              const track_this =
+                trace !== undefined && trace[0].result?.choice === i;
+              if (track_this) {
+                this.trackedNodes[branch_path] = { config, path: branch_path };
+              }
+              return html`
+                <hat-graph>
+                  <hat-graph-node
+                    .iconPath=${!trace || track_this
+                      ? mdiCheckBoxOutline
+                      : mdiCheckboxBlankOutline}
+                    @focus=${this.selectNode(config, branch_path)}
+                    class=${classMap({
+                      active: this.selected === branch_path,
+                      track: track_this,
+                    })}
+                  ></hat-graph-node>
+                  ${ensureArray(branch.sequence).map((action, j) =>
+                    this.render_node(action, `${branch_path}/sequence/${j}`)
+                  )}
+                </hat-graph>
+              `;
+            })
+          : ""}
         <hat-graph>
           <hat-graph-spacer
             class=${classMap({

src/data/script.ts

@@ -112,7 +112,7 @@ export interface ChooseActionChoice {
 
 export interface ChooseAction {
   alias?: string;
-  choose: ChooseActionChoice[] | null;
+  choose: ChooseActionChoice | ChooseActionChoice[] | null;
   default?: Action | Action[];
 }
 

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

@@ -10,6 +10,7 @@ import {
 } from "lit-element";
 import { html } from "lit-html";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import { ensureArray } from "../../../../../common/ensure-array";
 import { Condition } from "../../../../../data/automation";
 import { Action, ChooseAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
@@ -31,7 +32,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
     const action = this.action;
 
     return html`
-      ${(action.choose || []).map(
+      ${(action.choose ? ensureArray(action.choose) : []).map(
         (option, idx) => html`<ha-card>
           <mwc-icon-button
             .idx=${idx}
@@ -101,7 +102,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
     ev.stopPropagation();
     const value = ev.detail.value as Condition[];
     const index = (ev.target as any).idx;
-    const choose = this.action.choose ? [...this.action.choose] : [];
+    const choose = this.action.choose
+      ? [...ensureArray(this.action.choose)]
+      : [];
     choose[index].conditions = value;
     fireEvent(this, "value-changed", {
       value: { ...this.action, choose },
@@ -112,7 +115,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
     ev.stopPropagation();
     const value = ev.detail.value as Action[];
     const index = (ev.target as any).idx;
-    const choose = this.action.choose ? [...this.action.choose] : [];
+    const choose = this.action.choose
+      ? [...ensureArray(this.action.choose)]
+      : [];
     choose[index].sequence = value;
     fireEvent(this, "value-changed", {
       value: { ...this.action, choose },
@@ -120,7 +125,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
   }
 
   private _addOption() {
-    const choose = this.action.choose ? [...this.action.choose] : [];
+    const choose = this.action.choose
+      ? [...ensureArray(this.action.choose)]
+      : [];
     choose.push({ conditions: [], sequence: [] });
     fireEvent(this, "value-changed", {
       value: { ...this.action, choose },
@@ -129,7 +136,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
   private _removeOption(ev: CustomEvent) {
     const index = (ev.currentTarget as any).idx;
-    const choose = this.action.choose ? [...this.action.choose] : [];
+    const choose = this.action.choose
+      ? [...ensureArray(this.action.choose)]
+      : [];
     choose.splice(index, 1);
     fireEvent(this, "value-changed", {
       value: { ...this.action, choose },