(feat) O3-2760: Present workspaces should leverage the promptBeforeClosing function

packages/esm-form-engine-app/src/form-renderer/form-renderer.component.tsx

@@ -6,16 +6,22 @@ import { type Visit } from '@openmrs/esm-framework';
 import useFormSchema from '../hooks/useFormSchema';
 import FormError from './form-error.component';
 import styles from './form-renderer.scss';
+import { type DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 
-interface FormRendererProps {
+interface FormRendererProps extends DefaultWorkspaceProps {
   formUuid: string;
   patientUuid: string;
   visit?: Visit;
-  closeWorkspace: () => void;
   encounterUuid?: string;
 }
 
-const FormRenderer: React.FC<FormRendererProps> = ({ formUuid, patientUuid, visit, closeWorkspace, encounterUuid }) => {
+const FormRenderer: React.FC<FormRendererProps> = ({
+  formUuid,
+  patientUuid,
+  visit,
+  discardChangesAndCloseWorkspace,
+  encounterUuid,
+}) => {
   const { t } = useTranslation();
   const { schema, error, isLoading } = useFormSchema(formUuid);
 
@@ -30,7 +36,7 @@ const FormRenderer: React.FC<FormRendererProps> = ({ formUuid, patientUuid, visi
   if (error) {
     return (
       <div className={styles.errorContainer}>
-        <FormError closeWorkspace={closeWorkspace} />
+        <FormError closeWorkspace={discardChangesAndCloseWorkspace} />
       </div>
     );
   }
@@ -43,8 +49,8 @@ const FormRenderer: React.FC<FormRendererProps> = ({ formUuid, patientUuid, visi
           patientUUID={patientUuid}
           visit={visit}
           formJson={schema}
-          handleClose={closeWorkspace}
-          onSubmit={() => closeWorkspace()}
+          handleClose={discardChangesAndCloseWorkspace}
+          onSubmit={discardChangesAndCloseWorkspace}
         />
       )}
     </>

packages/esm-form-engine-app/src/form-renderer/form-renderer.test.tsx

@@ -21,6 +21,8 @@ describe('FormRenderer', () => {
     formUuid: 'test-form-uuid',
     patientUuid: 'test-patient-uuid',
     closeWorkspace: jest.fn(),
+    discardChangesAndCloseWorkspace: jest.fn(),
+    promptBeforeClosing: jest.fn(),
   };
 
   test('renders FormError component when there is an error', () => {

packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.component.tsx

@@ -66,7 +66,8 @@ type AllergyFormData = {
   comment: string;
 };
 
-function AllergyForm({ closeWorkspace, patientUuid }: DefaultWorkspaceProps) {
+function AllergyForm(props: DefaultWorkspaceProps) {
+  const { discardChangesAndCloseWorkspace, patientUuid, promptBeforeClosing } = props;
   const { t } = useTranslation();
   const { concepts } = useConfig();
   const isTablet = useLayoutType() === 'tablet';
@@ -82,7 +83,14 @@ function AllergyForm({ closeWorkspace, patientUuid }: DefaultWorkspaceProps) {
   const [isDisabled, setIsDisabled] = useState(true);
   const { mutate } = useAllergies(patientUuid);
 
-  const { control, handleSubmit, watch, getValues, setValue } = useForm<AllergyFormData>({
+  const {
+    control,
+    handleSubmit,
+    watch,
+    getValues,
+    setValue,
+    formState: { isDirty },
+  } = useForm<AllergyFormData>({
     mode: 'all',
     resolver: zodResolver(allergyFormSchema),
     defaultValues: {
@@ -95,6 +103,10 @@ function AllergyForm({ closeWorkspace, patientUuid }: DefaultWorkspaceProps) {
     },
   });
 
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty]);
+
   const selectedAllergen = watch('allergen');
   const selectedAllergicReactions = watch('allergicReactions');
   const selectedSeverityOfWorstReaction = watch('severityOfWorstReaction');
@@ -154,7 +166,7 @@ function AllergyForm({ closeWorkspace, patientUuid }: DefaultWorkspaceProps) {
           (response: FetchResponse) => {
             if (response.status === 201) {
               mutate();
-              closeWorkspace();
+              discardChangesAndCloseWorkspace();
               showSnackbar({
                 isLowContrast: true,
                 kind: 'success',
@@ -174,7 +186,7 @@ function AllergyForm({ closeWorkspace, patientUuid }: DefaultWorkspaceProps) {
         )
         .finally(() => abortController.abort());
     },
-    [otherConceptUuid, patientUuid, closeWorkspace, t, mutate],
+    [otherConceptUuid, patientUuid, discardChangesAndCloseWorkspace, t, mutate],
   );
 
   return (
@@ -333,7 +345,7 @@ function AllergyForm({ closeWorkspace, patientUuid }: DefaultWorkspaceProps) {
         <ButtonSet
           className={classNames(isTablet ? styles.tabletButtons : styles.desktopButtons, styles.actionButtons)}
         >
-          <Button className={styles.button} onClick={closeWorkspace} kind="secondary">
+          <Button className={styles.button} onClick={discardChangesAndCloseWorkspace} kind="secondary">
             {t('discard', 'Discard')}
           </Button>
           <Button

packages/esm-patient-allergies-app/src/allergies/allergies-form/allergy-form.test.tsx

@@ -274,6 +274,7 @@ describe('AllergyForm ', () => {
 function renderAllergyForm() {
   const testProps = {
     closeWorkspace: () => {},
+    discardChangesAndCloseWorkspace: () => {},
     promptBeforeClosing: () => {},
     patient: mockPatient,
     patientUuid: mockPatient.id,

packages/esm-patient-allergies-app/src/index.ts

@@ -1,9 +1,15 @@
-import { defineConfigSchema, fhirBaseUrl, getSyncLifecycle, messageOmrsServiceWorker } from '@openmrs/esm-framework';
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import {
+  defineConfigSchema,
+  fhirBaseUrl,
+  getAsyncLifecycle,
+  getSyncLifecycle,
+  messageOmrsServiceWorker,
+  translateFrom,
+} from '@openmrs/esm-framework';
+import { createDashboardLink, registerWorkspace } from '@openmrs/esm-patient-common-lib';
 import { configSchema } from './config-schema';
 import { dashboardMeta } from './dashboard.meta';
 import allergiesDetailedSummaryComponent from './allergies/allergies-detailed-summary.component';
-import allergyFormComponent from './allergies/allergies-form/allergy-form.component';
 import allergyTileComponent from './allergies/allergies-tile.component';
 
 const moduleName = '@openmrs/esm-patient-allergies-app';
@@ -45,6 +51,12 @@ export const allergiesDashboardLink = getSyncLifecycle(
   options,
 );
 
-export const allergiesForm = getSyncLifecycle(allergyFormComponent, options);
+// t('recordNewAllergy', "Record a new allergy")
+registerWorkspace({
+  name: 'patient-allergy-form-workspace',
+  title: translateFrom(moduleName, 'recordNewAllergy', 'Record a new allergy'),
+  load: getAsyncLifecycle(() => import('./allergies/allergies-form/allergy-form.component'), options),
+  type: 'form',
+});
 
 export const allergyTile = getSyncLifecycle(allergyTileComponent, options);

packages/esm-patient-allergies-app/src/routes.json

@@ -23,18 +23,6 @@
         "columnSpan": 4
       }
     },
-    {
-      "name": "patient-allergy-form-workspace",
-      "component": "allergiesForm",
-      "online": true,
-      "offline": true,
-      "meta": {
-        "title": {
-          "key": "recordNewAllergy",
-          "default": "Record a new allergy"
-        }
-      }
-    },
     {
       "name": "allergies-summary-dashboard",
       "component": "allergiesDashboardLink",

packages/esm-patient-allergies-app/translations/am.json

@@ -22,6 +22,7 @@
   "otherNonCodedAllergicReaction": "Other non-coded allergic reaction",
   "reaction": "Reaction",
   "reactions": "Reactions",
+  "recordNewAllergy": "Record a new allergy",
   "saveAndClose": "Save and close",
   "seeAll": "See all",
   "selectAllergen": "Select the allergen",

packages/esm-patient-allergies-app/translations/ar.json

@@ -22,6 +22,7 @@
   "otherNonCodedAllergicReaction": "رد فعل حساسية غير مشفر آخر",
   "reaction": "رد الفعل",
   "reactions": "ردود الفعل",
+  "recordNewAllergy": "Record a new allergy",
   "saveAndClose": "حفظ وإغلاق",
   "seeAll": "عرض الكل",
   "selectAllergen": "اختر المواد المسببة للحساسية",

packages/esm-patient-allergies-app/translations/en.json

@@ -22,6 +22,7 @@
   "otherNonCodedAllergicReaction": "Other non-coded allergic reaction",
   "reaction": "Reaction",
   "reactions": "Reactions",
+  "recordNewAllergy": "Record a new allergy",
   "saveAndClose": "Save and close",
   "seeAll": "See all",
   "selectAllergen": "Select the allergen",

packages/esm-patient-allergies-app/translations/es.json

@@ -22,6 +22,7 @@
   "otherNonCodedAllergicReaction": "Otra reacción alérgica no codificada",
   "reaction": "Reacción",
   "reactions": "Reacciones",
+  "recordNewAllergy": "Record a new allergy",
   "saveAndClose": "Guardar y cerrar",
   "seeAll": "Ver todo",
   "selectAllergen": "Seleccione el alérgeno",

packages/esm-patient-allergies-app/translations/fr.json

@@ -22,6 +22,7 @@
   "otherNonCodedAllergicReaction": "Autre réaction allergique non-codée",
   "reaction": "Reaction",
   "reactions": "Réactions",
+  "recordNewAllergy": "Record a new allergy",
   "saveAndClose": "Sauvegarder et fermer",
   "seeAll": "Voir tout",
   "selectAllergen": "Sélectionnez l'allergène",

packages/esm-patient-allergies-app/translations/he.json

@@ -22,6 +22,7 @@
   "otherNonCodedAllergicReaction": "תגובה אלרגנית אחרת לא מקודדת",
   "reaction": "תגובה",
   "reactions": "תגובות",
+  "recordNewAllergy": "Record a new allergy",
   "saveAndClose": "שמירה וסגירה",
   "seeAll": "הצג הכל",
   "selectAllergen": "בחר את האלרגן",

packages/esm-patient-allergies-app/translations/km.json

@@ -22,6 +22,7 @@
   "otherNonCodedAllergicReaction": "ប្រតិកម្មអាលែហ្សីដែលមិនមានលេខកូដផ្សេងទៀត។",
   "reaction": "Reaction",
   "reactions": "ប្រតិកម្ម",
+  "recordNewAllergy": "Record a new allergy",
   "saveAndClose": "រក្សាទុក និងបិទ",
   "seeAll": "មើលឃើញទាំងអស់",
   "selectAllergen": "ជ្រើសរើសអាឡែរហ្សី",

packages/esm-patient-allergies-app/translations/zh.json

@@ -22,6 +22,7 @@
   "otherNonCodedAllergicReaction": "其他非编码过敏反应",
   "reaction": "反应",
   "reactions": "反应",
+  "recordNewAllergy": "Record a new allergy",
   "saveAndClose": "保存并关闭",
   "seeAll": "查看全部",
   "selectAllergen": "选择过敏原",

packages/esm-patient-allergies-app/translations/zh_CN.json

@@ -22,6 +22,7 @@
   "otherNonCodedAllergicReaction": "其他非编码过敏反应",
   "reaction": "反应",
   "reactions": "反应",
+  "recordNewAllergy": "Record a new allergy",
   "saveAndClose": "保存并关闭",
   "seeAll": "查看全部",
   "selectAllergen": "选择过敏原",

packages/esm-patient-appointments-app/src/appointments/appointments-base.component.tsx

@@ -36,10 +36,7 @@ const AppointmentsBase: React.FC<AppointmentsBaseProps> = ({ patientUuid }) => {
     isValidating,
   } = useAppointments(patientUuid, startDate, new AbortController());
 
-  const launchAppointmentsForm = () =>
-    launchPatientWorkspace('appointments-form-workspace', {
-      workspaceTitle: t('scheduleAppointment', 'Schedule appointment'),
-    });
+  const launchAppointmentsForm = () => launchPatientWorkspace('appointments-form-workspace');
 
   if (isLoading) return <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />;
   if (isError) {

packages/esm-patient-appointments-app/src/appointments/appointments-form/appointments-form.component.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import {
@@ -25,7 +25,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useLocations, useSession, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
-import { convertTime12to24 } from '@openmrs/esm-patient-common-lib';
+import { type DefaultWorkspaceProps, convertTime12to24 } from '@openmrs/esm-patient-common-lib';
 import {
   saveAppointment,
   saveRecurringAppointments,
@@ -60,20 +60,19 @@ const appointmentsFormSchema = z.object({
 
 type AppointmentFormData = z.infer<typeof appointmentsFormSchema>;
 
-interface AppointmentsFormProps {
+interface AppointmentsFormProps extends DefaultWorkspaceProps {
   appointment?: Appointment;
   recurringPattern?: RecurringPattern;
-  patientUuid?: string;
   context?: string;
-  closeWorkspace: () => void;
 }
 
 const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
   appointment,
   recurringPattern,
   patientUuid,
   context,
-  closeWorkspace,
+  discardChangesAndCloseWorkspace,
+  promptBeforeClosing,
 }) => {
   const editedAppointmentTimeFormat = new Date(appointment?.startDateTime).getHours() >= 12 ? 'PM' : 'AM';
   const defaultTimeFormat = appointment?.startDateTime
@@ -109,7 +108,14 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     ? dayjs(new Date(appointment?.startDateTime)).format('hh:mm')
     : dayjs(new Date()).format('hh:mm');
 
-  const { control, getValues, setValue, watch, handleSubmit } = useForm<AppointmentFormData>({
+  const {
+    control,
+    getValues,
+    setValue,
+    watch,
+    handleSubmit,
+    formState: { isDirty },
+  } = useForm<AppointmentFormData>({
     mode: 'all',
     resolver: zodResolver(appointmentsFormSchema),
     defaultValues: {
@@ -131,6 +137,10 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
     },
   });
 
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty]);
+
   const handleMultiselectChange = (e) => {
     setValue(
       'selectedDaysOfWeekText',
@@ -188,7 +198,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
       ({ status }) => {
         if (status === 200) {
           setIsSubmitting(false);
-          closeWorkspace();
+          discardChangesAndCloseWorkspace();
           mutate();
 
           showSnackbar({
@@ -581,7 +591,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
         </section>
       </Stack>
       <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
-        <Button className={styles.button} onClick={closeWorkspace} kind="secondary">
+        <Button className={styles.button} onClick={discardChangesAndCloseWorkspace} kind="secondary">
           {t('discard', 'Discard')}
         </Button>
         <Button className={styles.button} disabled={isSubmitting} onClick={handleSubmit(handleSaveAppointment)}>

packages/esm-patient-appointments-app/src/appointments/appointments-form/appointments-form.test.tsx

@@ -12,6 +12,7 @@ const testProps = {
   closeWorkspace: jest.fn(),
   patientUuid: mockPatient.id,
   promptBeforeClosing: jest.fn(),
+  discardChangesAndCloseWorkspace: jest.fn(),
 };
 
 const mockCreateAppointment = saveAppointment as jest.Mock;
@@ -129,7 +130,7 @@ describe('AppointmentForm', () => {
     const cancelButton = screen.getByRole('button', { name: /Discard/i });
     await user.click(cancelButton);
 
-    expect(testProps.closeWorkspace).toHaveBeenCalledTimes(1);
+    expect(testProps.discardChangesAndCloseWorkspace).toHaveBeenCalledTimes(1);
   });
 
   it('renders a success snackbar  upon successfully scheduling an appointment', async () => {

packages/esm-patient-appointments-app/src/index.ts

@@ -1,5 +1,5 @@
-import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
-import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle, translateFrom } from '@openmrs/esm-framework';
+import { createDashboardLink, registerWorkspace } from '@openmrs/esm-patient-common-lib';
 import { dashboardMeta } from './dashboard.meta';
 import appointmentsOverviewComponent from './appointments/appointments-overview.component';
 import appointmentsDetailedSummaryComponent from './appointments/appointments-detailed-summary.component';
@@ -28,14 +28,16 @@ export const appointmentsSummaryDashboardLink = getSyncLifecycle(
   options,
 );
 
-export const appointmentsFormWorkspace = getAsyncLifecycle(
-  () => import('./appointments/appointments-form/appointments-form.component'),
-  options,
-);
-
 export const appointmentsCancelConfirmationDialog = getAsyncLifecycle(
   () => import('./appointments/appointments-cancel-modal.component'),
   options,
 );
 
 export const upcomingAppointmentsWidget = getSyncLifecycle(upcomingAppointmentsWidgetComponent, options);
+
+// t('scheduleAppointment', 'Schedule appointment');
+registerWorkspace({
+  name: 'appointments-form-workspace',
+  load: getAsyncLifecycle(() => import('./appointments/appointments-form/appointments-form.component'), options),
+  title: translateFrom(moduleName, 'scheduleAppointment', 'Schedule appointment'),
+});