@openmrs/esm-form-engine-lib 3.1.5-pre.2075 → 3.1.5-pre.2082

package/package.json

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

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

@@ -5,8 +5,21 @@ describe('shouldRenderField', () => {
     const sessionMode = 'embedded-view';
     const isTransient = true;
     const isEmpty = true;
+    const hideUnansweredQuestionsInReadonlyForms = false;
+
+    const result = shouldRenderField(sessionMode, isTransient, isEmpty, hideUnansweredQuestionsInReadonlyForms);
+
+    expect(result).toBe(false);
+  });
+
+  it('should return false for non-transient empty fields when hideUnansweredQuestionsInReadonlyForms is true in embedded-view mode', () => {
+    const sessionMode = 'embedded-view';
+    const isTransient = false;
+    const isEmpty = true;
+    const hideUnansweredQuestionsInReadonlyForms = true;
+
+    const result = shouldRenderField(sessionMode, isTransient, isEmpty, hideUnansweredQuestionsInReadonlyForms);
 
-    const result = shouldRenderField(sessionMode, isTransient, isEmpty);
     expect(result).toBe(false);
   });
 
@@ -14,17 +27,32 @@ describe('shouldRenderField', () => {
     const sessionMode = 'embedded-view';
     const isTransient = true;
     const isEmpty = false;
+    const hideUnansweredQuestionsInReadonlyForms = true;
+
+    const result = shouldRenderField(sessionMode, isTransient, isEmpty, hideUnansweredQuestionsInReadonlyForms);
 
-    const result = shouldRenderField(sessionMode, isTransient, isEmpty);
     expect(result).toBe(true);
   });
 
-  it('should return true for non-transient fields in embedded-view mode', () => {
+  it('should return true for non-transient empty fields when hideUnansweredQuestionsInReadonlyForms is false in embedded-view mode', () => {
     const sessionMode = 'embedded-view';
     const isTransient = false;
     const isEmpty = true;
+    const hideUnansweredQuestionsInReadonlyForms = false;
+
+    const result = shouldRenderField(sessionMode, isTransient, isEmpty, hideUnansweredQuestionsInReadonlyForms);
+
+    expect(result).toBe(true);
+  });
+
+  it('should return true for non-empty fields in embedded-view mode regardless of flags', () => {
+    const sessionMode = 'embedded-view';
+    const isTransient = false;
+    const isEmpty = false;
+    const hideUnansweredQuestionsInReadonlyForms = true;
+
+    const result = shouldRenderField(sessionMode, isTransient, isEmpty, hideUnansweredQuestionsInReadonlyForms);
 
-    const result = shouldRenderField(sessionMode, isTransient, isEmpty);
     expect(result).toBe(true);
   });
 
@@ -32,8 +60,10 @@ describe('shouldRenderField', () => {
     const sessionMode = 'edit';
     const isTransient = true;
     const isEmpty = true;
+    const hideUnansweredQuestionsInReadonlyForms = true;
+
+    const result = shouldRenderField(sessionMode, isTransient, isEmpty, hideUnansweredQuestionsInReadonlyForms);
 
-    const result = shouldRenderField(sessionMode, isTransient, isEmpty);
     expect(result).toBe(true);
   });
 });

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

@@ -2,9 +2,15 @@ import { type SessionMode } from '../../../types';
 
 /**
  * @name shouldRenderField
- * @description Determines if a field should be rendered based on the session mode, whether it is transient, and if it is empty.
- * - A field will not be rendered in 'embedded-view' mode if it is transient and has no value.
+ * @description Returns true if a field should be rendered.
+ * A field is hidden in 'embedded-view' mode when it is empty
+ * and either transient or `hideUnansweredQuestionsInReadonlyForms` is enabled.
  */
-export function shouldRenderField(sessionMode: SessionMode, isTransient: boolean, isEmpty: boolean): boolean {
-  return !(sessionMode === 'embedded-view' && isTransient && isEmpty);
+export function shouldRenderField(
+  sessionMode: SessionMode,
+  isTransient: boolean,
+  isEmptyValue: boolean,
+  hideUnansweredQuestionsInReadonlyForms: boolean,
+): boolean {
+  return !(sessionMode === 'embedded-view' && isEmptyValue && (isTransient || hideUnansweredQuestionsInReadonlyForms));
 }

package/src/components/renderer/field/form-field-renderer.component.tsx

@@ -3,6 +3,7 @@ import { ToastNotification } from '@carbon/react';
 import { Controller, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { ErrorBoundary } from 'react-error-boundary';
+import { useConfig } from '@openmrs/esm-framework';
 import {
   type FormField,
   type FormFieldInputProps,
@@ -38,6 +39,9 @@ export const FormFieldRenderer = ({ fieldId, valueAdapter, repeatOptions }: Form
   const [warnings, setWarnings] = useState<ValidationResult[]>([]);
   const [historicalValue, setHistoricalValue] = useState<ValueAndDisplay>(null);
   const context = useFormProviderContext();
+  const { hideUnansweredQuestionsInReadonlyForms } = useConfig({
+    externalModuleName: '@openmrs/esm-form-engine-app',
+  });
 
   const {
     methods: { control, getValues, getFieldState },
@@ -174,9 +178,16 @@ export const FormFieldRenderer = ({ fieldId, valueAdapter, repeatOptions }: Form
     );
   }
 
-  // If the field is transient and has no value, we do not render it in embedded view mode.
-  // This is to prevent transient fields from being displayed in the form when they are not necessarily needed.
-  if (!shouldRenderField(sessionMode, !!field.questionOptions.isTransient, isEmpty(fieldValue))) {
+  // In 'embedded-view' mode, empty fields are hidden if they are transient
+  // or if the config flag `hideUnansweredQuestionsInReadonlyForms` is enabled.
+  if (
+    !shouldRenderField(
+      sessionMode,
+      !!field.questionOptions.isTransient,
+      isEmpty(fieldValue),
+      hideUnansweredQuestionsInReadonlyForms,
+    )
+  ) {
     return null;
   }
 

package/src/form-engine.test.tsx

@@ -1076,9 +1076,12 @@ describe('Form engine component', () => {
       await user.click(addButton);
 
       expect(screen.getByRole('button', { name: /Remove/i })).toBeInTheDocument();
-      expect(screen.getAllByRole('radio', { name: /^male$/i }).length).toEqual(2);
-      expect(screen.getAllByRole('radio', { name: /^female$/i }).length).toEqual(2);
-      expect(screen.getAllByRole('textbox', { name: /date of birth/i }).length).toEqual(2);
+
+      await waitFor(() => {
+        expect(screen.getAllByRole('radio', { name: /^male$/i })).toHaveLength(2);
+        expect(screen.getAllByRole('radio', { name: /female/i })).toHaveLength(2);
+        expect(screen.getAllByRole('textbox', { name: /date of birth/i })).toHaveLength(2);
+      });
     });
 
     it('should test deletion of a group', async () => {