(fix) O3-4004 - ward app - better way to fix patient action menu button in workspace

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

@@ -231,3 +231,5 @@ export interface WardViewContext {
 export interface MaternalWardViewContext {
   motherChildrenRelationshipsByPatient: Map<string, MotherAndChild[]>;
 }
+
+export type PatientWorkspaceAdditionalProps = Omit<WardPatientWorkspaceProps, keyof DefaultWorkspaceProps>;

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

@@ -1,8 +1,7 @@
-import { getPatientName, useAppContext } from '@openmrs/esm-framework';
+import { getPatientName, launchWorkspace, useAppContext } from '@openmrs/esm-framework';
 import React, { type ReactNode } from 'react';
-import { type WardViewContext, type WardPatient } from '../types';
+import { type WardViewContext, type WardPatient,type PatientWorkspaceAdditionalProps } from '../types';
 import styles from './ward-patient-card.scss';
-import { launchPatientWorkspace, setPatientWorkspaceProps } from './ward-patient-resource';
 
 interface Props {
   children: ReactNode;
@@ -19,12 +18,11 @@ const WardPatientCard: React.FC<Props> = ({ children, wardPatient }) => {
       <button
         className={styles.wardPatientCardButton}
         onClick={() => {
-          setPatientWorkspaceProps({
+          launchWorkspace<PatientWorkspaceAdditionalProps>('ward-patient-workspace', {
             wardPatient,
-            WardPatientHeader,
+            WardPatientHeader
           });
-          launchPatientWorkspace();
-        }}>
+         }}>
         {/* Name will not be displayed; just there for a11y */}
         {getPatientName(patient.person)}
       </button>

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { UserAvatarIcon } from '@openmrs/esm-framework';
 import { ActionMenuButton, launchWorkspace } from '@openmrs/esm-framework';
-import { launchPatientWorkspace } from '../../ward-patient-card/ward-patient-resource';
+import type { WardPatientWorkspaceProps } from '../../types';
 
 export default function WardPatientActionButton() {
   const { t } = useTranslation();
@@ -12,7 +12,7 @@ export default function WardPatientActionButton() {
       getIcon={(props) => <UserAvatarIcon {...props} />}
       label={t('Patient', 'patient')}
       iconDescription={t('Patient', 'patient')}
-      handler={() => launchPatientWorkspace()}
+      handler={() =>  launchWorkspace<WardPatientWorkspaceProps>('ward-patient-workspace')}
       type={'ward'}
     />
   );

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

@@ -7,15 +7,22 @@ import { getGender } from '../../ward-patient-card/row-elements/ward-patient-gen
 
 attach('ward-patient-workspace-header-slot', 'patient-vitals-info');
 
-export default function WardPatientWorkspace({ setTitle, wardPatient: { patient } }: WardPatientWorkspaceProps) {
+export default function WardPatientWorkspace({ setTitle, wardPatient }: WardPatientWorkspaceProps) {
   useEffect(() => {
-    setTitle(patient.person.display, <PatientWorkspaceTitle key={patient.uuid} patient={patient} />);
-  }, [patient.uuid]);
+    if (wardPatient) {
+      const { patient } = wardPatient;
+      setTitle(patient.person.display, <PatientWorkspaceTitle key={patient.uuid} patient={patient} />);
+    }
+  }, [wardPatient]);
 
   return (
-    <div className={styles.workspaceContainer}>
-      <WardPatientWorkspaceView patient={patient} />
-    </div>
+    <>
+      {wardPatient && (
+        <div className={styles.workspaceContainer}>
+          <WardPatientWorkspaceView patient={wardPatient.patient} />
+        </div>
+      )}
+    </>
   );
 }