@olaboot/esm-form-engine-lib 4.1.0

package/dist/components/inputs/ui-select-extended/ui-select-extended.test.js

@@ -0,0 +1,250 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { act, render, screen } from "@testing-library/react";
+import { usePatient, useSession } from "@openmrs/esm-framework";
+import * as api from "../../../api/index.js";
+import { assertFormHasAllFields, findSelectInput } from "../../../utils/test-utils.js";
+import { mockPatient } from "__mocks__/patient.mock";
+import { mockSessionDataResponse } from "__mocks__/session.mock";
+import { uiSelectExtForm } from "__mocks__/forms";
+import FormEngine from "../../../form-engine.component.js";
+const mockUsePatient = jest.mocked(usePatient);
+const mockUseSession = jest.mocked(useSession);
+jest.mock('lodash-es/debounce', ()=>jest.fn((fn)=>fn));
+jest.mock('lodash-es', ()=>({
+        ...jest.requireActual('lodash-es'),
+        debounce: jest.fn((fn)=>fn)
+    }));
+jest.mock('../../../api', ()=>{
+    const originalModule = jest.requireActual('../../../api');
+    return {
+        ...originalModule,
+        getPreviousEncounter: jest.fn().mockImplementation(()=>Promise.resolve(null)),
+        getConcept: jest.fn().mockImplementation(()=>Promise.resolve(null)),
+        saveEncounter: jest.fn()
+    };
+});
+jest.mock('../../../hooks/useEncounterRole', ()=>({
+        useEncounterRole: jest.fn().mockReturnValue({
+            isLoading: false,
+            encounterRole: {
+                name: 'Clinician',
+                uuid: 'clinician-uuid'
+            },
+            error: undefined
+        })
+    }));
+jest.mock('../../../hooks/useEncounter', ()=>({
+        useEncounter: jest.fn().mockImplementation((formJson)=>{
+            return {
+                encounter: formJson.encounter ? encounter : null,
+                isLoading: false,
+                error: undefined
+            };
+        })
+    }));
+jest.mock('../../../hooks/useConcepts', ()=>({
+        useConcepts: jest.fn().mockImplementation((references)=>{
+            return {
+                isLoading: false,
+                concepts: [],
+                error: undefined
+            };
+        })
+    }));
+jest.mock('../../../registry/registry', ()=>{
+    const originalModule = jest.requireActual('../../../registry/registry');
+    return {
+        ...originalModule,
+        getRegisteredDataSource: jest.fn().mockResolvedValue({
+            fetchData: jest.fn().mockImplementation((...args)=>{
+                if (args[1].class?.length) {
+                    // concept DS
+                    return Promise.resolve([
+                        {
+                            uuid: 'stage-1-uuid',
+                            display: 'stage 1'
+                        },
+                        {
+                            uuid: 'stage-2-uuid',
+                            display: 'stage 2'
+                        }
+                    ]);
+                }
+                // location DS
+                return Promise.resolve([
+                    {
+                        uuid: 'aaa-1',
+                        display: 'Kololo'
+                    },
+                    {
+                        uuid: 'aaa-2',
+                        display: 'Naguru'
+                    },
+                    {
+                        uuid: 'aaa-3',
+                        display: 'Muyenga'
+                    }
+                ]);
+            }),
+            fetchSingleItem: jest.fn().mockImplementation((uuid)=>{
+                return Promise.resolve({
+                    uuid,
+                    display: 'stage 1'
+                });
+            }),
+            toUuidAndDisplay: (data)=>data
+        })
+    };
+});
+const encounter = {
+    uuid: 'encounter-uuid',
+    obs: [
+        {
+            concept: {
+                uuid: '160540AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
+            },
+            value: 'aaa-2',
+            formFieldNamespace: 'rfe-forms',
+            formFieldPath: 'rfe-forms-patient_transfer_location',
+            uuid: 'obs-uuid-1'
+        },
+        {
+            concept: {
+                uuid: '4b59ac07-cf72-4f46-b8c0-4f62b1779f7e'
+            },
+            value: 'stage-1-uuid',
+            formFieldNamespace: 'rfe-forms',
+            formFieldPath: 'rfe-forms-problem',
+            uuid: 'obs-uuid-2'
+        }
+    ]
+};
+const renderForm = (mode = 'enter')=>{
+    render(/*#__PURE__*/ React.createElement(FormEngine, {
+        formJson: uiSelectExtForm,
+        patientUUID: "8673ee4f-e2ab-4077-ba55-4980f408773e",
+        mode: mode,
+        encounterUUID: mode === 'edit' ? 'encounter-uuid' : null
+    }));
+};
+describe('UiSelectExtended', ()=>{
+    const user = userEvent.setup();
+    beforeEach(()=>{
+        mockUsePatient.mockImplementation(()=>({
+                patient: mockPatient,
+                isLoading: false,
+                error: undefined,
+                patientUuid: mockPatient.id
+            }));
+        mockUseSession.mockImplementation(()=>mockSessionDataResponse.data);
+    });
+    describe('Enter/New mode', ()=>{
+        it('should render comboboxes correctly for both "non-searchable" and "searchable" instances', async ()=>{
+            await act(async ()=>{
+                renderForm();
+            });
+            await assertFormHasAllFields(screen, [
+                {
+                    fieldName: 'Transfer Location',
+                    fieldType: 'select'
+                },
+                {
+                    fieldName: 'Problem',
+                    fieldType: 'select'
+                }
+            ]);
+            // Test for "non-searchable" instance
+            const transferLocationSelect = await findSelectInput(screen, 'Transfer Location');
+            await user.click(transferLocationSelect);
+            expect(screen.getByText('Kololo')).toBeInTheDocument();
+            expect(screen.getByText('Naguru')).toBeInTheDocument();
+            expect(screen.getByText('Muyenga')).toBeInTheDocument();
+            // Test for "searchable" instance
+            const problemSelect = await findSelectInput(screen, 'Problem');
+            expect(problemSelect).toHaveAttribute('placeholder', 'Search...');
+        });
+        it('should be possible to select an item from the combobox and submit the form', async ()=>{
+            const mockSaveEncounter = jest.spyOn(api, 'saveEncounter');
+            await act(async ()=>{
+                renderForm();
+            });
+            const transferLocationSelect = await findSelectInput(screen, 'Transfer Location');
+            await user.click(transferLocationSelect);
+            const naguruOption = screen.getByText('Naguru');
+            await user.click(naguruOption);
+            // submit the form
+            await user.click(screen.getByRole('button', {
+                name: /save/i
+            }));
+            expect(mockSaveEncounter).toHaveBeenCalledWith(expect.any(AbortController), expect.objectContaining({
+                obs: [
+                    {
+                        concept: '160540AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                        formFieldNamespace: 'rfe-forms',
+                        formFieldPath: 'rfe-forms-patient_transfer_location',
+                        value: 'aaa-2'
+                    }
+                ]
+            }), undefined);
+        });
+        it('should be possible to search and select an item from the search-box and submit the form', async ()=>{
+            const mockSaveEncounter = jest.spyOn(api, 'saveEncounter');
+            await act(async ()=>{
+                renderForm();
+            });
+            const problemSelect = await findSelectInput(screen, 'Problem');
+            await user.click(problemSelect);
+            await user.type(problemSelect, 'stage');
+            expect(screen.getByText('stage 1')).toBeInTheDocument();
+            expect(screen.getByText('stage 2')).toBeInTheDocument();
+            // select the first option
+            await user.click(screen.getByText('stage 1'));
+            // submit the form
+            await user.click(screen.getByRole('button', {
+                name: /save/i
+            }));
+            expect(mockSaveEncounter).toHaveBeenCalledWith(expect.any(AbortController), expect.objectContaining({
+                obs: [
+                    {
+                        concept: '4b59ac07-cf72-4f46-b8c0-4f62b1779f7e',
+                        formFieldNamespace: 'rfe-forms',
+                        formFieldPath: 'rfe-forms-problem',
+                        value: 'stage-1-uuid'
+                    }
+                ]
+            }), undefined);
+        });
+        it('should display all items regardless of user input', async ()=>{
+            await act(async ()=>{
+                renderForm();
+            });
+            const transferLocationSelect = await findSelectInput(screen, 'Transfer Location');
+            // Open the dropdown
+            await user.click(transferLocationSelect);
+            // Verify all items are displayed initially
+            expect(screen.getByText('Kololo')).toBeInTheDocument();
+            expect(screen.getByText('Naguru')).toBeInTheDocument();
+            expect(screen.getByText('Muyenga')).toBeInTheDocument();
+            // Type input
+            await user.type(transferLocationSelect, 'Nag');
+            // Verify all items are still displayed
+            expect(screen.getByText('Kololo')).toBeInTheDocument();
+            expect(screen.getByText('Naguru')).toBeInTheDocument();
+            expect(screen.getByText('Muyenga')).toBeInTheDocument();
+        });
+    });
+    describe('Edit mode', ()=>{
+        it('should initialize with the current value for both "non-searchable" and "searchable" instances', async ()=>{
+            await act(async ()=>{
+                renderForm('edit');
+            });
+            // Non-searchable instance
+            const nonSearchableInstance = await findSelectInput(screen, 'Transfer Location');
+            expect(nonSearchableInstance).toHaveValue('Naguru');
+            // Searchable instance
+            const searchableInstance = await findSelectInput(screen, 'Problem');
+            expect(searchableInstance).toHaveValue('stage 1');
+        });
+    });
+});

package/dist/components/inputs/unspecified/unspecified.component.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type FormField } from '../../../types';
+interface UnspecifiedFieldProps {
+    field: FormField;
+    fieldValue: any;
+    setFieldValue: (value: any) => void;
+    onAfterChange: (value: any) => void;
+}
+declare const UnspecifiedField: React.FC<UnspecifiedFieldProps>;
+export default UnspecifiedField;
+//# sourceMappingURL=unspecified.component.d.ts.map

package/dist/components/inputs/unspecified/unspecified.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unspecified.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/unspecified/unspecified.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,GAAG,CAAC;IAChB,aAAa,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+DrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/inputs/unspecified/unspecified.component.js

@@ -0,0 +1,65 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Checkbox } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import { isEmpty } from "../../../validators/form-validator.js";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import styles from "./unspecified.scss";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import { clearSubmission, isViewMode } from "../../../utils/common-utils.js";
+const UnspecifiedField = ({ field, fieldValue, setFieldValue, onAfterChange })=>{
+    const { t } = useTranslation();
+    const [isUnspecified, setIsUnspecified] = useState(false);
+    const { sessionMode, updateFormField } = useFormProviderContext();
+    useEffect(()=>{
+        if (isEmpty(fieldValue) && sessionMode === 'edit') {
+            // we assume that the field was previously unspecified
+            setIsUnspecified(true);
+            if (!field.meta.submission) {
+                field.meta.submission = {};
+            }
+            field.meta.submission.unspecified = true;
+        }
+    }, []);
+    useEffect(()=>{
+        if (field.meta.submission?.unspecified && (field.meta.submission.newValue || !isEmpty(fieldValue))) {
+            setIsUnspecified(false);
+            field.meta.submission.unspecified = false;
+            updateFormField(field);
+        }
+    }, [
+        field.meta?.submission,
+        fieldValue
+    ]);
+    const handleOnChange = useCallback((value)=>{
+        const rendering = field.questionOptions.rendering;
+        if (value.target.checked) {
+            setIsUnspecified(true);
+            const emptyValue = rendering === 'checkbox' ? [] : '';
+            clearSubmission(field);
+            field.meta.submission.unspecified = true;
+            // clear stale validation results
+            field.meta.submission.errors = [];
+            field.meta.submission.warnings = [];
+            updateFormField(field);
+            setFieldValue(emptyValue);
+            onAfterChange(emptyValue);
+        } else {
+            setIsUnspecified(false);
+            field.meta.submission.unspecified = false;
+            updateFormField(field);
+        }
+    }, [
+        field.questionOptions.rendering
+    ]);
+    return !field.isHidden && !isTrue(field.readonly) && !isViewMode(sessionMode) && /*#__PURE__*/ React.createElement("div", {
+        className: styles.unspecified
+    }, /*#__PURE__*/ React.createElement(Checkbox, {
+        id: `${field.id}-unspecified`,
+        labelText: t('unspecified', 'Unspecified'),
+        value: t('unspecified', 'Unspecified'),
+        onChange: handleOnChange,
+        checked: isUnspecified,
+        disabled: field.isDisabled
+    }));
+};
+export default UnspecifiedField;

package/dist/components/inputs/unspecified/unspecified.scss

@@ -0,0 +1,7 @@
+@use '@carbon/colors';
+
+.unspecified > div label {
+  padding-top: 0.3rem;
+  font-size: 12px;
+  color: colors.$gray-70;
+}

package/dist/components/inputs/unspecified/unspecified.test.js

@@ -0,0 +1,152 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { act, render, screen } from "@testing-library/react";
+import { usePatient, useSession } from "@openmrs/esm-framework";
+import * as api from "../../../api/index.js";
+import { findNumberInput } from "../../../utils/test-utils.js";
+import { unspecifiedForm } from "__mocks__/forms";
+import { mockPatient } from "__mocks__/patient.mock";
+import { mockSessionDataResponse } from "__mocks__/session.mock";
+import FormEngine from "../../../form-engine.component.js";
+const mockUsePatient = jest.mocked(usePatient);
+const mockUseSession = jest.mocked(useSession);
+jest.mock('../../../api', ()=>{
+    const originalModule = jest.requireActual('../../../api');
+    return {
+        ...originalModule,
+        getPreviousEncounter: jest.fn().mockImplementation(()=>Promise.resolve(null)),
+        getConcept: jest.fn().mockImplementation(()=>Promise.resolve(null)),
+        saveEncounter: jest.fn()
+    };
+});
+jest.mock('../../../hooks/useConcepts', ()=>({
+        useConcepts: jest.fn().mockImplementation((references)=>{
+            return {
+                isLoading: false,
+                concepts: [],
+                error: undefined
+            };
+        })
+    }));
+jest.mock('../../../hooks/useEncounterRole', ()=>({
+        useEncounterRole: jest.fn().mockReturnValue({
+            isLoading: false,
+            encounterRole: {
+                name: 'Clinician',
+                uuid: 'clinician-uuid'
+            },
+            error: undefined
+        })
+    }));
+jest.mock('../../../hooks/useEncounter', ()=>({
+        useEncounter: jest.fn().mockImplementation((formJson)=>{
+            return {
+                encounter: formJson.encounter ? {
+                    uuid: 'encounter-uuid',
+                    obs: []
+                } : null,
+                isLoading: false,
+                error: undefined
+            };
+        })
+    }));
+const renderForm = async (mode = 'enter')=>{
+    await act(async ()=>{
+        render(/*#__PURE__*/ React.createElement(FormEngine, {
+            formJson: unspecifiedForm,
+            patientUUID: "8673ee4f-e2ab-4077-ba55-4980f408773e",
+            mode: mode,
+            encounterUUID: mode === 'edit' ? 'encounter-uuid' : null
+        }));
+    });
+};
+describe('Unspecified', ()=>{
+    const user = userEvent.setup();
+    beforeEach(()=>{
+        mockUsePatient.mockImplementation(()=>({
+                patient: mockPatient,
+                isLoading: false,
+                error: undefined,
+                patientUuid: mockPatient.id
+            }));
+        mockUseSession.mockImplementation(()=>mockSessionDataResponse.data);
+    });
+    it('Should clear field value when the "Unspecified" checkbox is clicked', async ()=>{
+        //setup
+        await renderForm();
+        const unspecifiedCheckbox = screen.getByRole('checkbox', {
+            name: /Unspecified/
+        });
+        const bodyWeightField = await findNumberInput(screen, 'Body Weight *');
+        // assert initial state
+        expect(unspecifiedCheckbox).not.toBeChecked();
+        expect(bodyWeightField.value).toBe('');
+        await user.type(bodyWeightField, '55');
+        // assert new value
+        expect(bodyWeightField.value).toBe('55');
+        // mark as unspecified
+        await user.click(unspecifiedCheckbox);
+        expect(unspecifiedCheckbox).toBeChecked();
+        expect(bodyWeightField.value).toBe('');
+    });
+    it('Should bypass form validation when the "Unspecified" checkbox is clicked', async ()=>{
+        //setup
+        const mockSaveEncounter = jest.spyOn(api, 'saveEncounter');
+        await renderForm();
+        const unspecifiedCheckbox = screen.getByRole('checkbox', {
+            name: /Unspecified/
+        });
+        const bodyWeightField = await findNumberInput(screen, 'Body Weight *');
+        // assert initial state
+        expect(unspecifiedCheckbox).not.toBeChecked();
+        expect(bodyWeightField.value).toBe('');
+        // attempt to submit the form
+        await user.click(screen.getByRole('button', {
+            name: /Save/
+        }));
+        expect(screen.getByText(/Field is mandatory/)).toBeInTheDocument();
+        expect(mockSaveEncounter).not.toHaveBeenCalled();
+        // mark as unspecified
+        await user.click(unspecifiedCheckbox);
+        expect(unspecifiedCheckbox).toBeChecked();
+        expect(bodyWeightField.value).toBe('');
+        // submit the form again
+        await user.click(screen.getByRole('button', {
+            name: /Save/
+        }));
+        expect(mockSaveEncounter).toHaveBeenCalled();
+    });
+    it('Should mark fields with null values as unspecified when in edit mode', async ()=>{
+        // setup
+        await renderForm('edit');
+        const unspecifiedCheckbox = screen.getByRole('checkbox', {
+            name: /Unspecified/
+        });
+        const bodyWeightField = await findNumberInput(screen, 'Body Weight *');
+        // assert initial state
+        expect(unspecifiedCheckbox).toBeChecked();
+        expect(bodyWeightField.value).toBe('');
+    });
+    it('Should not subject previously unspecified fields to validation in edit', async ()=>{
+        // setup
+        await renderForm('edit');
+        // invoke form submission to trigger form validation
+        await user.click(screen.getByRole('button', {
+            name: /Save/
+        }));
+        let errorMessages = screen.queryAllByText('Field is mandatory');
+        expect(errorMessages).toHaveLength(0);
+    });
+    it('Should not display the unspecified checkbox in view mode', async ()=>{
+        // setup
+        await renderForm('view');
+        try {
+            screen.getByRole('checkbox', {
+                name: /Unspecified/
+            });
+            fail('Unspecified checkbox should not be displayed');
+        } catch (error) {
+            expect(error).toBeDefined();
+        }
+    });
+});

package/dist/components/inputs/workspace-launcher/workspace-launcher.component.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type FormFieldInputProps } from '../../../types';
+declare const WorkspaceLauncher: React.FC<FormFieldInputProps>;
+export default WorkspaceLauncher;
+//# sourceMappingURL=workspace-launcher.component.d.ts.map

package/dist/components/inputs/workspace-launcher/workspace-launcher.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-launcher.component.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/workspace-launcher/workspace-launcher.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAM1D,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkEpD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/inputs/workspace-launcher/workspace-launcher.component.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { launchWorkspace2, showSnackbar } from "@openmrs/esm-framework";
+import { Button, InlineNotification } from "@carbon/react";
+import { useFormProviderContext } from "../../../provider/form-provider.js";
+import { isTrue } from "../../../utils/boolean-utils.js";
+import { isViewMode } from "../../../utils/common-utils.js";
+import FieldLabel from "../../field-label/field-label.component.js";
+import styles from "./workspace-launcher.scss";
+const WorkspaceLauncher = ({ field })=>{
+    const { t } = useTranslation();
+    const { sessionMode, patient, visit } = useFormProviderContext();
+    const handleLaunchWorkspace = async ()=>{
+        const workspaceName = field.questionOptions?.workspaceName;
+        if (!workspaceName) {
+            showSnackbar({
+                title: t('invalidWorkspaceName', 'Invalid workspace name.'),
+                subtitle: t('invalidWorkspaceNameSubtitle', 'Please provide a valid workspace name.'),
+                kind: 'error',
+                isLowContrast: true
+            });
+            return;
+        }
+        // Pass any additional workspace props from field configuration
+        const workspaceProps = field.questionOptions?.workspaceProps ?? {};
+        // Pass patient and visit context as window props
+        const windowProps = {
+            patient,
+            patientUuid: patient?.id,
+            visitContext: visit
+        };
+        try {
+            await launchWorkspace2(workspaceName, workspaceProps, windowProps);
+        } catch (error) {
+            showSnackbar({
+                title: t('errorLaunchingWorkspace', 'Error launching workspace'),
+                subtitle: error?.message ?? t('errorLaunchingWorkspaceSubtitle', 'An unexpected error occurred while launching the workspace.'),
+                kind: 'error',
+                isLowContrast: true
+            });
+        }
+    };
+    if (field.isHidden || isViewMode(sessionMode)) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
+        className: styles.label
+    }, /*#__PURE__*/ React.createElement(FieldLabel, {
+        field: field
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: styles.workspaceButton
+    }, /*#__PURE__*/ React.createElement(Button, {
+        disabled: isTrue(field.readonly ?? false) || !patient,
+        onClick: handleLaunchWorkspace
+    }, field.questionOptions.buttonLabel ? t(field.questionOptions.buttonLabel) : t('launchWorkspace', 'Launch Workspace')), !patient && /*#__PURE__*/ React.createElement(InlineNotification, {
+        className: styles.noPatientNotification,
+        kind: "info",
+        lowContrast: true,
+        hideCloseButton: true,
+        title: t('noPatientContext', 'No patient selected'),
+        subtitle: t('noPatientContextSubtitle', 'This button is only active when a patient chart is open.')
+    })));
+};
+export default WorkspaceLauncher;

package/dist/components/inputs/workspace-launcher/workspace-launcher.scss

@@ -0,0 +1,21 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.label {
+  font-weight: 600;
+  color: colors.$black-100;
+}
+
+.errorLabel label {
+  color: colors.$red-60;
+  font-weight: 600;
+}
+
+.workspaceButton {
+  margin: layout.$spacing-05 0;
+}
+
+.noPatientNotification {
+  margin-top: layout.$spacing-03;
+  max-width: 32rem;
+}