Add dynamic header/footer config determination and update struct (#12795)

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -49,6 +49,7 @@ import {
   SubElementEditorConfig,
 } from "../types";
 import { configElementStyle } from "./config-elements-style";
+import { buttonEntityConfigStruct } from "../structs/button-entity-struct";
 
 const buttonEntitiesRowConfigStruct = object({
   type: literal("button"),
@@ -112,22 +113,7 @@ const webLinkEntitiesRowConfigStruct = object({
 
 const buttonsEntitiesRowConfigStruct = object({
   type: literal("buttons"),
-  entities: array(
+  entities: array(buttonEntityConfigStruct),
-    union([
-      object({
-        entity: string(),
-        name: optional(string()),
-        icon: optional(string()),
-        image: optional(string()),
-        show_name: optional(boolean()),
-        show_icon: optional(boolean()),
-        tap_action: optional(actionConfigStruct),
-        hold_action: optional(actionConfigStruct),
-        double_tap_action: optional(actionConfigStruct),
-      }),
-      string(),
-    ])
-  ),
 });
 
 const attributeEntitiesRowConfigStruct = object({

src/panels/lovelace/editor/structs/button-entity-struct.ts

@@ -0,0 +1,14 @@
+import { boolean, object, optional, string } from "superstruct";
+import { actionConfigStruct } from "./action-struct";
+
+export const buttonEntityConfigStruct = object({
+  entity: string(),
+  name: optional(string()),
+  icon: optional(string()),
+  image: optional(string()),
+  show_name: optional(boolean()),
+  show_icon: optional(boolean()),
+  tap_action: optional(actionConfigStruct),
+  hold_action: optional(actionConfigStruct),
+  double_tap_action: optional(actionConfigStruct),
+});

src/panels/lovelace/header-footer/structs.ts

@@ -1,6 +1,15 @@
-import { object, string, optional, array, number, union } from "superstruct";
+import {
+  array,
+  dynamic,
+  number,
+  object,
+  optional,
+  union,
+  string,
+} from "superstruct";
 import { actionConfigStruct } from "../editor/structs/action-struct";
-import { entitiesConfigStruct } from "../editor/structs/entities-struct";
+import { buttonEntityConfigStruct } from "../editor/structs/button-entity-struct";
+import { LovelaceHeaderFooterConfig } from "./types";
 
 export const pictureHeaderFooterConfigStruct = object({
   type: string(),
@@ -12,7 +21,7 @@ export const pictureHeaderFooterConfigStruct = object({
 
 export const buttonsHeaderFooterConfigStruct = object({
   type: string(),
-  entities: array(entitiesConfigStruct),
+  entities: array(buttonEntityConfigStruct),
 });
 
 export const graphHeaderFooterConfigStruct = object({
@@ -22,8 +31,25 @@ export const graphHeaderFooterConfigStruct = object({
   hours_to_show: optional(number()),
 });
 
-export const headerFooterConfigStructs = union([
+export const headerFooterConfigStructs = dynamic<any>((value) => {
-  pictureHeaderFooterConfigStruct,
+  if (value && typeof value === "object" && "type" in value) {
-  buttonsHeaderFooterConfigStruct,
+    switch ((value as LovelaceHeaderFooterConfig).type!) {
-  graphHeaderFooterConfigStruct,
+      case "buttons": {
-]);
+        return buttonsHeaderFooterConfigStruct;
+      }
+      case "graph": {
+        return graphHeaderFooterConfigStruct;
+      }
+      case "picture": {
+        return pictureHeaderFooterConfigStruct;
+      }
+    }
+  }
+
+  // No "type" property => we fallback to a union of all potential types
+  return union([
+    buttonsHeaderFooterConfigStruct,
+    graphHeaderFooterConfigStruct,
+    pictureHeaderFooterConfigStruct,
+  ]);
+});