Fixes applying labels

Author: Ruben van Leeuwen

frontend/packages/pydantic-forms/src/components/fields/FieldWrap.tsx

@@ -10,7 +10,6 @@
 import React from 'react';
 import type { ControllerFieldState } from 'react-hook-form';
 
-import ResetNullableFieldTrigger from '@/components/form/ResetNullableFieldTrigger';
 import { usePydanticFormContext } from '@/core';
 import { PydanticFormField } from '@/types';
 
@@ -36,12 +35,7 @@ export const FieldWrap = ({
 
     return (
         <FormRow
-            label={
-                <>
-                    {pydanticFormField.title}
-                    <ResetNullableFieldTrigger field={pydanticFormField} />
-                </>
-            }
+            title={pydanticFormField.title}
             description={pydanticFormField.description}
             required={pydanticFormField.required}
             isInvalid={!!isInvalid}

frontend/packages/pydantic-forms/src/components/fields/FormRow.tsx

@@ -3,7 +3,7 @@ import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 
 type FormRowProps = {
     children: ReactElement;
-    label?: ReactNode;
+    title: string;
     isInvalid?: boolean;
     error?: ReactNode | ReactNode[];
     description?: string;
@@ -12,19 +12,17 @@ type FormRowProps = {
 
 export const FormRow = ({
     children,
-    label,
-    isInvalid,
+    title,
     error,
-    ...rest
+    description,
+    required,
 }: FormRowProps) => {
-    // TODO: readd required, description, classname
     return (
-        <div {...(rest as HTMLAttributes<HTMLElement>)}>
-            {label && (
-                <label>
-                    {label} {isInvalid && '!!!'}
-                </label>
-            )}
+        <div>
+            <label>
+                {title} {required && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            {description && <div>{description}</div>}
             {children}
             {error}
         </div>

frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx

@@ -135,7 +135,7 @@ function PydanticFormContextProvider({
     const { pydanticFormSchema, isLoading: isParsingSchema } =
         usePydanticFormParser(
             rawSchema,
-            formLabels,
+            formLabels?.labels,
             fieldDetailProvider,
             formStructureMutator,
         );
@@ -223,7 +223,7 @@ function PydanticFormContextProvider({
         }
 
         const initialData = getFormValuesFromFieldOrLabels(pydanticFormSchema, {
-            ...formLabels,
+            ...formLabels?.data,
             ...customData,
         });
 

frontend/packages/pydantic-forms/src/core/hooks/useLabelProvider.tsx

@@ -16,7 +16,10 @@
  */
 import useSWR, { SWRConfiguration } from 'swr';
 
-import { PydanticFormLabelProvider } from '@/types';
+import {
+    PydanticFormLabelProvider,
+    PydanticFormLabelProviderResponse,
+} from '@/types';
 
 export function useLabelProvider(
     labelProvider?: PydanticFormLabelProvider,
@@ -25,7 +28,7 @@ export function useLabelProvider(
     cacheKey?: number,
     swrConfig?: SWRConfiguration,
 ) {
-    return useSWR<Record<string, string> | undefined>(
+    return useSWR<PydanticFormLabelProviderResponse | undefined>(
         // cache key
         [labelProvider, formKey, id, swrConfig, cacheKey],
 

frontend/packages/pydantic-forms/src/core/hooks/usePydanticFormParser.tsx

@@ -54,11 +54,12 @@ const parseProperties = (
 
             const parsedProperty: PydanticFormField = {
                 id,
-                title: translateLabel(
-                    propertyId,
-                    propertySchema.title,
-                    formLabels,
-                ),
+                title:
+                    translateLabel(
+                        propertyId,
+                        propertySchema.title,
+                        formLabels,
+                    ) || propertyId,
                 description: translateLabel(
                     `${propertyId}_info`,
                     propertySchema.description,

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

@@ -83,7 +83,7 @@ export enum PydanticFormState {
 
 export interface PydanticFormField {
     id: string;
-    title?: string;
+    title: string;
     description?: string;
     type: PydanticFormFieldType;
     format: PydanticFormFieldFormat;
@@ -320,8 +320,7 @@ export type PydanticFormLabelProvider = ({
 }: {
     formKey: string;
     id?: string | null;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-}) => Promise<Record<string, any>>;
+}) => Promise<PydanticFormLabelProviderResponse>;
 
 // will return column
 export type PydanticFormLayoutColumnProvider = (fieldId: string) => number;
@@ -360,6 +359,11 @@ export type PydanticFormCustomValidationRuleFn = (
     rhf?: ReturnType<typeof useForm>,
 ) => Zod.ZodTypeAny | undefined;
 
+export interface PydanticFormLabelProviderResponse {
+    labels: Record<string, string>;
+    data: Record<string, string>;
+}
+
 export interface PydanticFormApiResponse {
     detail?: string;
     status: number;