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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-chart-app",
-  "version": "11.3.1-pre.9452",
+  "version": "11.3.1-pre.9455",
   "license": "MPL-2.0",
   "description": "Patient dashboard microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-chart-app.js",
@@ -55,7 +55,7 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-patient-common-lib": "11.3.1-pre.9452",
+    "@openmrs/esm-patient-common-lib": "11.3.1-pre.9455",
     "@types/uuid": "^9.0.4",
     "webpack": "^5.99.9"
   },

package/src/actions-buttons/mark-patient-deceased.component.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OverflowMenuItem } from '@carbon/react';
-import { launchWorkspace } from '@openmrs/esm-framework';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
 import styles from './action-button.scss';
 
 interface MarkPatientDeceasedOverflowMenuItemProps {
@@ -13,7 +13,7 @@ const MarkPatientDeceasedOverflowMenuItem: React.FC<MarkPatientDeceasedOverflowM
   const { t } = useTranslation();
   const isDead = patient.deceasedBoolean ?? Boolean(patient.deceasedDateTime);
 
-  const handleLaunchModal = useCallback(() => launchWorkspace('mark-patient-deceased-workspace-form'), []);
+  const handleLaunchModal = useCallback(() => launchWorkspace2('mark-patient-deceased-workspace-form'), []);
 
   return (
     patient &&

package/src/actions-buttons/start-visit.component.tsx

@@ -1,8 +1,10 @@
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OverflowMenuItem } from '@carbon/react';
-import { launchWorkspace } from '@openmrs/esm-framework';
+import { launchWorkspace2 } from '@openmrs/esm-framework';
 import styles from './action-button.scss';
+import { type VisitFormProps } from '../visit/visit-form/visit-form.workspace';
+import { type PatientWorkspaceGroupProps } from '@openmrs/esm-patient-common-lib';
 
 interface StartVisitOverflowMenuItemProps {
   patient: fhir.Patient;
@@ -14,10 +16,13 @@ const StartVisitOverflowMenuItem: React.FC<StartVisitOverflowMenuItemProps> = ({
 
   const handleLaunchModal = useCallback(
     () =>
-      launchWorkspace('start-visit-workspace-form', {
-        openedFrom: 'patient-chart-start-visit',
-      }),
-    [],
+      launchWorkspace2<VisitFormProps, {}, PatientWorkspaceGroupProps>(
+        'start-visit-workspace-form',
+        { openedFrom: 'patient-chart-start-visit' },
+        {},
+        { patient, patientUuid: patient.id, visitContext: null, mutateVisitContext: null },
+      ),
+    [patient],
   );
 
   return (

package/src/actions-buttons/start-visit.test.tsx

@@ -1,11 +1,12 @@
 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 StartVisitOverflowMenuItem from './start-visit.component';
+import { object } from 'zod';
 
-const mockLaunchWorkspace = jest.mocked(launchWorkspace);
+const mockLaunchWorkspace = jest.mocked(launchWorkspace2);
 
 describe('StartVisitOverflowMenuItem', () => {
   it('should launch the start visit form', async () => {
@@ -18,9 +19,12 @@ describe('StartVisitOverflowMenuItem', () => {
 
     await user.click(startVisitButton);
     expect(mockLaunchWorkspace).toHaveBeenCalledTimes(1);
-    expect(mockLaunchWorkspace).toHaveBeenCalledWith('start-visit-workspace-form', {
-      openedFrom: 'patient-chart-start-visit',
-    });
+    expect(mockLaunchWorkspace).toHaveBeenCalledWith(
+      'start-visit-workspace-form',
+      { openedFrom: 'patient-chart-start-visit' },
+      {},
+      expect.objectContaining({ patient: mockPatient, patientUuid: mockPatient.id }),
+    );
   });
 
   it('should not show start visit button for a deceased patient', () => {

package/src/clinical-views/encounter-list/encounter-list-tabs.extension.tsx

@@ -2,12 +2,12 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
-import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
 import { EncounterList } from './encounter-list.component';
 import { getMenuItemTabsConfiguration } from '../utils/encounter-list-config-builder';
 import styles from './encounter-list-tabs.scss';
 import { filter } from '../utils/helpers';
 import { type Encounter } from '../types';
+import { usePatientChartStore } from '@openmrs/esm-patient-common-lib/src';
 
 interface EncounterListTabsComponentProps {
   patientUuid: string;

package/src/clinical-views/utils/helpers.ts

@@ -1,4 +1,4 @@
-import { age, formatDate, launchWorkspace, parseDate, type Visit } from '@openmrs/esm-framework';
+import { age, formatDate, launchWorkspace2, parseDate, type Visit } from '@openmrs/esm-framework';
 import { launchStartVisitPrompt } from '@openmrs/esm-patient-common-lib';
 import type {
   ConfigConcepts,
@@ -26,7 +26,7 @@ export function launchEncounterForm(
   if (!visit && requireActiveVisitForEncounterTile) {
     launchStartVisitPrompt();
   } else
-    launchWorkspace('patient-form-entry-workspace', {
+    launchWorkspace2('patient-form-entry-workspace', {
       workspaceTitle: form?.display ?? form?.name,
       mutateForm: onFormSave,
       formInfo: {

package/src/index.ts

@@ -1,9 +1,4 @@
-import {
-  defineConfigSchema,
-  defineExtensionConfigSchema,
-  getAsyncLifecycle,
-  getSyncLifecycle,
-} from '@openmrs/esm-framework';
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
 import * as Framework from '@openmrs/esm-framework';
 import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { esmPatientChartSchema } from './config-schema';
@@ -50,37 +45,37 @@ export const patientSummaryDashboardLink =
   );
 
 export const markPatientAliveActionButton = getSyncLifecycle(markPatientAliveActionButtonComponent, {
-  featureName: 'patient-actions-slot',
+  featureName: 'patient-action-mark-alive',
   moduleName,
 });
 
 export const markPatientDeceasedActionButton = getSyncLifecycle(markPatientDeceasedActionButtonComponent, {
-  featureName: 'patient-actions-slot-deceased-button',
+  featureName: 'patient-action-mark-deceased',
   moduleName,
 });
 
 export const startVisitActionButton = getSyncLifecycle(startVisitActionButtonComponent, {
-  featureName: 'patient-actions-slot',
+  featureName: 'patient-action-start-visit',
   moduleName,
 });
 
 export const stopVisitActionButton = getSyncLifecycle(stopVisitActionButtonComponent, {
-  featureName: 'patient-actions-slot',
+  featureName: 'patient-action-stop-visit',
   moduleName,
 });
 
 export const deleteVisitActionMenuButton = getSyncLifecycle(deleteVisitActionButtonComponent, {
-  featureName: 'patient-actions-slot',
+  featureName: 'patient-action-delete-visit',
   moduleName,
 });
 
 export const startVisitPatientSearchActionButton = getSyncLifecycle(startVisitActionButtonOnPatientSearch, {
-  featureName: 'start-visit-button-patient-search',
+  featureName: 'patient-search-action-start-visit',
   moduleName,
 });
 
 export const stopVisitPatientSearchActionButton = getSyncLifecycle(stopVisitActionButtonComponent, {
-  featureName: 'patient-actions-slot',
+  featureName: 'patient-search-action-stop-visit',
   moduleName,
 });
 
@@ -104,7 +99,7 @@ export const currentVisitSummary = getSyncLifecycle(currentVisitSummaryComponent
 });
 
 export const pastVisitsDetailOverview = getSyncLifecycle(pastVisitsOverviewComponent, {
-  featureName: 'visits-detail-slot',
+  featureName: 'visits-detail-overview',
   moduleName,
 });
 
@@ -118,7 +113,6 @@ export const visitAttributeTags = getSyncLifecycle(visitAttributeTagsComponent,
   moduleName,
 });
 
-// t('startVisitWorkspaceTitle', 'Start a visit')
 export const startVisitWorkspace = getAsyncLifecycle(() => import('./visit/visit-form/visit-form.workspace'), {
   featureName: 'start-visit-form',
   moduleName,
@@ -138,12 +132,12 @@ export const markPatientDeceasedForm = getAsyncLifecycle(
   },
 );
 
-export const startVisitModal = getAsyncLifecycle(() => import('./visit/visit-prompt/start-visit-dialog.component'), {
+export const startVisitModal = getAsyncLifecycle(() => import('./visit/visit-prompt/start-visit-dialog.modal'), {
   featureName: 'start visit',
   moduleName,
 });
 
-export const deleteVisitModal = getAsyncLifecycle(() => import('./visit/visit-prompt/delete-visit-dialog.component'), {
+export const deleteVisitModal = getAsyncLifecycle(() => import('./visit/visit-prompt/delete-visit-dialog.modal'), {
   featureName: 'delete visit',
   moduleName,
 });
@@ -153,7 +147,7 @@ export const modifyVisitDateModal = getAsyncLifecycle(() => import('./visit/visi
   moduleName,
 });
 
-export const endVisitModal = getAsyncLifecycle(() => import('./visit/visit-prompt/end-visit-dialog.component'), {
+export const endVisitModal = getAsyncLifecycle(() => import('./visit/visit-prompt/end-visit-dialog.modal'), {
   featureName: 'end visit',
   moduleName,
 });

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

@@ -6,6 +6,7 @@ import { esmPatientChartSchema, type ChartConfig } from '../config-schema';
 import { mockPatient } from 'tools';
 import { markPatientDeceased, useCausesOfDeath } from '../data.resource';
 import MarkPatientDeceasedForm from './mark-patient-deceased-form.workspace';
+import { type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib/src';
 
 const mockReload = jest.fn();
 
@@ -20,7 +21,7 @@ const mockUseConfig = jest.mocked(useConfig<ChartConfig>);
 const mockShowSnackbar = jest.mocked(showSnackbar);
 const mockCloseWorkspace = jest.fn();
 
-jest.mock('../data.resource.ts', () => ({
+jest.mock('../data.resource', () => ({
   markPatientDeceased: jest.fn().mockResolvedValue({}),
   useCausesOfDeath: jest.fn(),
 }));
@@ -28,15 +29,20 @@ jest.mock('../data.resource.ts', () => ({
 describe('MarkPatientDeceasedForm', () => {
   const freeTextFieldConceptUuid = '1234e218-6c8a-4ca3-8edb-9f6d9c8c8c7f';
 
-  const defaultProps = {
-    patientUuid: mockPatient.id,
-    patient: mockPatient,
+  const defaultProps: PatientWorkspace2DefinitionProps<{}, {}> = {
     closeWorkspace: mockCloseWorkspace,
-    closeWorkspaceWithSavedChanges: jest.fn(),
-    promptBeforeClosing: jest.fn(),
-    setTitle: jest.fn(),
-    visitContext: null,
-    mutateVisitContext: null,
+    workspaceName: null,
+    launchChildWorkspace: jest.fn(),
+    windowProps: {},
+    workspaceProps: {},
+    groupProps: {
+      patientUuid: mockPatient.id,
+      patient: mockPatient,
+      visitContext: null,
+      mutateVisitContext: null,
+    },
+    windowName: '',
+    isRootWorkspace: false,
   };
 
   const codedCausesOfDeath = [

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-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],