@openmrs/esm-form-engine-lib 2.1.0-pre.1534 → 2.1.0-pre.1542

package/__mocks__/forms/rfe-forms/hide-pages-and-sections-form.json

@@ -0,0 +1,93 @@
+{
+  "encounterType": "e22e39fd-7db2-45e7-80f1-60fa0d5a4378",
+  "name": "Hide Pages and Sections",
+  "processor": "EncounterFormProcessor",
+  "referencedForms": [],
+  "uuid": "7c77485c-7a57-4646-ac21-11d92555a420",
+  "version": "1.0",
+  "pages": [
+    {
+      "label": "Page 1",
+      "sections": [
+        {
+          "label": "Section 1A",
+          "isExpanded": "true",
+          "questions": [
+            {
+              "id": "hideSection1B",
+              "label": "Hide Section 1B",
+              "type": "obs",
+              "questionOptions": {
+                "rendering": "text",
+                "concept": "7aef2620-76e0-4d88-b9cb-c47ba4f67bce"
+              }
+            }
+          ]
+        },
+        {
+          "label": "Section 1B",
+          "isExpanded": "true",
+          "hide": {
+            "hideWhenExpression": "isEmpty(hideSection1B)"
+          },
+          "questions": [
+            {
+              "id": "hidePage2",
+              "label": "Hide Page 2",
+              "type": "obs",
+              "questionOptions": {
+                "rendering": "radio",
+                "concept": "1255AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                "answers": [
+                  {
+                    "concept": "1256AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                    "label": "Choice 1",
+                    "conceptMappings": []
+                  },
+                  {
+                    "concept": "1258AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                    "label": "Choice 2",
+                    "conceptMappings": []
+                  },
+                  {
+                    "concept": "1259AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                    "label": "Choice 3",
+                    "conceptMappings": []
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "Page 2",
+      "hide": {
+        "hideWhenExpression": "hidePage2 === '1258AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'"
+      },
+      "sections": [
+        {
+          "label": "Section 2A",
+          "isExpanded": "true",
+          "questions": [
+            {
+              "label": "Date",
+              "type": "obs",
+              "required": false,
+              "id": "date",
+              "datePickerFormat": "calendar",
+              "questionOptions": {
+                "rendering": "date",
+                "concept": "159599AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                "conceptMappings": []
+              },
+              "validators": []
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "description": "Hide Pages and Sections"
+}

package/__mocks__/forms/rfe-forms/js-expression-validation-form.json

@@ -0,0 +1,54 @@
+{
+  "name": "Js expression validation",
+  "uuid": "xxxx",
+  "EncounterType": "xxxx",
+  "referencedForms": [],
+  "processor": "EncounterFormProcessor",
+  "pages": [
+    {
+      "label": "Page 1",
+      "sections": [
+        {
+          "label": "Section 1",
+          "questions": [
+            {
+              "label": "Question 1",
+              "type": "obs",
+              "required": false,
+              "id": "question1",
+              "questionOptions": {
+                "rendering": "text",
+                "concept": "166103AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                "conceptMappings": [
+                  {
+                    "relationship": "SAME-AS",
+                    "type": "PIH",
+                    "value": "2724"
+                  },
+                  {
+                    "relationship": "SAME-AS",
+                    "type": "SNOMED CT",
+                    "value": "397678008"
+                  },
+                  {
+                    "relationship": "SAME-AS",
+                    "type": "CIEL",
+                    "value": "166103"
+                  }
+                ],
+                "showDate": true
+              },
+              "validators": [
+                {
+                  "type": "js_expression",
+                  "failsWhenExpression": "isEmpty(myValue)",
+                  "message": "Empty value not allowed!"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/package.json

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

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

@@ -206,9 +206,9 @@ function evaluateFieldDependents(field: FormField, values: any, context: FormCon
       }
       shouldUpdateForm = true;
     });
+  }
 
-    if (shouldUpdateForm) {
-      setForm({ ...formJson });
-    }
+  if (shouldUpdateForm) {
+    setForm(formJson);
   }
 }

package/src/form-engine.test.tsx

@@ -12,7 +12,7 @@ import {
 } from '@openmrs/esm-framework';
 import { when } from 'jest-when';
 import * as api from './api';
-import { assertFormHasAllFields, findCheckboxGroup, findSelectInput } from './utils/test-utils';
+import { assertFormHasAllFields, findCheckboxGroup, findSelectInput, findTextOrDateInput } from './utils/test-utils';
 import { evaluatePostSubmissionExpression } from './utils/post-submission-action-helper';
 import { mockPatient } from '__mocks__/patient.mock';
 import { mockSessionDataResponse } from '__mocks__/session.mock';
@@ -42,6 +42,8 @@ import monthsOnArtForm from '__mocks__/forms/rfe-forms/months-on-art-form.json';
 import nextVisitForm from '__mocks__/forms/rfe-forms/next-visit-test-form.json';
 import viralLoadStatusForm from '__mocks__/forms/rfe-forms/viral-load-status-form.json';
 import readOnlyValidationForm from '__mocks__/forms/rfe-forms/read-only-validation-form.json';
+import jsExpressionValidationForm from '__mocks__/forms/rfe-forms/js-expression-validation-form.json';
+import hidePagesAndSectionsForm from '__mocks__/forms/rfe-forms/hide-pages-and-sections-form.json';
 
 import FormEngine from './form-engine.component';
 import { type SessionMode } from './types';
@@ -262,6 +264,21 @@ describe('Form engine component', () => {
     });
   });
 
+  describe('js-expression based validation', () => {
+    it('should invoke validation when field value changes', async () => {
+      await act(async () => {
+        renderForm(null, jsExpressionValidationForm);
+      });
+
+      const textField = await findTextOrDateInput(screen, 'Question 1');
+      await user.type(textField, 'Some value');
+      // clear value
+      await user.clear(textField);
+      const errorMessage = await screen.findByText(/Empty value not allowed!/i);
+      expect(errorMessage).toBeInTheDocument();
+    });
+  });
+
   describe('historical expressions', () => {
     it('should ascertain getPreviousEncounter() returns an encounter and the historical expression displays on the UI', async () => {
       renderForm(null, historicalExpressionsForm, 'COVID Assessment');
@@ -619,6 +636,49 @@ describe('Form engine component', () => {
     });
   });
 
+  describe('Hide pages and sections', () => {
+    it('should hide/show section based on field value', async () => {
+      await act(async () => renderForm(null, hidePagesAndSectionsForm));
+
+      // assert section "Section 1B" is hidden at initial render
+      try {
+        await screen.findByText('Section 1B');
+        fail('The section named "Section 1B" should be hidden');
+      } catch (err) {
+        expect(err.message.includes('Unable to find an element with the text: Section 1B')).toBeTruthy();
+      }
+
+      // user interactions to make section visible
+      const hideSection1bField = await findTextOrDateInput(screen, 'Hide Section 1B');
+      await user.type(hideSection1bField, 'Some value');
+
+      const section1b = await screen.findByText('Section 1B');
+      expect(section1b).toBeInTheDocument();
+    });
+
+    it('should hide/show page based on field value', async () => {
+      await act(async () => renderForm(null, hidePagesAndSectionsForm));
+
+      // assert page "Page 2" is visible at initial render
+      const page2 = await screen.findByText('Page 2');
+      expect(page2).toBeInTheDocument();
+
+      // user interactions to hide page
+      const hideSection1bField = await findTextOrDateInput(screen, 'Hide Section 1B');
+      await user.type(hideSection1bField, 'Some value');
+      const choice2RadioOption = screen.getByRole('radio', { name: /Choice 2/i });
+      await user.click(choice2RadioOption);
+
+      // assert page is hidden
+      try {
+        await screen.findByText('Page 2');
+        fail('The page named "Page 2" should be hidden');
+      } catch (err) {
+        expect(err.message.includes('Unable to find an element with the text: Page 2')).toBeTruthy();
+      }
+    });
+  });
+
   describe('Calculated values', () => {
     it('should evaluate BMI', async () => {
       await act(async () => renderForm(null, bmiForm));

package/src/hooks/useEvaluateFormFieldExpressions.ts

@@ -5,6 +5,7 @@ import { evalConditionalRequired, evaluateConditionalAnswered, evaluateHide } fr
 import { isTrue } from '../utils/boolean-utils';
 import { isEmpty } from '../validators/form-validator';
 import { type QuestionAnswerOption } from '../types/schema';
+import { updateFormSectionReferences } from '../utils/common-utils';
 
 export const useEvaluateFormFieldExpressions = (
   formValues: Record<string, any>,
@@ -125,7 +126,7 @@ export const useEvaluateFormFieldExpressions = (
         }
       });
     });
-    setEvaluatedFormJson(factoryContext.formJson);
+    setEvaluatedFormJson(updateFormSectionReferences(factoryContext.formJson));
   }, [factoryContext.formJson, formFields]);
 
   return { evaluatedFormJson, evaluatedFields };

package/src/hooks/useFormStateHelpers.ts

@@ -2,6 +2,7 @@ import { type Dispatch, useCallback } from 'react';
 import { type FormField, type FormSchema } from '../types';
 import { type Action } from '../components/renderer/form/state';
 import cloneDeep from 'lodash/cloneDeep';
+import { updateFormSectionReferences } from '../utils/common-utils';
 
 export function useFormStateHelpers(dispatch: Dispatch<Action>, formFields: FormField[]) {
   const addFormField = useCallback((field: FormField) => {
@@ -35,7 +36,7 @@ export function useFormStateHelpers(dispatch: Dispatch<Action>, formFields: Form
   }, []);
 
   const setForm = useCallback((formJson: FormSchema) => {
-    dispatch({ type: 'SET_FORM_JSON', value: formJson });
+    dispatch({ type: 'SET_FORM_JSON', value: updateFormSectionReferences(formJson) });
   }, []);
 
   return {

package/src/provider/form-factory-helper.ts

@@ -24,7 +24,7 @@ export function validateForm(context: FormContextProps) {
         const validator = formFieldValidators[validatorConfig.type];
         if (validator) {
           const validationResults = validator.validate(field, values[field.id], {
-            fields: formFields,
+            formFields,
             values,
             expressionContext: {
               patient,

package/src/utils/common-utils.ts

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { type FormField, type OpenmrsObs, type RenderType } from '../types';
+import { type FormSchema, type FormField, type OpenmrsObs, type RenderType } from '../types';
 import { isEmpty } from '../validators/form-validator';
 import { formatDate, type FormatDateOptions } from '@openmrs/esm-framework';
 
@@ -77,3 +77,15 @@ export function formatDateAsDisplayString(field: FormField, date: Date) {
   }
   return formatDate(date, options);
 }
+
+/**
+ * Creates a new copy of `formJson` with updated references at the page and section levels.
+ * This ensures React re-renders properly by providing new references for nested arrays.
+ */
+export function updateFormSectionReferences(formJson: FormSchema) {
+  formJson.pages = formJson.pages.map((page) => {
+    page.sections = Array.from(page.sections);
+    return page;
+  });
+  return { ...formJson };
+}

package/src/validators/js-expression-validator.test.ts

@@ -20,22 +20,22 @@ describe('ExpressionValidator - validate', () => {
   it('should evaluate js expressions', () => {
     // setup
     const field = allFields.find((f) => f.id == 'htsProviderRemarks');
-    const failsWhenExpression = '!isEmpty(myValue) && isEmpty(`referredToPreventionServices`)';
+    const failsWhenExpression = '!isEmpty(myValue) && isEmpty(referredToPreventionServices)';
 
     // replay
     let errors = ExpressionValidator.validate(field, 'Remarks..', {
       failsWhenExpression,
       expressionContext,
       values,
-      message: 'Atleast one type of Prevention Services must be selected',
-      fields: allFields,
+      message: 'At least one type of Prevention Services must be selected',
+      formFields: allFields,
     });
 
     // verify
     expect(errors).toEqual([
       {
         errCode: 'value.invalid',
-        message: 'Atleast one type of Prevention Services must be selected',
+        message: 'At least one type of Prevention Services must be selected',
         resultType: 'error',
       },
     ]);
@@ -49,14 +49,14 @@ describe('ExpressionValidator - validate', () => {
       expressionContext,
       values,
       message: 'Atleast one type of Prevention Services must be selected',
-      fields: allFields,
+      formFields: allFields,
     });
 
     // verify
     expect(errors).toEqual([]);
   });
 
-  fit('should fail if date value is not within the configured bounds', () => {
+  it('should fail if date value is not within the configured bounds', () => {
     // setup
     const dateField: FormField = {
       label: 'Test Date',
@@ -81,7 +81,7 @@ describe('ExpressionValidator - validate', () => {
       ...dateField.validators[0],
       expressionContext,
       values,
-      fields: allFields,
+      formFields: allFields,
     });
 
     // verify
@@ -96,7 +96,7 @@ describe('ExpressionValidator - validate', () => {
       ...dateField.validators[0],
       expressionContext,
       values,
-      fields: allFields,
+      formFields: allFields,
     });
 
     // verify
@@ -109,7 +109,7 @@ describe('ExpressionValidator - validate', () => {
       ...dateField.validators[0],
       expressionContext,
       values,
-      fields: allFields,
+      formFields: allFields,
     });
 
     // verify

package/src/validators/js-expression-validator.ts

@@ -5,7 +5,7 @@ interface ExpressionValidatorConfig {
   failsWhenExpression?: string;
   warnsWhenExpression?: string;
   message: string;
-  fields: FormField[];
+  formFields: FormField[];
   expressionContext: ExpressionContext;
   values: Record<string, any>;
 }
@@ -23,7 +23,7 @@ export const ExpressionValidator: FormFieldValidator = {
         return evaluateExpression(
           config[key],
           { value: field, type: 'field' },
-          config.fields,
+          config.formFields,
           { ...config.values, [field.id]: value },
           config.expressionContext,
         )