Proper editor enum validation of timestamp formats (#9965)

src/panels/lovelace/components/hui-timestamp-display.ts

@@ -6,7 +6,7 @@ import { formatTime } from "../../../common/datetime/format_time";
 import relativeTime from "../../../common/datetime/relative_time";
 import { FrontendLocaleData } from "../../../data/translation";
 import { HomeAssistant } from "../../../types";
-import { TimestampRenderingFormats } from "./types";
+import { TimestampRenderingFormat } from "./types";
 
 const FORMATS: {
   [key: string]: (ts: Date, lang: FrontendLocaleData) => string;
@@ -23,7 +23,7 @@ class HuiTimestampDisplay extends LitElement {
 
   @property() public ts?: Date;
 
-  @property() public format?: TimestampRenderingFormats;
+  @property() public format?: TimestampRenderingFormat;
 
   @state() private _relative?: string;
 

src/panels/lovelace/components/types.ts

@@ -7,9 +7,13 @@ export interface ConditionalBaseConfig extends LovelaceCardConfig {
   conditions: Condition[];
 }
 
-export type TimestampRenderingFormats =
-  | "relative"
-  | "total"
-  | "date"
-  | "time"
-  | "datetime";
+export const TIMESTAMP_RENDERING_FORMATS = [
+  "relative",
+  "total",
+  "date",
+  "time",
+  "datetime",
+] as const;
+
+export type TimestampRenderingFormat =
+  typeof TIMESTAMP_RENDERING_FORMATS[number];

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

@@ -11,6 +11,7 @@ import {
   assign,
   boolean,
   dynamic,
+  enums,
   literal,
   number,
   object,
@@ -34,6 +35,7 @@ import "../../../../components/ha-switch";
 import type { HomeAssistant } from "../../../../types";
 import type { EntitiesCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
+import { TIMESTAMP_RENDERING_FORMATS } from "../../components/types";
 import type { LovelaceRowConfig } from "../../entity-rows/types";
 import { headerFooterConfigStructs } from "../../header-footer/structs";
 import type { LovelaceCardEditor } from "../../types";
@@ -137,6 +139,7 @@ const attributeEntitiesRowConfigStruct = object({
   suffix: optional(string()),
   name: optional(string()),
   icon: optional(string()),
+  format: optional(enums(TIMESTAMP_RENDERING_FORMATS)),
 });
 
 const textEntitiesRowConfigStruct = object({

src/panels/lovelace/editor/structs/entities-struct.ts

@@ -1,4 +1,5 @@
-import { union, object, string, optional, boolean } from "superstruct";
+import { union, object, string, optional, boolean, enums } from "superstruct";
+import { TIMESTAMP_RENDERING_FORMATS } from "../../components/types";
 import { actionConfigStruct } from "./action-struct";
 
 export const entitiesConfigStruct = union([
@@ -8,7 +9,7 @@ export const entitiesConfigStruct = union([
     icon: optional(string()),
     image: optional(string()),
     secondary_info: optional(string()),
-    format: optional(string()),
+    format: optional(enums(TIMESTAMP_RENDERING_FORMATS)),
     state_color: optional(boolean()),
     tap_action: optional(actionConfigStruct),
     hold_action: optional(actionConfigStruct),

src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts

@@ -20,11 +20,11 @@ import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import "../components/hui-timestamp-display";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
-import { TimestampRenderingFormats } from "../components/types";
+import { TimestampRenderingFormat } from "../components/types";
 import { LovelaceRow } from "./types";
 
 interface SensorEntityConfig extends EntitiesCardEntityConfig {
-  format?: TimestampRenderingFormats;
+  format?: TimestampRenderingFormat;
 }
 
 @customElement("hui-sensor-entity-row")

src/panels/lovelace/entity-rows/types.ts

@@ -1,7 +1,7 @@
 import { ActionConfig } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { Condition } from "../common/validate-condition";
-import { TimestampRenderingFormats } from "../components/types";
+import { TimestampRenderingFormat } from "../components/types";
 
 export interface EntityConfig {
   entity: string;
@@ -92,5 +92,5 @@ export interface AttributeRowConfig extends EntityConfig {
   attribute: string;
   prefix?: string;
   suffix?: string;
-  format?: TimestampRenderingFormats;
+  format?: TimestampRenderingFormat;
 }