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

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 { EmptyState, type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
+import { type PatientWorkspace2DefinitionProps, EmptyState } from '@openmrs/esm-patient-common-lib';
 import {
   ExtensionSlot,
   useLayoutType,
@@ -28,12 +28,16 @@ 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<DefaultPatientWorkspaceProps> = ({ closeWorkspace, patientUuid }) => {
+const MarkPatientDeceasedForm: React.FC<PatientWorkspace2DefinitionProps<{}, {}>> = ({
+  closeWorkspace,
+  groupProps: { patientUuid },
+}) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const memoizedPatientUuid = useMemo(() => ({ patientUuid }), [patientUuid]);
@@ -78,7 +82,7 @@ const MarkPatientDeceasedForm: React.FC<DefaultPatientWorkspaceProps> = ({ close
 
   const {
     control,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, isDirty },
     handleSubmit,
     watch,
   } = useForm<MarkPatientDeceasedFormSchema>({
@@ -117,151 +121,156 @@ const MarkPatientDeceasedForm: React.FC<DefaultPatientWorkspaceProps> = ({ close
   const onError = (errors) => console.error(errors);
 
   return (
-    <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')}
+    <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>
             </span>
-          </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}
-
+            <section>
+              <div className={styles.sectionTitle}>{t('dateOfDeath', 'Date of death')}</div>
               {causesOfDeath?.length ? (
                 <ResponsiveWrapper>
-                  <Search
-                    labelText={t('searchForCauseOfDeath', 'Search for a cause of death')}
-                    onChange={handleSearchTermChange}
-                    placeholder={t('searchForCauseOfDeath', 'Search for a cause of death')}
+                  <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>
-              ) : null}
+              ) : (
+                <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 && 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 ? (
+                  <ResponsiveWrapper>
+                    <Search
+                      labelText={t('searchForCauseOfDeath', 'Search for a cause of death')}
+                      onChange={handleSearchTermChange}
+                      placeholder={t('searchForCauseOfDeath', 'Search for a cause of death')}
+                    />
+                  </ResponsiveWrapper>
+                ) : 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>
-              )}
+                {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}
 
-              {!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}
-                />
-              )}
-            />
+                {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>
-        )}
-      </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')
+          {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>
           )}
-        </Button>
-      </ButtonSet>
-    </Form>
+        </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>
   );
 };
 

package/src/patient-banner-tags/{visit-attribute-tags.component.tsx → visit-attribute-tags.extension.tsx}

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Tag } from '@carbon/react';
-import { formatDate, useConfig } from '@openmrs/esm-framework';
-import { useVisitOrOfflineVisit } from '@openmrs/esm-patient-common-lib';
+import { formatDate, useConfig, useVisit } from '@openmrs/esm-framework';
 import { type ChartConfig } from '../config-schema';
 
 interface VisitAttributeTagsProps {
@@ -26,13 +25,19 @@ const getAttributeValue = (attributeType, value) => {
   }
 };
 
+/**
+ * This extension slots to the patient-banner-tags-slot by default.
+ */
 const VisitAttributeTags: React.FC<VisitAttributeTagsProps> = ({ patientUuid }) => {
-  const { currentVisit } = useVisitOrOfflineVisit(patientUuid);
+  const { activeVisit } = useVisit(patientUuid);
   const { visitAttributeTypes } = useConfig<ChartConfig>();
 
+  if (activeVisit == null) {
+    return null;
+  }
   return (
     <>
-      {currentVisit?.attributes
+      {activeVisit?.attributes
         ?.filter(
           (attribute) =>
             visitAttributeTypes.find(({ uuid }) => attribute?.attributeType?.uuid === uuid)?.displayInThePatientBanner,

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 { launchWorkspace, Extension, ExtensionSlot, useExtensionSlotMeta } from '@openmrs/esm-framework';
+import { launchWorkspace2, 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,
-      launchWorkspace,
+      launchWorkspace2,
       launchStartVisitPrompt,
     }),
     [patient, patientUuid, view],

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

@@ -1,14 +1,6 @@
-import {
-  ExtensionSlot,
-  WorkspaceContainer,
-  setCurrentVisit,
-  usePatient,
-  useWorkspaces,
-  useLeftNav,
-} from '@openmrs/esm-framework';
-import { getPatientChartStore } from '@openmrs/esm-patient-common-lib';
+import { ExtensionSlot, useWorkspaces, useLeftNav } from '@openmrs/esm-framework';
 import classNames from 'classnames';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { spaBasePath } from '../constants';
 import Loader from '../loader/loader.component';
@@ -16,31 +8,27 @@ 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();
+
+  // 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 { isLoading: isLoadingPatient, patient } = usePatient(patientUuid);
-  const state = useMemo(() => ({ patient, patientUuid }), [patient, patientUuid]);
   const { workspaceWindowState, active } = useWorkspaces();
   const [layoutMode, setLayoutMode] = useState<LayoutMode>();
-  // Keep state updated with the current patient. Anything used outside the patient
-  // chart (e.g., the current visit is used by the Active Visit Tag used in the
-  // patient search) must be updated in the callback, which is called when the patient
-  // chart unmounts.
-  useEffect(() => {
-    setCurrentVisit(patientUuid, null);
-    return () => {
-      setCurrentVisit(null, null);
-    };
-  }, [patientUuid]);
-
-  useEffect(() => {
-    getPatientChartStore().setState({ ...state });
-    return () => {
-      getPatientChartStore().setState({});
-    };
-  }, [state]);
+  const state = usePatientChartPatientAndVisit(patientUuid);
+  const { isLoadingPatient, patient } = state;
 
   const leftNavBasePath = useMemo(() => spaBasePath.replace(':patientUuid', patientUuid), [patientUuid]);
 
@@ -71,8 +59,8 @@ const PatientChart: React.FC = () => {
                     className={classNames(styles.chartReview, { [styles.widthContained]: layoutMode == 'contained' })}
                   >
                     <ChartReview
-                      patient={state.patient}
-                      patientUuid={state.patientUuid}
+                      patient={patient}
+                      patientUuid={patientUuid}
                       view={view}
                       setDashboardLayoutMode={setLayoutMode}
                     />
@@ -83,11 +71,6 @@ const PatientChart: React.FC = () => {
           </div>
         </>
       </main>
-      <WorkspaceContainer
-        showSiderailAndBottomNav
-        contextKey={`patient/${patientUuid}`}
-        additionalWorkspaceProps={state}
-      />
     </>
   );
 };

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

@@ -0,0 +1,150 @@
+import { useEffect, useMemo, useRef } 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';
+
+const defaultVisitCustomRepresentation =
+  'custom:(uuid,display,voided,indication,startDatetime,stopDatetime,' +
+  'encounters:(uuid,display,encounterDatetime,' +
+  'form:(uuid,name),location:ref,' +
+  'encounterType:ref,' +
+  'encounterProviders:(uuid,display,' +
+  'provider:(uuid,display))),' +
+  'patient:(uuid,display),' +
+  'visitType:(uuid,name,display),' +
+  'attributes:(uuid,display,attributeType:(name,datatypeClassname,uuid),value),' +
+  'location:(uuid,name,display))';
+
+export function useVisitByUuid(visitUuid: string | null, representation: string = defaultVisitCustomRepresentation) {
+  const url = `${restBaseUrl}/visit/${visitUuid}?v=${representation}`;
+  const { data, ...rest } = useSWR<{ data: Visit }>(visitUuid ? url : null, openmrsFetch);
+  return { visit: data?.data, ...rest };
+}
+
+/**
+ * This hook manages fetching of the patient and the visitContext
+ * when entering the patient chart, and the associated updated to patient chart store.
+ *
+ * The patient chart store sets the patient when we enter the patient chart
+ * and unsets the patient when we leave. (This gives extensions and workspaces a way
+ * to check whether they are rendered within the patient chart app.)
+ * Note: We do not unset visitContext when leaving the chart, so it persists across
+ * 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?
+ * 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
+ *    visitContext; otherwise, clear it.
+ * @param patientUuid
+ * @returns
+ */
+export function usePatientChartPatientAndVisit(patientUuid: string) {
+  const { isLoading: isLoadingPatient, patient } = usePatient(patientUuid);
+  const {
+    patientUuid: storePatientUuid,
+    setPatient,
+    visitContext,
+    mutateVisitContext,
+    setVisitContext,
+  } = usePatientChartStore(patientUuid);
+
+  const isVisitContextValid = visitContext && visitContext.patient.uuid === patientUuid;
+  const {
+    visit: newVisitContext,
+    mutate: newMutateVisitContext,
+    isValidating: isValidatingVisitContext,
+  } = useVisitByUuid(isVisitContextValid ? visitContext.uuid : null);
+  const {
+    activeVisit,
+    isValidating: isValidatingActiveVisit,
+    mutate: mutateActiveVisit,
+  } = useVisit(isVisitContextValid ? null : patientUuid);
+
+  const isWorkspaceGroupLaunched = useRef(false);
+
+  useEffect(() => {
+    if (!isValidatingVisitContext && !isValidatingActiveVisit && patient) {
+      let groupProps: PatientWorkspaceGroupProps = null;
+      if (activeVisit) {
+        groupProps = {
+          patientUuid: patient.id,
+          patient,
+          visitContext: activeVisit,
+          mutateVisitContext: mutateActiveVisit,
+        };
+      } else if (newVisitContext) {
+        groupProps = {
+          patientUuid: patient.id,
+          patient,
+          visitContext: newVisitContext,
+          mutateVisitContext: 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;
+      }
+    }
+  }, [
+    newVisitContext,
+    isValidatingVisitContext,
+    newMutateVisitContext,
+    setVisitContext,
+    activeVisit,
+    isValidatingActiveVisit,
+    storePatientUuid,
+    mutateActiveVisit,
+    isWorkspaceGroupLaunched,
+    patient,
+  ]);
+
+  useEffect(() => {
+    if (!isLoadingPatient) {
+      setPatient(patient);
+    }
+
+    return () => {
+      setPatient(null);
+    };
+  }, [patient, setPatient, isLoadingPatient]);
+
+  useEffect(() => {
+    return () => {
+      closeWorkspaceGroup2();
+    };
+  }, []);
+
+  const state = useMemo(
+    () => ({
+      patientUuid,
+      patient: patient ?? {},
+      visitContext,
+      mutateVisitContext,
+      isLoadingPatient,
+      setPatient,
+    }),
+    [patient, patientUuid, visitContext, mutateVisitContext, isLoadingPatient, setPatient],
+  );
+
+  return state;
+}

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"
+  }]
 }