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

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

@@ -11,18 +11,29 @@ import {
   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;
+}
+
 /**
  * Designs: https://app.zeplin.io/project/60d59321e8100b0324762e05/screen/648c44d9d4052c613e7f23da
+ * Slotted into order-basket-slot by default
  */
-export default function LabOrderBasketPanelExtension() {
+const LabOrderBasketPanelExtension: React.FC<OrderBasketSlotProps> = ({ patient }) => {
   const { orders, additionalTestOrderTypes } = useConfig<ConfigObject>();
   const { t } = useTranslation();
   const allOrderTypes: ConfigObject['additionalTestOrderTypes'] = [
@@ -38,22 +49,36 @@ export default function LabOrderBasketPanelExtension() {
   return (
     <>
       {allOrderTypes.map((orderTypeConfig) => (
-        <LabOrderBasketPanel key={orderTypeConfig.orderTypeUuid} {...orderTypeConfig} />
+        <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 {}
+interface LabOrderBasketPanelProps extends OrderTypeConfig {
+  patient: fhir.Patient;
+}
 
-function LabOrderBasketPanel({ orderTypeUuid, label, icon }: 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 { orders, setOrders } = useOrderBasket<TestOrderBasketItem>(orderTypeUuid, prepTestOrderPostData);
+  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 {
     incompleteOrderBasketItems,
@@ -90,31 +115,40 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
       discontinuedOrderBasketItems,
     };
   }, [orders]);
+  const isWorkSpaceType = useCallback((value: string): value is WorkSpaceType => {
+    return Object.values(WORKSPACES).includes(value as WorkSpaceType);
+  }, []);
 
   const openNewLabForm = useCallback(() => {
-    closeWorkspace('order-basket', {
+    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]);
+  }, [orderTypeUuid, isWorkSpaceType, prevOrder, prevWorkSpace]);
 
   const openEditLabForm = useCallback(
     (order: OrderBasketItem) => {
-      closeWorkspace('order-basket', {
+      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],
+    [orderTypeUuid, isWorkSpaceType, prevOrder, prevWorkSpace],
   );
 
   const removeLabOrder = useCallback(
@@ -140,10 +174,20 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
         [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
@@ -152,7 +196,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
             kind="ghost"
             onClick={openNewLabForm}
             renderIcon={(props: ComponentProps<typeof AddIcon>) => <AddIcon size={16} {...props} />}
-            size={isTablet ? 'md' : 'sm'}
+            size={responsiveSize}
           >
             {t('add', 'Add')}
           </Button>
@@ -166,6 +210,7 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
             renderIcon={(props: ComponentProps<typeof ChevronUpIcon>) =>
               isExpanded ? <ChevronUpIcon size={16} {...props} /> : <ChevronDownIcon size={16} {...props} />
             }
+            size={responsiveSize}
           >
             {t('add', 'Add')}
           </Button>
@@ -245,3 +290,5 @@ function LabOrderBasketPanel({ orderTypeUuid, label, icon }: LabOrderBasketPanel
     </Tile>
   );
 }
+
+export default LabOrderBasketPanelExtension;

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,14 +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 { getDefaultsFromConfigSchema, useConfig, useWorkspaces, type WorkspacesInfo } from '@openmrs/esm-framework';
 import { type ConfigObject, configSchema } from '../../config-schema';
-import type { TestOrderBasketItem } from '../../types';
+import { type TestOrderBasketItem } from '../../types';
+import { mockPatient } from 'tools';
 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'),
@@ -36,10 +39,20 @@ mockUseOrderType.mockReturnValue({
   errorFetchingOrderType: undefined,
 });
 
+const testProps = {
+  patientUuid: mockPatient.id,
+  patient: mockPatient,
+  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 />);
+    render(<LabOrderBasketPanel {...testProps} />);
     expect(screen.getByRole('heading', { name: /Lab orders \(0\)/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Add/i })).toBeInTheDocument();
   });
@@ -76,7 +89,7 @@ describe('LabOrderBasketPanel', () => {
       orders: orders,
       setOrders: mockSetOrders,
     }));
-    const { rerender } = render(<LabOrderBasketPanel />);
+    const { rerender } = render(<LabOrderBasketPanel {...testProps} />);
     expect(screen.getByText(/Lab orders \(2\)/i)).toBeInTheDocument();
     expect(screen.getByText(/HIV VIRAL LOAD/i)).toBeInTheDocument();
     expect(screen.getByText(/CD4 COUNT/i)).toBeInTheDocument();
@@ -85,7 +98,7 @@ describe('LabOrderBasketPanel', () => {
     expect(removeHivButton).toBeVisible();
 
     await user.click(removeHivButton);
-    rerender(<LabOrderBasketPanel />);
+    rerender(<LabOrderBasketPanel {...testProps} />);
     await expect(screen.getByText(/Lab orders \(1\)/i)).toBeInTheDocument();
     expect(screen.getByText(/CD4 COUNT/i)).toBeInTheDocument();
     expect(screen.queryByText(/HIV VIRAL LOAD/i)).not.toBeInTheDocument();