@openmrs/esm-patient-list-management-app 9.2.1-pre.7288 → 9.2.1-pre.7296

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

@@ -0,0 +1,212 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import {
+  getCoreTranslation,
+  showSnackbar,
+  useLayoutType,
+  useSession,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import { mockSession } from '__mocks__';
+import type { OpenmrsCohort, CohortType } from '../api/types';
+import PatientListFormWorkspace from './patient-list-form.workspace';
+import type { PatientListFormWorkspaceProps } from './patient-list-form.workspace';
+
+const mockCreatePatientList = jest.fn();
+const mockEditPatientList = jest.fn();
+const mockExtractErrorMessagesFromResponse = jest.fn();
+
+jest.mock('../api/patient-list.resource', () => ({
+  createPatientList: (...args: unknown[]) => mockCreatePatientList(...args),
+  editPatientList: (...args: unknown[]) => mockEditPatientList(...args),
+  extractErrorMessagesFromResponse: (...args: unknown[]) => mockExtractErrorMessagesFromResponse(...args),
+}));
+
+const mockUseCohortTypes = jest.fn();
+
+jest.mock('../api/hooks', () => ({
+  useCohortTypes: () => mockUseCohortTypes(),
+}));
+
+const mockUseSession = jest.mocked(useSession);
+const mockUseLayoutType = jest.mocked(useLayoutType);
+const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockGetCoreTranslation = jest.mocked(getCoreTranslation);
+
+const mockCloseWorkspace = jest.fn();
+const mockOnSuccess = jest.fn();
+
+const mockCohortTypes: CohortType[] = [
+  { uuid: 'type-1', display: 'My List' },
+  { uuid: 'type-2', display: 'System List' },
+];
+
+const mockPatientListDetails: OpenmrsCohort = {
+  uuid: 'test-list-uuid',
+  name: 'Test Patient List',
+  description: 'A test patient list description',
+  cohortType: { uuid: 'type-1', display: 'My List' },
+  resourceVersion: '1.0',
+  attributes: [],
+  links: [],
+  location: null,
+  groupCohort: false,
+  startDate: '2023-01-01',
+  endDate: null,
+  voidReason: null,
+  voided: false,
+  size: 5,
+};
+
+function createMockWorkspace2Props(
+  workspaceProps: PatientListFormWorkspaceProps | null = null,
+): Workspace2DefinitionProps<PatientListFormWorkspaceProps> {
+  return {
+    workspaceProps,
+    closeWorkspace: mockCloseWorkspace,
+    windowProps: null,
+    groupProps: null,
+    workspaceName: 'patient-list-form-workspace',
+    isRootWorkspace: true,
+    launchChildWorkspace: jest.fn(),
+  } as unknown as Workspace2DefinitionProps<PatientListFormWorkspaceProps>;
+}
+
+describe('PatientListFormWorkspace', () => {
+  beforeEach(() => {
+    mockUseSession.mockReturnValue(mockSession.data);
+    mockUseLayoutType.mockReturnValue('small-desktop');
+    mockUseCohortTypes.mockReturnValue({
+      listCohortTypes: mockCohortTypes,
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+    mockGetCoreTranslation.mockImplementation((key) => {
+      const translations: Record<string, string> = {
+        cancel: 'Cancel',
+      };
+      return translations[key] || key;
+    });
+    mockCreatePatientList.mockResolvedValue({});
+    mockEditPatientList.mockResolvedValue({});
+    mockExtractErrorMessagesFromResponse.mockImplementation((err) => err?.error?.message || 'Unknown error');
+  });
+
+  it('renders the create new patient list form correctly', () => {
+    const props = createMockWorkspace2Props({ onSuccess: mockOnSuccess });
+
+    render(<PatientListFormWorkspace {...props} />);
+
+    expect(screen.getByText(/configure your patient list/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/list name/i)).toBeInTheDocument();
+    expect(screen.getByText(/select cohort type/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/describe the purpose of this list/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /create list/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+  });
+
+  it('renders the edit patient list form with existing data', () => {
+    const props = createMockWorkspace2Props({
+      patientListDetails: mockPatientListDetails,
+      onSuccess: mockOnSuccess,
+    });
+
+    render(<PatientListFormWorkspace {...props} />);
+
+    expect(screen.getByLabelText(/list name/i)).toHaveValue('Test Patient List');
+    expect(screen.getByLabelText(/describe the purpose of this list/i)).toHaveValue('A test patient list description');
+    expect(screen.getByRole('button', { name: /edit list/i })).toBeInTheDocument();
+  });
+
+  it('creates a new patient list successfully', async () => {
+    const user = userEvent.setup();
+    const props = createMockWorkspace2Props({ onSuccess: mockOnSuccess });
+
+    render(<PatientListFormWorkspace {...props} />);
+
+    await user.type(screen.getByLabelText(/list name/i), 'My New Patient List');
+    await user.type(screen.getByLabelText(/describe the purpose of this list/i), 'A description for testing');
+    await user.click(screen.getByRole('button', { name: /create list/i }));
+
+    expect(mockCreatePatientList).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'My New Patient List',
+        description: 'A description for testing',
+      }),
+    );
+
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        kind: 'success',
+        title: 'Created',
+      }),
+    );
+
+    expect(mockOnSuccess).toHaveBeenCalled();
+    expect(mockCloseWorkspace).toHaveBeenCalledWith({ discardUnsavedChanges: true });
+  });
+
+  it('edits an existing patient list successfully', async () => {
+    const user = userEvent.setup();
+    const props = createMockWorkspace2Props({
+      patientListDetails: mockPatientListDetails,
+      onSuccess: mockOnSuccess,
+    });
+
+    render(<PatientListFormWorkspace {...props} />);
+
+    const nameInput = screen.getByLabelText(/list name/i);
+    await user.clear(nameInput);
+    await user.type(nameInput, 'Updated List Name');
+    await user.click(screen.getByRole('button', { name: /edit list/i }));
+
+    expect(mockEditPatientList).toHaveBeenCalledWith(
+      'test-list-uuid',
+      expect.objectContaining({
+        name: 'Updated List Name',
+      }),
+    );
+
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        kind: 'success',
+        title: 'Updated',
+      }),
+    );
+
+    expect(mockOnSuccess).toHaveBeenCalled();
+    expect(mockCloseWorkspace).toHaveBeenCalledWith({ discardUnsavedChanges: true });
+  });
+
+  it('calls closeWorkspace when cancel button is clicked', async () => {
+    const user = userEvent.setup();
+    const props = createMockWorkspace2Props({ onSuccess: mockOnSuccess });
+
+    render(<PatientListFormWorkspace {...props} />);
+
+    await user.click(screen.getByRole('button', { name: /cancel/i }));
+
+    expect(mockCloseWorkspace).toHaveBeenCalled();
+  });
+
+  it('shows error snackbar when creation fails', async () => {
+    mockCreatePatientList.mockRejectedValueOnce(new Error('Network error'));
+
+    const user = userEvent.setup();
+    const props = createMockWorkspace2Props({ onSuccess: mockOnSuccess });
+
+    render(<PatientListFormWorkspace {...props} />);
+
+    await user.type(screen.getByLabelText(/list name/i), 'Test List');
+    await user.click(screen.getByRole('button', { name: /create list/i }));
+
+    expect(mockShowSnackbar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        kind: 'error',
+        title: expect.stringMatching(/error creating list/i),
+      }),
+    );
+  });
+});

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