@kenyaemr/esm-ward-app 8.1.1-pre.118 → 8.1.1-pre.121

package/src/ward-view-header/admission-requests-bar.component.tsx

@@ -1,14 +1,18 @@
 import { Button, InlineNotification } from '@carbon/react';
 import { Movement } from '@carbon/react/icons';
 import { ArrowRightIcon, isDesktop, launchWorkspace, useAppContext, useLayoutType } from '@openmrs/esm-framework';
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { type WardPatientGroupDetails } from '../types';
+import { type WardViewContext } from '../types';
 import styles from './admission-requests.scss';
 
-const AdmissionRequestsBar = () => {
-  const wardPatientGrouping = useAppContext<WardPatientGroupDetails>('ward-patients-group');
-  const { inpatientRequests, isLoading, error } = wardPatientGrouping?.inpatientRequestResponse ?? {};
+interface AdmissionRequestsBarProps {
+  wardPendingPatients: ReactNode;
+}
+
+const AdmissionRequestsBar: React.FC<AdmissionRequestsBarProps> = ({ wardPendingPatients }) => {
+  const {wardPatientGroupDetails} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { inpatientRequests, isLoading, error } = wardPatientGroupDetails?.inpatientRequestResponse ?? {};
   const { t } = useTranslation();
   const layout = useLayoutType();
 
@@ -35,7 +39,7 @@ const AdmissionRequestsBar = () => {
         })}
       </span>
       <Button
-        onClick={() => launchWorkspace('admission-requests-workspace')}
+        onClick={() => launchWorkspace('admission-requests-workspace', { wardPendingPatients })}
         renderIcon={ArrowRightIcon}
         kind="ghost"
         size={isDesktop(layout) ? 'sm' : 'lg'}>

package/src/ward-view-header/admission-requests-bar.test.tsx

@@ -3,22 +3,23 @@ import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { renderWithSwr } from 'tools';
-import { mockWardPatientGroupDetails } from '../../mock';
+import { mockWardViewContext } from '../../mock';
+import { type WardViewContext } from '../types';
 import AdmissionRequestsBar from './admission-requests-bar.component';
 
-jest.mocked(useAppContext).mockReturnValue(mockWardPatientGroupDetails());
+jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext);
 
 describe('Admission Requests Button', () => {
   it('should launch workspace when clicked on manage button', async () => {
     const user = userEvent.setup();
-    renderWithSwr(<AdmissionRequestsBar />);
+    renderWithSwr(<AdmissionRequestsBar wardPendingPatients={[]} />);
 
     await user.click(screen.getByRole('button', { name: /manage/i }));
     expect(launchWorkspace).toHaveBeenCalled();
   });
 
   it('should have one admission request', () => {
-    renderWithSwr(<AdmissionRequestsBar />);
+    renderWithSwr(<AdmissionRequestsBar wardPendingPatients={[<div>Dummy Patient</div>]} />);
 
     expect(screen.getByText('1 admission request')).toBeInTheDocument();
   });

package/src/ward-view-header/ward-metrics.component.tsx

@@ -1,32 +1,29 @@
-import React from 'react';
-import styles from './ward-metrics.scss';
-import { useBeds } from '../hooks/useBeds';
 import { showNotification, useAppContext, useFeatureFlag } from '@openmrs/esm-framework';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import type { WardViewContext } from '../types';
 import {
   getWardMetricNameTranslation,
   getWardMetrics,
   getWardMetricValueTranslation,
 } from '../ward-view/ward-view.resource';
 import WardMetric from './ward-metric.component';
-import type { WardPatientGroupDetails } from '../types';
-import useWardLocation from '../hooks/useWardLocation';
+import styles from './ward-metrics.scss';
 
 const wardMetrics = [{ name: 'patients' }, { name: 'freeBeds' }, { name: 'capacity' }];
 
 const WardMetrics = () => {
-  const { location } = useWardLocation();
   const { t } = useTranslation();
   const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
-  const wardPatientGroup = useAppContext<WardPatientGroupDetails>('ward-patients-group');
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
   const { admissionLocationResponse, inpatientAdmissionResponse, inpatientRequestResponse, bedLayouts } =
-    wardPatientGroup || {};
+    wardPatientGroupDetails || {};
   const { isLoading, error } = admissionLocationResponse ?? {};
   const isDataLoading =
     admissionLocationResponse?.isLoading ||
     inpatientAdmissionResponse?.isLoading ||
     inpatientRequestResponse?.isLoading;
-  if (!wardPatientGroup) return <></>;
+  if (!wardPatientGroupDetails) return <></>;
 
   if (error) {
     showNotification({
@@ -36,7 +33,7 @@ const WardMetrics = () => {
     });
   }
 
-  const wardMetricValues = getWardMetrics(bedLayouts, wardPatientGroup);
+  const wardMetricValues = getWardMetrics(bedLayouts, wardPatientGroupDetails);
   return (
     <div className={styles.metricsContainer}>
       {isBedManagementModuleInstalled ? (
@@ -64,7 +61,11 @@ const WardMetrics = () => {
           metricValue={
             error
               ? '--'
-              : getWardMetricValueTranslation('pendingOut', t, wardPatientGroup?.wardPatientPendingCount?.toString())
+              : getWardMetricValueTranslation(
+                  'pendingOut',
+                  t,
+                  wardPatientGroupDetails?.wardPatientPendingCount?.toString(),
+                )
           }
           isLoading={!!isDataLoading}
           key="pending"

package/src/ward-view-header/ward-metrics.test.tsx

@@ -12,6 +12,8 @@ import { useInpatientAdmission } from '../hooks/useInpatientAdmission';
 import useWardLocation from '../hooks/useWardLocation';
 import { screen } from '@testing-library/react';
 import { useAppContext } from '@openmrs/esm-framework';
+import { type WardViewContext } from '../types';
+import { mockWardViewContext } from '../../mock';
 
 const wardMetrics = [
   { name: 'patients', key: 'patients', defaultTranslation: 'Patients' },
@@ -19,67 +21,11 @@ const wardMetrics = [
   { name: 'capacity', key: 'capacity', defaultTranslation: 'Capacity' },
 ];
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: jest.fn().mockReturnValue({}),
-}));
+jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext);
 
-jest.mock('../hooks/useWardLocation', () =>
-  jest.fn().mockReturnValue({
-    location: { uuid: 'abcd', display: 'mock location' },
-    isLoadingLocation: false,
-    errorFetchingLocation: null,
-    invalidLocation: false,
-  }),
-);
-
-jest.mock('../hooks/useBeds', () => ({
-  useBeds: jest.fn(),
-}));
-
-jest.mock('../hooks/useAdmissionLocation', () => ({
-  useAdmissionLocation: jest.fn(),
-}));
-jest.mock('../hooks/useInpatientAdmission', () => ({
-  useInpatientAdmission: jest.fn(),
-}));
-
-jest.mock('../hooks/useInpatientRequest', () => ({
-  useInpatientRequest: jest.fn(),
-}));
-
-const mockUseWardLocation = jest.mocked(useWardLocation);
-
-const mockAdmissionLocationResponse = jest.mocked(useAdmissionLocation).mockReturnValue({
-  error: undefined,
-  mutate: jest.fn(),
-  isValidating: false,
-  isLoading: false,
-  admissionLocation: mockAdmissionLocation,
-});
-const mockInpatientAdmissionResponse = jest.mocked(useInpatientAdmission).mockReturnValue({
-  error: undefined,
-  mutate: jest.fn(),
-  isValidating: false,
-  isLoading: false,
-  inpatientAdmissions: mockInpatientAdmissions,
-});
-
-const inpatientAdmissionsUuidMap = getInpatientAdmissionsUuidMap(mockInpatientAdmissions);
-const mockWardPatientGroupDetails = {
-  admissionLocationResponse: mockAdmissionLocationResponse(),
-  inpatientAdmissionResponse: mockInpatientAdmissionResponse(),
-  ...createAndGetWardPatientGrouping(mockInpatientAdmissions, mockAdmissionLocation, mockInpatientRequest),
-};
-jest.mocked(useAppContext).mockReturnValue(mockWardPatientGroupDetails);
 describe('Ward Metrics', () => {
   it('Should display metrics of in the ward ', () => {
-    mockUseWardLocation.mockReturnValueOnce({
-      location: null,
-      isLoadingLocation: false,
-      errorFetchingLocation: null,
-      invalidLocation: true,
-    });
+    const mockWardPatientGroupDetails = mockWardViewContext.wardPatientGroupDetails;
     const { bedLayouts } = mockWardPatientGroupDetails;
     const bedMetrics = getWardMetrics(bedLayouts, mockWardPatientGroupDetails);
     renderWithSwr(<WardMetrics />);

package/src/ward-view-header/ward-view-header.component.tsx

@@ -1,19 +1,21 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import styles from './ward-view-header.scss';
 import AdmissionRequestsBar from './admission-requests-bar.component';
 import useWardLocation from '../hooks/useWardLocation';
 import WardMetrics from './ward-metrics.component';
 
-interface WardViewHeaderProps {}
+interface WardViewHeaderProps {
+  wardPendingPatients: ReactNode;
+}
 
-const WardViewHeader: React.FC<WardViewHeaderProps> = () => {
+const WardViewHeader: React.FC<WardViewHeaderProps> = ({ wardPendingPatients }) => {
   const { location } = useWardLocation();
 
   return (
     <div className={styles.wardViewHeader}>
       <h4>{location?.display}</h4>
       <WardMetrics />
-      <AdmissionRequestsBar />
+      <AdmissionRequestsBar {...{ wardPendingPatients }} />
     </div>
   );
 };

package/src/ward-workspace/admission-request-card/admission-request-card-actions.component.tsx

@@ -1,16 +1,18 @@
 import { Button } from '@carbon/react';
-import { ArrowRightIcon, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
+import { ArrowRightIcon, launchWorkspace, useAppContext, useLayoutType } from '@openmrs/esm-framework';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { WardPatientWorkspaceProps, WardPatientCard } from '../../types';
+import type { WardPatientWorkspaceProps, WardPatientCardType, WardViewContext } from '../../types';
 import type { AdmitPatientFormWorkspaceProps } from '../admit-patient-form-workspace/types';
 import styles from './admission-request-card.scss';
 
-const AdmissionRequestCardActions: WardPatientCard = (wardPatient) => {
+const AdmissionRequestCardActions: WardPatientCardType = (wardPatient) => {
   const { patient, inpatientRequest } = wardPatient;
   const { dispositionType } = inpatientRequest;
   const { t } = useTranslation();
   const responsiveSize = useLayoutType() === 'tablet' ? 'lg' : 'md';
+  const {WardPatientHeader} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+
   const launchPatientAdmissionForm = useCallback(
     () => launchWorkspace<AdmitPatientFormWorkspaceProps>('admit-patient-form-workspace', { patient, dispositionType }),
     [],
@@ -19,8 +21,9 @@ const AdmissionRequestCardActions: WardPatientCard = (wardPatient) => {
   const launchPatientTransferForm = useCallback(() => {
     launchWorkspace<WardPatientWorkspaceProps>('patient-transfer-request-workspace', {
       wardPatient,
+      WardPatientHeader
     });
-  }, [wardPatient]);
+  }, [wardPatient, WardPatientHeader]);
 
   return (
     <div className={styles.admissionRequestActionBar}>

package/src/ward-workspace/admission-request-card/admission-request-card-header.component.tsx

@@ -1,32 +1,25 @@
-import { ExtensionSlot, formatDatetime, getLocale } from '@openmrs/esm-framework';
+import { formatDatetime, getLocale } from '@openmrs/esm-framework';
 import classNames from 'classnames';
 import React from 'react';
-import { useCurrentWardCardConfig } from '../../hooks/useCurrentWardCardConfig';
+import { type WardPatientCardType } from '../../types';
+import WardPatientAge from '../../ward-patient-card/row-elements/ward-patient-age';
+import WardPatientGender from '../../ward-patient-card/row-elements/ward-patient-gender.component';
+import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-patient-identifier';
 import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
-import { WardPatientCardElement } from '../../ward-patient-card/ward-patient-card-element.component';
-import type WardPatientCard from '../../ward-patient-card/ward-patient-card.component';
 import styles from './admission-request-card.scss';
 
-const AdmissionRequestCardHeader: WardPatientCard = (wardPatient) => {
+const AdmissionRequestCardHeader: WardPatientCardType = (wardPatient) => {
   const { inpatientRequest } = wardPatient;
   const { dispositionEncounter } = inpatientRequest;
-  const { id, headerRowElements } = useCurrentWardCardConfig();
   const { patient } = wardPatient;
-  const extensionSlotState = wardPatient;
-
-  const rowsExtensionSlotName = id == 'default' ? 'ward-patient-card-slot' : `ward-patient-card-${id}-slot`;
 
   return (
     <div className={styles.admissionRequestCardHeaderContainer}>
       <div className={styles.admissionRequestCardHeader}>
         <WardPatientName patient={patient} />
-        {headerRowElements.map((elementId, i) => (
-          <WardPatientCardElement
-            key={`ward-card-${patient.uuid}-header-${i}`}
-            elementId={elementId}
-            {...wardPatient}
-          />
-        ))}
+        <WardPatientIdentifier id="patient-identifier" patient={patient} />
+        <WardPatientGender patient={patient} />
+        <WardPatientAge patient={patient} />
       </div>
       <div className={classNames(styles.admissionRequestCardHeader, styles.admissionEncounterDetails)}>
         <div>
@@ -38,11 +31,6 @@ const AdmissionRequestCardHeader: WardPatientCard = (wardPatient) => {
         <div>{dispositionEncounter?.encounterProviders?.map((provider) => provider?.provider?.display).join(',')}</div>
         <div>{dispositionEncounter?.location?.display}</div>
       </div>
-      <ExtensionSlot
-        name={rowsExtensionSlotName}
-        state={extensionSlotState}
-        className={styles.admissionRequestCardExtensionSlot}
-      />
     </div>
   );
 };

package/src/ward-workspace/admission-request-card/admission-request-card.component.tsx

@@ -1,13 +1,19 @@
-import React from 'react';
-import type { WardPatientCard } from '../../types';
+import React, { type ReactNode } from 'react';
+import type { WardPatient, WardPatientCardType } from '../../types';
 import AdmissionRequestCardActions from './admission-request-card-actions.component';
 import AdmissionRequestCardHeader from './admission-request-card-header.component';
 import styles from './admission-request-card.scss';
 
-const AdmissionRequestCard: WardPatientCard = (wardPatient) => {
+interface AdmissionRequestCardProps {
+  wardPatient: WardPatient;
+  children?: ReactNode;
+}
+
+const AdmissionRequestCard: React.FC<AdmissionRequestCardProps> = ({ wardPatient, children }) => {
   return (
     <div className={styles.admissionRequestCard}>
       <AdmissionRequestCardHeader {...wardPatient} />
+      {children}
       <AdmissionRequestCardActions {...wardPatient} />
     </div>
   );

package/src/ward-workspace/admission-request-card/admission-request-card.scss

@@ -8,6 +8,11 @@
   height: fit-content;
   color: $color-gray-70;
   margin-bottom: layout.$spacing-05;
+
+  > div {
+    margin: layout.$spacing-04;
+    width: unset;
+  }
 }
 
 .admissionRequestCardHeaderContainer {
@@ -29,7 +34,7 @@
   display: none;
 
   &:has(div:not(:empty)) {
-    display: block;  
+    display: block;
     margin: layout.$spacing-03 0;
     background-color: white;
   }

package/src/ward-workspace/admission-request-workspace/admission-requests-workspace.test.tsx

@@ -1,53 +1,26 @@
-import React from 'react';
+import { useAppContext } from '@openmrs/esm-framework';
 import { screen } from '@testing-library/react';
-import { defineConfigSchema } from '@openmrs/esm-framework';
-import { useInpatientRequest } from '../../hooks/useInpatientRequest';
-import { configSchema } from '../../config-schema';
-import useWardLocation from '../../hooks/useWardLocation';
-import AdmissionRequestsWorkspace from './admission-requests.workspace';
-import { mockInpatientRequest, mockLocationInpatientWard } from '../../../../../__mocks__';
+import React from 'react';
 import { renderWithSwr } from '../../../../../tools';
+import { mockWardViewContext } from '../../../mock';
+import { type WardViewContext } from '../../types';
+import DefaultWardPendingPatients from '../../ward-view/default-ward/default-ward-pending-patients.component';
+import AdmissionRequestsWorkspace, { type AdmissionRequestsWorkspaceProps } from './admission-requests.workspace';
 
-defineConfigSchema('@openmrs/esm-ward-app', configSchema);
-
-jest.mock('../../hooks/useInpatientRequest', () => ({
-  useInpatientRequest: jest.fn(),
-}));
-jest.mock('../../hooks/useWardLocation', () => jest.fn());
-
-const mockUseWardLocation = useWardLocation as jest.Mock;
-mockUseWardLocation.mockReturnValue({
-  location: mockLocationInpatientWard,
-  isLoadingLocation: false,
-  errorFetchingLocation: null,
-  invalidLocation: false,
-});
-
-const mockInpatientRequestResponse: ReturnType<typeof useInpatientRequest> = {
-  error: undefined,
-  mutate: jest.fn(),
-  isValidating: false,
-  isLoading: false,
-  inpatientRequests: mockInpatientRequest,
-  totalCount: 1,
-  hasMore: false,
-  loadMore: jest.fn(),
-};
-
-jest.mocked(useInpatientRequest).mockReturnValue(mockInpatientRequestResponse);
+jest.mocked(useAppContext<WardViewContext>).mockReturnValue(mockWardViewContext);
 
-const workspaceProps = {
+const workspaceProps: AdmissionRequestsWorkspaceProps = {
   closeWorkspace: jest.fn(),
   promptBeforeClosing: jest.fn(),
   closeWorkspaceWithSavedChanges: jest.fn(),
   setTitle: jest.fn(),
+  wardPendingPatients: <DefaultWardPendingPatients />,
 };
 
 describe('Admission Requests Workspace', () => {
   it('should render a admission request card', () => {
     renderWithSwr(<AdmissionRequestsWorkspace {...workspaceProps} />);
-    expect(
-      screen.getByText(mockInpatientRequest[0].patient.person?.preferredName?.display as string),
-    ).toBeInTheDocument();
+    const alice = mockWardViewContext.wardPatientGroupDetails.inpatientRequestResponse.inpatientRequests[0].patient;
+    expect(screen.getByText(alice.person?.preferredName?.display as string)).toBeInTheDocument();
   });
 });

package/src/ward-workspace/admission-request-workspace/admission-requests.workspace.tsx

@@ -1,21 +1,13 @@
-import React from 'react';
-import styles from './admission-requests-workspace.scss';
-import AdmissionRequestCard from '../admission-request-card/admission-request-card.component';
 import { Search } from '@carbon/react';
-import { ErrorState } from '@openmrs/esm-framework';
+import { type DefaultWorkspaceProps } from '@openmrs/esm-framework';
+import React, { type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useInpatientRequest } from '../../hooks/useInpatientRequest';
-import { type InpatientRequest } from '../../types';
+import styles from './admission-requests-workspace.scss';
 
-interface AdmissionRequestsWorkspaceProps {}
-const AdmissionRequestsWorkspace: React.FC<AdmissionRequestsWorkspaceProps> = () => {
-  // note: useAppContext() does not work here for some reason, so we call `useInpatientRequest`
-  // directly. See: https://openmrs.atlassian.net/browse/O3-4020
-  const {
-    inpatientRequests,
-    isLoading: isLoadingInpatientRequests,
-    error: errorFetchingInpatientRequests,
-  } = useInpatientRequest(['ADMIT', 'TRANSFER']);
+export interface AdmissionRequestsWorkspaceProps extends DefaultWorkspaceProps {
+  wardPendingPatients: ReactNode;
+}
+const AdmissionRequestsWorkspace: React.FC<AdmissionRequestsWorkspaceProps> = ({ wardPendingPatients }) => {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = React.useState('');
   const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -33,29 +25,7 @@ const AdmissionRequestsWorkspace: React.FC<AdmissionRequestsWorkspaceProps> = ()
         disabled
       />
 
-      <div className={styles.content}>
-        {isLoadingInpatientRequests ? (
-          <>Loading</>
-        ) : errorFetchingInpatientRequests ? (
-          <ErrorState
-            headerTitle={t('admissionRequests', 'Admission requests')}
-            error={errorFetchingInpatientRequests}
-          />
-        ) : (
-          <>
-            {inpatientRequests.map((request: InpatientRequest, i) => (
-              <AdmissionRequestCard
-                key={`admission-request-card-${i}`}
-                patient={request.patient}
-                visit={request.visit}
-                bed={null}
-                inpatientRequest={request}
-                inpatientAdmission={null}
-              />
-            ))}
-          </>
-        )}
-      </div>
+      <div className={styles.content}>{wardPendingPatients}</div>
     </div>
   );
 };