@openmrs/esm-patient-chart-app 11.3.1-pre.9452 → 11.3.1-pre.9455

package/src/patient-chart/patient-chart.component.tsx

@@ -1,21 +1,33 @@
-import React, { useMemo, useState } from 'react';
+import { ExtensionSlot, useLeftNav } from '@openmrs/esm-framework';
 import classNames from 'classnames';
+import React, { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { ExtensionSlot, WorkspaceContainer, useWorkspaces, useLeftNav } from '@openmrs/esm-framework';
 import { spaBasePath } from '../constants';
-import { usePatientChartPatientAndVisit } from './patient-chart.resources';
-import { type LayoutMode } from './chart-review/dashboard-view.component';
-import ChartReview from '../patient-chart/chart-review/chart-review.component';
 import Loader from '../loader/loader.component';
+import ChartReview from '../patient-chart/chart-review/chart-review.component';
 import SideMenuPanel from '../side-nav/side-menu.component';
+import { type LayoutMode } from './chart-review/dashboard-view.component';
 import styles from './patient-chart.scss';
+import { usePatientChartPatientAndVisit } from './patient-chart.resources';
 
 const PatientChart: React.FC = () => {
   const { patientUuid, view: encodedView } = useParams();
-  const { workspaceWindowState, active } = useWorkspaces();
+
+  // specify key to ensure that WrapPatientChart instance is re-created
+  // when we switch patient
+  return <WrappedPatientChart key={patientUuid} patientUuid={patientUuid} encodedView={encodedView} />;
+};
+
+interface WrappedPatientChartProps {
+  patientUuid: string;
+  encodedView: string;
+}
+
+const WrappedPatientChart: React.FC<WrappedPatientChartProps> = ({ patientUuid, encodedView }) => {
+  const view = decodeURIComponent(encodedView);
   const [layoutMode, setLayoutMode] = useState<LayoutMode>();
   const state = usePatientChartPatientAndVisit(patientUuid);
-  const view = decodeURIComponent(encodedView);
+  const { isLoadingPatient, patient } = state;
 
   const leftNavBasePath = useMemo(() => spaBasePath.replace(':patientUuid', patientUuid), [patientUuid]);
 
@@ -25,43 +37,34 @@ const PatientChart: React.FC = () => {
     <>
       <SideMenuPanel />
       <main className={classNames('omrs-main-content', styles.chartContainer)}>
-        <div
-          className={classNames(
-            styles.innerChartContainer,
-            workspaceWindowState === 'normal' && active ? styles.closeWorkspace : styles.activeWorkspace,
-          )}
-        >
-          {state.isLoadingPatient ? (
-            <Loader />
-          ) : (
-            <>
-              <aside>
-                <ExtensionSlot name="patient-header-slot" state={state} />
-                <ExtensionSlot name="patient-highlights-bar-slot" state={state} />
-                <ExtensionSlot name="patient-info-slot" state={state} />
-              </aside>
-              <div className={styles.grid}>
-                <div
-                  className={classNames(styles.chartReview, { [styles.widthContained]: layoutMode === 'contained' })}
-                >
-                  <ChartReview
-                    patient={state.patient}
-                    patientUuid={state.patientUuid}
-                    view={view}
-                    setDashboardLayoutMode={setLayoutMode}
-                  />
+        <>
+          <div className={classNames(styles.innerChartContainer)}>
+            {isLoadingPatient ? (
+              <Loader />
+            ) : (
+              <>
+                <aside>
+                  <ExtensionSlot name="patient-header-slot" state={state} />
+                  <ExtensionSlot name="patient-highlights-bar-slot" state={state} />
+                  <ExtensionSlot name="patient-info-slot" state={state} />
+                </aside>
+                <div className={styles.grid}>
+                  <div
+                    className={classNames(styles.chartReview, { [styles.widthContained]: layoutMode == 'contained' })}
+                  >
+                    <ChartReview
+                      patient={patient}
+                      patientUuid={patientUuid}
+                      view={view}
+                      setDashboardLayoutMode={setLayoutMode}
+                    />
+                  </div>
                 </div>
-              </div>
-            </>
-          )}
-        </div>
+              </>
+            )}
+          </div>
+        </>
       </main>
-      <WorkspaceContainer
-        actionMenuProps={state}
-        additionalWorkspaceProps={state}
-        contextKey={`patient/${patientUuid}`}
-        showSiderailAndBottomNav
-      />
     </>
   );
 };

package/src/patient-chart/patient-chart.resources.ts

@@ -1,7 +1,15 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import useSWR from 'swr';
-import { openmrsFetch, restBaseUrl, usePatient, useVisit, type Visit } from '@openmrs/esm-framework';
-import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import {
+  closeWorkspaceGroup2,
+  launchWorkspaceGroup2,
+  openmrsFetch,
+  restBaseUrl,
+  usePatient,
+  useVisit,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { type PatientWorkspaceGroupProps, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 
 const defaultVisitCustomRepresentation =
   'custom:(uuid,display,voided,indication,startDatetime,stopDatetime,' +
@@ -32,7 +40,7 @@ export function useVisitByUuid(visitUuid: string | null, representation: string
  * in‑app navigation. On a full page reload, visitContext is rehydrated by refetching
  * (via useVisit/useVisitByUuId) rather than restored from storage.
  * When we enter the chart, we want to update the visit context as follows:
- * does the stored visitContext exist and belong to the patient?
+ * does the the stored visitContext exist and belong to the patient?
  * 1. If so, the visitContext should be valid but possibly stale; fetch the visit again
  *    and update the context
  * 2. If not, fetch the active visit of the patient, If it exists, set it as the
@@ -50,7 +58,7 @@ export function usePatientChartPatientAndVisit(patientUuid: string) {
     setVisitContext,
   } = usePatientChartStore(patientUuid);
 
-  const isVisitContextValid = visitContext && visitContext.patient?.uuid === patientUuid;
+  const isVisitContextValid = visitContext && visitContext.patient.uuid === patientUuid;
   const {
     visit: newVisitContext,
     mutate: newMutateVisitContext,
@@ -62,14 +70,39 @@ export function usePatientChartPatientAndVisit(patientUuid: string) {
     mutate: mutateActiveVisit,
   } = useVisit(isVisitContextValid ? null : patientUuid);
 
+  const isWorkspaceGroupLaunched = useRef(false);
+
   useEffect(() => {
-    if (!isValidatingVisitContext && !isValidatingActiveVisit && storePatientUuid) {
+    if (!isValidatingVisitContext && !isValidatingActiveVisit && patient) {
+      let groupProps: PatientWorkspaceGroupProps = null;
       if (activeVisit) {
-        setVisitContext(activeVisit, mutateActiveVisit);
+        groupProps = {
+          patientUuid: patient.id,
+          patient,
+          visitContext: activeVisit,
+          mutateVisitContext: mutateActiveVisit,
+        };
       } else if (newVisitContext) {
-        setVisitContext(newVisitContext, newMutateVisitContext);
+        groupProps = {
+          patientUuid: patient.id,
+          patient,
+          visitContext: newVisitContext,
+          mutateVisitContext: newMutateVisitContext,
+        };
       } else {
-        setVisitContext(null, null);
+        groupProps = {
+          patientUuid: patient.id,
+          patient,
+          visitContext: null,
+          mutateVisitContext: null,
+        };
+      }
+
+      setVisitContext(groupProps.visitContext, groupProps.mutateVisitContext);
+
+      if (!isWorkspaceGroupLaunched.current) {
+        launchWorkspaceGroup2('patient-chart', groupProps);
+        isWorkspaceGroupLaunched.current = true;
       }
     }
   }, [
@@ -81,6 +114,8 @@ export function usePatientChartPatientAndVisit(patientUuid: string) {
     isValidatingActiveVisit,
     storePatientUuid,
     mutateActiveVisit,
+    isWorkspaceGroupLaunched,
+    patient,
   ]);
 
   useEffect(() => {
@@ -93,6 +128,12 @@ export function usePatientChartPatientAndVisit(patientUuid: string) {
     };
   }, [patient, setPatient, isLoadingPatient]);
 
+  useEffect(() => {
+    return () => {
+      closeWorkspaceGroup2();
+    };
+  }, []);
+
   const state = useMemo(
     () => ({
       patientUuid,
@@ -100,8 +141,9 @@ export function usePatientChartPatientAndVisit(patientUuid: string) {
       visitContext,
       mutateVisitContext,
       isLoadingPatient,
+      setPatient,
     }),
-    [patient, patientUuid, visitContext, mutateVisitContext, isLoadingPatient],
+    [patient, patientUuid, visitContext, mutateVisitContext, isLoadingPatient, setPatient],
   );
 
   return state;

package/src/patient-chart/patient-chart.scss

@@ -44,10 +44,6 @@ $actionPanelExpandedOffset: $actionNavOffset + $actionPanelOffset;
   flex-direction: column;
 }
 
-.closeWorkspace {
-  padding-right: 0;
-}
-
 // Overriding styles for RTL support
 html[dir='rtl'] {
   .chartContainer {

package/src/routes.json

@@ -225,18 +225,29 @@
       "offline": true
     }
   ],
-  "workspaces": [
+  "workspaces2": [
     {
       "name": "mark-patient-deceased-workspace-form",
       "component": "markPatientDeceasedForm",
-      "title": "Mark patient deceased",
-      "type": "form"
+      "window": "mark-patient-deceased"
     },
     {
       "name": "start-visit-workspace-form",
       "component": "startVisitWorkspace",
-      "title": "startVisitWorkspaceTitle",
-      "type": "start-visit"
+      "window": "start-visit"
     }
-  ]
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "start-visit",
+      "group": "patient-chart"
+    },
+    {
+      "name": "mark-patient-deceased",
+      "group": "patient-chart"
+    }
+  ],
+  "workspaceGroups2": [{
+    "name":"patient-chart"
+  }]
 }

package/src/visit/hooks/useDeleteVisit.tsx

@@ -64,7 +64,7 @@ export function useDeleteVisit(
       .then(() => {
         // Update active visit data
         mutateActiveVisit();
-        if (activeVisit.uuid === visitContext?.uuid) {
+        if (activeVisit.uuid == visitContext?.uuid) {
           setVisitContext(null, null);
         }
 

package/src/visit/start-visit-button.component.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
-import { launchWorkspace, showSnackbar } from '@openmrs/esm-framework';
+import { launchWorkspace2, showSnackbar } from '@openmrs/esm-framework';
 
 interface StartVisitButtonProps {
   patientUuid: string;
@@ -20,7 +20,7 @@ const StartVisitButton = ({ patientUuid, handleReturnToSearchList, hidePatientSe
     hidePatientSearch?.();
 
     try {
-      launchWorkspace(startVisitWorkspaceForm, {
+      launchWorkspace2(startVisitWorkspaceForm, {
         patientUuid,
         openedFrom: 'patient-chart-start-visit',
         handleReturnToSearchList,

package/src/visit/start-visit-button.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { launchWorkspace } from '@openmrs/esm-framework';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
 import { mockPatient } from 'tools';
 import StartVisitButton from './start-visit-button.component';
 
-const mockLaunchWorkspace = jest.mocked(launchWorkspace);
+const mockLaunchWorkspace = jest.mocked(launchWorkspace2);
 
 describe('StartVisitButton', () => {
   it('renders the start visit button', () => {

package/src/visit/visit-action-items/edit-visit-details.component.tsx

@@ -6,13 +6,20 @@ import {
   UserHasAccess,
   type Visit,
   getCoreTranslation,
-  launchWorkspace,
+  launchWorkspace2,
   useLayoutType,
 } from '@openmrs/esm-framework';
+import { type VisitFormProps } from '../visit-form/visit-form.workspace';
+import {
+  invalidateVisitAndEncounterData,
+  invalidateVisitByUuid,
+  type PatientWorkspaceGroupProps,
+} from '@openmrs/esm-patient-common-lib';
+import { useSWRConfig } from 'swr';
 
 interface EditVisitDetailsActionItemProps {
-  patientUuid: string;
   visit: Visit;
+  patient: fhir.Patient;
 
   /**
    * If true, renders as IconButton instead
@@ -20,18 +27,32 @@ interface EditVisitDetailsActionItemProps {
   compact?: boolean;
 }
 
-const EditVisitDetailsActionItem: React.FC<EditVisitDetailsActionItemProps> = ({ visit, compact }) => {
+/**
+ * This component
+ */
+const EditVisitDetailsActionItem: React.FC<EditVisitDetailsActionItemProps> = ({ visit, patient, compact }) => {
   const { t } = useTranslation();
+  const { mutate: globalMutate } = useSWRConfig();
 
   const isTablet = useLayoutType() === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
+  const patientUuid = patient.id;
 
   const editVisitDetails = () => {
-    launchWorkspace('start-visit-workspace-form', {
-      workspaceTitle: t('editVisitDetails', 'Edit visit details'),
-      visitToEdit: visit,
-      openedFrom: 'patient-chart-edit-visit',
-    });
+    launchWorkspace2<VisitFormProps, {}, PatientWorkspaceGroupProps>(
+      'start-visit-workspace-form',
+      { openedFrom: 'patient-chart-edit-visit' },
+      {},
+      {
+        patient,
+        patientUuid: patientUuid,
+        visitContext: visit,
+        mutateVisitContext: () => {
+          invalidateVisitByUuid(globalMutate, visit.uuid);
+          invalidateVisitAndEncounterData(globalMutate, patientUuid);
+        },
+      },
+    );
   };
 
   return (

package/src/visit/visit-form/exported-visit-form.workspace.tsx

@@ -21,7 +21,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Extension,
   ExtensionSlot,
-  launchWorkspaceGroup2,
   OpenmrsFetchError,
   saveVisit,
   showSnackbar,
@@ -30,7 +29,6 @@ import {
   useConnectivity,
   useEmrConfiguration,
   useLayoutType,
-  useVisit,
   type Visit,
   Workspace2,
   type Workspace2DefinitionProps,
@@ -39,7 +37,6 @@ import {
 } from '@openmrs/esm-framework';
 import {
   createOfflineVisitForPatient,
-  invalidateVisitByUuid,
   invalidateVisitAndEncounterData,
   useActivePatientEnrollment,
 } from '@openmrs/esm-patient-common-lib';
@@ -103,13 +100,8 @@ export interface ExportedVisitFormProps {
 }
 
 /**
- * This form is used for starting a new visit and for editing
- * an existing visit for a patient. It is similar to visit-form.workspace.tsx, but
- * is not tied to the patient-chart workspace group (i.e. it is not required to operate on
- * the same patient and same visit as all other workspaces within that group.) This workspace is
- * suitable for use *outside* the patient chart, in workflows where we need to start a visit for any
- * arbitrary patient (ex: the patient search workspace window).
- *
+ * This workspace is meant for use outside the patient chart.
+ * @see visit-form.workspace.tsx
  */
 const ExportedVisitForm: React.FC<Workspace2DefinitionProps<ExportedVisitFormProps, {}, {}>> = ({
   closeWorkspace,

package/src/visit/visit-form/visit-form.test.tsx

@@ -26,10 +26,8 @@ import {
   useVisitFormCallbacks,
   useVisitFormSchemaAndDefaultValues,
 } from './visit-form.resource';
-import VisitForm from './visit-form.workspace';
-
-// Fixed reference time used in time-dependent tests
-const FIXED_NOW = new Date('2023-01-01T08:00:00.000Z');
+import VisitForm, { type VisitFormProps } from './visit-form.workspace';
+import { type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib/src';
 
 const visitUuid = 'test_visit_uuid';
 const visitAttributes = {
@@ -56,20 +54,23 @@ const visitAttributes = {
 };
 
 const mockCloseWorkspace = jest.fn();
-const mockPromptBeforeClosing = jest.fn();
-const mockSetTitle = jest.fn();
 const mockMutateVisitContext = jest.fn();
-
-const testProps = {
-  openedFrom: 'test',
-  patientUuid: mockPatient.id,
-  patient: mockPatient,
+const defaultProps: PatientWorkspace2DefinitionProps<VisitFormProps, {}> = {
   closeWorkspace: mockCloseWorkspace,
-  closeWorkspaceWithSavedChanges: mockCloseWorkspace,
-  promptBeforeClosing: mockPromptBeforeClosing,
-  setTitle: mockSetTitle,
-  visitContext: null,
-  mutateVisitContext: mockMutateVisitContext,
+  workspaceProps: {
+    openedFrom: 'test',
+  },
+  windowProps: {},
+  groupProps: {
+    patientUuid: mockPatient.id,
+    patient: mockPatient,
+    visitContext: null,
+    mutateVisitContext: mockMutateVisitContext,
+  },
+  workspaceName: '',
+  launchChildWorkspace: jest.fn(),
+  windowName: '',
+  isRootWorkspace: false,
 };
 
 const mockSaveVisit = jest.mocked(saveVisit);
@@ -155,9 +156,10 @@ jest.mock('../hooks/useDefaultFacilityLocation', () => {
 
   return {
     ...requireActual,
-    useDefaultLoginLocation: jest.fn(() => ({
+    useDefaultFacilityLocation: jest.fn(() => ({
       defaultFacility: null,
       isLoading: false,
+      error: null,
     })),
   };
 });
@@ -867,5 +869,12 @@ describe('useVisitFormSchemaAndDefaultValues', () => {
 });
 
 function renderVisitForm(visitToEdit?: Visit) {
-  return render(<VisitForm {...{ ...testProps, visitToEdit }} />);
+  const props: PatientWorkspace2DefinitionProps<VisitFormProps, {}> = {
+    ...defaultProps,
+    groupProps: {
+      ...defaultProps.groupProps,
+      visitContext: visitToEdit ?? null,
+    },
+  };
+  return render(<VisitForm {...props} />);
 }