@openmrs/esm-patient-lists-app 11.3.1-patch.9310 → 11.3.1-patch.9508

package/src/workspaces/patient-list-details.workspace.test.tsx

@@ -1,36 +1,29 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
 import { openmrsFetch } from '@openmrs/esm-framework';
-import PatientListDetailsWorkspace, { type PatientListDetailsWorkspaceProps } from './patient-list-details.workspace';
-import { type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
+import PatientListDetailsWorkspace from './patient-list-details.workspace';
 
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
 
-const defaultProps: PatientWorkspace2DefinitionProps<PatientListDetailsWorkspaceProps, {}> = {
-  groupProps: {
-    patientUuid: '',
-    patient: undefined,
-    visitContext: null,
-    mutateVisitContext: null,
-  },
+const defaultProps = {
+  patientUuid: '',
+  patient: undefined,
+  promptBeforeClosing: jest.fn(),
   closeWorkspace: jest.fn(),
-  workspaceProps: {
-    list: {
-      attributes: [],
-      description:
-        'Cardiovascular Outcomes in Type 2 Diabetes (COTD Study): A Longitudinal Assessment of a New Diabetes Medication',
-      id: '4dcb7061-fcad-4542-b219-4c197c117050',
-      name: 'COTD Study',
-      size: 2,
-      startDate: '2023-11-14T23:45:51.000+0000',
-      type: 'My List',
-    },
+  closeWorkspaceWithSavedChanges: jest.fn(),
+  list: {
+    attributes: [],
+    description:
+      'Cardiovascular Outcomes in Type 2 Diabetes (COTD Study): A Longitudinal Assessment of a New Diabetes Medication',
+    id: '4dcb7061-fcad-4542-b219-4c197c117050',
+    name: 'COTD Study',
+    size: 2,
+    startDate: '2023-11-14T23:45:51.000+0000',
+    type: 'My List',
   },
-  workspaceName: '',
-  launchChildWorkspace: jest.fn(),
-  windowProps: {},
-  windowName: '',
-  isRootWorkspace: false,
+  setTitle: jest.fn(),
+  visitContext: null,
+  mutateVisitContext: null,
 };
 
 const mockPatientListData = [
@@ -123,7 +116,7 @@ it('renders the patient list details workspace', async () => {
 
   render(<PatientListDetailsWorkspace {...defaultProps} />);
 
-  await screen.findByRole('heading', { name: defaultProps.workspaceProps.list.description });
+  await screen.findByRole('heading', { name: defaultProps.list.description });
 
   expect(screen.getByRole('button', { name: /back to patient lists/i })).toBeInTheDocument();
   expect(screen.getByText(/2 patients/i)).toBeInTheDocument();

package/src/workspaces/patient-list-details.workspace.tsx

@@ -1,56 +1,50 @@
 import React, { type ComponentProps, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
-import { ArrowLeftIcon, formatDate, parseDate, Workspace2 } from '@openmrs/esm-framework';
-import { type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
+import { ArrowLeftIcon, formatDate, launchWorkspace, parseDate } from '@openmrs/esm-framework';
+import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import { type MappedList, usePatientListMembers } from '../patient-lists.resource';
 import PatientListDetailsTable from './patient-list-details-table.component';
 import styles from './patient-list-details.scss';
 
-export interface PatientListDetailsWorkspaceProps {
+interface PatientListDetailsWorkspaceProps extends DefaultPatientWorkspaceProps {
   list: MappedList;
 }
 
-const PatientListDetailsWorkspace: React.FC<PatientWorkspace2DefinitionProps<PatientListDetailsWorkspaceProps, {}>> = ({
-  workspaceProps: { list },
-  closeWorkspace,
-}) => {
+function PatientListDetailsWorkspace({ list }: PatientListDetailsWorkspaceProps) {
   const { t } = useTranslation();
   const { listMembers, isLoading } = usePatientListMembers(list.id);
 
-  const closeListDetailsWorkspace = useCallback(() => closeWorkspace(), [closeWorkspace]);
+  const closeListDetailsWorkspace = useCallback(() => {
+    launchWorkspace('patient-lists');
+  }, []);
 
   return (
-    <Workspace2
-      title={list.name || t('patientListDetailWorkspaceTitle', 'Patient List Details')}
-      hasUnsavedChanges={false}
-    >
-      <main className={styles.container}>
-        <section className={styles.header}>
-          <h4 className={styles.description}>{list.description ?? '--'}</h4>
-          <p className={styles.details}>
-            {list.size} {t('patients', 'patients')} &middot;{' '}
-            <span className={styles.label}>{t('createdOn', 'Created on')}:</span>{' '}
-            {list.startDate ? formatDate(parseDate(list.startDate)) : null}
-          </p>
-        </section>
-        <div className={styles.backButton}>
-          <Button
-            kind="ghost"
-            renderIcon={(props: ComponentProps<typeof ArrowLeftIcon>) => <ArrowLeftIcon size={24} {...props} />}
-            iconDescription="Back to patient lists"
-            size="sm"
-            onClick={closeListDetailsWorkspace}
-          >
-            <span>{t('backToPatientLists', 'Back to patient lists')}</span>
-          </Button>
-        </div>
-        <section className={styles.tableContainer}>
-          <PatientListDetailsTable isLoading={isLoading} listMembers={listMembers} />
-        </section>
-      </main>
-    </Workspace2>
+    <main className={styles.container}>
+      <section className={styles.header}>
+        <h4 className={styles.description}>{list.description ?? '--'}</h4>
+        <p className={styles.details}>
+          {list.size} {t('patients', 'patients')} &middot;{' '}
+          <span className={styles.label}>{t('createdOn', 'Created on')}:</span>{' '}
+          {list.startDate ? formatDate(parseDate(list.startDate)) : null}
+        </p>
+      </section>
+      <div className={styles.backButton}>
+        <Button
+          kind="ghost"
+          renderIcon={(props: ComponentProps<typeof ArrowLeftIcon>) => <ArrowLeftIcon size={24} {...props} />}
+          iconDescription="Back to patient lists"
+          size="sm"
+          onClick={closeListDetailsWorkspace}
+        >
+          <span>{t('backToPatientLists', 'Back to patient lists')}</span>
+        </Button>
+      </div>
+      <section className={styles.tableContainer}>
+        <PatientListDetailsTable isLoading={isLoading} listMembers={listMembers} />
+      </section>
+    </main>
   );
-};
+}
 
 export default PatientListDetailsWorkspace;

package/src/workspaces/patient-lists.workspace.test.tsx

@@ -23,7 +23,8 @@ it('renders an empty state if patient list data is unavailable', async () => {
     mutate: jest.fn(),
     isValidating: false,
   });
-  renderPatientListWorkspace();
+
+  render(<PatientListsWorkspace />);
 
   expect(screen.getByTitle(/empty data illustration/i)).toBeInTheDocument();
   expect(screen.getByText(/no patient lists to display/i)).toBeInTheDocument();
@@ -51,7 +52,7 @@ it('renders a tabular overview of the available patient lists', async () => {
     isValidating: false,
   });
 
-  renderPatientListWorkspace();
+  render(<PatientListsWorkspace />);
 
   await screen.findByRole('table');
 
@@ -74,23 +75,3 @@ it('renders a tabular overview of the available patient lists', async () => {
   await user.type(searchbox, 'COTD');
   expect(screen.getByRole('row', { name: /COTD Study My List 2/i })).toBeInTheDocument();
 });
-
-function renderPatientListWorkspace() {
-  render(
-    <PatientListsWorkspace
-      workspaceName={''}
-      launchChildWorkspace={jest.fn()}
-      closeWorkspace={jest.fn()}
-      workspaceProps={{}}
-      windowProps={{}}
-      groupProps={{
-        mutateVisitContext: jest.fn(),
-        patient: null,
-        patientUuid: null,
-        visitContext: null,
-      }}
-      windowName={''}
-      isRootWorkspace={false}
-    />,
-  );
-}

package/src/workspaces/patient-lists.workspace.tsx

@@ -18,24 +18,21 @@ import {
   TableToolbarSearch,
   Tile,
 } from '@carbon/react';
-import { EmptyDataIllustration, type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
-import { launchWorkspace, useLayoutType, Workspace2 } from '@openmrs/esm-framework';
-import { usePatientLists } from '../patient-lists.resource';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import { launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
+import { usePatientLists, type MappedList } from '../patient-lists.resource';
 import styles from './patient-lists.scss';
 
-function PatientListsWorkspace({ launchChildWorkspace }: PatientWorkspace2DefinitionProps<{}, {}>) {
+function PatientListsWorkspace() {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const responsiveSize = layout === 'tablet' ? 'lg' : 'sm';
   const [searchTerm, setSearchTerm] = useState('');
   const { patientLists, isLoading } = usePatientLists();
 
-  const launchListDetailsWorkspace = useCallback(
-    (list) => {
-      launchChildWorkspace('patient-list-details', { list });
-    },
-    [launchChildWorkspace],
-  );
+  const launchListDetailsWorkspace = useCallback((list: MappedList) => {
+    launchWorkspace('patient-list-details', { list, workspaceTitle: list.name });
+  }, []);
 
   const tableHeaders = [
     {
@@ -69,96 +66,90 @@ function PatientListsWorkspace({ launchChildWorkspace }: PatientWorkspace2Defini
 
   if (isLoading)
     return (
-      <Workspace2 title={t('patientListsWorkspaceTitle', 'Patient Lists')} hasUnsavedChanges={false}>
-        <div className={styles.skeletonContainer}>
-          <DataTableSkeleton className={styles.dataTableSkeleton} rowCount={5} columnCount={5} zebra />
-        </div>
-      </Workspace2>
+      <div className={styles.skeletonContainer}>
+        <DataTableSkeleton className={styles.dataTableSkeleton} rowCount={5} columnCount={5} zebra />
+      </div>
     );
 
   if (patientLists?.length > 0) {
     return (
-      <Workspace2 title={t('patientListsWorkspaceTitle', 'Patient Lists')} hasUnsavedChanges={false}>
-        <section className={styles.container}>
-          <DataTable headers={tableHeaders} rows={filteredLists || []} size={responsiveSize} useZebraStyles>
-            {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
-              <>
-                <TableContainer className={styles.tableContainer}>
-                  <div className={styles.toolbarWrapper}>
-                    <TableToolbar className={styles.tableToolbar}>
-                      <TableToolbarContent>
-                        <TableToolbarSearch
-                          className={styles.search}
-                          expanded
-                          onChange={handleSearchTermChange}
-                          placeholder={t('searchThisList', 'Search this list')}
-                          size={responsiveSize}
-                        />
-                      </TableToolbarContent>
-                    </TableToolbar>
-                  </div>
-                  {rows.length > 0 ? (
-                    <Table aria-label="patient lists" className={styles.table} {...getTableProps()}>
-                      <TableHead>
-                        <TableRow>
-                          {headers.map((header) => (
-                            <TableHeader key={header.key} {...getHeaderProps({ header })}>
-                              {header.header}
-                            </TableHeader>
-                          ))}
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        {rows.map((row) => {
-                          const currentList = patientLists?.find((list) => list?.id === row.id);
+      <section className={styles.container}>
+        <DataTable headers={tableHeaders} rows={filteredLists || []} size={responsiveSize} useZebraStyles>
+          {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+            <>
+              <TableContainer className={styles.tableContainer}>
+                <div className={styles.toolbarWrapper}>
+                  <TableToolbar className={styles.tableToolbar}>
+                    <TableToolbarContent>
+                      <TableToolbarSearch
+                        className={styles.search}
+                        expanded
+                        onChange={handleSearchTermChange}
+                        placeholder={t('searchThisList', 'Search this list')}
+                        size="sm"
+                      />
+                    </TableToolbarContent>
+                  </TableToolbar>
+                </div>
+                {rows.length > 0 ? (
+                  <Table aria-label="patient lists" className={styles.table} {...getTableProps()}>
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                            {header.header}
+                          </TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => {
+                        const currentList = patientLists?.find((list) => list?.id === row.id);
 
-                          return (
-                            <TableRow {...getRowProps({ row })} key={row.id}>
-                              <TableCell>
-                                <Link className={styles.link} onClick={() => launchListDetailsWorkspace(currentList)}>
-                                  {currentList?.name ?? ''}
-                                </Link>
-                              </TableCell>
-                              <TableCell>{currentList?.type ?? ''}</TableCell>
-                              <TableCell>{currentList?.size ?? ''}</TableCell>
-                            </TableRow>
-                          );
-                        })}
-                      </TableBody>
-                    </Table>
-                  ) : null}
-                </TableContainer>
-                {filteredLists?.length === 0 ? (
-                  <div className={styles.tileContainer}>
-                    <Tile className={styles.tile}>
-                      <div className={styles.tileContent}>
-                        <p className={styles.content}>{t('noMatchingListsFound', 'No matching lists to display')}</p>
-                        <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
-                      </div>
-                    </Tile>
-                  </div>
+                        return (
+                          <TableRow {...getRowProps({ row })} key={row.id}>
+                            <TableCell>
+                              <Link className={styles.link} onClick={() => launchListDetailsWorkspace(currentList)}>
+                                {currentList?.name ?? ''}
+                              </Link>
+                            </TableCell>
+                            <TableCell>{currentList?.type ?? ''}</TableCell>
+                            <TableCell>{currentList?.size ?? ''}</TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
                 ) : null}
-              </>
-            )}
-          </DataTable>
-        </section>
-      </Workspace2>
+              </TableContainer>
+              {filteredLists?.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noMatchingListsFound', 'No matching lists to display')}</p>
+                      <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+            </>
+          )}
+        </DataTable>
+      </section>
     );
   }
 
   return (
-    <Workspace2 title={t('patientListsWorkspaceTitle', 'Patient Lists')} hasUnsavedChanges={false}>
-      <div className={styles.emptyStateContainer}>
-        <Layer>
-          <Tile className={styles.emptyStateTile}>
-            <div className={styles.tileContent}>
-              <EmptyDataIllustration />
-              <p className={styles.emptyStateContent}>{t('noPatientListsToDisplay', 'No patient lists to display')}</p>
-            </div>
-          </Tile>
-        </Layer>
-      </div>
-    </Workspace2>
+    <div className={styles.emptyStateContainer}>
+      <Layer>
+        <Tile className={styles.emptyStateTile}>
+          <div className={styles.tileContent}>
+            <EmptyDataIllustration />
+            <p className={styles.emptyStateContent}>{t('noPatientListsToDisplay', 'No patient lists to display')}</p>
+          </div>
+        </Tile>
+      </Layer>
+    </div>
   );
 }
 

package/translations/cs.json

@@ -0,0 +1,21 @@
+{
+  "backToPatientLists": "Back to patient lists",
+  "checkFilters": "Check the filters above",
+  "createdOn": "Created on",
+  "identifier": "Identifier",
+  "listName": "List name",
+  "listType": "List type",
+  "name": "Name",
+  "noMatchingListsFound": "No matching lists to display",
+  "noMatchingPatients": "No matching patients to display",
+  "noPatientListsToDisplay": "No patient lists to display",
+  "noPatientsInList": "There are no patients in this list",
+  "numberOfPatients": "No. of patients",
+  "patientListDetailWorkspaceTitle": "Patient List Details",
+  "patientLists": "Patient lists",
+  "patientListsWorkspaceTitle": "Patient Lists",
+  "patients": "patients",
+  "searchThisList": "Search this list",
+  "sex": "Sex",
+  "startDate": "Start Date"
+}

package/translations/sq.json

@@ -0,0 +1,21 @@
+{
+  "backToPatientLists": "Back to patient lists",
+  "checkFilters": "Check the filters above",
+  "createdOn": "Created on",
+  "identifier": "Identifier",
+  "listName": "List name",
+  "listType": "List type",
+  "name": "Name",
+  "noMatchingListsFound": "No matching lists to display",
+  "noMatchingPatients": "No matching patients to display",
+  "noPatientListsToDisplay": "No patient lists to display",
+  "noPatientsInList": "There are no patients in this list",
+  "numberOfPatients": "No. of patients",
+  "patientListDetailWorkspaceTitle": "Patient List Details",
+  "patientLists": "Patient lists",
+  "patientListsWorkspaceTitle": "Patient Lists",
+  "patients": "patients",
+  "searchThisList": "Search this list",
+  "sex": "Sex",
+  "startDate": "Start Date"
+}

package/translations/zh_TW.json

@@ -0,0 +1,21 @@
+{
+  "backToPatientLists": "Back to patient lists",
+  "checkFilters": "Check the filters above",
+  "createdOn": "Created on",
+  "identifier": "Identifier",
+  "listName": "List name",
+  "listType": "List type",
+  "name": "Name",
+  "noMatchingListsFound": "No matching lists to display",
+  "noMatchingPatients": "No matching patients to display",
+  "noPatientListsToDisplay": "No patient lists to display",
+  "noPatientsInList": "There are no patients in this list",
+  "numberOfPatients": "No. of patients",
+  "patientListDetailWorkspaceTitle": "Patient List Details",
+  "patientLists": "Patient lists",
+  "patientListsWorkspaceTitle": "Patient Lists",
+  "patients": "patients",
+  "searchThisList": "Search this list",
+  "sex": "Sex",
+  "startDate": "Start Date"
+}