Merge pull request #365 from alexlipovka/informative-field-validation…

…-error-display

Display more relevant validation errors on BaseQuestionnaireResponseForm

src/components/BaseQuestionnaireResponseForm/__tests__/fieldErrorMessage.test.ts

@@ -0,0 +1,60 @@
+import { ControllerFieldState, ControllerRenderProps, FieldValues } from 'react-hook-form';
+import { describe } from 'vitest';
+
+import { getFieldErrorMessage } from 'src/components/BaseQuestionnaireResponseForm/utils';
+
+const FIELD_STATE_MESSAGE_MAP = [
+    {
+        fieldName: 'first-name.0.value.string',
+        fieldValue: 'NotSoLongReallyName',
+        fieldText: 'First name',
+        errorMessage: 'first-name[0].value.string must be at most 30 characters',
+        errorType: 'max',
+        expectedResult: 'First name must be at most 30 characters',
+    },
+    {
+        fieldName: 'first-name.0.value.string',
+        fieldValue: 'Basic - 1',
+        fieldText: 'First name',
+        errorMessage: 'first-name[0].value.string is a required field',
+        errorType: 'required',
+        expectedResult: 'First name is a required field',
+    },
+];
+
+describe('Field error message should be relevant and human readable', () => {
+    test.each(FIELD_STATE_MESSAGE_MAP)(
+        'getFieldErrorMessage returns correctly transformed message',
+        (fieldStateMessage) => {
+            const field: ControllerRenderProps<FieldValues, any> = {
+                name: fieldStateMessage.fieldName,
+                value: fieldStateMessage.fieldValue,
+                onChange: () => {
+                    return void 0;
+                },
+                onBlur: () => {
+                    return void 0;
+                },
+                ref: () => {
+                    return void 0;
+                },
+            };
+
+            const fieldState: ControllerFieldState = {
+                error: {
+                    message: fieldStateMessage.errorMessage,
+                    type: fieldStateMessage.errorType,
+                },
+                invalid: true,
+                isTouched: true,
+                isDirty: true,
+            };
+
+            const fieldText = fieldStateMessage.fieldText;
+
+            const invalidFieldMessage = getFieldErrorMessage(field, fieldState, fieldText);
+
+            expect(invalidFieldMessage).toBe(fieldStateMessage.expectedResult);
+        },
+    );
+});

src/components/BaseQuestionnaireResponseForm/hooks.tsx

@@ -9,6 +9,7 @@ import { QuestionnaireItem } from '@beda.software/aidbox-types';
 
 import s from './BaseQuestionnaireResponseForm.module.scss';
 import { FieldLabel } from './FieldLabel';
+import { getFieldErrorMessage } from 'src/components/BaseQuestionnaireResponseForm/utils';
 
 export function useFieldController(fieldName: any, questionItem: QuestionnaireItem) {
     const qrfContext = useQuestionnaireResponseFormContext();
@@ -20,11 +21,14 @@ export function useFieldController(fieldName: any, questionItem: QuestionnaireIt
         name: fieldName.join('.'),
         ...(repeats ? { defaultValue: [] } : {}),
     });
+
+    const invalidFieldMessage = getFieldErrorMessage(field, fieldState, text);
+
     const formItem: FormItemProps = {
         label: <FieldLabel questionItem={questionItem} />,
         hidden: hidden,
         validateStatus: fieldState?.invalid ? 'error' : 'success',
-        help: fieldState?.invalid ? `${text} is required` : undefined,
+        help: invalidFieldMessage,
         required,
         className: classNames(s.field, {
             [s._hidden]: hidden,

src/components/BaseQuestionnaireResponseForm/utils.ts

@@ -0,0 +1,21 @@
+import { ControllerFieldState, ControllerRenderProps, FieldValues } from 'react-hook-form';
+
+export function getFieldErrorMessage(
+    field: ControllerRenderProps<FieldValues, any>,
+    fieldState: ControllerFieldState,
+    text?: string,
+) {
+    if (!fieldState || !fieldState.invalid) {
+        return undefined;
+    }
+
+    if (!fieldState.error || !fieldState.error.message) {
+        return undefined;
+    }
+    // replace [0], [1] with .0, .1 to match field.name
+    const errorMessageWithInternalFieldName = fieldState.error.message.replace(/\[(\d+)\]/g, '.$1');
+
+    const errorMessageWithHumanReadableFieldName = errorMessageWithInternalFieldName.replace(field.name, text ?? '');
+
+    return errorMessageWithHumanReadableFieldName;
+}