1714: Fixes getLabelById function and error components

Author: Ruben van Leeuwen

frontend/packages/pydantic-forms/src/components/render/RenderFormErrors.tsx

@@ -6,9 +6,10 @@
 import React from 'react';
 
 import { usePydanticFormContext } from '@/core';
+import { getFieldLabelById } from '@/core/helper';
 
 export default function RenderFormErrors() {
-    const { errorDetails } = usePydanticFormContext();
+    const { errorDetails, pydanticFormSchema } = usePydanticFormContext();
 
     if (!errorDetails) {
         return <></>;
@@ -20,10 +21,6 @@ export default function RenderFormErrors() {
         .shift();
     const otherErrors = errors.filter((err) => !err.loc.includes('__root__'));
 
-    const getFieldLabel = (fieldId: string) => {
-        return fieldId;
-    };
-
     return (
         <div>
             {!!rootError && <div>{rootError.msg}</div>}
@@ -32,8 +29,15 @@ export default function RenderFormErrors() {
                 <ul>
                     {otherErrors.map((error) => (
                         <li key={JSON.stringify(error)}>
-                            {error.loc.map(getFieldLabel).join(', ')}:{' '}
-                            {error.msg}
+                            {error.loc
+                                .map((value) =>
+                                    getFieldLabelById(
+                                        value,
+                                        pydanticFormSchema,
+                                    ),
+                                )
+                                .join(', ')}
+                            : {error.msg}
                         </li>
                     ))}
                 </ul>

frontend/packages/pydantic-forms/src/components/render/RenderReactHookFormErrors.tsx

@@ -9,7 +9,7 @@ import { usePydanticFormContext } from '@/core';
 import { getFieldLabelById } from '@/core/helper';
 
 export default function RenderReactHookFormErrors() {
-    const { rhf } = usePydanticFormContext();
+    const { rhf, pydanticFormSchema } = usePydanticFormContext();
     const [showDetails, setShowDetails] = useState(false);
 
     const toggleDetails = useCallback(() => {
@@ -46,17 +46,21 @@ export default function RenderReactHookFormErrors() {
                         <ul className="error-list mb-2">
                             {Object.keys(rhf.formState.errors).map(
                                 (fieldKey) => {
-                                    const field =
+                                    const fieldError =
                                         rhf.formState?.errors[fieldKey];
 
-                                    const fieldName =
-                                        'TO: Get field name by id function';
+                                    const fieldName = getFieldLabelById(
+                                        fieldKey,
+                                        pydanticFormSchema,
+                                    );
+
                                     return (
                                         <li key={fieldKey}>
                                             <strong className="mr-2">
                                                 {fieldName}:{' '}
                                             </strong>
-                                            {(field?.message as string) ?? ''}
+                                            {(fieldError?.message as string) ??
+                                                ''}
                                         </li>
                                     );
                                 },

frontend/packages/pydantic-forms/src/core/helper.ts

@@ -7,6 +7,7 @@ import { ControllerRenderProps, FieldValues, useForm } from 'react-hook-form';
 
 import defaultComponentMatchers from '@/components/defaultComponentMatchers';
 import {
+    Properties,
     PydanticComponentMatcher,
     PydanticFormApiResponse,
     PydanticFormComponents,
@@ -166,9 +167,29 @@ export const optionsToOption = (
 
 export const getFieldLabelById = (
     fieldId: string,
-    formScheam: PydanticFormSchema,
+    formSchema?: PydanticFormSchema,
 ) => {
-    return fieldId;
+    const fieldMap = getFlatFieldMap(formSchema?.properties ?? {});
+    console.log('fieldMap', fieldMap);
+    return fieldMap.has(fieldId) ? fieldMap.get(fieldId)?.title : fieldId;
+};
+
+type FieldMap = Map<string, PydanticFormField>;
+export const getFlatFieldMap = (
+    properties: Properties,
+    fieldMap: FieldMap = new Map(),
+) => {
+    console.log('props', properties);
+    if (properties) {
+        Object.entries(properties ?? {}).forEach(([id, field]) => {
+            if (field.properties) {
+                getFlatFieldMap(field.properties, fieldMap);
+            }
+            fieldMap.set(id, field);
+        });
+    }
+
+    return fieldMap;
 };
 
 /**

frontend/packages/pydantic-forms/src/types.ts

@@ -107,9 +107,7 @@ export interface PydanticFormField {
         password: boolean;
     };
 
-    properties?: {
-        [propId: string]: PydanticFormField;
-    };
+    properties?: Properties;
 }
 
 export interface PydanticFormFieldSection {
@@ -384,23 +382,17 @@ export interface PydanticFormBaseSchema {
 
 export interface PydanticFormSchema extends PydanticFormBaseSchema {
     type: PydanticFormFieldType.OBJECT;
-    properties: {
-        [propId: string]: PydanticFormField;
-    };
+    properties: Properties;
 }
 
 export interface PydanticFormSchemaRawJson extends PydanticFormBaseSchema {
     type: PydanticFormFieldType.OBJECT;
-    properties: {
-        [propId: string]: PydanticFormPropertySchemaRawJson;
-    };
+    properties: RawJsonProperties;
 }
 
 export interface PydanticFormSchemaParsed extends PydanticFormBaseSchema {
     type: 'object';
-    properties: {
-        [propId: string]: PydanticFormPropertySchemaParsed;
-    };
+    properties: ParsedProperties;
 }
 
 export interface PydanticFormPropertySchemaParsed
@@ -427,9 +419,7 @@ export interface PydanticFormPropertySchemaParsed
         password: boolean;
     };
 
-    properties?: {
-        [propId: string]: PydanticFormPropertySchemaRawJson;
-    };
+    properties?: RawJsonProperties;
 }
 
 export interface PydanticFormFieldAnyOfDefParsed
@@ -472,11 +462,21 @@ export interface PydanticFormPropertySchemaRawJson
         password: boolean;
     };
 
-    properties?: {
-        [propId: string]: PydanticFormPropertySchemaRawJson;
-    };
+    properties?: RawJsonProperties;
 }
 
+export type RawJsonProperties = {
+    [propId: string]: PydanticFormPropertySchemaRawJson;
+};
+
+export type Properties = {
+    [propId: string]: PydanticFormField;
+};
+
+export type ParsedProperties = {
+    [propId: string]: PydanticFormPropertySchemaParsed;
+};
+
 export interface PydanticFormFieldAnyOfDef {
     items?: JsonSchemaRef;
     type: 'null' | 'array';