@openmrs/esm-patient-orders-app 11.3.1-pre.9447 → 11.3.1-pre.9455

package/src/lab-results/{lab-results-form.component.tsx → exported-lab-results-form.workspace.tsx}

@@ -6,14 +6,15 @@ import { useTranslation } from 'react-i18next';
 import { useSWRConfig } from 'swr';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
+  ExtensionSlot,
   restBaseUrl,
   showSnackbar,
   useAbortController,
   useLayoutType,
-  ExtensionSlot,
-  usePatient,
+  Workspace2,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
-import { type DefaultPatientWorkspaceProps, type Order, useOrderBasket } from '@openmrs/esm-patient-common-lib';
+import { useOrderBasket, type Order } from '@openmrs/esm-patient-common-lib';
 import { type ObservationValue } from '../types/encounter';
 import {
   createCompositeObservationPayload,
@@ -31,8 +32,12 @@ import ResultFormField from './lab-results-form-field.component';
 import styles from './lab-results-form.scss';
 import orderStyles from '../order-basket/order-basket.scss';
 
-export interface LabResultsFormProps extends DefaultPatientWorkspaceProps {
+export interface LabResultsFormProps {
+  patient: fhir.Patient;
   order: Order;
+  /** Callback to refresh lab orders in the Laboratory app after results are saved.
+   * This ensures the orders list stays in sync across the different tabs in the Laboratory app.
+   * @see https://github.com/openmrs/openmrs-esm-laboratory-app/pull/117 */
   invalidateLabOrders?: () => void;
 }
 
@@ -40,16 +45,9 @@ interface OrderBasketSlotProps {
   patient: fhir.Patient;
 }
 
-const LabResultsForm: React.FC<LabResultsFormProps> = ({
+const ExportedLabResultsForm: React.FC<Workspace2DefinitionProps<LabResultsFormProps, {}, {}>> = ({
+  workspaceProps: { patient, order, invalidateLabOrders },
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  order,
-  promptBeforeClosing,
-  /* Callback to refresh lab orders in the Laboratory app after results are saved.
-   * This ensures the orders list stays in sync across the different tabs in the Laboratory app.
-   * @see https://github.com/openmrs/openmrs-esm-laboratory-app/pull/117
-   */
-  invalidateLabOrders,
 }) => {
   const { t } = useTranslation();
   const abortController = useAbortController();
@@ -59,7 +57,6 @@ const LabResultsForm: React.FC<LabResultsFormProps> = ({
   const [showEmptyFormErrorNotification, setShowEmptyFormErrorNotification] = useState(false);
   const compositeSchema = useMemo(() => createLabResultsFormCompositeSchema(conceptArray), [conceptArray]);
   const { mutate } = useSWRConfig();
-  const { isLoading: isLoadingPatient, patient } = usePatient(order.patient.uuid);
   const { orders, clearOrders } = useOrderBasket(patient);
   const [isSavingOrders, setIsSavingOrders] = useState(false);
   const { isLoading, completeLabResults, mutate: mutateResults } = useCompletedLabResultsArray(order);
@@ -131,10 +128,6 @@ const LabResultsForm: React.FC<LabResultsFormProps> = ({
     });
   }, [conceptArray, completeLabResults, order?.fulfillerStatus, setValue]);
 
-  useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-  }, [isDirty, promptBeforeClosing]);
-
   if (isLoadingResultConcepts) {
     return (
       <div className={styles.loaderContainer}>
@@ -186,7 +179,7 @@ const LabResultsForm: React.FC<LabResultsFormProps> = ({
       if (failedObsconceptUuids.length) {
         showNotification('error', 'Could not save obs with concept uuids ' + failedObsconceptUuids.join(', '));
       } else {
-        closeWorkspaceWithSavedChanges();
+        closeWorkspace({ discardUnsavedChanges: true });
         showNotification(
           'success',
           t('successfullySavedLabResults', 'Lab results for {{orderNumber}} have been successfully updated', {
@@ -227,7 +220,7 @@ const LabResultsForm: React.FC<LabResultsFormProps> = ({
         abortController,
       );
 
-      closeWorkspaceWithSavedChanges();
+      closeWorkspace({ discardUnsavedChanges: true });
       mutateOrderData();
       mutateResults();
       invalidateLabOrders?.();
@@ -246,98 +239,102 @@ const LabResultsForm: React.FC<LabResultsFormProps> = ({
   };
 
   return (
-    <Form className={styles.form} onSubmit={handleSubmit(saveLabResults)}>
-      <Layer level={isTablet ? 1 : 0}>
-        <div className={styles.grid}>
-          {conceptArray?.length > 0 && (
-            <Stack gap={5}>
-              {!isLoading ? (
-                conceptArray.map((c) => (
-                  <ResultFormField
-                    defaultValue={completeLabResults.find((r) => r.concept.uuid === c.uuid)}
-                    concept={c}
-                    control={control as unknown as Control<Record<string, unknown>>}
-                  />
-                ))
-              ) : (
-                <InlineLoading description={t('loadingInitialValues', 'Loading initial values') + '...'} />
-              )}
-              {order.fulfillerStatus !== 'COMPLETED' && (
-                <div className={orderStyles.orderBasketContainer}>
-                  <div className={styles.heading}>
-                    <span>{t('addOrderTests', 'Add Tests to this order')}</span>
+    <Workspace2 title={t('enterTestResults', 'Enter test results')} hasUnsavedChanges={isDirty}>
+      <Form className={styles.form} onSubmit={handleSubmit(saveLabResults)}>
+        <Layer level={isTablet ? 1 : 0}>
+          <div className={styles.grid}>
+            {conceptArray?.length > 0 && (
+              <Stack gap={5}>
+                {!isLoading ? (
+                  conceptArray.map((c) => (
+                    <ResultFormField
+                      defaultValue={completeLabResults.find((r) => r.concept.uuid === c.uuid)}
+                      concept={c}
+                      control={control as unknown as Control<Record<string, unknown>>}
+                    />
+                  ))
+                ) : (
+                  <InlineLoading description={t('loadingInitialValues', 'Loading initial values') + '...'} />
+                )}
+                {order.fulfillerStatus !== 'COMPLETED' && (
+                  <div className={orderStyles.orderBasketContainer}>
+                    <div className={styles.heading}>
+                      <span>{t('addOrderTests', 'Add Tests to this order')}</span>
+                    </div>
+                    <ExtensionSlot
+                      className={classNames(orderStyles.orderBasketSlot, {
+                        [orderStyles.orderBasketSlotTablet]: isTablet,
+                      })}
+                      name="result-order-basket-slot"
+                      state={extensionProps}
+                    />
                   </div>
-                  <ExtensionSlot
-                    className={classNames(orderStyles.orderBasketSlot, {
-                      [orderStyles.orderBasketSlotTablet]: isTablet,
-                    })}
-                    name="result-order-basket-slot"
-                    state={extensionProps}
-                  />
-                </div>
-              )}
+                )}
 
-              {orders?.length > 0 && (
-                <div className={orderStyles.orderBasketContainer}>
-                  <ButtonSet className={styles.buttonSet}>
-                    <Button size="sm" className={styles.actionButton} kind="secondary" onClick={handleCancel}>
-                      {t('cancelOrder', 'Cancel order')}
-                    </Button>
-                    <Button
-                      className={styles.actionButton}
-                      kind="primary"
-                      onClick={handleSave}
-                      size="sm"
-                      disabled={
-                        isSavingOrders || !orders?.length || orders?.some(({ isOrderIncomplete }) => isOrderIncomplete)
-                      }
-                    >
-                      {isSavingOrders ? (
-                        <InlineLoading description={t('saving', 'Saving') + '...'} />
-                      ) : (
-                        <span>{t('saveTests', 'Save Tests')}</span>
-                      )}
-                    </Button>
-                  </ButtonSet>
-                </div>
-              )}
-            </Stack>
-          )}
-          {showEmptyFormErrorNotification && (
-            <InlineNotification
-              className={styles.emptyFormError}
-              lowContrast
-              title={t('error', 'Error')}
-              subtitle={t('pleaseFillField', 'Please fill at least one field') + '.'}
-            />
-          )}
-        </div>
-      </Layer>
+                {orders?.length > 0 && (
+                  <div className={orderStyles.orderBasketContainer}>
+                    <ButtonSet className={styles.buttonSet}>
+                      <Button size="sm" className={styles.actionButton} kind="secondary" onClick={handleCancel}>
+                        {t('cancelOrder', 'Cancel order')}
+                      </Button>
+                      <Button
+                        className={styles.actionButton}
+                        kind="primary"
+                        onClick={handleSave}
+                        size="sm"
+                        disabled={
+                          isSavingOrders ||
+                          !orders?.length ||
+                          orders?.some(({ isOrderIncomplete }) => isOrderIncomplete)
+                        }
+                      >
+                        {isSavingOrders ? (
+                          <InlineLoading description={t('saving', 'Saving') + '...'} />
+                        ) : (
+                          <span>{t('saveTests', 'Save Tests')}</span>
+                        )}
+                      </Button>
+                    </ButtonSet>
+                  </div>
+                )}
+              </Stack>
+            )}
+            {showEmptyFormErrorNotification && (
+              <InlineNotification
+                className={styles.emptyFormError}
+                lowContrast
+                title={t('error', 'Error')}
+                subtitle={t('pleaseFillField', 'Please fill at least one field') + '.'}
+              />
+            )}
+          </div>
+        </Layer>
 
-      <ButtonSet
-        className={classNames({
-          [styles.tablet]: isTablet,
-          [styles.desktop]: !isTablet,
-        })}
-      >
-        <Button className={styles.button} kind="secondary" disabled={isSubmitting} onClick={() => closeWorkspace()}>
-          {t('discard', 'Discard')}
-        </Button>
-        <Button
-          className={styles.button}
-          kind="primary"
-          disabled={isSubmitting || Object.keys(errors).length > 0}
-          type="submit"
+        <ButtonSet
+          className={classNames({
+            [styles.tablet]: isTablet,
+            [styles.desktop]: !isTablet,
+          })}
         >
-          {isSubmitting ? (
-            <InlineLoading description={t('saving', 'Saving') + '...'} />
-          ) : (
-            t('saveAndClose', 'Save and close')
-          )}
-        </Button>
-      </ButtonSet>
-    </Form>
+          <Button className={styles.button} kind="secondary" disabled={isSubmitting} onClick={() => closeWorkspace()}>
+            {t('discard', 'Discard')}
+          </Button>
+          <Button
+            className={styles.button}
+            kind="primary"
+            disabled={isSubmitting || Object.keys(errors).length > 0}
+            type="submit"
+          >
+            {isSubmitting ? (
+              <InlineLoading description={t('saving', 'Saving') + '...'} />
+            ) : (
+              t('saveAndClose', 'Save and close')
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
   );
 };
 
-export default LabResultsForm;
+export default ExportedLabResultsForm;

package/src/lab-results/lab-results-form.test.tsx

@@ -10,9 +10,8 @@ import {
   type Datatype,
   useCompletedLabResultsArray,
 } from './lab-results.resource';
-import { usePatient } from '@openmrs/esm-framework/src';
-import LabResultsForm from './lab-results-form.component';
-import { type Order } from '@openmrs/esm-patient-common-lib';
+import LabResultsForm, { type LabResultsFormProps } from './lab-results-form.workspace';
+import { type PatientWorkspace2DefinitionProps, type Order } from '@openmrs/esm-patient-common-lib';
 import { type Encounter } from '../types/encounter';
 import { mockPatient } from 'tools';
 
@@ -20,7 +19,6 @@ const mockUseOrderConceptByUuids = jest.mocked(useOrderConceptsByUuids);
 const mockUseLabEncounter = jest.mocked(useLabEncounter);
 const mockUseObservation = jest.mocked(useObservation);
 const mockUseCompletedLabResultsArray = jest.mocked(useCompletedLabResultsArray);
-const mockUsePatient = jest.mocked(usePatient);
 
 jest.mock('./lab-results.resource', () => ({
   ...jest.requireActual('./lab-results.resource'),
@@ -42,16 +40,24 @@ const mockOrder = {
   orderer: { uuid: 'orderer-uuid' },
 };
 
-const testProps = {
-  closeWorkspace: jest.fn(),
-  closeWorkspaceWithSavedChanges: jest.fn(),
-  order: mockOrder as Order,
-  promptBeforeClosing: jest.fn(),
-  setTitle: jest.fn(),
-  patientUuid: mockPatient.id,
-  patient: mockPatient,
-  visitContext: null,
-  mutateVisitContext: null,
+const mockCloseWorkspace = jest.fn();
+
+const testProps: PatientWorkspace2DefinitionProps<LabResultsFormProps, {}> = {
+  closeWorkspace: mockCloseWorkspace,
+  workspaceProps: {
+    order: mockOrder as Order,
+  },
+  groupProps: {
+    patientUuid: mockPatient.id,
+    patient: mockPatient,
+    visitContext: null,
+    mutateVisitContext: null,
+  },
+  launchChildWorkspace: jest.fn(),
+  windowProps: {},
+  workspaceName: '',
+  windowName: '',
+  isRootWorkspace: false,
 };
 
 describe('LabResultsForm', () => {
@@ -98,12 +104,6 @@ describe('LabResultsForm', () => {
       error: null,
       mutate: jest.fn(),
     });
-    mockUsePatient.mockReturnValue({
-      isLoading: false,
-      patient: mockPatient,
-      patientUuid: '',
-      error: null,
-    });
   });
 
   test('validates numeric input correctly', async () => {
@@ -339,16 +339,8 @@ describe('LabResultsForm', () => {
 
   test('submits form with valid data', async () => {
     const user = userEvent.setup();
-    const mockCloseWorkspace = jest.fn();
-    const mockCloseWorkspaceWithSavedChanges = jest.fn();
 
-    render(
-      <LabResultsForm
-        {...testProps}
-        closeWorkspace={mockCloseWorkspace}
-        closeWorkspaceWithSavedChanges={mockCloseWorkspaceWithSavedChanges}
-      />,
-    );
+    render(<LabResultsForm {...testProps} />);
 
     const input = await screen.findByLabelText(`Test Concept (0 - 100 mg/dL)`);
     await user.type(input, '50');
@@ -357,7 +349,7 @@ describe('LabResultsForm', () => {
     await user.click(saveButton);
 
     await waitFor(() => {
-      expect(mockCloseWorkspaceWithSavedChanges).toHaveBeenCalled();
+      expect(mockCloseWorkspace).toHaveBeenCalled();
     });
   });
 
@@ -402,13 +394,7 @@ describe('LabResultsForm', () => {
     const mockCloseWorkspace = jest.fn();
     const mockCloseWorkspaceWithSavedChanges = jest.fn();
 
-    render(
-      <LabResultsForm
-        {...testProps}
-        closeWorkspace={mockCloseWorkspace}
-        closeWorkspaceWithSavedChanges={mockCloseWorkspaceWithSavedChanges}
-      />,
-    );
+    render(<LabResultsForm {...testProps} closeWorkspace={mockCloseWorkspace} />);
 
     const input = await screen.findByLabelText(`Test Concept (0 - 60 mg/dL)`);
     await user.type(input, '50');
@@ -420,7 +406,7 @@ describe('LabResultsForm', () => {
     await user.click(saveButton);
 
     await waitFor(() => {
-      expect(mockCloseWorkspaceWithSavedChanges).toHaveBeenCalled();
+      expect(mockCloseWorkspace).toHaveBeenCalled();
     });
   });
 

package/src/lab-results/lab-results-form.workspace.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { type Order, type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
+import ExportedLabResultsForm from './exported-lab-results-form.workspace';
+
+export interface LabResultsFormProps {
+  order: Order;
+  /** Callback to refresh lab orders in the Laboratory app after results are saved.
+   * This ensures the orders list stays in sync across the different tabs in the Laboratory app.
+   * @see https://github.com/openmrs/openmrs-esm-laboratory-app/pull/117 */
+  invalidateLabOrders?: () => void;
+}
+
+/**
+ * This workspace displays the form to input lab results for orders.
+ * This workspace should only be used within the patient chart. Use ExportedLabResultsForm
+ * for use cases outside the patient chart.
+ */
+const LabResultsForm: React.FC<PatientWorkspace2DefinitionProps<LabResultsFormProps, {}>> = ({
+  workspaceProps: { order, invalidateLabOrders },
+  groupProps: { patient },
+  ...rest
+}) => {
+  return <ExportedLabResultsForm workspaceProps={{ patient, order, invalidateLabOrders }} groupProps={{}} {...rest} />;
+};
+
+export default LabResultsForm;

package/src/order-basket/exported-order-basket.workspace.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo } from 'react';
+import { type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import {
+  type OrderBasketExtensionProps,
+  type OrderBasketItem,
+  type ExportedOrderBasketWindowProps,
+} from '@openmrs/esm-patient-common-lib';
+import OrderBasket from './order-basket.component';
+
+/**
+ * This workspace renders the main order basket, which contains the buttons to add a drug order and to add a lab order.
+ *
+ * This workspace is meant for use outside the the patient chart
+ */
+const ExportedOrderBasketWorkspace: React.FC<Workspace2DefinitionProps<{}, ExportedOrderBasketWindowProps, {}>> = ({
+  windowProps: {
+    patientUuid,
+    patient,
+    visitContext,
+    mutateVisitContext,
+    drugOrderWorkspaceName,
+    labOrderWorkspaceName,
+    generalOrderWorkspaceName,
+  },
+  closeWorkspace,
+  launchChildWorkspace,
+}) => {
+  const orderBasketExtensionProps = useMemo(() => {
+    const launchDrugOrderForm = (order: OrderBasketItem) => {
+      launchChildWorkspace(drugOrderWorkspaceName, { order });
+    };
+    const launchLabOrderForm = (orderTypeUuid: string, order: OrderBasketItem) => {
+      launchChildWorkspace(labOrderWorkspaceName, { orderTypeUuid, order });
+    };
+    const launchGeneralOrderForm = (orderTypeUuid: string, order: OrderBasketItem) => {
+      launchChildWorkspace(generalOrderWorkspaceName, { orderTypeUuid, order });
+    };
+
+    return {
+      patient,
+      launchDrugOrderForm,
+      launchLabOrderForm,
+      launchGeneralOrderForm,
+    } satisfies OrderBasketExtensionProps;
+  }, [launchChildWorkspace, drugOrderWorkspaceName, labOrderWorkspaceName, generalOrderWorkspaceName, patient]);
+
+  return (
+    <OrderBasket
+      patientUuid={patientUuid}
+      patient={patient}
+      visitContext={visitContext}
+      mutateVisitContext={mutateVisitContext}
+      closeWorkspace={closeWorkspace}
+      orderBasketExtensionProps={orderBasketExtensionProps}
+    />
+  );
+};
+
+export default ExportedOrderBasketWorkspace;