@openmrs/esm-patient-list-management-app 9.2.1-pre.7290 → 9.2.1-pre.7303

package/src/patient-list-form/patient-list-form.workspace.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, type SyntheticEvent, useEffect, useId, useState } from 'react';
+import React, { useCallback, type SyntheticEvent, useEffect, useId, useMemo, useState } from 'react';
 import { Button, ButtonSet, Dropdown, Layer, TextArea, TextInput } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { type TFunction } from 'i18next';
@@ -9,7 +9,8 @@ import {
   showSnackbar,
   useLayoutType,
   useSession,
-  type DefaultWorkspaceProps,
+  Workspace2,
+  type Workspace2DefinitionProps,
 } from '@openmrs/esm-framework';
 import type { NewCohortData, NewCohortDataPayload, OpenmrsCohort } from '../api/types';
 import {
@@ -36,16 +37,18 @@ const createCohortSchema = (t: TFunction) => {
 
 type CohortFormData = z.infer<ReturnType<typeof createCohortSchema>>;
 
-export interface PatientListFormWorkspaceProps extends DefaultWorkspaceProps {
+export interface PatientListFormWorkspaceProps {
+  /** Existing patient list to edit. If not provided, creates a new list. */
   patientListDetails?: OpenmrsCohort;
+  /** Callback triggered after successful create/edit operation */
   onSuccess?: () => void;
 }
 
-const PatientListFormWorkspace: React.FC<PatientListFormWorkspaceProps> = ({
-  patientListDetails,
-  onSuccess = () => {},
+const PatientListFormWorkspace: React.FC<Workspace2DefinitionProps<PatientListFormWorkspaceProps>> = ({
+  workspaceProps,
   closeWorkspace,
 }) => {
+  const { patientListDetails, onSuccess = () => {} } = workspaceProps ?? {};
   const id = useId();
   const isTablet = useLayoutType() === 'tablet';
   const responsiveLevel = isTablet ? 1 : 0;
@@ -63,6 +66,19 @@ const PatientListFormWorkspace: React.FC<PatientListFormWorkspaceProps> = ({
   });
   const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
 
+  const { initialValues, isDirty } = useMemo(() => {
+    const initial = {
+      name: patientListDetails?.name || '',
+      description: patientListDetails?.description || '',
+      cohortType: patientListDetails?.cohortType?.uuid || '',
+    };
+    const dirty =
+      cohortDetails.name !== initial.name ||
+      cohortDetails.description !== initial.description ||
+      cohortDetails.cohortType !== initial.cohortType;
+    return { initialValues: initial, isDirty: dirty };
+  }, [cohortDetails, patientListDetails]);
+
   const validateForm = useCallback(
     (data: CohortFormData) => {
       try {
@@ -129,7 +145,7 @@ const PatientListFormWorkspace: React.FC<PatientListFormWorkspaceProps> = ({
           });
           onSuccess();
           setIsSubmitting(false);
-          closeWorkspace();
+          closeWorkspace({ discardUnsavedChanges: true });
         })
         .catch(onError);
     } else {
@@ -146,7 +162,7 @@ const PatientListFormWorkspace: React.FC<PatientListFormWorkspaceProps> = ({
           });
           onSuccess();
           setIsSubmitting(false);
-          closeWorkspace();
+          closeWorkspace({ discardUnsavedChanges: true });
         })
         .catch(onError);
     }
@@ -159,75 +175,85 @@ const PatientListFormWorkspace: React.FC<PatientListFormWorkspaceProps> = ({
     }));
   }, []);
 
+  const workspaceTitle = patientListDetails
+    ? t('editPatientListHeader', 'Edit patient list')
+    : t('newPatientListHeader', 'New patient list');
+
+  const handleCancel = useCallback(() => {
+    closeWorkspace();
+  }, [closeWorkspace]);
+
   return (
-    <div data-tutorial-target="patient-list-form" className={styles.container}>
-      {/* data-tutorial-target attribute is essential for joyride in onboarding app ! */}
-      <div className={styles.content}>
-        <h4 className={styles.header}>{t('configureList', 'Configure your patient list using the fields below')}</h4>
-        <div>
-          <Layer level={responsiveLevel}>
-            <TextInput
-              id={`${id}-input`}
-              invalid={!!validationErrors.name}
-              invalidText={validationErrors.name}
-              labelText={t('newPatientListNameLabel', 'List name')}
-              name="name"
-              onChange={handleChange}
-              placeholder={t('listNamePlaceholder', 'e.g. Potential research participants')}
-              value={cohortDetails?.name}
-            />
-          </Layer>
-        </div>
-        <div className={styles.input}>
-          <Layer level={responsiveLevel}>
-            <Dropdown
-              id="cohortType"
-              items={listCohortTypes}
-              itemToString={(item) => (item ? item.display : '')}
-              label={t('chooseCohortType', 'Choose cohort type')}
-              onChange={({ selectedItem }) => {
-                setCohortDetails((prev) => ({
-                  ...prev,
-                  cohortType: selectedItem?.uuid || '',
-                }));
-              }}
-              selectedItem={listCohortTypes.find((item) => item.uuid === cohortDetails.cohortType) || null}
-              titleText={t('selectCohortType', 'Select cohort type')}
-              type="default"
-            />
-          </Layer>
-        </div>
-        <div className={styles.input}>
-          <Layer level={responsiveLevel}>
-            <TextArea
-              enableCounter
-              id={`${id}-textarea`}
-              labelText={t('newPatientListDescriptionLabel', 'Describe the purpose of this list in a few words')}
-              maxCount={255}
-              name="description"
-              onChange={handleChange}
-              placeholder={t(
-                'listDescriptionPlaceholder',
-                'e.g. Patients with diagnosed asthma who may be willing to be a part of a university research study',
-              )}
-              value={cohortDetails?.description}
-            />
-          </Layer>
+    <Workspace2 title={workspaceTitle} hasUnsavedChanges={isDirty}>
+      <div data-tutorial-target="patient-list-form" className={styles.container}>
+        {/* data-tutorial-target attribute is essential for joyride in onboarding app ! */}
+        <div className={styles.content}>
+          <h4 className={styles.header}>{t('configureList', 'Configure your patient list using the fields below')}</h4>
+          <div>
+            <Layer level={responsiveLevel}>
+              <TextInput
+                id={`${id}-input`}
+                invalid={!!validationErrors.name}
+                invalidText={validationErrors.name}
+                labelText={t('newPatientListNameLabel', 'List name')}
+                name="name"
+                onChange={handleChange}
+                placeholder={t('listNamePlaceholder', 'e.g. Potential research participants')}
+                value={cohortDetails?.name}
+              />
+            </Layer>
+          </div>
+          <div className={styles.input}>
+            <Layer level={responsiveLevel}>
+              <Dropdown
+                id="cohortType"
+                items={listCohortTypes}
+                itemToString={(item) => (item ? item.display : '')}
+                label={t('chooseCohortType', 'Choose cohort type')}
+                onChange={({ selectedItem }) => {
+                  setCohortDetails((prev) => ({
+                    ...prev,
+                    cohortType: selectedItem?.uuid || '',
+                  }));
+                }}
+                selectedItem={listCohortTypes.find((item) => item.uuid === cohortDetails.cohortType) || null}
+                titleText={t('selectCohortType', 'Select cohort type')}
+                type="default"
+              />
+            </Layer>
+          </div>
+          <div className={styles.input}>
+            <Layer level={responsiveLevel}>
+              <TextArea
+                enableCounter
+                id={`${id}-textarea`}
+                labelText={t('newPatientListDescriptionLabel', 'Describe the purpose of this list in a few words')}
+                maxCount={255}
+                name="description"
+                onChange={handleChange}
+                placeholder={t(
+                  'listDescriptionPlaceholder',
+                  'e.g. Patients with diagnosed asthma who may be willing to be a part of a university research study',
+                )}
+                value={cohortDetails?.description}
+              />
+            </Layer>
+          </div>
         </div>
+        <ButtonSet className={styles.buttonSet}>
+          <Button className={styles.button} onClick={handleCancel} kind="secondary" size="xl">
+            {getCoreTranslation('cancel')}
+          </Button>
+          <Button className={styles.button} onClick={handleSubmit} size="xl" disabled={isSubmitting}>
+            {isSubmitting
+              ? t('submitting', 'Submitting')
+              : patientListDetails
+                ? t('editList', 'Edit list')
+                : t('createList', 'Create list')}
+          </Button>
+        </ButtonSet>
       </div>
-      <ButtonSet className={styles.buttonSet}>
-        <Button className={styles.button} onClick={closeWorkspace} kind="secondary" size="xl">
-          {getCoreTranslation('cancel')}
-        </Button>
-        <Button className={styles.button} onClick={handleSubmit} size="xl" disabled={isSubmitting}>
-          {isSubmitting
-            ? t('submitting', 'Submitting')
-            : patientListDetails
-              ? t('editList', 'Edit list')
-              : t('createList', 'Create list')}
-        </Button>
-      </ButtonSet>
-    </div>
+    </Workspace2>
   );
 };
 

package/src/root.component.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { BrowserRouter, Route, Routes, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { WorkspaceContainer, launchWorkspace } from '@openmrs/esm-framework';
+import { WorkspaceContainer, launchWorkspace2 } from '@openmrs/esm-framework';
 import ListDetails from './list-details/list-details.component';
 import ListsDashboard from './lists-dashboard/lists-dashboard.component';
 
@@ -15,9 +15,7 @@ const AutoLaunchPatientListWorkspace: React.FC = () => {
     if (shouldOpenCreate && !hasOpenedRef.current) {
       hasOpenedRef.current = true;
       const rafId = requestAnimationFrame(() => {
-        launchWorkspace('patient-list-form-workspace', {
-          workspaceTitle: t('newPatientListHeader', 'New patient list'),
-        });
+        launchWorkspace2('patient-list-form-workspace');
         setSearchParams({}, { replace: true });
       });
       return () => cancelAnimationFrame(rafId);

package/src/routes.json

@@ -43,12 +43,23 @@
       "component": "deletePatientListModal"
     }
   ],
-  "workspaces": [
+  "workspaces2": [
     {
       "name": "patient-list-form-workspace",
       "component": "patientListFormWorkspace",
-      "title": "patientListFormHeader",
-      "type": "patient-lists"
+      "window": "patient-list-form-window"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "patient-list-form-window",
+      "group": "patient-list-form-workspace-group"
+    }
+  ],
+  "workspaceGroups2": [
+    {
+      "name": "patient-list-form-workspace-group",
+      "overlay": false
     }
   ]
 }