@openmrs/esm-form-engine-lib 3.1.3-pre.1762 → 3.1.3-pre.1771

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "3.1.3-pre.1762",
+  "version": "3.1.3-pre.1771",
   "description": "React Form Engine for O3",
   "browser": "dist/openmrs-esm-form-engine-lib.js",
   "main": "src/index.ts",

package/src/components/inputs/markdown/markdown.component.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import MarkdownWrapper from './markdown-wrapper.component';
 import { type FormFieldInputProps } from '../../../types';
 
 const Markdown: React.FC<FormFieldInputProps> = ({ field }) => {
-  return !field.isHidden && <MarkdownWrapper markdown={field.value} />;
+  const { t } = useTranslation();
+  return !field.isHidden && <MarkdownWrapper
+    markdown={t(field.value, { defaultValue: field.value, interpolation: { escapeValue: false } })}
+  />;
 };
 export default Markdown;

package/src/components/inputs/multi-select/multi-select.component.tsx

@@ -101,7 +101,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                 initialSelectedItems={initiallySelectedQuestionItems}
                 label={''}
                 titleText={<FieldLabel field={field} />}
-                itemToString={(item) => (item ? item.label : ' ')}
+                itemToString={(item) => (item ? t(item.label) : ' ')}
                 disabled={field.isDisabled}
                 invalid={errors.length > 0}
                 invalidText={errors[0]?.message}
@@ -143,7 +143,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
               <div className={styles.tagContainer}>
                 {formFieldAdapters[field.type]?.getDisplayValue(field, value)?.map((displayValue, index) => (
                   <Tag key={index} type="cool-gray">
-                    {displayValue}
+                    {t(displayValue)}
                   </Tag>
                 ))}
               </div>

package/src/components/renderer/field/fieldLogic.test.ts

@@ -0,0 +1,151 @@
+import { handleFieldLogic, validateFieldValue } from './fieldLogic';
+import { evaluateAsyncExpression, evaluateExpression } from '../../../utils/expression-runner';
+import { type FormField } from '../../../types';
+import { type FormContextProps } from '../../../provider/form-provider';
+
+jest.mock('../../../utils/expression-runner', () => ({
+  evaluateExpression: jest.fn(),
+  evaluateAsyncExpression: jest.fn().mockResolvedValue({ result: 'mockedResult' }),
+}));
+
+describe('handleFieldLogic', () => {
+  let mockContext: FormContextProps;
+  let mockFieldCoded: FormField;
+
+  beforeEach(() => {
+    mockContext = {
+      methods: {
+        getValues: jest.fn().mockReturnValue({}),
+        setValue: jest.fn(),
+      },
+      formFields: [],
+      sessionMode: 'edit',
+      patient: {},
+      formFieldValidators: {},
+      formFieldAdapters: {
+        obs: {
+          transformFieldValue: jest.fn(),
+        }
+      },
+      formJson: { pages: [] },
+      updateFormField: jest.fn(),
+      setForm: jest.fn(),
+    } as unknown as FormContextProps;
+
+    mockFieldCoded = {
+      id: 'testField',
+      label: 'Test Field',
+      type: 'obs',
+      questionOptions: {
+        rendering: 'radio',
+        answers: [
+          {
+            label: 'Test Answer',
+            concept: 'testConcept',
+            disable: {
+              disableWhenExpression: 'myValue > 10',
+            },
+          },
+        ],
+      },
+      fieldDependents: [],
+      sectionDependents: [],
+      pageDependents: [],
+      validators: [],
+    } as unknown as FormField;
+  });
+
+  it('should evaluate field answer disabled logic', () => {
+    (evaluateExpression as jest.Mock).mockReturnValue(true);
+
+    handleFieldLogic(mockFieldCoded, mockContext);
+
+    expect(evaluateExpression).toHaveBeenCalledWith(
+      'myValue > 10',
+      { value: mockFieldCoded, type: 'field' },
+      mockContext.formFields,
+      mockContext.methods.getValues(),
+      {
+        mode: mockContext.sessionMode,
+        patient: mockContext.patient,
+      },
+    );
+    expect(mockFieldCoded.questionOptions.answers[0].disable.isDisabled).toBe(true);
+  });
+
+  it('should handle field dependents logic', () => {
+    mockFieldCoded.fieldDependents = new Set(['dependentField']);
+    mockContext.formFields = [
+      {
+        id: 'dependentField',
+        type: 'obs',
+        questionOptions: {
+          calculate: {
+            calculateExpression: '2 + 2',
+          },
+        },
+        validators: [],
+        meta: {},
+      } as unknown as FormField,
+    ];
+    handleFieldLogic(mockFieldCoded, mockContext);
+
+    expect(mockContext.updateFormField).toHaveBeenCalled();
+  });
+});
+
+describe('validateFieldValue', () => {
+  let mockField: FormField;
+  let mockValidators: Record<string, any>;
+  let mockContext: any;
+
+  beforeEach(() => {
+    mockField = {
+      id: 'testField',
+      validators: [
+        {
+          type: 'required',
+        },
+      ],
+      meta: {},
+    } as unknown as FormField;
+
+    mockValidators = {
+      required: {
+        validate: jest.fn().mockReturnValue([
+          { resultType: 'error', message: 'Field is required' },
+        ]),
+      },
+    };
+
+    mockContext = {
+      formFields: [],
+      values: {},
+      expressionContext: {
+        patient: {},
+        mode: 'edit',
+      },
+    };
+  });
+
+  it('should validate field value and return errors and warnings', () => {
+    const result = validateFieldValue(mockField, '', mockValidators, mockContext);
+
+    expect(mockValidators.required.validate).toHaveBeenCalledWith(
+      mockField,
+      '',
+      expect.objectContaining(mockContext),
+    );
+    expect(result.errors).toEqual([{ resultType: 'error', message: 'Field is required' }]);
+    expect(result.warnings).toEqual([]);
+  });
+
+  it('should return empty errors and warnings if field submission is unspecified', () => {
+    mockField.meta.submission = { unspecified: true };
+
+    const result = validateFieldValue(mockField, '', mockValidators, mockContext);
+
+    expect(result.errors).toEqual([]);
+    expect(result.warnings).toEqual([]);
+  });
+});

package/src/components/renderer/field/fieldLogic.ts

@@ -1,10 +1,9 @@
 import { codedTypes } from '../../../constants';
 import { type FormContextProps } from '../../../provider/form-provider';
 import { type FormFieldValidator, type SessionMode, type ValidationResult, type FormField } from '../../../types';
-import { isTrue } from '../../../utils/boolean-utils';
 import { hasRendering } from '../../../utils/common-utils';
 import { evaluateAsyncExpression, evaluateExpression } from '../../../utils/expression-runner';
-import { evalConditionalRequired, evaluateDisabled, evaluateHide } from '../../../utils/form-helper';
+import { evalConditionalRequired, evaluateDisabled, evaluateHide, findFieldSection } from '../../../utils/form-helper';
 import { isEmpty } from '../../../validators/form-validator';
 import { reportError } from '../../../utils/error-utils';
 
@@ -49,6 +48,8 @@ function evaluateFieldDependents(field: FormField, values: any, context: FormCon
     updateFormField,
     setForm,
   } = context;
+
+  let shouldUpdateForm = false;
   // handle fields
   if (field.fieldDependents) {
     field.fieldDependents.forEach((dep) => {
@@ -89,6 +90,9 @@ function evaluateFieldDependents(field: FormField, values: any, context: FormCon
       }
       // evaluate hide
       if (dependent.hide) {
+        const targetSection = findFieldSection(formJson, dependent);
+        const isSectionVisible = targetSection?.questions.some((question) => !question.isHidden);
+
         evaluateHide(
           { value: dependent, type: 'field' },
           formFields,
@@ -98,6 +102,27 @@ function evaluateFieldDependents(field: FormField, values: any, context: FormCon
           evaluateExpression,
           updateFormField,
         );
+
+        if (targetSection) {
+          targetSection.questions = targetSection?.questions.map((question) => {
+            if (question.id === dependent.id) {
+              return dependent;
+            }
+            return question;
+          });
+          const isDependentFieldHidden = dependent.isHidden;
+          const sectionHasVisibleFieldAfterEvaluation = [...targetSection.questions, dependent].some(
+            (field) => !field.isHidden,
+          );
+
+          if (!isSectionVisible && !isDependentFieldHidden) {
+            targetSection.isHidden = false;
+            shouldUpdateForm = true;
+          } else if (isSectionVisible && !sectionHasVisibleFieldAfterEvaluation) {
+            targetSection.isHidden = true;
+            shouldUpdateForm = true;
+          }
+        }
       }
       // evaluate disabled
       if (typeof dependent.disabled === 'object' && dependent.disabled.disableWhenExpression) {
@@ -192,8 +217,6 @@ function evaluateFieldDependents(field: FormField, values: any, context: FormCon
     });
   }
 
-  let shouldUpdateForm = false;
-
   // handle sections
   if (field.sectionDependents) {
     field.sectionDependents.forEach((sectionId) => {

package/src/utils/form-helper.ts

@@ -1,5 +1,5 @@
 import { type LayoutType } from '@openmrs/esm-framework';
-import type { FormField, FormPage, FormSection, SessionMode, FHIRObsResource, RenderType } from '../types';
+import type { FormField, FormPage, FormSection, SessionMode, FHIRObsResource, RenderType, FormSchema } from '../types';
 import { isEmpty } from '../validators/form-validator';
 import { parseToLocalDateTime } from './common-utils';
 import dayjs from 'dayjs';
@@ -271,3 +271,13 @@ function extractFHIRObsValue(fhirObs: FHIRObsResource, rendering: RenderType) {
       return fhirObs.valueString;
   }
 }
+
+/**
+ * Find formField section
+ * @param formJson FormSchema
+ * @param field FormField
+ */
+export function findFieldSection(formJson: FormSchema, field: FormField) {
+  let page = formJson.pages.find((page) => field.meta.pageId === page.id);
+  return page.sections.find((section) => section.questions.find((question) => question.id === field.id));
+}