@openmrs/esm-form-engine-lib 3.0.0-pre.1636 → 3.0.0-pre.1638

package/__mocks__/forms/rfe-forms/obs-group-test_form.json

@@ -1,137 +1,201 @@
 {
-    "name": "ObsGroup Test Form",
-    "version": "1",
-    "published": true,
-    "retired": false,
-    "pages": [
-      {
-        "label": "Introduction",
-        "sections": [
-          {
-            "label": "",
-            "isExpanded": "true",
-            "questions": [
-              {
-                "type": "markdown",
-                "questionOptions": {
-                  "rendering": "markdown"
-                },
-                "id": "fooMarkdown",
-                "value": [
-                  "**Use this form to:** Test Obs Group behaviour"
-                ]
-              }
-            ]
-          }
-        ]
-      }, 
-      {
-        "label": "Obs Group Page",
-        "sections": [
-          {
-            "label": "Group Section",
-            "isExpanded": "true",
-            "questions": [
-              {
-                "id": "myGroup",
-                "label": "My Group",
-                "type": "obsGroup",
-                "questionOptions": {
-                  "rendering": "repeating",
-                  "concept": "1c70c490-cafa-4c95-9fdd-a30b62bb78b8"
+  "name": "ObsGroup Test Form",
+  "version": "1",
+  "published": true,
+  "retired": false,
+  "pages": [
+    {
+      "label": "Obs Group Page",
+      "sections": [
+        {
+          "label": "Group Section",
+          "isExpanded": "true",
+          "questions": [
+            {
+              "id": "myGroup",
+              "label": "My Group",
+              "type": "obsGroup",
+              "questionOptions": {
+                "rendering": "repeating",
+                "concept": "1c70c490-cafa-4c95-9fdd-a30b62bb78b8"
+              },
+              "behaviours": [
+                {
+                  "intent": "*",
+                  "required": "false",
+                  "unspecified": "false",
+                  "hide": {
+                    "hideWhenExpression": ""
+                  },
+                  "validators": []
+                }
+              ],
+              "questions": [
+                {
+                  "label": "Sex",
+                  "type": "obs",
+                  "required": "true",
+                  "questionOptions": {
+                    "rendering": "radio",
+                    "concept": "1587AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                    "answers": [
+                      {
+                        "concept": "1535AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                        "label": "Female"
+                      },
+                      {
+                        "concept": "1534AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                        "label": "Male"
+                      }
+                    ]
+                  },
+                  "id": "childSex",
+                  "behaviours": [
+                    {
+                      "intent": "*",
+                      "required": "true",
+                      "unspecified": "true",
+                      "hide": {
+                        "hideWhenExpression": "false"
+                      },
+                      "validators": []
+                    }
+                  ]
                 },
-                "behaviours":[
-                  {
-                    "intent":"*",
-                    "required":"false",
-                    "unspecified":"false",
-                    "hide":{
-                      "hideWhenExpression":""
-                    },
-                    "validators":[]
-                  }
-                ],
-                "questions": [
-                  {
-                    "label": "Sex",
-                    "type":"obs",
-                    "required":"true",
-                    "questionOptions":{
-                      "rendering":"radio",
-                      "concept":"1587AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-                      "answers":[
+                {
+                  "label": "Date of Birth",
+                  "type": "obs",
+                  "questionOptions": {
+                    "rendering": "date",
+                    "concept": "164802AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                    "weeksList": ""
+                  },
+                  "id": "birthDate",
+                  "behaviours": [
+                    {
+                      "intent": "*",
+                      "required": "true",
+                      "unspecified": "true",
+                      "hide": {
+                        "hideWhenExpression": "false"
+                      },
+                      "validators": [
                         {
-                          "concept":"1535AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-                          "label":"Female"
+                          "type": "date",
+                          "allowFutureDates": "false"
                         },
                         {
-                          "concept":"1534AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-                          "label":"Male"
+                          "type": "js_expression",
+                          "failsWhenExpression": "!isDateEqualTo(myValue, useFieldValue('visit_date'))",
+                          "message": "Child birth date should be the same as the visit date!"
                         }
                       ]
-                    },
-                    "id":"childSex",
-                    "behaviours":[
-                      {
-                        "intent":"*",
-                        "required":"true",
-                        "unspecified":"true",
-                        "hide":{
-                          "hideWhenExpression":"false"
-                        },
-                        "validators":[]
-                      }
-                    ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "label": "Screening Section",
+          "questions": [
+            {
+              "label": "Do you have dependents?",
+              "id": "hasDependents",
+              "type": "obs",
+              "questionOptions": {
+                "rendering": "radio",
+                "concept": "a89e3f94-1350-11df-a1f1-0026b9348837",
+                "answers": [
+                  {
+                    "concept": "a89ce50e-1350-11df-a1f1-0026b9348839",
+                    "label": "Yes"
                   },
                   {
-                    "label": "Date of Birth",
-                    "type": "obs",
-                    "questionOptions": {
-                      "rendering": "date",
-                      "concept": "164802AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-                      "weeksList": ""
-                    },
-                    "id": "birthDate",
-                    "behaviours": [
+                    "concept": "a89ce50e-1350-11df-a1f1-0026b9348838",
+                    "label": "No"
+                  }
+                ]
+              }
+            }
+          ]
+        },
+        {
+          "label": "Groups with Hide logic",
+          "questions": [
+            {
+              "type": "obsGroup",
+              "label": "Dependents Group",
+              "id": "dependentGroup",
+              "questionOptions": {
+                "concept": "3665d0ef-3718-47b2-9091-8b685bda412d",
+                "rendering": "group"
+              },
+              "questions": [
+                {
+                  "label": "Dependent Type",
+                  "id": "dependentType",
+                  "type": "obs",
+                  "questionOptions": {
+                    "rendering": "radio",
+                    "concept": "a89e3f94-1350-11df-a1f1-0026b9348838",
+                    "answers": [
                       {
-                        "intent": "*",
-                        "required": "true",
-                        "unspecified": "true",
-                        "hide": {
-                          "hideWhenExpression": "false"
-                        },
-                        "validators": [
-                          {
-                            "type": "date",
-                            "allowFutureDates": "false"
-                          },
-                          {
-                            "type": "js_expression",
-                            "failsWhenExpression": "!isDateEqualTo(myValue, useFieldValue('visit_date'))",
-                            "message": "Child birth date should be the same as the visit date!"
-                          }
-                        ]
+                        "concept": "6daff4ce-bce7-41f5-9141-17e694155180",
+                        "label": "Child"
+                      },
+                      {
+                        "concept": "a89ce50e-1350-11df-a1f1-0026b9348838",
+                        "label": "Spouse"
                       }
                     ]
+                  },
+                  "hide": {
+                    "hideWhenExpression": "hasDependents !== 'a89ce50e-1350-11df-a1f1-0026b9348839'"
                   }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    ],
-    "availableIntents": [
-      {
-        "intent": "*",
-        "display": "ObsGroup Test Form"
-      }
-    ],
-    "processor": "EncounterFormProcessor",
-    "uuid": "8f713e0e-94a0-3c57-9024-69520933802a",
-    "referencedForms": [],
-    "encounterType": "7e54cd64-f9c3-11eb-8e6a-57478ce139b0",
-    "encounter": "Obs Group Test",
-    "allowUnspecifiedAll": true
-  }
-  
+                },
+                {
+                  "label": "Dependent Name",
+                  "id": "dependentName",
+                  "type": "obs",
+                  "questionOptions": {
+                    "rendering": "text",
+                    "concept": "a8a06fc6-1350-11df-a1f1-0026b9348838"
+                  },
+                  "hide": {
+                    "hideWhenExpression": "isEmpty(dependentType)"
+                  }
+                },
+                {
+                  "label": "Dependent Age",
+                  "id": "dependentAge",
+                  "type": "obs",
+                  "questionOptions": {
+                    "rendering": "number",
+                    "concept": "a8a06fc6-1350-11df-a1f1-0026b9348839"
+                  },
+                  "hide": {
+                    "hideWhenExpression": "dependentType !== '6daff4ce-bce7-41f5-9141-17e694155180'"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "availableIntents": [
+    {
+      "intent": "*",
+      "display": "ObsGroup Test Form"
+    }
+  ],
+  "processor": "EncounterFormProcessor",
+  "uuid": "8f713e0e-94a0-3c57-9024-69520933802a",
+  "referencedForms": [],
+  "encounterType": "7e54cd64-f9c3-11eb-8e6a-57478ce139b0",
+  "encounter": "Obs Group Test",
+  "allowUnspecifiedAll": true
+}

package/package.json

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

package/src/components/group/obs-group.component.tsx

@@ -9,13 +9,13 @@ import { useTranslation } from 'react-i18next';
 
 export const ObsGroup: React.FC<FormFieldInputProps> = ({ field, ...restProps }) => {
   const { t } = useTranslation();
-  const { formFieldAdapters } = useFormProviderContext();
-  const showLabel = useMemo(() => field.questions?.length > 1, [field]);
+  const { formFieldAdapters, formFields } = useFormProviderContext();
 
   const content = useMemo(
     () =>
       field.questions
-        ?.filter((child) => !child.isHidden)
+        .map((child) => formFields.find((field) => field.id === child.id))
+        .filter((child) => !child.isHidden)
         .map((child, index) => {
           const key = `${child.id}_${index}`;
 
@@ -35,12 +35,12 @@ export const ObsGroup: React.FC<FormFieldInputProps> = ({ field, ...restProps })
             );
           }
         }),
-    [field],
+    [field, formFields],
   );
 
   return (
     <div className={styles.groupContainer}>
-      {showLabel ? (
+      {content.length > 1 ? (
         <FormGroup legendText={t(field.label)} className={styles.boldLegend}>
           {content}
         </FormGroup>

package/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx

@@ -1,21 +1,21 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { debounce } from 'lodash-es';
 import { ComboBox, DropdownSkeleton, Layer, InlineLoading } from '@carbon/react';
-import { isTrue } from '../../../utils/boolean-utils';
 import { useTranslation } from 'react-i18next';
-import { getRegisteredDataSource } from '../../../registry/registry';
+import { useWatch } from 'react-hook-form';
+import { type OpenmrsResource } from '@openmrs/esm-framework';
 import { getControlTemplate } from '../../../registry/inbuilt-components/control-templates';
-import { type DataSource, type FormFieldInputProps } from '../../../types';
+import { getRegisteredDataSource } from '../../../registry/registry';
 import { isEmpty } from '../../../validators/form-validator';
+import { isTrue } from '../../../utils/boolean-utils';
+import { isViewMode } from '../../../utils/common-utils';
 import { shouldUseInlineLayout } from '../../../utils/form-helper';
-import FieldValueView from '../../value/view/field-value-view.component';
-import styles from './ui-select-extended.scss';
+import { type DataSource, type FormFieldInputProps } from '../../../types';
 import { useFormProviderContext } from '../../../provider/form-provider';
-import FieldLabel from '../../field-label/field-label.component';
-import { useWatch } from 'react-hook-form';
 import useDataSourceDependentValue from '../../../hooks/useDataSourceDependentValue';
-import { isViewMode } from '../../../utils/common-utils';
-import { type OpenmrsResource } from '@openmrs/esm-framework';
+import FieldLabel from '../../field-label/field-label.component';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './ui-select-extended.scss';
 
 const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnings, setFieldValue }) => {
   const { t } = useTranslation();
@@ -49,6 +49,7 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
 
   const debouncedSearch = debounce((searchTerm: string, dataSource: DataSource<OpenmrsResource>) => {
     setIsSearching(true);
+
     dataSource
       .fetchData(searchTerm, config)
       .then((dataItems) => {
@@ -86,22 +87,33 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
   }, [field.questionOptions?.datasource]);
 
   useEffect(() => {
+    let ignore = false;
+
     // If not searchable, preload the items
     if (dataSource && !isTrue(field.questionOptions.isSearchable)) {
       setItems([]);
       setIsLoading(true);
+
       dataSource
         .fetchData(null, { ...config, referencedValue: dataSourceDependentValue })
         .then((dataItems) => {
-          setItems(dataItems.map(dataSource.toUuidAndDisplay));
-          setIsLoading(false);
+          if (!ignore) {
+            setItems(dataItems.map(dataSource.toUuidAndDisplay));
+            setIsLoading(false);
+          }
         })
         .catch((err) => {
-          console.error(err);
-          setIsLoading(false);
-          setItems([]);
+          if (!ignore) {
+            console.error(err);
+            setIsLoading(false);
+            setItems([]);
+          }
         });
     }
+
+    return () => {
+      ignore = true;
+    };
   }, [dataSource, config, dataSourceDependentValue]);
 
   useEffect(() => {
@@ -111,19 +123,28 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
   }, [dataSource, searchTerm, config]);
 
   useEffect(() => {
+    let ignore = false;
     if (value && !isDirty && dataSource && isSearchable && sessionMode !== 'enter' && !items.length) {
       // While in edit mode, search-based instances should fetch the initial item (previously selected value) to resolve its display property
       setIsLoading(true);
       try {
         dataSource.fetchSingleItem(value).then((item) => {
-          setItems([dataSource.toUuidAndDisplay(item)]);
-          setIsLoading(false);
+          if (!ignore) {
+            setItems([dataSource.toUuidAndDisplay(item)]);
+            setIsLoading(false);
+          }
         });
       } catch (error) {
-        console.error(error);
-        setIsLoading(false);
+        if (!ignore) {
+          console.error(error);
+          setIsLoading(false);
+        }
       }
     }
+
+    return () => {
+      ignore = true;
+    };
   }, [value, isDirty, sessionMode, dataSource, isSearchable, items]);
 
   if (isLoading) {

package/src/form-engine.test.tsx

@@ -876,6 +876,50 @@ describe('Form engine component', () => {
   });
 
   describe('Obs group', () => {
+    it('should not render empty obs group', async () => {
+      await act(async () => {
+        renderForm(null, obsGroupTestForm);
+      });
+
+      // Check that only one obs group is initially rendered
+      const initialGroups = screen.getAllByRole('group', { name: /My Group|Dependents Group/i });
+      expect(initialGroups.length).toBe(1);
+      const dependentTypeRadios = screen.queryAllByRole('radio', { name: /child|spouse/i });
+      expect(dependentTypeRadios.length).toBe(0);
+
+      // Select "Yes" for having dependents
+      const yesRadio = screen.getByRole('radio', { name: /yes/i });
+      await user.click(yesRadio);
+
+      // Now the dependent type radios should be visible
+      const visibleDependentTypeRadios = screen.getAllByRole('radio', { name: /child|spouse/i });
+      expect(visibleDependentTypeRadios.length).toBe(2);
+
+      // Check that the group label is still hidden since it only has one visible field
+      const dependentsGroupResults = screen.queryAllByRole('group', { name: /Dependents Group/i });
+      expect(dependentsGroupResults.length).toBe(0);
+
+      // Check that dependent name and age are still hidden
+      const hiddenDependentNameInput = screen.queryByRole('textbox', { name: /dependent name/i });
+      const hiddenDependentAgeInput = screen.queryByRole('spinbutton', { name: /dependent age/i });
+      expect(hiddenDependentNameInput).toBeNull();
+      expect(hiddenDependentAgeInput).toBeNull();
+
+      // Select "Child" as dependent type
+      await user.click(visibleDependentTypeRadios[0]);
+
+      // Check the visibility of the group label
+      const dependentsGroup = screen.getAllByRole('group', { name: /Dependents Group/i })[0];
+      expect(dependentsGroup).toBeInTheDocument();
+
+      // Check that dependent name and age are now visible
+      const dependentNameInput = screen.getByRole('textbox', { name: /dependent name/i });
+      const dependentAgeInput = screen.getByRole('spinbutton', { name: /dependent age/i });
+
+      expect(dependentNameInput).toBeInTheDocument();
+      expect(dependentAgeInput).toBeInTheDocument();
+    });
+
     it('should save obs group on form submission', async () => {
       const saveEncounterMock = jest.spyOn(api, 'saveEncounter');
       await act(async () => {

package/src/hooks/useEncounter.ts

@@ -11,8 +11,12 @@ export function useEncounter(formJson: FormSchema) {
   const [error, setError] = useState(null);
 
   useEffect(() => {
+    const abortController = new AbortController();
+
     if (!isEmpty(formJson.encounter) && isString(formJson.encounter)) {
-      openmrsFetch(`${restBaseUrl}/encounter/${formJson.encounter}?v=${encounterRepresentation}`)
+      openmrsFetch(`${restBaseUrl}/encounter/${formJson.encounter}?v=${encounterRepresentation}`, {
+        signal: abortController.signal,
+      })
         .then((response) => {
           setEncounter(response.data);
           setIsLoading(false);
@@ -26,6 +30,10 @@ export function useEncounter(formJson: FormSchema) {
     } else {
       setIsLoading(false);
     }
+
+    return () => {
+      abortController.abort();
+    };
   }, [formJson.encounter]);
 
   return { encounter: encounter, error, isLoading };

package/src/hooks/useFormJson.ts

@@ -11,6 +11,8 @@ export function useFormJson(formUuid: string, rawFormJson: any, encounterUuid: s
   const [error, setError] = useState(validateFormsArgs(formUuid, rawFormJson));
 
   useEffect(() => {
+    const abortController = new AbortController();
+
     const setFormJsonWithTranslations = (formJson: FormSchema) => {
       if (formJson?.translations) {
         const language = window.i18next.language;
@@ -24,9 +26,15 @@ export function useFormJson(formUuid: string, rawFormJson: any, encounterUuid: s
         setFormJsonWithTranslations({ ...formJson, encounter: encounterUuid });
       })
       .catch((error) => {
-        console.error(error);
-        setError(new Error('Error loading form JSON: ' + error.message));
+        if (error.name !== 'AbortError') {
+          console.error(error);
+          setError(new Error('Error loading form JSON: ' + error.message));
+        }
       });
+
+    return () => {
+      abortController.abort();
+    };
   }, [formSessionIntent, formUuid, rawFormJson, encounterUuid]);
 
   return {

package/src/hooks/usePatientPrograms.ts

@@ -9,19 +9,29 @@ export const usePatientPrograms = (patientUuid: string, formJson: FormSchema) =>
   const [error, setError] = useState(null);
 
   useEffect(() => {
+    const abortController = new AbortController();
+
     if (formJson.meta?.programs?.hasProgramFields) {
-      openmrsFetch(`${restBaseUrl}/programenrollment?patient=${patientUuid}&v=${customRepresentation}`)
+      openmrsFetch(`${restBaseUrl}/programenrollment?patient=${patientUuid}&v=${customRepresentation}`, {
+        signal: abortController.signal,
+      })
         .then((response) => {
           setPatientPrograms(response.data.results.filter((enrollment) => enrollment.dateCompleted === null));
           setIsLoading(false);
         })
         .catch((error) => {
-          setError(error);
-          setIsLoading(false);
+          if (error.name !== 'AbortError') {
+            setError(error);
+            setIsLoading(false);
+          }
         });
     } else {
       setIsLoading(false);
     }
+
+    return () => {
+      abortController.abort();
+    };
   }, [formJson]);
 
   return {

package/src/hooks/useProcessorDependencies.ts

@@ -13,17 +13,27 @@ const useProcessorDependencies = (
   const { loadDependencies } = formProcessor;
 
   useEffect(() => {
+    let ignore = false;
+
     if (loadDependencies) {
       setIsLoading(true);
       loadDependencies(context, setContext)
-        .then((results) => {
-          setIsLoading(false);
+        .then(() => {
+          if (!ignore) {
+            setIsLoading(false);
+          }
         })
         .catch((error) => {
-          setError(error);
-          reportError(error, 'Encountered error while loading dependencies');
+          if (!ignore) {
+            setError(error);
+            reportError(error, 'Encountered error while loading dependencies');
+          }
         });
     }
+
+    return () => {
+      ignore = true;
+    };
   }, [loadDependencies]);
 
   return { isLoading, error };