@kenyaemr/esm-patient-list-management-app 7.0.3-pre.89 → 8.0.0

package/src/lists-table/custom-pagination.scss

@@ -13,37 +13,37 @@
   justify-content: space-between;
   color: colors.$gray-70;
   background-color: colors.$white-0;
-  padding-left: 1rem;
+  padding-left: layout.$spacing-05;
   align-items: center;
   border: 1px solid colors.$gray-20;
   border-top: none;
 }
 
 .desktop :global(.cds--pagination) {
-  min-height: 0rem;
-  height: 2rem;
+  min-height: 0;
+  height: layout.$spacing-07;
   width: auto;
   border: none;
 
   & :global(.cds--select-input),
   :global(.cds--btn),
   :global(.cds--pagination__right) {
-    min-height: 0rem;
-    height: 2rem;
+    min-height: 0;
+    height: layout.$spacing-07;
   }
 }
 
 .tablet :global(.cds--pagination) {
-  min-height: 0rem;
-  height: 3rem;
+  min-height: 0;
+  height: layout.$spacing-09;
   width: auto;
   border: none;
 
   & :global(.cds--select-input),
   :global(.cds--btn),
   :global(.cds--pagination__right) {
-    min-height: 0rem;
-    height: 3rem;
+    min-height: 0;
+    height: layout.$spacing-09;
   }
 }
 

package/src/lists-table/lists-table.component.tsx

@@ -121,7 +121,7 @@ const ListsTable: React.FC<PatientListTableProps> = ({
         rowCount={pageSize}
         showHeader={false}
         showToolbar={false}
-        style={{ ...style, backgroundColor: 'transparent', padding: '0rem' }}
+        style={{ ...style, backgroundColor: 'transparent', padding: '0' }}
         zebra
       />
     );

package/src/lists-table/lists-table.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../style.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .table {
   tr {
@@ -20,12 +20,12 @@
 
 .desktopRow,
 .desktopHeader {
-  height: spacing.$spacing-07 !important;
+  height: layout.$spacing-07 !important;
 }
 
 .tabletRow,
 .tabletHeader {
-  height: spacing.$spacing-09 !important;
+  height: layout.$spacing-09 !important;
 }
 
 .tableBody {
@@ -59,7 +59,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: spacing.$spacing-09;
+  padding: layout.$spacing-09;
   text-align: center;
   border: 1px solid $ui-03;
   background-color: white;
@@ -72,7 +72,7 @@
 .filterEmptyStateContent {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: 0.5rem;
+  margin-bottom: layout.$spacing-03;
 }
 
 .filterEmptyStateHelper {

package/src/lists-table/lists-table.test.tsx

@@ -1,20 +1,14 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen, within } from '@testing-library/react';
-import { useSession } from '@openmrs/esm-framework';
-import { mockSession } from '__mocks__';
+import { getDefaultsFromConfigSchema, useConfig, useSession } from '@openmrs/esm-framework';
 import type { PatientList } from '../api/types';
+import { type ConfigSchema, configSchema } from '../config-schema';
+import { mockSession } from '__mocks__';
 import ListsTable from './lists-table.component';
 
-const mockedUseSession = jest.mocked(useSession);
-
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  useConfig: jest.fn(() => ({
-    patientListsToShow: 10,
-  })),
-  isDesktop: jest.fn(() => true),
-}));
+const mockUseSession = jest.mocked(useSession);
+const mockUseConfig = jest.mocked(useConfig<ConfigSchema>);
 
 const tableHeaders = [
   { header: 'List name', key: '1' },
@@ -75,7 +69,13 @@ const patientLists: Array<PatientList> = [
 ];
 
 describe('ListsTable', () => {
-  beforeEach(() => mockedUseSession.mockReturnValue(mockSession.data));
+  beforeEach(() => {
+    mockUseSession.mockReturnValue(mockSession.data);
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      patientListsToShow: 10,
+    });
+  });
 
   it('renders a loading state when patient list data is getting fetched', () => {
     render(<ListsTable error={null} headers={tableHeaders} isLoading listType={'My lists'} patientLists={[]} />);

package/src/overlay.component.tsx

@@ -15,7 +15,9 @@ const Overlay: React.FC<OverlayProps> = ({ buttonsGroup, children, close, header
   const layout = useLayoutType();
 
   return (
-    <div className={isDesktop(layout) ? styles.desktopOverlay : styles.tabletOverlay}>
+    <div
+      className={isDesktop(layout) ? styles.desktopOverlay : styles.tabletOverlay}
+      data-openmrs-role="Patient List Form">
       {isDesktop(layout) ? (
         <div className={styles.desktopHeader}>
           <span className={styles.headerContent}>{header}</span>

package/src/overlay.scss

@@ -1,13 +1,13 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import './style.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .desktopOverlay {
   position: fixed;
   right: 0;
   width: 37rem;
-  top: spacing.$spacing-09;
-  height: calc(100vh - 3rem);
+  top: layout.$spacing-09;
+  height: calc(100vh - layout.$spacing-09);
   min-width: 27rem;
   background-color: $ui-01;
   border-left: 1px solid $text-03;
@@ -27,7 +27,7 @@
   z-index: 9999;
   background-color: $ui-01;
   overflow: hidden;
-  padding-top: spacing.$spacing-09;
+  padding-top: layout.$spacing-09;
   display: grid;
   grid-template-rows: 1fr auto;
 }
@@ -47,12 +47,12 @@
   align-items: center;
   background-color: $ui-03;
   border-bottom: 1px solid $text-03;
-  height: 3rem;
+  height: layout.$spacing-09;
 }
 
 .headerContent {
   @include type.type-style('heading-compact-02');
-  padding: 0 spacing.$spacing-05;
+  padding: 0 layout.$spacing-05;
   color: $ui-05;
 }
 
@@ -63,7 +63,7 @@
 }
 
 .overlayContent {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   overflow-y: auto;
 }
 
@@ -84,6 +84,6 @@
 }
 
 :global(.omrs-breakpoint-lt-desktop) .buttonsGroup {
-  padding: spacing.$spacing-06 spacing.$spacing-05;
+  padding: layout.$spacing-06 layout.$spacing-05;
   background-color: $ui-02;
 }

package/src/overlay.test.tsx

@@ -4,57 +4,49 @@ import { render, screen } from '@testing-library/react';
 import { useLayoutType, isDesktop } from '@openmrs/esm-framework';
 import Overlay from './overlay.component';
 
-const mockUseLayoutType = useLayoutType as jest.Mock;
-const mockIsDesktop = isDesktop as jest.Mock;
-
-jest.mock('@openmrs/esm-framework');
+const mockUseLayoutType = jest.mocked(useLayoutType);
+const mockIsDesktop = jest.mocked(isDesktop);
+const mockClose = jest.fn();
 
 describe('Overlay', () => {
   it('renders the desktop version of the overlay', () => {
-    mockUseLayoutType.mockImplementation(() => 'desktop');
+    mockUseLayoutType.mockReturnValue('small-desktop');
+
     render(
-      <Overlay close={() => {}} header="Test Header">
+      <Overlay close={mockClose} header="Test Header">
         Overlay content
       </Overlay>,
     );
 
-    const headerContent = screen.getByText('Test Header');
-    const closeButton = screen.getByRole('button', { name: 'Close overlay' });
-
-    expect(headerContent).toBeInTheDocument();
-    expect(closeButton).toBeInTheDocument();
+    expect(screen.getByText('Test Header')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Close overlay' })).toBeInTheDocument();
   });
 
   it('renders the tablet version of the overlay', () => {
-    mockUseLayoutType.mockImplementation(() => 'tablet');
-    mockIsDesktop.mockImplementation(() => false);
+    mockUseLayoutType.mockReturnValue('tablet');
+    mockIsDesktop.mockReturnValue(false);
+
     render(
-      <Overlay close={() => {}} header="Test Header">
+      <Overlay close={mockClose} header="Test Header">
         Overlay content
       </Overlay>,
     );
 
-    const headerContent = screen.getByText('Test Header');
-    const backButton = screen.getByRole('button', { name: 'Close overlay' });
-
-    expect(headerContent).toBeInTheDocument();
-    expect(backButton).toBeInTheDocument();
+    expect(screen.getByText('Test Header')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Close overlay' })).toBeInTheDocument();
   });
 
   it('calls the close function when close button is clicked', async () => {
     const user = userEvent.setup();
-    const mockClose = jest.fn();
+    mockUseLayoutType.mockReturnValue('small-desktop');
 
-    mockUseLayoutType.mockImplementation(() => 'desktop');
     render(
       <Overlay close={mockClose} header="Test Header">
         Overlay content
       </Overlay>,
     );
 
-    const closeButton = screen.getByRole('button', { name: 'Close overlay' });
-    await user.click(closeButton);
-
+    await user.click(screen.getByRole('button', { name: 'Close overlay' }));
     expect(mockClose).toHaveBeenCalled();
   });
 });

package/translations/fr.json

@@ -2,9 +2,9 @@
   "actions": "Actions",
   "addPatientToList": "Ajouter le patient à la liste",
   "addToList": "Ajouter à la liste",
-  "allLists": "All lists",
-  "backToListsPage": "Back to lists page",
-  "cancel": "Annuller",
+  "allLists": "Toutes les listes",
+  "backToListsPage": "Retour sur la page des listes",
+  "cancel": "Annuler",
   "checkFilters": "Check the filters above",
   "configureList": "Configurez votre liste de patients à l'aide des champs ci-dessous",
   "confirmDeletePatientList": "Are you sure you want to delete this patient list?",
@@ -21,18 +21,18 @@
   "editPatientListHeader": "Modifier la liste des patients",
   "emptyList": "This list has no patients",
   "emptyStateIllustration": "Empty state illustration",
-  "emptyStateText": "There are no {{listType}} patient lists to display",
+  "emptyStateText": "Il n'y a pas de liste de patient {{listType}} à afficher",
   "error": "Erreur",
   "errorAddPatientToList": "Patient non ajouté à la liste",
-  "errorCopy": "Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above.",
+  "errorCopy": "Désolé, une erreur s’est produite à l’affichage. Vous pouvez tenter de rafraîchir la page, ou bien contacter l'administrateur du site et transmettre le message d'erreur ci-dessus.",
   "errorCreatingList": "Error creating list",
   "errorDeletingList": "Error deleting patient list",
   "errorRemovingPatientFromList": "Failed to remove patient from list",
   "errorUpdatingList": "Error updating list",
-  "home": "Home",
+  "home": "Accueil",
   "identifier": "Identifiant",
-  "items": "Eléments",
-  "itemsDisplayed": "{{numberOfItemsDisplayed}} items",
+  "items": "eléments",
+  "itemsDisplayed": "{{numberOfItemsDisplayed}} eléments",
   "listCreated": "List created successfully",
   "listDescriptionPlaceholder": "par ex. Les patients atteints d'asthme diagnostiqué qui peuvent être disposés à faire partie d'une étude de recherche universitaire",
   "listName": "List name",
@@ -40,18 +40,18 @@
   "listType": "List type",
   "listUpdated": "List updated successfully",
   "listUpToDate": "The list is now up to date",
-  "myLists": "My lists",
+  "myLists": "Mes listes",
   "name": "Nom",
   "newList": "Nouvelle liste",
   "newPatientListDescriptionLabel": "Décrivez le but de cette liste en quelques mots",
   "newPatientListHeader": "Nouvelle liste de patients",
   "newPatientListNameLabel": "Nom de la liste",
-  "nextPage": "Next page",
-  "noMatchingLists": "No matching lists to display",
+  "nextPage": "Page suivante",
+  "noMatchingLists": "Aucun liste à afficher",
   "noMatchingPatients": "No matching patients to display",
   "noOfPatients": "No. of patients",
   "noPatientListFound": "Aucune liste de patients trouvée",
-  "noPatientsInList": "There are no patients in this list",
+  "noPatientsInList": "Il n'y a pas de patient dans cette liste",
   "offlinePatients": "Patients hors ligne",
   "openPatientList": "Ajouter à la liste",
   "patientListMemberCount_one": "This list has {{count}} patient",
@@ -59,7 +59,7 @@
   "patientLists": "Listes de patients",
   "patientRemovedFromList": "Patient removed from list",
   "patients": "Patients",
-  "previousPage": "Previous page",
+  "previousPage": "Page précédente",
   "problemCreatingList": "There was a problem creating the list",
   "problemUpdatingList": "There was a problem updating the list",
   "removeFromList": "Remove from list",
@@ -68,17 +68,17 @@
   "searchForList": "Rechercher une liste",
   "searchThisList": "Search this list",
   "sex": "Sexe",
-  "starList": "Star list",
-  "starred": "starred",
-  "starredLists": "Starred lists",
-  "starringPatientListFailed": "Marking patient lists starred / unstarred failed",
+  "starList": "Mettre en favori",
+  "starred": "favori",
+  "starredLists": "Listes de favoris",
+  "starringPatientListFailed": "Marquage des listes de patients comme favoris/non favoris échec du marquage",
   "startDate": "Date de début",
   "submitting": "Submitting",
   "successAddPatientToList": "Patient ajouté à la liste",
   "successfullyAdded": "Ajouté avec succès",
   "systemDefined": "system-defined",
-  "systemLists": "System lists",
-  "unstarList": "Unstar list",
+  "systemLists": "Listes systemes",
+  "unstarList": "Enlever comme favori",
   "updated": "Updated",
   "userDefined": "user-defined"
 }