@openmrs/esm-patient-chart-app 11.3.1-patch.9310 → 11.3.1-patch.9508

package/src/mark-patient-deceased/mark-patient-deceased-form.workspace.tsx

@@ -20,7 +20,7 @@ import { Controller, useForm, type SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { WarningFilled } from '@carbon/react/icons';
-import { type PatientWorkspace2DefinitionProps, EmptyState } from '@openmrs/esm-patient-common-lib';
+import { EmptyState, type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import {
   ExtensionSlot,
   useLayoutType,
@@ -28,16 +28,12 @@ import {
   ResponsiveWrapper,
   useConfig,
   OpenmrsDatePicker,
-  Workspace2,
 } from '@openmrs/esm-framework';
 import { markPatientDeceased, useCausesOfDeath } from '../data.resource';
 import { type ChartConfig } from '../config-schema';
 import styles from './mark-patient-deceased-form.scss';
 
-const MarkPatientDeceasedForm: React.FC<PatientWorkspace2DefinitionProps<{}, {}>> = ({
-  closeWorkspace,
-  groupProps: { patientUuid },
-}) => {
+const MarkPatientDeceasedForm: React.FC<DefaultPatientWorkspaceProps> = ({ closeWorkspace, patientUuid }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const memoizedPatientUuid = useMemo(() => ({ patientUuid }), [patientUuid]);
@@ -82,7 +78,7 @@ const MarkPatientDeceasedForm: React.FC<PatientWorkspace2DefinitionProps<{}, {}>
 
   const {
     control,
-    formState: { errors, isSubmitting, isDirty },
+    formState: { errors, isSubmitting },
     handleSubmit,
     watch,
   } = useForm<MarkPatientDeceasedFormSchema>({
@@ -121,156 +117,151 @@ const MarkPatientDeceasedForm: React.FC<PatientWorkspace2DefinitionProps<{}, {}>
   const onError = (errors) => console.error(errors);
 
   return (
-    <Workspace2 title={t('markPatientDeceased', 'Mark patient deceased')} hasUnsavedChanges={isDirty}>
-      <Form className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
-        <div>
-          {isTablet && (
-            <Row className={styles.headerGridRow}>
-              <ExtensionSlot className={styles.dataGridRow} name="visit-form-header-slot" state={memoizedPatientUuid} />
-            </Row>
-          )}
-          <div className={styles.container}>
-            <span className={styles.warningContainer}>
-              <WarningFilled aria-label={t('warning', 'Warning')} className={styles.warningIcon} size={20} />
-              <span className={styles.warningText}>
-                {t(
-                  'markDeceasedWarning',
-                  'Marking the patient as deceased will end any active visits for this patient',
-                )}
-              </span>
+    <Form className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
+      <div>
+        {isTablet && (
+          <Row className={styles.headerGridRow}>
+            <ExtensionSlot className={styles.dataGridRow} name="visit-form-header-slot" state={memoizedPatientUuid} />
+          </Row>
+        )}
+        <div className={styles.container}>
+          <span className={styles.warningContainer}>
+            <WarningFilled aria-label={t('warning', 'Warning')} className={styles.warningIcon} size={20} />
+            <span className={styles.warningText}>
+              {t('markDeceasedWarning', 'Marking the patient as deceased will end any active visits for this patient')}
             </span>
-            <section>
-              <div className={styles.sectionTitle}>{t('dateOfDeath', 'Date of death')}</div>
+          </span>
+          <section>
+            <div className={styles.sectionTitle}>{t('dateOfDeath', 'Date of death')}</div>
+            {causesOfDeath?.length ? (
+              <ResponsiveWrapper>
+                <Controller
+                  name="deathDate"
+                  control={control}
+                  render={({ field, fieldState }) => (
+                    <OpenmrsDatePicker
+                      {...field}
+                      className={styles.datePicker}
+                      id="deceasedDate"
+                      data-testid="deceasedDate"
+                      labelText={t('date', 'Date')}
+                      maxDate={new Date()}
+                      invalid={Boolean(fieldState?.error?.message)}
+                      invalidText={fieldState?.error?.message}
+                    />
+                  )}
+                />
+              </ResponsiveWrapper>
+            ) : (
+              <DatePickerSkeleton />
+            )}
+          </section>
+          <section>
+            <div className={styles.sectionTitle}>{t('causeOfDeath', 'Cause of death')}</div>
+            <div
+              className={classNames(styles.conceptAnswerOverviewWrapper, {
+                [styles.conceptAnswerOverviewWrapperTablet]: isTablet,
+                [styles.conceptAnswerOverviewWrapperDesktop]: !isTablet,
+                [styles.errorOutline]: errors?.causeOfDeath?.message,
+              })}
+            >
+              {isLoadingCausesOfDeath ? <StructuredListSkeleton /> : null}
+
               {causesOfDeath?.length ? (
                 <ResponsiveWrapper>
-                  <Controller
-                    name="deathDate"
-                    control={control}
-                    render={({ field, fieldState }) => (
-                      <OpenmrsDatePicker
-                        {...field}
-                        className={styles.datePicker}
-                        id="deceasedDate"
-                        data-testid="deceasedDate"
-                        labelText={t('date', 'Date')}
-                        maxDate={new Date()}
-                        invalid={Boolean(fieldState?.error?.message)}
-                        invalidText={fieldState?.error?.message}
-                      />
-                    )}
+                  <Search
+                    labelText={t('searchForCauseOfDeath', 'Search for a cause of death')}
+                    onChange={handleSearchTermChange}
+                    placeholder={t('searchForCauseOfDeath', 'Search for a cause of death')}
                   />
                 </ResponsiveWrapper>
-              ) : (
-                <DatePickerSkeleton />
-              )}
-            </section>
-            <section>
-              <div className={styles.sectionTitle}>{t('causeOfDeath', 'Cause of death')}</div>
-              <div
-                className={classNames(styles.conceptAnswerOverviewWrapper, {
-                  [styles.conceptAnswerOverviewWrapperTablet]: isTablet,
-                  [styles.conceptAnswerOverviewWrapperDesktop]: !isTablet,
-                  [styles.errorOutline]: errors?.causeOfDeath?.message,
-                })}
-              >
-                {isLoadingCausesOfDeath ? <StructuredListSkeleton /> : null}
+              ) : null}
 
-                {causesOfDeath?.length ? (
-                  <ResponsiveWrapper>
-                    <Search
-                      labelText={t('searchForCauseOfDeath', 'Search for a cause of death')}
-                      onChange={handleSearchTermChange}
-                      placeholder={t('searchForCauseOfDeath', 'Search for a cause of death')}
-                    />
-                  </ResponsiveWrapper>
-                ) : null}
+              {causesOfDeath?.length && filteredCausesOfDeath.length > 0 ? (
+                <Controller
+                  name="causeOfDeath"
+                  control={control}
+                  render={({ field: { onChange } }) => (
+                    <RadioButtonGroup
+                      className={styles.radioButtonGroup}
+                      name={
+                        causeOfDeathValue === freeTextFieldConceptUuid
+                          ? 'freeTextFieldCauseOfDeath'
+                          : 'codedCauseOfDeath'
+                      }
+                      orientation="vertical"
+                      onChange={onChange}
+                    >
+                      {filteredCausesOfDeath.map(({ uuid, display, name }) => (
+                        <RadioButton
+                          className={styles.radioButton}
+                          id={name}
+                          key={uuid}
+                          labelText={display}
+                          value={uuid}
+                        />
+                      ))}
+                    </RadioButtonGroup>
+                  )}
+                />
+              ) : null}
 
-                {causesOfDeath?.length && filteredCausesOfDeath.length > 0 ? (
-                  <Controller
-                    name="causeOfDeath"
-                    control={control}
-                    render={({ field: { onChange } }) => (
-                      <RadioButtonGroup
-                        className={styles.radioButtonGroup}
-                        name={
-                          causeOfDeathValue === freeTextFieldConceptUuid
-                            ? 'freeTextFieldCauseOfDeath'
-                            : 'codedCauseOfDeath'
-                        }
-                        orientation="vertical"
-                        onChange={onChange}
-                      >
-                        {filteredCausesOfDeath.map(({ uuid, display, name }) => (
-                          <RadioButton
-                            className={styles.radioButton}
-                            id={name}
-                            key={uuid}
-                            labelText={display}
-                            value={uuid}
-                          />
-                        ))}
-                      </RadioButtonGroup>
-                    )}
-                  />
-                ) : null}
-
-                {searchTerm && filteredCausesOfDeath.length === 0 && (
-                  <div className={styles.tileContainer}>
-                    <Tile className={styles.tile}>
-                      <div className={styles.tileContent}>
-                        <p className={styles.content}>
-                          {t('noMatchingCodedCausesOfDeath', 'No matching coded causes of death')}
-                        </p>
-                        <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
-                      </div>
-                    </Tile>
-                  </div>
-                )}
+              {searchTerm && filteredCausesOfDeath.length === 0 && (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>
+                        {t('noMatchingCodedCausesOfDeath', 'No matching coded causes of death')}
+                      </p>
+                      <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                    </div>
+                  </Tile>
+                </div>
+              )}
 
-                {!isLoadingCausesOfDeath && !causesOfDeath?.length ? (
-                  <EmptyState
-                    displayText={t('causeOfDeath_lower', 'cause of death concepts configured in the system')}
-                    headerTitle={t('causeOfDeath', 'Cause of death')}
-                  />
-                ) : null}
-              </div>
-              {errors?.causeOfDeath && <p className={styles.errorMessage}>{errors?.causeOfDeath?.message}</p>}
-            </section>
-          </div>
-          {causeOfDeathValue === freeTextFieldConceptUuid && (
-            <div className={styles.nonCodedCauseOfDeath}>
-              <Controller
-                name="nonCodedCauseOfDeath"
-                control={control}
-                render={({ field: { onChange, value } }) => (
-                  <TextInput
-                    id="freeTextCauseOfDeath"
-                    invalid={!!errors?.nonCodedCauseOfDeath}
-                    invalidText={errors?.nonCodedCauseOfDeath?.message}
-                    labelText={t('nonCodedCauseOfDeath', 'Non-coded cause of death')}
-                    onChange={onChange}
-                    placeholder={t('enterNonCodedCauseOfDeath', 'Enter non-coded cause of death')}
-                    value={value}
-                  />
-                )}
-              />
+              {!isLoadingCausesOfDeath && !causesOfDeath?.length ? (
+                <EmptyState
+                  displayText={t('causeOfDeath_lower', 'cause of death concepts configured in the system')}
+                  headerTitle={t('causeOfDeath', 'Cause of death')}
+                />
+              ) : null}
             </div>
-          )}
+            {errors?.causeOfDeath && <p className={styles.errorMessage}>{errors?.causeOfDeath?.message}</p>}
+          </section>
         </div>
-        <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
-          <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
-            {t('discard', 'Discard')}
-          </Button>
-          <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
-            {isSubmitting ? (
-              <InlineLoading description={t('saving', 'Saving') + '...'} role="progressbar" />
-            ) : (
-              t('saveAndClose', 'Save and close')
-            )}
-          </Button>
-        </ButtonSet>
-      </Form>
-    </Workspace2>
+        {causeOfDeathValue === freeTextFieldConceptUuid && (
+          <div className={styles.nonCodedCauseOfDeath}>
+            <Controller
+              name="nonCodedCauseOfDeath"
+              control={control}
+              render={({ field: { onChange, value } }) => (
+                <TextInput
+                  id="freeTextCauseOfDeath"
+                  invalid={!!errors?.nonCodedCauseOfDeath}
+                  invalidText={errors?.nonCodedCauseOfDeath?.message}
+                  labelText={t('nonCodedCauseOfDeath', 'Non-coded cause of death')}
+                  onChange={onChange}
+                  placeholder={t('enterNonCodedCauseOfDeath', 'Enter non-coded cause of death')}
+                  value={value}
+                />
+              )}
+            />
+          </div>
+        )}
+      </div>
+      <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+          {isSubmitting ? (
+            <InlineLoading description={t('saving', 'Saving') + '...'} role="progressbar" />
+          ) : (
+            t('saveAndClose', 'Save and close')
+          )}
+        </Button>
+      </ButtonSet>
+    </Form>
   );
 };
 

package/src/patient-banner-tags/visit-attribute-tags.extension.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Tag } from '@carbon/react';
 import { formatDate, useConfig, useVisit } from '@openmrs/esm-framework';
 import { type ChartConfig } from '../config-schema';
+import styles from './visit-attribute-tags.scss';
 
 interface VisitAttributeTagsProps {
   patientUuid: string;
@@ -32,22 +33,29 @@ const VisitAttributeTags: React.FC<VisitAttributeTagsProps> = ({ patientUuid })
   const { activeVisit } = useVisit(patientUuid);
   const { visitAttributeTypes } = useConfig<ChartConfig>();
 
-  if (activeVisit == null) {
+  const displayableAttributes = activeVisit?.attributes
+    ?.filter(
+      (attribute) =>
+        visitAttributeTypes?.find(({ uuid }) => attribute?.attributeType?.uuid === uuid)?.displayInThePatientBanner,
+    )
+    .map((attribute) => ({
+      attribute,
+      value: getAttributeValue(attribute?.attributeType, attribute?.value),
+    }))
+    .filter(({ value }) => value != null && value !== '');
+
+  if (!displayableAttributes?.length) {
     return null;
   }
+
   return (
-    <>
-      {activeVisit?.attributes
-        ?.filter(
-          (attribute) =>
-            visitAttributeTypes.find(({ uuid }) => attribute?.attributeType?.uuid === uuid)?.displayInThePatientBanner,
-        )
-        .map((attribute) => (
-          <Tag key={attribute?.attributeType?.uuid} type="gray">
-            {getAttributeValue(attribute?.attributeType, attribute?.value)}
-          </Tag>
-        ))}
-    </>
+    <div className={styles.tagsContainer}>
+      {displayableAttributes.map(({ attribute, value }) => (
+        <Tag key={attribute?.attributeType?.uuid} type="gray">
+          {value}
+        </Tag>
+      ))}
+    </div>
   );
 };
 

package/src/patient-banner-tags/visit-attribute-tags.scss

@@ -0,0 +1,8 @@
+@use '@carbon/layout';
+
+.tagsContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-02;
+  margin: 0 layout.$spacing-02;
+}

package/src/patient-chart/chart-review/dashboard-view.component.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { useMatch } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { launchWorkspace2, Extension, ExtensionSlot, useExtensionSlotMeta } from '@openmrs/esm-framework';
+import { launchWorkspace, Extension, ExtensionSlot, useExtensionSlotMeta } from '@openmrs/esm-framework';
 import { launchStartVisitPrompt } from '@openmrs/esm-patient-common-lib';
 import { dashboardPath } from '../../constants';
 import styles from './dashboard-view.scss';
@@ -43,7 +43,7 @@ export function DashboardView({ dashboard, patientUuid, patient }: DashboardView
       basePath: view,
       patient,
       patientUuid,
-      launchWorkspace2,
+      launchWorkspace,
       launchStartVisitPrompt,
     }),
     [patient, patientUuid, view],

package/src/patient-chart/chart-review/dashboard-view.scss

@@ -12,6 +12,11 @@
   grid-auto-rows: auto;
   grid-gap: 1.3125rem;
   margin: 1.3125rem;
+  // Hide empty extension wrappers when components return null
+  // This prevents empty space in the grid when supplementary widgets have no data
+  > :has([data-extension-id='immunization-detailed-history-card']:empty) {
+    display: none;
+  }
 }
 
 // See https://zpl.io/lrlmdq0 for the Visits dashboard design

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

@@ -1,34 +1,21 @@
-import { ExtensionSlot, useWorkspaces, useLeftNav } from '@openmrs/esm-framework';
-import classNames from 'classnames';
 import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { useParams } from 'react-router-dom';
+import { ExtensionSlot, WorkspaceContainer, useWorkspaces, useLeftNav } from '@openmrs/esm-framework';
 import { spaBasePath } from '../constants';
-import Loader from '../loader/loader.component';
+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 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();
-
-  // 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 { workspaceWindowState, active } = useWorkspaces();
   const [layoutMode, setLayoutMode] = useState<LayoutMode>();
   const state = usePatientChartPatientAndVisit(patientUuid);
-  const { isLoadingPatient, patient } = state;
+  const view = decodeURIComponent(encodedView);
 
   const leftNavBasePath = useMemo(() => spaBasePath.replace(':patientUuid', patientUuid), [patientUuid]);
 
@@ -38,39 +25,43 @@ const WrappedPatientChart: React.FC<WrappedPatientChartProps> = ({ patientUuid,
     <>
       <SideMenuPanel />
       <main className={classNames('omrs-main-content', styles.chartContainer)}>
-        <>
-          <div
-            className={classNames(
-              styles.innerChartContainer,
-              workspaceWindowState === 'normal' && active ? styles.closeWorkspace : styles.activeWorkspace,
-            )}
-          >
-            {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
+          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>
-              </>
-            )}
-          </div>
-        </>
+              </div>
+            </>
+          )}
+        </div>
       </main>
+      <WorkspaceContainer
+        actionMenuProps={state}
+        additionalWorkspaceProps={state}
+        contextKey={`patient/${patientUuid}`}
+        showSiderailAndBottomNav
+      />
     </>
   );
 };

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

@@ -1,15 +1,7 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 import useSWR from 'swr';
-import {
-  closeWorkspaceGroup2,
-  launchWorkspaceGroup2,
-  openmrsFetch,
-  restBaseUrl,
-  usePatient,
-  useVisit,
-  type Visit,
-} from '@openmrs/esm-framework';
-import { type PatientWorkspaceGroupProps, usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import { openmrsFetch, restBaseUrl, usePatient, useVisit, type Visit } from '@openmrs/esm-framework';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 
 const defaultVisitCustomRepresentation =
   'custom:(uuid,display,voided,indication,startDatetime,stopDatetime,' +
@@ -40,7 +32,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 the stored visitContext exist and belong to the patient?
+ * does 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
@@ -58,7 +50,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,
@@ -70,39 +62,14 @@ export function usePatientChartPatientAndVisit(patientUuid: string) {
     mutate: mutateActiveVisit,
   } = useVisit(isVisitContextValid ? null : patientUuid);
 
-  const isWorkspaceGroupLaunched = useRef(false);
-
   useEffect(() => {
-    if (!isValidatingVisitContext && !isValidatingActiveVisit && patient) {
-      let groupProps: PatientWorkspaceGroupProps = null;
+    if (!isValidatingVisitContext && !isValidatingActiveVisit && storePatientUuid) {
       if (activeVisit) {
-        groupProps = {
-          patientUuid: patient.id,
-          patient,
-          visitContext: activeVisit,
-          mutateVisitContext: mutateActiveVisit,
-        };
+        setVisitContext(activeVisit, mutateActiveVisit);
       } else if (newVisitContext) {
-        groupProps = {
-          patientUuid: patient.id,
-          patient,
-          visitContext: newVisitContext,
-          mutateVisitContext: newMutateVisitContext,
-        };
+        setVisitContext(newVisitContext, newMutateVisitContext);
       } else {
-        groupProps = {
-          patientUuid: patient.id,
-          patient,
-          visitContext: null,
-          mutateVisitContext: null,
-        };
-      }
-
-      setVisitContext(groupProps.visitContext, groupProps.mutateVisitContext);
-
-      if (!isWorkspaceGroupLaunched.current) {
-        launchWorkspaceGroup2('patient-chart', groupProps);
-        isWorkspaceGroupLaunched.current = true;
+        setVisitContext(null, null);
       }
     }
   }, [
@@ -114,8 +81,6 @@ export function usePatientChartPatientAndVisit(patientUuid: string) {
     isValidatingActiveVisit,
     storePatientUuid,
     mutateActiveVisit,
-    isWorkspaceGroupLaunched,
-    patient,
   ]);
 
   useEffect(() => {
@@ -128,12 +93,6 @@ export function usePatientChartPatientAndVisit(patientUuid: string) {
     };
   }, [patient, setPatient, isLoadingPatient]);
 
-  useEffect(() => {
-    return () => {
-      closeWorkspaceGroup2();
-    };
-  }, []);
-
   const state = useMemo(
     () => ({
       patientUuid,
@@ -141,9 +100,8 @@ export function usePatientChartPatientAndVisit(patientUuid: string) {
       visitContext,
       mutateVisitContext,
       isLoadingPatient,
-      setPatient,
     }),
-    [patient, patientUuid, visitContext, mutateVisitContext, isLoadingPatient, setPatient],
+    [patient, patientUuid, visitContext, mutateVisitContext, isLoadingPatient],
   );
 
   return state;