@openmrs/esm-form-engine-lib 3.2.0 → 3.3.1-pre.2102

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

@@ -1,56 +1,57 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import { FileUploader, Button } from '@carbon/react';
+import React, { useCallback } from 'react';
+import { Button } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { isTrue } from '../../../utils/boolean-utils';
-import Camera from './camera/camera.component';
-import { Close, DocumentPdf } from '@carbon/react/icons';
+import { Add } from '@carbon/react/icons';
 import styles from './file.scss';
-import { type FormFieldInputProps } from '../../../types';
+import { type Attachment, type FormFieldInputProps } from '../../../types';
 import { useFormProviderContext } from '../../../provider/form-provider';
 import { isViewMode } from '../../../utils/common-utils';
 import FieldValueView from '../../value/view/field-value-view.component';
 import FieldLabel from '../../field-label/field-label.component';
+import { showModal, type UploadedFile, useLayoutType } from '@openmrs/esm-framework';
+import { FileThumbnail } from './file-thumbnail.component';
+import classNames from 'classnames';
 
-type DataSourceType = 'filePicker' | 'camera' | null;
-
-const File: React.FC<FormFieldInputProps> = ({ field, value, setFieldValue }) => {
+const File: React.FC<FormFieldInputProps<Array<Attachment>>> = ({ field, value, setFieldValue }) => {
   const { t } = useTranslation();
-  const [cameraWidgetVisible, setCameraWidgetVisible] = useState(false);
-  const [imagePreview, setImagePreview] = useState(null);
-  const [dataSource, setDataSource] = useState<DataSourceType>(null);
   const { sessionMode } = useFormProviderContext();
+  const isTablet = useLayoutType() === 'tablet';
 
-  const labelDescription = useMemo(() => {
-    return field.questionOptions.allowedFileTypes
-      ? t(
-          'fileUploadDescription',
-          'Upload one of the following file types: {{fileTypes}}',
-          {
-            fileTypes: field.questionOptions.allowedFileTypes.map(
-              (eachItem) => ` ${eachItem}`,
-            )
-          }
-        )
-      : t('fileUploadDescriptionAny', 'Upload any file type');
-  }, [field.questionOptions.allowedFileTypes, t]);
+  const showImageCaptureModal = useCallback(() => {
+    const close = showModal('capture-photo-modal', {
+      saveFile: (file: UploadedFile) => {
+        if (file.capturedFromWebcam && !file.fileName.includes('.')) {
+          file.fileName = `${file.fileName}.png`;
+        }
+        const currentFiles = value ? value : [];
+        setFieldValue([...currentFiles, file]);
+        close();
+        return Promise.resolve();
+      },
+      closeModal: () => {
+        close();
+      },
+      allowedExtensions: field.questionOptions.allowedFileTypes,
+      multipleFiles: field.questionOptions.allowMultiple,
+      collectDescription: true,
+    });
+  }, [value, field]);
 
-  const handleFilePickerChange = useCallback(
-    (event) => {
-      // TODO: Add multiple file upload support; see: https://openmrs.atlassian.net/browse/O3-3682
-      const [selectedFile]: File[] = Array.from(event.target.files);
-      setImagePreview(null);
-      setFieldValue(selectedFile);
+  const handleRemoveFile = useCallback(
+    (index: number) => {
+      const buffer = [...value];
+      const attachment = buffer[index];
+      if (attachment.uuid) {
+        buffer[index] = {
+          ...attachment,
+          voided: true,
+        };
+      } else {
+        buffer.splice(index, 1);
+      }
+      setFieldValue(buffer);
     },
-    [setFieldValue],
-  );
-
-  const handleCameraImageChange = useCallback(
-    (newImage) => {
-      setImagePreview(newImage);
-      setCameraWidgetVisible(false);
-      setFieldValue(newImage);
-    },
-    [setFieldValue],
+    [value],
   );
 
   if (isViewMode(sessionMode) && !value) {
@@ -59,102 +60,37 @@ const File: React.FC<FormFieldInputProps> = ({ field, value, setFieldValue }) =>
     );
   }
 
-  return isViewMode(sessionMode) ? (
+  return (
     <div>
-      <div className={styles.label}>{t(field.label)}</div>
-      <div className={styles.editModeImage}>
-        <div className={styles.imageContent}>
-          {value.bytesContentFamily === 'PDF' ? (
-            <div className={styles.pdfThumbnail} role="button" tabIndex={0}>
-              <DocumentPdf size={24} />
-            </div>
-          ) : (
-            <img src={value.src} alt={t('preview', 'Preview')} width="200px" />
-          )}
-        </div>
-      </div>
-    </div>
-  ) : (
-    <div>
-      <div className={styles.label}>
+      <div className={classNames(styles.label, 'cds--label')}>
         <FieldLabel field={field} />
       </div>
-      <div className={styles.uploadSelector}>
-        <div className={styles.selectorButton}>
-          <Button disabled={isTrue(field.readonly)} onClick={() => setDataSource('filePicker')}>
-            {t('uploadImage', 'Upload image')}
-          </Button>
-        </div>
-        <div className={styles.selectorButton}>
-          <Button disabled={isTrue(field.readonly)} onClick={() => setDataSource('camera')}>
-            {t('cameraCapture', 'Camera capture')}
+      {!isViewMode(sessionMode) && (
+        <div>
+          <Button
+            className={styles.uploadButton}
+            kind={isTablet ? 'ghost' : 'tertiary'}
+            onClick={showImageCaptureModal}
+            renderIcon={(props) => <Add size={16} {...props} />}>
+            {field.questionOptions.buttonLabel ? t(field.questionOptions.buttonLabel) : t('addFile', 'Add file')}
           </Button>
         </div>
-      </div>
-      {!dataSource && value && (
-        <div className={styles.editModeImage}>
-          <div className={styles.imageContent}>
-            {value.bytesContentFamily === 'PDF' ? (
-              <div className={styles.pdfThumbnail} role="button" tabIndex={0}>
-                <DocumentPdf size={24} />
-              </div>
-            ) : (
-              <img src={value.src} alt="Preview" width="200px" />
-            )}
-          </div>
-        </div>
       )}
-      {dataSource === 'filePicker' && (
-        <div className={styles.fileUploader}>
-          <FileUploader
-            accept={field.questionOptions.allowedFileTypes ?? []}
-            buttonKind="primary"
-            buttonLabel={t('addFile', 'Add files')}
-            filenameStatus="edit"
-            iconDescription={t('clearFile', 'Clear file')}
-            labelDescription={labelDescription}
-            labelTitle={t('upload', 'Upload')}
-            // TODO: Add multiple file upload support; see: https://openmrs.atlassian.net/browse/O3-3682
-            // multiple={field.questionOptions.allowMultiple}
-            onChange={handleFilePickerChange}
-          />
-        </div>
-      )}
-      {dataSource === 'camera' && (
-        <div className={styles.cameraUploader}>
-          <div className={styles.camButton}>
-            <p className={styles.titleStyles}>Camera</p>
-            <p className={styles.descriptionStyles}>Capture image via camera</p>
-            <Button onClick={() => setCameraWidgetVisible((prevState) => !prevState)} size="md">
-              {cameraWidgetVisible ? t('closeCamera', 'Close camera') : t('addCameraImage', 'Add camera image')}
-            </Button>
-          </div>
-          {cameraWidgetVisible && (
-            <div className={styles.cameraPreview}>
-              <Camera handleImages={handleCameraImageChange} />
-            </div>
-          )}
-          {imagePreview && (
-            <div className={styles.capturedImage}>
-              <div className={styles.imageContent}>
-                <img src={imagePreview} alt={t('preview', 'Preview')} width="200px" />
-                <div className={styles.caption}>
-                  <p>{t('uploadedPhoto', 'Uploaded photo')}</p>
-                  <div
-                    tabIndex={0}
-                    role="button"
-                    onClick={() => {
-                      setImagePreview(null);
-                    }}
-                    className={styles.closeIcon}>
-                    <Close />
-                  </div>
-                </div>
+      <div className={styles.thumbnailGrid}>
+        {value &&
+          value
+            .filter((file) => !file.voided)
+            .map((file, index) => (
+              <div className={styles.thumbnailContainer}>
+                <FileThumbnail
+                  title={file.fileName}
+                  src={file.base64Content}
+                  bytesContentFamily={file.fileType}
+                  removeFileCb={() => handleRemoveFile(index)}
+                />
               </div>
-            </div>
-          )}
-        </div>
-      )}
+            ))}
+      </div>
     </div>
   );
 };

package/src/components/inputs/file/file.scss

@@ -1,101 +1,21 @@
 @use '@carbon/layout';
 
 .label {
-  font-family: IBM Plex Sans;
-  font-size: 14px;
-  font-style: normal;
   font-weight: 600;
-  line-height: 30px; /* 128.571% */
-  letter-spacing: 0.16px;
+  line-height: 30px;
   color: #000000;
 }
 
-.saveFile {
-  margin: 0;
-}
-
-.capturedImage {
-  width: 100%;
-}
-
-.caption {
-  display: flex;
-}
-
-.closeIcon {
-  margin: 0 1rem;
-}
-
-.uploadSelector {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  flex-wrap: wrap;
+.thumbnailGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 7rem);
   gap: layout.$spacing-05;
+  margin-top: layout.$spacing-05;
 }
 
-.caption {
-  display: flex;
-  margin-top: 5px;
-}
-
-.imageDescription {
-  margin-top: 5px;
-}
-
-.fileUploader {
-  background-color: rgb(255, 255, 255);
-  padding: 1rem;
-}
-
-.cameraUploader {
-  margin: 1rem 0;
-  background-color: white;
-  padding: 1rem;
-}
-
-.camButton {
-  margin-bottom: 1rem;
-}
-
-.cameraPreview {
-  margin-top: 1rem;
-}
-
-.imageContent {
-  padding: 0;
-  margin: 0;
-}
-
-.titleStyles {
-  color: #161616;
-  font-size: 0.875rem;
-  font-weight: 600;
-  letter-spacing: 0.16px;
-  line-height: 1.2857;
-  margin-bottom: 0.5rem;
-}
-
-.descriptionStyles {
-  color: #525252;
-  font-size: 0.875rem;
-  font-weight: 400;
-  letter-spacing: 0.16px;
-  line-height: 1.28572;
-  margin-bottom: 1rem;
-}
-
-.editModeImage {
-  background-color: white;
-  padding: 1rem;
-}
-
-.pdfThumbnail {
-  cursor: pointer;
-  background-color: gray;
+.thumbnailContainer {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
-  width: 5rem;
-  height: 5rem;
+  position: relative;
 }

package/src/components/inputs/workspace-launcher/workspace-launcher.component.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { showSnackbar } from '@openmrs/esm-framework';
-import { useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
+import { launchWorkspace, showSnackbar } from '@openmrs/esm-framework';
 import { Button } from '@carbon/react';
 
 import { useFormProviderContext } from '../../../provider/form-provider';
@@ -12,11 +11,14 @@ import styles from './workspace-launcher.scss';
 
 const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
   const { t } = useTranslation();
-  const launchWorkspace = useLaunchWorkspaceRequiringVisit(field.questionOptions?.workspaceName);
   const { sessionMode } = useFormProviderContext();
 
   const handleLaunchWorkspace = () => {
-    if (!launchWorkspace) {
+    const workspaceName = field.questionOptions?.workspaceName;
+    // TODO: properly check if workspace name is valid
+    // https://openmrs.atlassian.net/browse/O3-4976
+    const isWorkspaceNameValid = true;
+    if (!isWorkspaceNameValid) {
       showSnackbar({
         title: t('invalidWorkspaceName', 'Invalid workspace name.'),
         subtitle: t('invalidWorkspaceNameSubtitle', 'Please provide a valid workspace name.'),
@@ -24,7 +26,7 @@ const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
         isLowContrast: true,
       });
     }
-    launchWorkspace();
+    launchWorkspace(workspaceName);
   };
 
   if (field.isHidden || isViewMode(sessionMode)) {
@@ -36,7 +38,9 @@ const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
       <div className={styles.label}>{t(field.label)}</div>
       <div className={styles.workspaceButton}>
         <Button disabled={isTrue(field.readonly)} onClick={handleLaunchWorkspace}>
-          {t(field.questionOptions?.buttonLabel) ?? t('launchWorkspace', 'Launch Workspace')}
+          {field.questionOptions.buttonLabel
+            ? t(field.questionOptions.buttonLabel)
+            : t('launchWorkspace', 'Launch Workspace')}
         </Button>
       </div>
     </div>

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,
@@ -39,6 +40,21 @@ export const FormFieldRenderer = ({ fieldId, valueAdapter, repeatOptions }: Form
   const [historicalValue, setHistoricalValue] = useState<ValueAndDisplay>(null);
   const context = useFormProviderContext();
 
+  // Try to get config from external module, fallback to default if not available
+  let hideUnansweredQuestionsInReadonlyForms = false;
+  try {
+    const config = useConfig({
+      externalModuleName: '@openmrs/esm-form-engine-app',
+    });
+    hideUnansweredQuestionsInReadonlyForms = config?.hideUnansweredQuestionsInReadonlyForms ?? false;
+  } catch (error) {
+    // If external module config is not available, use default value
+    console.warn(
+      'Failed to load @openmrs/esm-form engine-app config - using hideUnansweredQuestionsInReadonlyForms=false (empty fields will be visible in readonly mode): ',
+      error,
+    );
+  }
+
   const {
     methods: { control, getValues, getFieldState },
     patient,
@@ -174,9 +190,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/components/sidebar/sidebar.scss

@@ -65,10 +65,9 @@
 }
 
 .sidebar {
-  width: 12rem;
+  width: 11.25rem;
   min-height: 8rem;
   overscroll-behavior: contain;
-  margin-right: 1rem;
 }
 
 .sideNavActions {
@@ -91,7 +90,7 @@
 }
 
 .button {
-  width: 11rem;
+  width: 10rem;
 }
 
 .topMargin {

package/src/form-engine.component.tsx

@@ -34,6 +34,7 @@ interface FormEngineProps {
   handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
   markFormAsDirty?: (isDirty: boolean) => void;
   hideControls?: boolean;
+  hidePatientBanner?: boolean;
   preFilledQuestions?: PreFilledQuestions;
 }
 
@@ -51,6 +52,7 @@ const FormEngine = ({
   handleConfirmQuestionDeletion,
   markFormAsDirty,
   hideControls = false,
+  hidePatientBanner = false,
   preFilledQuestions,
 }: FormEngineProps) => {
   const { t } = useTranslation();
@@ -75,8 +77,11 @@ const FormEngine = ({
   } = useFormJson(formUUID, formJson, encounterUUID, formSessionIntent, preFilledQuestions);
 
   const showPatientBanner = useMemo(() => {
+    if (hidePatientBanner) {
+      return false;
+    }
     return patient && workspaceSize === 'ultra-wide' && mode !== 'embedded-view';
-  }, [patient, mode, workspaceSize]);
+  }, [patient, mode, workspaceSize, hidePatientBanner]);
 
   const isFormWorkspaceTooNarrow = useMemo(() => ['narrow'].includes(workspaceSize), [workspaceSize]);
 

package/src/form-engine.scss

@@ -29,9 +29,9 @@
   flex-basis: 65%;
   flex-grow: 1;
   flex-shrink: 1;
+  display: flex;
   position: relative;
   overflow-y: hidden;
-  display: flex;
   flex-direction: column;
   justify-content: space-between;
 }

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 () => {

package/src/processors/encounter/encounter-form-processor.ts

@@ -185,9 +185,8 @@ export class EncounterFormProcessor extends FormProcessor {
       }
       // handle attachments
       try {
-        const attachmentsResponse = await Promise.all(
-          saveAttachments(context.formFields, savedEncounter, abortController),
-        );
+        const attachmentsResponse = await saveAttachments(context.formFields, savedEncounter, abortController);
+
         if (attachmentsResponse?.length) {
           showSnackbar({
             title: t('attachmentsSaved', 'Attachment(s) saved successfully'),
@@ -196,6 +195,7 @@ export class EncounterFormProcessor extends FormProcessor {
           });
         }
       } catch (error) {
+        console.error('Error saving attachments', error);
         const errorMessages = extractErrorMessagesFromResponse(error);
         return Promise.reject({
           title: t('errorSavingAttachments', 'Error saving attachment(s)'),
@@ -206,6 +206,7 @@ export class EncounterFormProcessor extends FormProcessor {
       }
       return savedEncounter;
     } catch (error) {
+      console.error('Error saving encounter', error);
       const errorMessages = extractErrorMessagesFromResponse(error);
       return Promise.reject({
         title: t('errorSavingEncounter', 'Error saving encounter'),