@openmrs/esm-patient-tests-app 11.3.1-patch.9310 → 11.3.1-patch.9508

package/src/test-orders/lab-order-basket-panel/lab-order-basket-panel.extension.tsx

@@ -2,25 +2,38 @@ import React, { type ComponentProps, useCallback, useEffect, useMemo, useState }
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Button, Tile } from '@carbon/react';
-import { AddIcon, ChevronDownIcon, ChevronUpIcon, useLayoutType, useConfig, MaybeIcon } from '@openmrs/esm-framework';
 import {
-  type OrderBasketExtensionProps,
-  useOrderBasket,
-  useOrderType,
-  type TestOrderBasketItem,
-} from '@openmrs/esm-patient-common-lib';
+  AddIcon,
+  closeWorkspace,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  useLayoutType,
+  useConfig,
+  MaybeIcon,
+  launchWorkspace,
+  useWorkspaces,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { type OrderBasketItem, useOrderBasket, useOrderType } from '@openmrs/esm-patient-common-lib';
 import type { ConfigObject } from '../../config-schema';
+import type { TestOrderBasketItem } from '../../types';
 import { LabOrderBasketItemTile } from './lab-order-basket-item-tile.component';
 import { prepTestOrderPostData } from '../api';
+import LabIcon from './lab-icon.component';
 import styles from './lab-order-basket-panel.scss';
 
+interface OrderBasketSlotProps {
+  patientUuid: string;
+  patient: fhir.Patient;
+  visitContext: Visit;
+  mutateVisitContext: () => void;
+}
+
 /**
- * The extension is slotted into order-basket-slot in the main Order Basket workspace by default.
- * It renders the "Add +" button for lab orders, and lists pending lab orders in the order basket.
- *
  * Designs: https://app.zeplin.io/project/60d59321e8100b0324762e05/screen/648c44d9d4052c613e7f23da
+ * Slotted into order-basket-slot by default
  */
-export function LabOrderBasketPanelExtension({ patient, launchLabOrderForm }: OrderBasketExtensionProps) {
+const LabOrderBasketPanelExtension: React.FC<OrderBasketSlotProps> = ({ patient }) => {
   const { orders, additionalTestOrderTypes } = useConfig<ConfigObject>();
   const { t } = useTranslation();
   const allOrderTypes: ConfigObject['additionalTestOrderTypes'] = [
@@ -36,29 +49,35 @@ export function LabOrderBasketPanelExtension({ patient, launchLabOrderForm }: Or
   return (
     <>
       {allOrderTypes.map((orderTypeConfig) => (
-        <LabOrderBasketPanel
-          key={orderTypeConfig.orderTypeUuid}
-          patient={patient}
-          {...orderTypeConfig}
-          launchLabOrderForm={launchLabOrderForm}
-        />
+        <LabOrderBasketPanel patient={patient} key={orderTypeConfig.orderTypeUuid} {...orderTypeConfig} />
       ))}
     </>
   );
-}
+};
+
+export const WORKSPACES = {
+  TEST_RESULTS_FORM: 'test-results-form-workspace',
+  ORDER_BASKET: 'order-basket',
+};
 
 type OrderTypeConfig = ConfigObject['additionalTestOrderTypes'][0];
 
 interface LabOrderBasketPanelProps extends OrderTypeConfig {
   patient: fhir.Patient;
-  launchLabOrderForm(orderTypeUuid: string, order?: TestOrderBasketItem): void;
 }
 
-function LabOrderBasketPanel({ orderTypeUuid, label, icon, patient, launchLabOrderForm }: LabOrderBasketPanelProps) {
+function LabOrderBasketPanel({ orderTypeUuid, label, icon, patient }: LabOrderBasketPanelProps) {
   const { t } = useTranslation();
+  type WorkSpaceType = (typeof WORKSPACES)[keyof typeof WORKSPACES];
   const isTablet = useLayoutType() === 'tablet';
+  const responsiveSize = isTablet ? 'md' : 'sm';
+  const isDefaultLabOrder = icon === 'omrs-icon-lab-order';
   const { orderType, isLoadingOrderType } = useOrderType(orderTypeUuid);
-
+  const { workspaces = [{ name: WORKSPACES.ORDER_BASKET, additionalProps: {} }] } = useWorkspaces();
+  const [prevWorkSpace, setPrevWorkSpace] = useState(workspaces[0]?.name);
+  const [prevOrder, setPrevOrder] = useState(
+    workspaces[0]?.name === WORKSPACES.TEST_RESULTS_FORM ? workspaces[0].additionalProps['order'] : null,
+  );
   const { orders, setOrders } = useOrderBasket<TestOrderBasketItem>(patient, orderTypeUuid, prepTestOrderPostData);
   const [isExpanded, setIsExpanded] = useState(orders.length > 0);
   const {
@@ -96,6 +115,41 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon, patient, launchLabOrd
       discontinuedOrderBasketItems,
     };
   }, [orders]);
+  const isWorkSpaceType = useCallback((value: string): value is WorkSpaceType => {
+    return Object.values(WORKSPACES).includes(value as WorkSpaceType);
+  }, []);
+
+  const openNewLabForm = useCallback(() => {
+    closeWorkspace(isWorkSpaceType(prevWorkSpace) ? prevWorkSpace : WORKSPACES.ORDER_BASKET, {
+      ignoreChanges: true,
+      onWorkspaceClose: () =>
+        launchWorkspace('add-lab-order', {
+          orderTypeUuid: orderTypeUuid,
+          prevWorkSpace: prevWorkSpace,
+          isWorkSpaceType: isWorkSpaceType,
+          prevOrder: prevOrder,
+        }),
+      closeWorkspaceGroup: false,
+    });
+  }, [orderTypeUuid, isWorkSpaceType, prevOrder, prevWorkSpace]);
+
+  const openEditLabForm = useCallback(
+    (order: OrderBasketItem) => {
+      closeWorkspace(isWorkSpaceType(prevWorkSpace) ? prevWorkSpace : WORKSPACES.ORDER_BASKET, {
+        ignoreChanges: true,
+        onWorkspaceClose: () =>
+          launchWorkspace('add-lab-order', {
+            order,
+            orderTypeUuid: orderTypeUuid,
+            prevWorkSpace: prevWorkSpace,
+            isWorkSpaceType: isWorkSpaceType,
+            prevOrder: prevOrder,
+          }),
+        closeWorkspaceGroup: false,
+      });
+    },
+    [orderTypeUuid, isWorkSpaceType, prevOrder, prevWorkSpace],
+  );
 
   const removeLabOrder = useCallback(
     (order: TestOrderBasketItem) => {
@@ -120,19 +174,29 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon, patient, launchLabOrd
         [styles.collapsedTile]: !isExpanded,
       })}
     >
-      <div className={styles.container}>
+      <div className={classNames(isTablet ? styles.tabletContainer : styles.desktopContainer)}>
         <div className={styles.iconAndLabel}>
-          <MaybeIcon icon={icon ? icon : 'omrs-icon-generic-order-type'} size={isTablet ? 40 : 24} />
-          <h4 className={styles.heading}>{`${label ? t(label) : orderType?.display} (${orders.length})`}</h4>
+          {isDefaultLabOrder ? (
+            <LabIcon isTablet={isTablet} />
+          ) : (
+            <MaybeIcon icon={icon ? icon : 'omrs-icon-generic-order-type'} size={isTablet ? 40 : 24} />
+          )}
+          <h4 className={styles.heading}>{`${
+            isWorkSpaceType(prevWorkSpace) && prevWorkSpace === WORKSPACES.ORDER_BASKET
+              ? label
+                ? t(label)
+                : orderType?.display
+              : t('tests', 'Tests')
+          } (${orders.length})`}</h4>
         </div>
         <div className={styles.buttonContainer}>
           <Button
             className={styles.addButton}
             iconDescription="Add lab order"
             kind="ghost"
-            onClick={() => launchLabOrderForm(orderTypeUuid)}
+            onClick={openNewLabForm}
             renderIcon={(props: ComponentProps<typeof AddIcon>) => <AddIcon size={16} {...props} />}
-            size={isTablet ? 'md' : 'sm'}
+            size={responsiveSize}
           >
             {t('add', 'Add')}
           </Button>
@@ -146,6 +210,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon, patient, launchLabOrd
             renderIcon={(props: ComponentProps<typeof ChevronUpIcon>) =>
               isExpanded ? <ChevronUpIcon size={16} {...props} /> : <ChevronDownIcon size={16} {...props} />
             }
+            size={responsiveSize}
           >
             {t('add', 'Add')}
           </Button>
@@ -160,7 +225,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon, patient, launchLabOrd
                   {incompleteOrderBasketItems.map((order) => (
                     <LabOrderBasketItemTile
                       key={order.uuid}
-                      onItemClick={() => launchLabOrderForm(orderTypeUuid, order)}
+                      onItemClick={() => openEditLabForm(order)}
                       onRemoveClick={() => removeLabOrder(order)}
                       orderBasketItem={order}
                     />
@@ -172,7 +237,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon, patient, launchLabOrd
                   {newOrderBasketItems.map((order) => (
                     <LabOrderBasketItemTile
                       key={order.uuid}
-                      onItemClick={() => launchLabOrderForm(orderTypeUuid, order)}
+                      onItemClick={() => openEditLabForm(order)}
                       onRemoveClick={() => removeLabOrder(order)}
                       orderBasketItem={order}
                     />
@@ -185,7 +250,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon, patient, launchLabOrd
                   {renewedOrderBasketItems.map((order) => (
                     <LabOrderBasketItemTile
                       key={order.uuid}
-                      onItemClick={() => launchLabOrderForm(orderTypeUuid, order)}
+                      onItemClick={() => openEditLabForm(order)}
                       onRemoveClick={() => removeLabOrder(order)}
                       orderBasketItem={order}
                     />
@@ -198,7 +263,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon, patient, launchLabOrd
                   {revisedOrderBasketItems.map((order) => (
                     <LabOrderBasketItemTile
                       key={order.uuid}
-                      onItemClick={() => launchLabOrderForm(orderTypeUuid, order)}
+                      onItemClick={() => openEditLabForm(order)}
                       onRemoveClick={() => removeLabOrder(order)}
                       orderBasketItem={order}
                     />
@@ -211,7 +276,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon, patient, launchLabOrd
                   {discontinuedOrderBasketItems.map((order) => (
                     <LabOrderBasketItemTile
                       key={order.uuid}
-                      onItemClick={() => launchLabOrderForm(orderTypeUuid, order)}
+                      onItemClick={() => openEditLabForm(order)}
                       onRemoveClick={() => removeLabOrder(order)}
                       orderBasketItem={order}
                     />

package/src/test-orders/lab-order-basket-panel/lab-order-basket-panel.scss

@@ -3,21 +3,44 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
+.desktopContainer {
+  background-color: colors.$gray-10;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+}
+
+.tabletContainer {
+  @extend .desktopContainer;
+  background-color: colors.$white-0;
+}
+
 .tile:not(:first-child) {
   margin-top: 2rem;
 }
 
 .desktopTile {
+  position: relative;
   border-left: layout.$spacing-02 solid colors.$purple-70;
-  background-color: $ui-02;
-  border-top: 1px solid colors.$purple-20;
+  background-color: colors.$white-0;
   border-right: none;
   padding: 0;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: colors.$purple-20;
+  }
 }
 
 .tabletTile {
   @extend .desktopTile;
-  border-top: 1px solid #612ebd;
+  border-top: 1px solid colors.$purple-20;
 }
 
 .collapsedTile {
@@ -33,14 +56,6 @@
   border-bottom: 1px solid $grey-2;
 }
 
-.container {
-  background-color: $ui-02;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  text-align: left;
-}
-
 .desktopTile .container {
   h4 {
     @include type.type-style('heading-compact-02');

package/src/test-orders/lab-order-basket-panel/lab-order-basket-panel.test.tsx

@@ -2,16 +2,17 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
 import { useOrderType } from '@openmrs/esm-patient-common-lib';
-import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import type { OrderBasketExtensionProps, TestOrderBasketItem } from '@openmrs/esm-patient-common-lib';
+import { getDefaultsFromConfigSchema, useConfig, useWorkspaces, type WorkspacesInfo } from '@openmrs/esm-framework';
 import { type ConfigObject, configSchema } from '../../config-schema';
-import LabOrderBasketPanel from './lab-order-basket-panel.extension';
+import { type TestOrderBasketItem } from '../../types';
 import { mockPatient } from 'tools';
-import { mockVisit } from '__mocks__';
+import LabOrderBasketPanel from './lab-order-basket-panel.extension';
 
 const mockUseOrderBasket = jest.fn();
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockUseOrderType = jest.mocked(useOrderType);
+const mockUseWorkSpaces = jest.mocked(useWorkspaces);
+const mockWorkSpacesInfo = {} as WorkspacesInfo;
 
 jest.mock('@openmrs/esm-patient-common-lib', () => ({
   ...jest.requireActual('@openmrs/esm-patient-common-lib'),
@@ -38,14 +39,17 @@ mockUseOrderType.mockReturnValue({
   errorFetchingOrderType: undefined,
 });
 
-const testProps: OrderBasketExtensionProps = {
+const testProps = {
+  patientUuid: mockPatient.id,
   patient: mockPatient,
-  launchDrugOrderForm: jest.fn(),
-  launchLabOrderForm: jest.fn(),
-  launchGeneralOrderForm: jest.fn(),
+  visitContext: null,
+  mutateVisitContext: null,
 };
 
 describe('LabOrderBasketPanel', () => {
+  beforeEach(() => {
+    mockUseWorkSpaces.mockReturnValue(mockWorkSpacesInfo);
+  });
   test('renders an empty state when no items are selected in the order basket', () => {
     mockUseOrderBasket.mockReturnValue({ orders: [] });
     render(<LabOrderBasketPanel {...testProps} />);
@@ -65,7 +69,6 @@ describe('LabOrderBasketPanel', () => {
         display: 'HIV VIRAL LOAD',
         urgency: 'ROUTINE',
         uuid: 'order-uuid-1',
-        visit: mockVisit,
       },
       {
         action: 'NEW',
@@ -76,7 +79,6 @@ describe('LabOrderBasketPanel', () => {
         display: 'CD4 COUNT',
         urgency: 'STAT',
         uuid: 'order-uuid-2',
-        visit: mockVisit,
       },
     ];
     let orders = [...labs];