@openmrs/esm-patient-tests-app 11.3.1-pre.9452 → 11.3.1-pre.9458

package/src/test-orders/add-test-order/add-test-order.component.tsx

@@ -0,0 +1,125 @@
+import React, { type ComponentProps, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { capitalize } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import {
+  age,
+  ArrowLeftIcon,
+  getPatientName,
+  formatDate,
+  parseDate,
+  useLayoutType,
+  useConfig,
+  Workspace2,
+  type Visit,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import { useOrderType, type OrderBasketItem, type TestOrderBasketItem } from '@openmrs/esm-patient-common-lib';
+import { type ConfigObject } from '../../config-schema';
+import { LabOrderForm } from './test-order-form.component';
+import { TestTypeSearch } from './test-type-search.component';
+import styles from './add-test-order.scss';
+
+export interface AddLabOrderProps {
+  initialOrder?: OrderBasketItem;
+  orderTypeUuid: string;
+  patient: fhir.Patient;
+  visitContext: Visit;
+  closeWorkspace: Workspace2DefinitionProps['closeWorkspace'];
+}
+
+const AddLabOrder: React.FC<AddLabOrderProps> = ({
+  patient,
+  visitContext,
+  initialOrder,
+  orderTypeUuid,
+  closeWorkspace,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [currentLabOrder, setCurrentLabOrder] = useState(initialOrder as TestOrderBasketItem);
+  const { additionalTestOrderTypes, orders } = useConfig<ConfigObject>();
+  const { orderType } = useOrderType(orderTypeUuid);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const title = useMemo(() => {
+    if (orderType) {
+      if (initialOrder?.action == 'REVISE') {
+        return t(`editOrderableForOrderType`, 'Edit {{orderTypeDisplay}}', {
+          orderTypeDisplay: orderType.display.toLocaleLowerCase(),
+        });
+      } else {
+        return t(`addOrderableForOrderType`, 'Add {{orderTypeDisplay}}', {
+          orderTypeDisplay: orderType.display.toLocaleLowerCase(),
+        });
+      }
+    } else {
+      return '';
+    }
+  }, [orderType, t, initialOrder?.action]);
+
+  const orderableConceptSets = useMemo(() => {
+    const allOrderTypes: ConfigObject['additionalTestOrderTypes'] = [
+      {
+        label: t('labOrders', 'Lab orders'),
+        orderTypeUuid: orders.labOrderTypeUuid,
+        orderableConceptSets: orders.labOrderableConcepts,
+      },
+      ...additionalTestOrderTypes,
+    ];
+    return allOrderTypes.find((orderType) => orderType.orderTypeUuid === orderTypeUuid).orderableConceptSets;
+  }, [additionalTestOrderTypes, orderTypeUuid, orders.labOrderTypeUuid, orders.labOrderableConcepts, t]);
+
+  const patientName = patient ? getPatientName(patient) : '';
+
+  return (
+    <Workspace2 title={title} hasUnsavedChanges={hasUnsavedChanges}>
+      <div className={styles.container}>
+        {isTablet && (
+          <div className={styles.patientHeader}>
+            <span className={styles.bodyShort02}>{patientName}</span>
+            <span className={classNames(styles.text02, styles.bodyShort01)}>
+              {capitalize(patient?.gender)} &middot; {age(patient?.birthDate)} &middot;{' '}
+              <span>{formatDate(parseDate(patient?.birthDate), { mode: 'wide', time: false })}</span>
+            </span>
+          </div>
+        )}
+        {!isTablet && (
+          <div className={styles.backButton}>
+            <Button
+              kind="ghost"
+              renderIcon={(props: ComponentProps<typeof ArrowLeftIcon>) => <ArrowLeftIcon size={24} {...props} />}
+              iconDescription={t('back', 'Back')}
+              size="sm"
+              onClick={() => closeWorkspace()}
+            >
+              <span>{t('back', 'Back')}</span>
+            </Button>
+          </div>
+        )}
+        {currentLabOrder ? (
+          <LabOrderForm
+            initialOrder={currentLabOrder}
+            closeWorkspace={closeWorkspace}
+            setHasUnsavedChanges={setHasUnsavedChanges}
+            orderTypeUuid={orderTypeUuid}
+            orderableConceptSets={orderableConceptSets}
+            patient={patient}
+          />
+        ) : (
+          <TestTypeSearch
+            orderTypeUuid={orderTypeUuid}
+            orderableConceptSets={orderableConceptSets}
+            openLabForm={setCurrentLabOrder}
+            closeWorkspace={closeWorkspace}
+            patient={patient}
+            visit={visitContext}
+          />
+        )}
+      </div>
+    </Workspace2>
+  );
+};
+
+export default AddLabOrder;

package/src/test-orders/add-test-order/add-test-order.test.tsx

@@ -7,33 +7,22 @@ import {
   age,
   closeWorkspace,
   getDefaultsFromConfigSchema,
-  launchWorkspace,
   useConfig,
   useLayoutType,
   useSession,
-  useWorkspaces,
-  type WorkspacesInfo,
 } from '@openmrs/esm-framework';
 import { type PostDataPrepFunction, useOrderBasket, useOrderType } from '@openmrs/esm-patient-common-lib';
 import { configSchema, type ConfigObject } from '../../config-schema';
 import { mockSessionDataResponse } from '__mocks__';
 import { mockPatient } from 'tools';
 import { createEmptyLabOrder } from './test-order';
-import { WORKSPACES } from '../lab-order-basket-panel/lab-order-basket-panel.extension';
-import AddLabOrderWorkspace from './add-test-order.workspace';
+import AddTestOrderWorkspace from './add-test-order.workspace';
 
 const mockCloseWorkspace = closeWorkspace as jest.Mock;
 const mockUseLayoutType = jest.mocked(useLayoutType);
 const mockUseSession = jest.mocked(useSession);
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockUseOrderType = jest.mocked(useOrderType);
-const mockLaunchWorkspace = jest.mocked(launchWorkspace);
-const mockUseWorkSpaces = jest.mocked(useWorkspaces);
-const mockWorkSpacesInfo = {} as WorkspacesInfo;
-
-mockCloseWorkspace.mockImplementation(({ onWorkspaceClose }) => {
-  onWorkspaceClose?.();
-});
 
 const mockTestTypes = [
   // {
@@ -68,30 +57,25 @@ jest.mock('@openmrs/esm-patient-common-lib', () => ({
 }));
 
 function renderAddLabOrderWorkspace() {
-  const mockCloseWorkspace = jest.fn().mockImplementation(({ onWorkspaceClose }) => {
-    onWorkspaceClose();
-  });
-  const mockCloseWorkspaceWithSavedChanges = jest.fn().mockImplementation(({ onWorkspaceClose }) => {
-    onWorkspaceClose();
-  });
-  const mockPromptBeforeClosing = jest.fn();
-  const view = render(
-    <AddLabOrderWorkspace
+  return render(
+    <AddTestOrderWorkspace
       closeWorkspace={mockCloseWorkspace}
-      closeWorkspaceWithSavedChanges={mockCloseWorkspaceWithSavedChanges}
-      promptBeforeClosing={mockPromptBeforeClosing}
-      patientUuid={mockPatient.id}
-      patient={mockPatient}
-      setTitle={jest.fn()}
-      orderTypeUuid="test-lab-order-type-uuid"
-      prevWorkSpace={WORKSPACES.ORDER_BASKET}
-      isWorkSpaceType={jest.fn()}
-      prevOrder={null}
-      visitContext={null}
-      mutateVisitContext={null}
+      workspaceProps={{
+        orderTypeUuid: 'test-lab-order-type-uuid',
+      }}
+      groupProps={{
+        patientUuid: mockPatient.id,
+        patient: mockPatient,
+        visitContext: null,
+        mutateVisitContext: null,
+      }}
+      workspaceName={''}
+      launchChildWorkspace={jest.fn()}
+      windowName={''}
+      windowProps={{ encounterUuid: '' }}
+      isRootWorkspace={false}
     />,
   );
-  return { mockCloseWorkspace, mockPromptBeforeClosing, mockCloseWorkspaceWithSavedChanges, ...view };
 }
 
 mockUseConfig.mockReturnValue({
@@ -123,7 +107,6 @@ mockUseOrderType.mockReturnValue({
 describe('AddLabOrder', () => {
   beforeEach(() => {
     _resetOrderBasketStore();
-    mockUseWorkSpaces.mockReturnValue(mockWorkSpacesInfo);
   });
 
   test('happy path fill and submit form', async () => {
@@ -131,7 +114,7 @@ describe('AddLabOrder', () => {
     const { result: hookResult } = renderHook(() =>
       useOrderBasket(mockPatient, 'test-lab-order-type-uuid', ((x) => x) as unknown as PostDataPrepLabOrderFunction),
     );
-    const { mockCloseWorkspaceWithSavedChanges } = renderAddLabOrderWorkspace();
+    renderAddLabOrderWorkspace();
     await user.type(screen.getByRole('searchbox'), 'cd4');
     await screen.findByText('CD4 COUNT');
 
@@ -174,8 +157,7 @@ describe('AddLabOrder', () => {
       ]);
     });
 
-    expect(mockCloseWorkspaceWithSavedChanges).toHaveBeenCalled();
-    expect(mockLaunchWorkspace).toHaveBeenCalledWith('order-basket');
+    expect(mockCloseWorkspace).toHaveBeenCalled();
   });
 
   test('from lab search, click add directly to order basket', async () => {
@@ -193,27 +175,22 @@ describe('AddLabOrder', () => {
     await waitFor(() => {
       expect(hookResult.current.orders).toEqual([
         {
-          ...createEmptyLabOrder(mockTestTypes[0], mockSessionDataResponse.data.currentProvider.uuid),
+          ...createEmptyLabOrder(mockTestTypes[0], mockSessionDataResponse.data.currentProvider.uuid, null),
           isOrderIncomplete: true,
         },
       ]);
     });
 
     expect(mockCloseWorkspace).toHaveBeenCalled();
-    expect(mockCloseWorkspace).toHaveBeenCalledWith('add-lab-order', {
-      ignoreChanges: true,
-      onWorkspaceClose: expect.any(Function),
-    });
   });
 
   test('back to order basket', async () => {
     const user = userEvent.setup();
-    const { mockCloseWorkspace } = renderAddLabOrderWorkspace();
-    const back = screen.getByText('Back to order basket');
+    renderAddLabOrderWorkspace();
+    const back = screen.getByText('Back');
     expect(back).toBeInTheDocument();
     await user.click(back);
     expect(mockCloseWorkspace).toHaveBeenCalled();
-    expect(mockLaunchWorkspace).toHaveBeenCalledWith('order-basket');
   });
 
   test('should display a patient header on tablet', () => {

package/src/test-orders/add-test-order/add-test-order.workspace.tsx

@@ -1,164 +1,36 @@
-import React, { type ComponentProps, useCallback, useEffect, useMemo, useState } from 'react';
-import classNames from 'classnames';
-import { capitalize } from 'lodash-es';
-import { useTranslation } from 'react-i18next';
-import { Button } from '@carbon/react';
+import React from 'react';
 import {
-  age,
-  ArrowLeftIcon,
-  getPatientName,
-  formatDate,
-  launchWorkspace,
-  parseDate,
-  useLayoutType,
-  useConfig,
-} from '@openmrs/esm-framework';
-import {
-  type DefaultPatientWorkspaceProps,
-  type Order,
+  type OrderBasketWindowProps,
   type OrderBasketItem,
-  useOrderType,
+  type PatientWorkspace2DefinitionProps,
 } from '@openmrs/esm-patient-common-lib';
-import { type ConfigObject } from '../../config-schema';
-import type { TestOrderBasketItem } from '../../types';
-import { LabOrderForm } from './test-order-form.component';
-import { TestTypeSearch } from './test-type-search.component';
-import { WORKSPACES } from '../lab-order-basket-panel/lab-order-basket-panel.extension';
-import styles from './add-test-order.scss';
+import AddLabOrder from './add-test-order.component';
 
-export interface AddLabOrderWorkspaceAdditionalProps {
+export interface AddTestOrderWorkspaceProps {
   order?: OrderBasketItem;
   orderTypeUuid: string;
-  prevWorkSpace: string;
-  isWorkSpaceType: (value: string) => boolean;
-  prevOrder: Order | null;
 }
 
-export interface AddLabOrderWorkspace extends DefaultPatientWorkspaceProps, AddLabOrderWorkspaceAdditionalProps {}
-
-// Design: https://app.zeplin.io/project/60d5947dd636aebbd63dce4c/screen/640b06c440ee3f7af8747620
-export default function AddLabOrderWorkspace({
-  order: initialOrder,
-  orderTypeUuid,
+/**
+ * This workspace displays the labs order form for adding or editing a labs order.
+ *
+ * Design: https://app.zeplin.io/project/60d5947dd636aebbd63dce4c/screen/640b06c440ee3f7af8747620
+ *
+ * This workspace must only be used within the patient chart.
+ * @see exported-add-test-order.workspace.tsx
+ */
+export default function AddTestOrderWorkspace({
+  groupProps: { patient, visitContext },
+  workspaceProps: { order: initialOrder, orderTypeUuid },
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
-  setTitle,
-  prevWorkSpace,
-  isWorkSpaceType,
-  prevOrder,
-  patientUuid,
-  patient,
-  visitContext,
-  mutateVisitContext,
-}: AddLabOrderWorkspace) {
-  const { t } = useTranslation();
-  const isTablet = useLayoutType() === 'tablet';
-  const [currentLabOrder, setCurrentLabOrder] = useState(initialOrder as TestOrderBasketItem);
-  const { additionalTestOrderTypes, orders } = useConfig<ConfigObject>();
-  const { orderType } = useOrderType(orderTypeUuid);
-
-  useEffect(() => {
-    if (orderType) {
-      setTitle(
-        t(`addOrderableForOrderType`, 'Add {{orderTypeDisplay}}', {
-          orderTypeDisplay:
-            typeof isWorkSpaceType === 'function' &&
-            isWorkSpaceType(prevWorkSpace) &&
-            prevWorkSpace === WORKSPACES.TEST_RESULTS_FORM
-              ? 'tests'
-              : orderType.display.toLocaleLowerCase(),
-        }),
-      );
-    }
-  }, [orderType, t, setTitle, isWorkSpaceType, prevWorkSpace]);
-
-  const orderableConceptSets = useMemo(() => {
-    const allOrderTypes: ConfigObject['additionalTestOrderTypes'] = [
-      {
-        label: t('labOrders', 'Lab orders'),
-        orderTypeUuid: orders.labOrderTypeUuid,
-        orderableConceptSets: orders.labOrderableConcepts,
-      },
-      ...additionalTestOrderTypes,
-    ];
-    return allOrderTypes.find((orderType) => orderType.orderTypeUuid === orderTypeUuid).orderableConceptSets;
-  }, [additionalTestOrderTypes, orderTypeUuid, orders.labOrderTypeUuid, orders.labOrderableConcepts, t]);
-
-  const patientName = patient ? getPatientName(patient) : '';
-
-  const cancelOrder = useCallback(() => {
-    closeWorkspace({
-      ignoreChanges: true,
-      onWorkspaceClose: () =>
-        typeof isWorkSpaceType === 'function' &&
-        isWorkSpaceType(prevWorkSpace) &&
-        prevWorkSpace === WORKSPACES.TEST_RESULTS_FORM
-          ? launchWorkspace(prevWorkSpace, { order: prevOrder })
-          : launchWorkspace(WORKSPACES.ORDER_BASKET),
-
-      closeWorkspaceGroup: false,
-    });
-  }, [closeWorkspace, isWorkSpaceType, prevOrder, prevWorkSpace]);
-
+}: PatientWorkspace2DefinitionProps<AddTestOrderWorkspaceProps, OrderBasketWindowProps>) {
   return (
-    <div className={styles.container}>
-      {isTablet && (
-        <div className={styles.patientHeader}>
-          <span className={styles.bodyShort02}>{patientName}</span>
-          <span className={classNames(styles.text02, styles.bodyShort01)}>
-            {capitalize(patient?.gender)} &middot; {age(patient?.birthDate)} &middot;{' '}
-            <span>{formatDate(parseDate(patient?.birthDate), { mode: 'wide', time: false })}</span>
-          </span>
-        </div>
-      )}
-      {!isTablet && (
-        <div className={styles.backButton}>
-          <Button
-            kind="ghost"
-            renderIcon={(props: ComponentProps<typeof ArrowLeftIcon>) => <ArrowLeftIcon size={24} {...props} />}
-            iconDescription="Return to order basket"
-            size="sm"
-            onClick={cancelOrder}
-          >
-            <span>
-              {typeof isWorkSpaceType === 'function' &&
-              isWorkSpaceType(prevWorkSpace) &&
-              prevWorkSpace === WORKSPACES.TEST_RESULTS_FORM
-                ? t('backToTestResults', 'Back to test Results')
-                : t('backToOrderBasket', 'Back to order basket')}
-            </span>
-          </Button>
-        </div>
-      )}
-      {currentLabOrder ? (
-        <LabOrderForm
-          initialOrder={currentLabOrder}
-          patientUuid={patientUuid}
-          patient={patient}
-          closeWorkspace={closeWorkspace}
-          closeWorkspaceWithSavedChanges={closeWorkspaceWithSavedChanges}
-          promptBeforeClosing={promptBeforeClosing}
-          setTitle={() => {}}
-          orderTypeUuid={orderTypeUuid}
-          orderableConceptSets={orderableConceptSets}
-          prevWorkSpace={prevWorkSpace}
-          isWorkSpaceType={isWorkSpaceType}
-          prevOrder={prevOrder}
-          visitContext={visitContext}
-          mutateVisitContext={mutateVisitContext}
-        />
-      ) : (
-        <TestTypeSearch
-          orderTypeUuid={orderTypeUuid}
-          orderableConceptSets={orderableConceptSets}
-          openLabForm={setCurrentLabOrder}
-          prevWorkSpace={prevWorkSpace}
-          isWorkSpaceType={isWorkSpaceType}
-          prevOrder={prevOrder}
-          patient={patient}
-        />
-      )}
-    </div>
+    <AddLabOrder
+      patient={patient}
+      visitContext={visitContext}
+      initialOrder={initialOrder}
+      orderTypeUuid={orderTypeUuid}
+      closeWorkspace={closeWorkspace}
+    />
   );
 }

package/src/test-orders/add-test-order/exported-add-test-order.workspace.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type Workspace2DefinitionProps } from '@openmrs/esm-framework';
+import { type ExportedOrderBasketWindowProps, type OrderBasketItem } from '@openmrs/esm-patient-common-lib';
+import AddLabOrder from './add-test-order.component';
+
+export interface AddTestOrderWorkspaceProps {
+  order?: OrderBasketItem;
+  orderTypeUuid: string;
+}
+
+/**
+ * This workspace is meant for use outside the patient chart.
+ *
+ * @see add-test-order.workspace.tsx
+ */
+export default function ExportedAddTestOrderWorkspace({
+  windowProps: { patient, visitContext },
+  workspaceProps: { order: initialOrder, orderTypeUuid },
+  closeWorkspace,
+}: Workspace2DefinitionProps<AddTestOrderWorkspaceProps, ExportedOrderBasketWindowProps, {}>) {
+  return (
+    <AddLabOrder
+      patient={patient}
+      visitContext={visitContext}
+      initialOrder={initialOrder}
+      orderTypeUuid={orderTypeUuid}
+      closeWorkspace={closeWorkspace}
+    />
+  );
+}