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

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

@@ -1,50 +1,56 @@
 import React, { type ComponentProps, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
-import { ArrowLeftIcon, formatDate, launchWorkspace, parseDate } from '@openmrs/esm-framework';
-import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
+import { ArrowLeftIcon, formatDate, parseDate, Workspace2 } from '@openmrs/esm-framework';
+import { type PatientWorkspace2DefinitionProps } 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';
 
-interface PatientListDetailsWorkspaceProps extends DefaultPatientWorkspaceProps {
+export interface PatientListDetailsWorkspaceProps {
   list: MappedList;
 }
 
-function PatientListDetailsWorkspace({ list }: PatientListDetailsWorkspaceProps) {
+const PatientListDetailsWorkspace: React.FC<PatientWorkspace2DefinitionProps<PatientListDetailsWorkspaceProps, {}>> = ({
+  workspaceProps: { list },
+  closeWorkspace,
+}) => {
   const { t } = useTranslation();
   const { listMembers, isLoading } = usePatientListMembers(list.id);
 
-  const closeListDetailsWorkspace = useCallback(() => {
-    launchWorkspace('patient-lists');
-  }, []);
+  const closeListDetailsWorkspace = useCallback(() => closeWorkspace(), [closeWorkspace]);
 
   return (
-    <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
+      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>
   );
-}
+};
 
 export default PatientListDetailsWorkspace;

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

@@ -23,8 +23,7 @@ it('renders an empty state if patient list data is unavailable', async () => {
     mutate: jest.fn(),
     isValidating: false,
   });
-
-  render(<PatientListsWorkspace />);
+  renderPatientListWorkspace();
 
   expect(screen.getByTitle(/empty data illustration/i)).toBeInTheDocument();
   expect(screen.getByText(/no patient lists to display/i)).toBeInTheDocument();
@@ -52,7 +51,7 @@ it('renders a tabular overview of the available patient lists', async () => {
     isValidating: false,
   });
 
-  render(<PatientListsWorkspace />);
+  renderPatientListWorkspace();
 
   await screen.findByRole('table');
 
@@ -75,3 +74,23 @@ 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,21 +18,24 @@ import {
   TableToolbarSearch,
   Tile,
 } from '@carbon/react';
-import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
-import { launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
-import { usePatientLists, type MappedList } from '../patient-lists.resource';
+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 styles from './patient-lists.scss';
 
-function PatientListsWorkspace() {
+function PatientListsWorkspace({ launchChildWorkspace }: PatientWorkspace2DefinitionProps<{}, {}>) {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const responsiveSize = layout === 'tablet' ? 'lg' : 'sm';
   const [searchTerm, setSearchTerm] = useState('');
   const { patientLists, isLoading } = usePatientLists();
 
-  const launchListDetailsWorkspace = useCallback((list: MappedList) => {
-    launchWorkspace('patient-list-details', { list, workspaceTitle: list.name });
-  }, []);
+  const launchListDetailsWorkspace = useCallback(
+    (list) => {
+      launchChildWorkspace('patient-list-details', { list });
+    },
+    [launchChildWorkspace],
+  );
 
   const tableHeaders = [
     {
@@ -66,90 +69,96 @@ function PatientListsWorkspace() {
 
   if (isLoading)
     return (
-      <div className={styles.skeletonContainer}>
-        <DataTableSkeleton className={styles.dataTableSkeleton} rowCount={5} columnCount={5} zebra />
-      </div>
+      <Workspace2 title={t('patientListsWorkspaceTitle', 'Patient Lists')} hasUnsavedChanges={false}>
+        <div className={styles.skeletonContainer}>
+          <DataTableSkeleton className={styles.dataTableSkeleton} rowCount={5} columnCount={5} zebra />
+        </div>
+      </Workspace2>
     );
 
   if (patientLists?.length > 0) {
     return (
-      <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);
+      <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);
 
-                        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>
+                          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>
                 ) : 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>
-              ) : null}
-            </>
-          )}
-        </DataTable>
-      </section>
+              </>
+            )}
+          </DataTable>
+        </section>
+      </Workspace2>
     );
   }
 
   return (
-    <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 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>
   );
 }