refactor + add header to clinical forms workspace

packages/esm-ward-app/src/beds/ward-bed.test.tsx

@@ -64,7 +64,7 @@ describe('Ward bed', () => {
   it('renders a single bed with patient details', () => {
     render(
       <WardBed
-        patientCards={[<DefaultWardPatientCard key={mockPatientAlice.uuid} {...mockWardPatientAliceProps} />]}
+        patientCards={[<DefaultWardPatientCard key={mockPatientAlice.uuid} wardPatient={mockWardPatientAliceProps} />]}
         bed={mockBed}
       />,
     );
@@ -79,8 +79,8 @@ describe('Ward bed', () => {
       <WardBed
         bed={mockBed}
         patientCards={[
-          <DefaultWardPatientCard key={mockPatientAlice.uuid} {...mockWardPatientAliceProps} />,
-          <DefaultWardPatientCard key={mockPatientBrian.uuid} {...mockWardPatientBrianProps} />,
+          <DefaultWardPatientCard key={mockPatientAlice.uuid} wardPatient={mockWardPatientAliceProps} />,
+          <DefaultWardPatientCard key={mockPatientBrian.uuid} wardPatient={mockWardPatientAliceProps} />,
         ]}
       />,
     );

packages/esm-ward-app/src/types/index.ts

@@ -11,7 +11,11 @@ import type {
 import type React from 'react';
 import type { useWardPatientGrouping } from '../hooks/useWardPatientGrouping';
 
-export type WardPatientCardType = React.FC<WardPatient>;
+interface WardPatientCardProps {
+  wardPatient: WardPatient;
+}
+
+export type WardPatientCardType = React.FC<WardPatientCardProps>;
 
 // WardPatient is a patient admitted to a ward, and/or in a bed on a ward
 export type WardPatient = {
@@ -44,7 +48,7 @@ export type WardPatient = {
 
 export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
   wardPatient: WardPatient;
-  WardPatientHeader: React.FC<WardPatient>;
+  WardPatientHeader: WardPatientCardType;
 }
 
 // server-side types defined in openmrs-module-bedmanagement:
@@ -233,7 +237,7 @@ export interface ObsPayload {
 export type WardPatientGroupDetails = ReturnType<typeof useWardPatientGrouping>;
 export interface WardViewContext {
   wardPatientGroupDetails: WardPatientGroupDetails;
-  WardPatientHeader: React.FC<WardPatient>;
+  WardPatientHeader: WardPatientCardType;
 }
 
 export interface PatientAndAdmission {

packages/esm-ward-app/src/ward-view/default-ward/default-ward-beds.component.tsx

@@ -6,7 +6,7 @@ import { bedLayoutToBed } from '../ward-view.resource';
 import DefaultWardPatientCard from './default-ward-patient-card.component';
 
 function DefaultWardBeds() {
-  const {wardPatientGroupDetails} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
   const { bedLayouts, wardAdmittedPatientsWithBed } = wardPatientGroupDetails ?? {};
 
   const wardBeds = bedLayouts?.map((bedLayout) => {
@@ -28,10 +28,8 @@ function DefaultWardBeds() {
         };
       }
     });
-    const patientCards = wardPatients.map(wardPatient => (
-      <DefaultWardPatientCard 
-        key={wardPatient.patient.uuid}
-        {...wardPatient} />
+    const patientCards = wardPatients.map((wardPatient) => (
+      <DefaultWardPatientCard key={wardPatient.patient.uuid} {...{ wardPatient }} />
     ));
     return <WardBed key={bed.uuid} bed={bed} patientCards={patientCards} />;
   });

packages/esm-ward-app/src/ward-view/default-ward/default-ward-patient-card-header.component.tsx

@@ -10,7 +10,7 @@ import styles from '../../ward-patient-card/ward-patient-card.scss';
 import { type WardPatientCardType } from '../../types';
 import WardPatientGender from '../../ward-patient-card/row-elements/ward-patient-gender.component';
 
-const DefaultWardPatientCardHeader: WardPatientCardType = (wardPatient) => {
+const DefaultWardPatientCardHeader: WardPatientCardType = ({ wardPatient }) => {
   const { patient, bed, inpatientAdmission } = wardPatient;
   const { encounterAssigningToCurrentInpatientLocation, firstAdmissionOrTransferEncounter } = inpatientAdmission ?? {};
 

packages/esm-ward-app/src/ward-view/default-ward/default-ward-patient-card.component.tsx

@@ -6,12 +6,12 @@ import WardPatientCard from '../../ward-patient-card/ward-patient-card.component
 import styles from '../../ward-patient-card/ward-patient-card.scss';
 import DefaultWardPatientCardHeader from './default-ward-patient-card-header.component';
 
-const DefaultWardPatientCard: WardPatientCardType = (wardPatient) => {
+const DefaultWardPatientCard: WardPatientCardType = ({ wardPatient }) => {
   const { bed } = wardPatient;
 
   const card = (
     <WardPatientCard wardPatient={wardPatient}>
-      <DefaultWardPatientCardHeader {...wardPatient} />
+      <DefaultWardPatientCardHeader {...{ wardPatient }} />
       <PendingItemsRow id={'pending-items'} wardPatient={wardPatient} />
       <AdmissionRequestNoteRow id={'admission-request-note'} wardPatient={wardPatient} />
     </WardPatientCard>

packages/esm-ward-app/src/ward-view/default-ward/default-ward-unassigned-patients.component.tsx

@@ -8,13 +8,13 @@ import DefaultWardPatientCard from './default-ward-patient-card.component';
  * @returns
  */
 function DefaultWardUnassignedPatients() {
-  const {wardPatientGroupDetails} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
   const { wardUnassignedPatientsList } = wardPatientGroupDetails ?? {};
 
   const wardUnassignedPatients = wardUnassignedPatientsList?.map((inpatientAdmission) => {
     return (
       <DefaultWardPatientCard
-        {...{
+        wardPatient={{
           patient: inpatientAdmission.patient,
           visit: inpatientAdmission.visit,
           bed: null,

packages/esm-ward-app/src/ward-view/materal-ward/maternal-ward-patient-card-header.component.tsx

@@ -10,7 +10,7 @@ import WardPatientObs from '../../ward-patient-card/row-elements/ward-patient-ob
 import WardPatientTimeSinceAdmission from '../../ward-patient-card/row-elements/ward-patient-time-since-admission';
 import styles from '../../ward-patient-card/ward-patient-card.scss';
 
-const MaternalWardPatientCardHeader: WardPatientCardType = (wardPatient) => {
+const MaternalWardPatientCardHeader: WardPatientCardType = ({ wardPatient }) => {
   const { patient, bed, visit, inpatientAdmission } = wardPatient;
   const { firstAdmissionOrTransferEncounter } = inpatientAdmission ?? {};
 

packages/esm-ward-app/src/ward-view/materal-ward/maternal-ward-patient-card.component.tsx

@@ -43,7 +43,7 @@ const MaternalWardPatientCard: React.FC<MaternalWardPatientCardProps> = (props)
   const card = (
     <>
       <WardPatientCard wardPatient={wardPatient}>
-        <MaternalWardPatientCardHeader {...wardPatient} />
+        <MaternalWardPatientCardHeader {...{ wardPatient }} />
         <div className={classNames(styles.wardPatientCardRow, styles.dotSeparatedChildren)}>
           <WardPatientTimeOnWard
             encounterAssigningToCurrentInpatientLocation={encounterAssigningToCurrentInpatientLocation}
@@ -59,7 +59,7 @@ const MaternalWardPatientCard: React.FC<MaternalWardPatientCardProps> = (props)
           <React.Fragment key={childWardPatient.patient.uuid}>
             <MotherChildBedShareDivider />
             <WardPatientCard wardPatient={childWardPatient}>
-              <MaternalWardPatientCardHeader {...childWardPatient} />
+              <MaternalWardPatientCardHeader wardPatient={childWardPatient} />
               <PendingItemsRow id={'pending-items'} wardPatient={childWardPatient} />
             </WardPatientCard>
           </React.Fragment>

packages/esm-ward-app/src/ward-workspace/admission-request-card/admission-request-card-actions.component.tsx

@@ -15,7 +15,7 @@ import { useAdmitPatient } from '../../ward.resource';
 import { AdmissionRequestsWorkspaceContext } from '../admission-request-workspace/admission-requests.workspace';
 import styles from './admission-request-card.scss';
 
-const AdmissionRequestCardActions: WardPatientCardType = (wardPatient) => {
+const AdmissionRequestCardActions: WardPatientCardType = ({ wardPatient }) => {
   const { patient, inpatientRequest } = wardPatient;
   const { dispositionType } = inpatientRequest;
   const { t } = useTranslation();

packages/esm-ward-app/src/ward-workspace/admission-request-card/admission-request-card-header.component.tsx

@@ -8,7 +8,7 @@ import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-pat
 import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
 import styles from './admission-request-card.scss';
 
-const AdmissionRequestCardHeader: WardPatientCardType = (wardPatient) => {
+const AdmissionRequestCardHeader: WardPatientCardType = ({ wardPatient }) => {
   const { inpatientRequest } = wardPatient;
   const { dispositionEncounter } = inpatientRequest;
   const { patient } = wardPatient;

packages/esm-ward-app/src/ward-workspace/admission-request-card/admission-request-card.component.tsx

@@ -12,9 +12,9 @@ interface AdmissionRequestCardProps {
 const AdmissionRequestCard: React.FC<AdmissionRequestCardProps> = ({ wardPatient, children }) => {
   return (
     <div className={styles.admissionRequestCard}>
-      <AdmissionRequestCardHeader {...wardPatient} />
+      <AdmissionRequestCardHeader {...{ wardPatient }} />
       {children}
-      <AdmissionRequestCardActions {...wardPatient} />
+      <AdmissionRequestCardActions {...{ wardPatient }} />
     </div>
   );
 };

packages/esm-ward-app/src/ward-workspace/admit-patient-form-workspace/admit-patient-form.workspace.tsx

@@ -144,7 +144,7 @@ const AdmitPatientFormWorkspace: React.FC<WardPatientWorkspaceProps> = ({
 
   return (
     <div className={styles.flexWrapper}>
-      <WardPatientWorkspaceBanner {...wardPatient} />
+      <WardPatientWorkspaceBanner {...{ wardPatient }} />
       <Form control={control} className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
         <div className={styles.formContent}>
           <Row>

packages/esm-ward-app/src/ward-workspace/patient-banner/patient-banner.component.tsx

@@ -1,21 +1,23 @@
 import { useAppContext } from '@openmrs/esm-framework';
 import React from 'react';
-import type { WardPatient, WardViewContext } from '../../types';
+import type { WardPatientCardType, WardViewContext } from '../../types';
 import styles from './style.scss';
 
-const WardPatientWorkspaceBanner = (wardPatient: WardPatient) => {
-  const { patient } = wardPatient;
-  const {WardPatientHeader} = useAppContext<WardViewContext>('ward-view-context') ?? {};
+const WardPatientWorkspaceBanner: WardPatientCardType = ({ wardPatient }) => {
+  const { patient } = wardPatient ?? {};
+  const { WardPatientHeader } = useAppContext<WardViewContext>('ward-view-context') ?? {};
 
   if (!patient) {
     console.warn('Patient details were not received by the ward workspace');
     return null;
   }
 
-  return (
-    <div className={styles.patientBanner}>
-      {WardPatientHeader && <WardPatientHeader {...wardPatient} />}
+  return WardPatientHeader ? (
+    <div className={styles.wardWorkspacePatientBanner}>
+      <WardPatientHeader wardPatient={wardPatient} />
     </div>
+  ) : (
+    <></>
   );
 };
 

packages/esm-ward-app/src/ward-workspace/patient-banner/style.scss

@@ -1,23 +1,7 @@
-@use '@carbon/layout';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
-.patientBanner {
-  @extend .dotSeparatedChildren;
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  padding: layout.$spacing-04;
-  background: $ui-01;
-}
-
-.dotSeparatedChildren {
-  > div:not(div:first-of-type):not(:empty) {
-    display: flex;
-    align-items: center;
-
-    &::before {
-      content: '·';
-      padding: 0 layout.$spacing-02;
-    }
+.wardWorkspacePatientBanner {
+  > div {
+    background: $ui-01;
   }
 }

packages/esm-ward-app/src/ward-workspace/patient-clinical-forms-workspace/patient-clinical-forms.workspace.tsx

@@ -1,6 +1,7 @@
-import React, { useMemo } from 'react';
 import { ExtensionSlot } from '@openmrs/esm-framework';
+import React, { useMemo } from 'react';
 import type { WardPatientWorkspaceProps } from '../../types';
+import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
 
 const WardPatientClinicalFormsWorkspace: React.FC<WardPatientWorkspaceProps> = (props) => {
   const { wardPatient, ...restWorkspaceProps } = props;
@@ -17,7 +18,12 @@ const WardPatientClinicalFormsWorkspace: React.FC<WardPatientWorkspaceProps> = (
     [patientUuid, restWorkspaceProps],
   );
 
-  return <ExtensionSlot name="ward-patient-clinical-forms-workspace-slot" state={clinicalFormsExtensionState} />;
+  return (
+    <div>
+      <WardPatientWorkspaceBanner {...{ wardPatient }} />
+      <ExtensionSlot name="ward-patient-clinical-forms-workspace-slot" state={clinicalFormsExtensionState} />
+    </div>
+  );
 };
 
 export default WardPatientClinicalFormsWorkspace;

packages/esm-ward-app/src/ward-workspace/patient-details/ward-patient.workspace.tsx

@@ -1,6 +1,7 @@
 import { attach, ExtensionSlot } from '@openmrs/esm-framework';
 import React from 'react';
 import { type WardPatientWorkspaceProps } from '../../types';
+import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
 import styles from './ward-patient.style.scss';
 
 attach('ward-patient-workspace-header-slot', 'patient-vitals-info');
@@ -13,7 +14,7 @@ export default function WardPatientWorkspace({ wardPatient, WardPatientHeader }:
     <>
       {wardPatient && (
         <div className={styles.workspaceContainer}>
-          <WardPatientHeader {...wardPatient} />
+          <WardPatientWorkspaceBanner {...{ wardPatient }} />
           <div>
             <ExtensionSlot name="ward-patient-workspace-header-slot" state={extensionSlotState} />
           </div>

packages/esm-ward-app/src/ward-workspace/patient-discharge/patient-discharge.workspace.tsx

@@ -75,7 +75,7 @@ export default function PatientDischargeWorkspace(props: WardPatientWorkspacePro
   return (
     <div className={styles.workspaceContent}>
       <div className={styles.patientWorkspaceBanner}>
-        <WardPatientWorkspaceBanner {...props?.wardPatient} />
+        <WardPatientWorkspaceBanner wardPatient={props?.wardPatient} />
       </div>
       <div className={styles.workspaceForm}>
         <div>

packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace.tsx

@@ -23,7 +23,7 @@ export default function PatientTransferAndSwapWorkspace(props: WardPatientWorksp
   return (
     <div className={styles.flexWrapper}>
       <div className={styles.patientWorkspaceBanner}>
-        <WardPatientWorkspaceBanner {...props?.wardPatient} />
+        <WardPatientWorkspaceBanner wardPatient={props?.wardPatient} />
       </div>
       {isBedManagementModuleInstalled && (
         <div className={styles.contentSwitcherWrapper}>

packages/esm-ward-app/src/ward-workspace/ward-patient-notes/notes.workspace.tsx

@@ -15,7 +15,7 @@ const WardPatientNotesWorkspace: React.FC<WardPatientWorkspaceProps> = (props) =
 
   return (
     <div>
-      <WardPatientWorkspaceBanner {...wardPatient} />
+      <WardPatientWorkspaceBanner {...{ wardPatient }} />
       <PatientNotesForm {...notesFormState} />
       <PatientNotesHistory patientUuid={patientUuid} visitUuid={wardPatient?.visit?.uuid} />
     </div>