Adapt validation error format for probatio backend (#410)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: farmio

src/components/knx-configure-entity-options.ts

@@ -33,10 +33,7 @@ export const renderConfigureEntityCard = (
       <p class="card-content">${localizeFunction("entity.description")}</p>
       ${errors
         ? entityBaseError
-          ? html`<ha-alert
-              .alertType=${"error"}
-              .title=${entityBaseError.error_message}
-            ></ha-alert>`
+          ? html`<ha-alert .alertType=${"error"} .title=${entityBaseError.message}></ha-alert>`
           : nothing
         : nothing}
       <ha-expansion-panel

src/components/knx-configure-entity.ts

@@ -85,6 +85,7 @@ export class KNXConfigureEntity extends LitElement {
         </h1>
         <p>${this._backendLocalize("description")}</p>
       </div>
+      <slot name="knx-validation-error"></slot>
       <ha-card outlined>
         <h1 class="card-header">${this._backendLocalize("knx.title")}</h1>
         <knx-form
@@ -151,6 +152,10 @@ export class KNXConfigureEntity extends LitElement {
       }
     }
 
+    ::slotted(ha-alert) {
+      margin-top: 0 !important;
+    }
+
     ha-card {
       margin-bottom: 24px;
       padding: 16px;

src/components/knx-form.ts

@@ -62,7 +62,7 @@ export class KnxForm extends LitElement {
 
     return html`
       ${baseError
-        ? html`<ha-alert .alertType=${"error"} .title=${baseError.error_message}></ha-alert>`
+        ? html`<ha-alert .alertType=${"error"} .title=${baseError.message}></ha-alert>`
         : nothing}
       ${this._generateItems(this.schema, ROOT_PATH, this.validationErrors)}
     `;
@@ -251,7 +251,7 @@ export class KnxForm extends LitElement {
     >
       ${sectionBaseError
         ? html` <ha-alert .alertType=${"error"} .title=${"Validation error"}>
-            ${sectionBaseError.error_message}
+            ${sectionBaseError.message}
           </ha-alert>`
         : nothing}
       ${this._generateItems(section.schema, path, errors)}
@@ -295,7 +295,7 @@ export class KnxForm extends LitElement {
     >
       ${sectionBaseError
         ? html` <ha-alert .alertType=${"error"} .title=${"Validation error"}>
-            ${sectionBaseError.error_message}
+            ${sectionBaseError.message}
           </ha-alert>`
         : nothing}
       <ha-control-select

src/components/knx-group-address-selector.ts

@@ -195,7 +195,7 @@ export class GroupAddressSelector extends LitElement {
         ? html`<p class="error">
             <ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
             <b>Validation error:</b>
-            ${generalValidationError.error_message}
+            ${generalValidationError.message}
           </p>`
         : nothing}
       <div class="main">
@@ -212,7 +212,7 @@ export class GroupAddressSelector extends LitElement {
                 .groupAddresses=${this.filteredGroupAddresses}
                 .key=${"write"}
                 .value=${this.config.write ?? undefined}
-                .invalidMessage=${getValidationError(this.validationErrors, "write")?.error_message}
+                .invalidMessage=${getValidationError(this.validationErrors, "write")?.message}
                 .hintMessage=${this._isGaDptMismatch(this.config.write)
                   ? this._dptMismatchMessage(this.config.write)
                   : undefined}
@@ -233,7 +233,7 @@ export class GroupAddressSelector extends LitElement {
                 .groupAddresses=${this.filteredGroupAddresses}
                 .key=${"state"}
                 .value=${this.config.state ?? undefined}
-                .invalidMessage=${getValidationError(this.validationErrors, "state")?.error_message}
+                .invalidMessage=${getValidationError(this.validationErrors, "state")?.message}
                 .hintMessage=${this._isGaDptMismatch(this.config.state)
                   ? this._dptMismatchMessage(this.config.state)
                   : undefined}
@@ -264,7 +264,7 @@ export class GroupAddressSelector extends LitElement {
                   .key=${"passive"}
                   .index=${index}
                   .value=${ga ?? undefined}
-                  .invalidMessage=${passiveErr?.error_message}
+                  .invalidMessage=${passiveErr?.message}
                   .hintMessage=${this._isGaDptMismatch(ga)
                     ? this._dptMismatchMessage(ga)
                     : undefined}
@@ -317,7 +317,7 @@ export class GroupAddressSelector extends LitElement {
       .value=${this._selectedDPTValue}
       .disabled=${this.dptSelectorDisabled}
       .invalid=${!!invalid}
-      .invalidMessage=${invalid?.error_message}
+      .invalidMessage=${invalid?.message}
       .localizeValue=${this.localizeFunction}
       .translation_key=${this.key}
       @value-changed=${this._valueChanged}
@@ -335,7 +335,7 @@ export class GroupAddressSelector extends LitElement {
       .value=${this._selectedDPTValue}
       .disabled=${this.dptSelectorDisabled}
       .invalid=${!!invalid}
-      .invalidMessage=${invalid?.error_message}
+      .invalidMessage=${invalid?.message}
       .translation_key=${this.key}
       @value-changed=${this._valueChanged}
     >

src/components/knx-payload-selector.ts

@@ -168,7 +168,7 @@ export class KnxPayloadSelector extends LitElement {
         @value-changed=${this._modeChanged}
       ></ha-control-select>
       ${this._mode === "raw" ? this._renderRawMode() : this._renderTypedModeOrRawFallback(dptMeta)}
-      ${invalid ? html`<p class="invalid-message">${invalid.error_message}</p>` : nothing}
+      ${invalid ? html`<p class="invalid-message">${invalid.message}</p>` : nothing}
     `;
   }
 

src/components/knx-selector-row.ts

@@ -119,7 +119,7 @@ export class KnxSelectorRow extends LitElement {
         ? nothing
         : haSelector}
       ${this._enabled ? html`<slot></slot>` : nothing}
-      ${invalid ? html`<p class="invalid-message">${invalid.error_message}</p>` : nothing}
+      ${invalid ? html`<p class="invalid-message">${invalid.message}</p>` : nothing}
     `;
   }
 

src/dialogs/knx-time-server-dialog.ts

@@ -77,7 +77,7 @@ export class KnxTimeServerDialog extends DialogMixin<KnxTimeServerDialogParams>(
       .catch((err) => {
         logger.error("updateTimeServerConfig error", err);
         // show as general error in validation area
-        this._errors = [{ path: [], error_message: String(err), error_class: "exception" }];
+        this._errors = [{ path: [], message: String(err), code: "exception" }];
       });
   }
 
@@ -144,9 +144,7 @@ export class KnxTimeServerDialog extends DialogMixin<KnxTimeServerDialogParams>(
   private _renderContent(): TemplateResult {
     const baseError = getValidationError(this._errors);
     return html`
-      ${baseError
-        ? html`<ha-alert alert-type="error"> ${baseError.error_message} </ha-alert>`
-        : nothing}
+      ${baseError ? html`<ha-alert alert-type="error"> ${baseError.message} </ha-alert>` : nothing}
 
       <knx-group-address-selector
         .knx=${this.knx}

src/types/entity_data.ts

@@ -40,8 +40,12 @@ export interface DeviceCreateData {
 
 export interface ErrorDescription {
   path: string[] | null;
-  error_message: string;
-  error_class: string;
+  message: string;
+  code: string | null;
+  translation_key?: string | null;
+  placeholders?: Record<string, unknown>;
+  context?: Record<string, unknown>;
+  secret?: boolean;
 }
 
 export type CreateEntityResult =

src/views/entities_create.ts

@@ -293,7 +293,6 @@ export class KNXCreateEntity extends LitElement {
       ></ha-icon-button>
       <div class="content">
         <div class="entity-config ${this._mode === "yaml" ? "yaml-mode" : ""}">
-          ${this._renderValidationAlert()}
           ${this._mode === "gui"
             ? html`
                 <knx-configure-entity
@@ -304,9 +303,12 @@ export class KNXCreateEntity extends LitElement {
                   .schema=${schema}
                   .validationErrors=${this._validationErrors}
                   @knx-entity-configuration-changed=${this._configChanged}
-                ></knx-configure-entity>
+                >
+                  ${this._renderValidationAlert()}
+                </knx-configure-entity>
               `
             : html`
+                ${this._renderValidationAlert()}
                 <ha-yaml-editor
                   .defaultValue=${this._config}
                   @value-changed=${this._yamlChanged}
@@ -345,13 +347,13 @@ export class KNXCreateEntity extends LitElement {
     if (!this._validationBaseError) {
       return nothing;
     }
-    return html`<ha-alert alert-type="error">
+    return html`<ha-alert slot="knx-validation-error" alert-type="error">
       <details>
         <summary><b>Validation error</b></summary>
         <p>Base error: ${this._validationBaseError}</p>
         ${this._validationErrors?.map(
           (err) =>
-            html`<p>${err.error_class}: ${err.error_message} in ${err.path?.join(" / ")}</p>`,
+            html`<p>${err.code ?? "invalid"}: ${err.message} in ${err.path?.join(" / ")}</p>`,
         ) ?? nothing}
       </details>
     </ha-alert>`;

src/views/expose_create.ts

@@ -450,7 +450,7 @@ export class KNXCreateExpose extends LitElement {
           ${this._validationErrors?.map(
             (err) =>
               html`<p>
-                ${err.error_class}: ${err.error_message}
+                ${err.code ?? "invalid"}: ${err.message}
                 ${err.path ? "in " + err.path.join(" / ") : ""}
               </p>`,
           ) ?? nothing}
@@ -594,7 +594,7 @@ export class KNXCreateExpose extends LitElement {
           : nothing}
         <div class="panel-content">
           ${optionError
-            ? html` <ha-alert alert-type="error">${optionError.error_message}</ha-alert> `
+            ? html` <ha-alert alert-type="error">${optionError.message}</ha-alert> `
             : nothing}
           <ha-entity-attribute-picker
             data-idx=${idx}
@@ -611,7 +611,7 @@ export class KNXCreateExpose extends LitElement {
             @value-changed=${this._updateExposeOptionAtIndex}
           ></ha-entity-attribute-picker>
           ${attributeError
-            ? html` <ha-alert alert-type="error">${attributeError.error_message}</ha-alert> `
+            ? html` <ha-alert alert-type="error">${attributeError.message}</ha-alert> `
             : nothing}
           <knx-group-address-selector
             data-idx=${idx}