@kenyaemr/esm-patient-list-management-app 7.0.3-pre.88 → 7.0.3-pre.94

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"patient-lists-dashboard-link","component":"patientListDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"patient-lists","slot":"patient-lists-dashboard-slot","title":"Patient lists"}},{"component":"root","name":"patient-lists-dashboard","slot":"patient-lists-dashboard-slot"},{"name":"list-details-table","component":"listDetailsTable"},{"name":"add-patient-to-patient-list-modal","component":"addPatientToListModal"},{"name":"add-patient-to-patient-list-button","slot":"patient-actions-slot","component":"addPatientToPatientListMenuItem"}],"version":"7.0.3-pre.88"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"patient-lists-dashboard-link","component":"patientListDashboardLink","slot":"homepage-dashboard-slot","meta":{"name":"patient-lists","slot":"patient-lists-dashboard-slot","title":"Patient lists"}},{"component":"root","name":"patient-lists-dashboard","slot":"patient-lists-dashboard-slot"},{"name":"list-details-table","component":"listDetailsTable"},{"name":"add-patient-to-patient-list-modal","component":"addPatientToListModal"},{"name":"add-patient-to-patient-list-button","slot":"patient-actions-slot","component":"addPatientToPatientListMenuItem"}],"version":"7.0.3-pre.94"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-list-management-app",
-  "version": "7.0.3-pre.88",
+  "version": "7.0.3-pre.94",
   "description": "Microfrontend for managing patient lists in O3",
   "browser": "dist/kenyaemr-esm-patient-list-management-app.js",
   "main": "src/index.ts",

package/src/add-patient/add-patient.scss

@@ -1,4 +1,5 @@
-@import '../style.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .modalContent {
   width: 100%;
@@ -6,11 +7,11 @@
 }
 
 .modalHeader {
-  margin: 1rem;
+  margin: layout.$spacing-05;
 }
 
 .patientListList {
-  padding: 0 1rem;
+  padding: 0 layout.$spacing-05;
 }
 
 .checkbox {
@@ -32,8 +33,8 @@
 .itemsCountDisplay {
   position: absolute;
   top: 0;
-  left: 1rem;
-  height: 3rem;
+  left: layout.$spacing-05;
+  height: layout.$spacing-09;
   display: flex;
   align-items: center;
   color: #525252;
@@ -49,3 +50,11 @@
   justify-content: space-between;
   align-items: flex-start;
 }
+
+.productiveHeading03 {
+  @include type.type-style('heading-03');
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}

package/src/add-patient-to-patient-list-menu-item.test.tsx

@@ -2,13 +2,11 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { showModal } from '@openmrs/esm-framework';
+import { mockPatient } from '__mocks__';
 import AddPatientToPatientListMenuItem from './add-patient-to-patient-list-menu-item.component';
 
-const mockedShowModal = showModal as jest.Mock;
-
-jest.mock('@openmrs/esm-framework');
-
-const patientUuid = '6baa7963-68ea-497e-b258-6fb82382bd07';
+const patientUuid = mockPatient.uuid;
+const mockShowModal = jest.mocked(showModal);
 
 describe('AddPatientToPatientListMenuItem', () => {
   it('renders the button with the correct title', () => {
@@ -28,6 +26,6 @@ describe('AddPatientToPatientListMenuItem', () => {
 
     await user.click(button);
 
-    expect(mockedShowModal).toHaveBeenCalledWith('add-patient-to-patient-list-modal', expect.any(Object));
+    expect(mockShowModal).toHaveBeenCalledWith('add-patient-to-patient-list-modal', expect.any(Object));
   });
 });

package/src/create-edit-patient-list/create-edit-patient-list.scss

@@ -1,18 +1,17 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../style.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .header {
   @include type.type-style('heading-compact-02');
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .input {
-  margin-top: spacing.$spacing-07;
+  margin-top: layout.$spacing-07;
 }
 
 .button {
-  height: 4rem;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;

package/src/empty-state/empty-state.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tile {
   text-align: center;
@@ -8,14 +8,14 @@
 }
 
 .illo {
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
 }
 
 .content {
   @include type.type-style('heading-compact-01');
   color: $text-02;
-  margin-top: spacing.$spacing-05;
-  margin-bottom: spacing.$spacing-03;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
 }
 
 .actionText {

package/src/error-state/error-state.scss

@@ -38,7 +38,7 @@
   h4:after {
     content: '';
     display: block;
-    width: 2rem;
+    width: layout.$spacing-07;
     padding-top: 0.188rem;
     border-bottom: 0.375rem solid var(--brand-03);
   }

package/src/header/header.component.tsx

@@ -36,6 +36,7 @@ const Header: React.FC = () => {
         </div>
         <Button
           className={styles.newListButton}
+          data-openmrs-role="New List"
           kind="ghost"
           iconDescription="Add"
           renderIcon={(props) => <Add {...props} size={16} />}

package/src/header/header.scss

@@ -1,11 +1,11 @@
-@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 *;
 
 .patientListHeader {
   @include type.type-style('body-compact-02');
   color: $text-02;
-  height: spacing.$spacing-12;
+  height: layout.$spacing-12;
   display: flex;
   justify-content: space-between;
 }
@@ -21,7 +21,7 @@
   display: flex;
   flex-direction: column;
   color: $text-02;
-  padding: 1rem 0;
+  padding: layout.$spacing-05 0;
   justify-content: space-between;
 }
 
@@ -29,10 +29,10 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-right: 1rem;
+  margin-right: layout.$spacing-05;
 
   svg {
-    margin-right: 0.5rem;
+    margin-right: layout.$spacing-03;
   }
 }
 
@@ -42,7 +42,7 @@
 
 .pageLabels {
   p:first-of-type {
-    margin-bottom: 0.25rem;
+    margin-bottom: layout.$spacing-02;
   }
 }
 

package/src/list-details/list-details.scss

@@ -1,6 +1,6 @@
-@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 *;
 
 .container {
   display: flex;
@@ -13,7 +13,7 @@
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid $ui-03;
-  padding: spacing.$spacing-04 spacing.$spacing-05;
+  padding: layout.$spacing-04 layout.$spacing-05;
   padding-right: 0;
   background-color: $ui-01;
 }
@@ -21,11 +21,11 @@
 .overflowMenu {
   display: flex;
   align-items: flex-start;
-  margin-top: spacing.$spacing-04;
+  margin-top: layout.$spacing-04;
 }
 
 .marginTop {
-  margin-top: spacing.$spacing-03;
+  margin-top: layout.$spacing-03;
 }
 
 .menuItem {
@@ -38,10 +38,30 @@
 }
 
 .tableContainer {
-  padding: 0 spacing.$spacing-05 spacing.$spacing-05;
+  padding: 0 layout.$spacing-05 layout.$spacing-05;
   height: calc(100vh - 11rem);
 }
 
 .menuItem {
   max-width: none;
 }
+
+.productiveHeading03 {
+  @include type.type-style('heading-03');
+}
+
+.bodyShort01 {
+  @include type.type-style('body-compact-01');
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.text02 {
+  color: $text-02;
+}
+
+.label01 {
+  @include type.type-style('label-01');
+}

package/src/list-details/list-details.test.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { OpenmrsCohortMember, OpenmrsCohort } from '../api/types';
 import { usePatientListDetails, usePatientListMembers } from '../api/hooks';
 import { deletePatientList } from '../api/api-remote';
 import { getByTextWithMarkup } from 'tools';
 import ListDetails from './list-details.component';
 
-const mockedUsePatientListDetails = usePatientListDetails as jest.Mock;
-const mockedUsePatientListMembers = usePatientListMembers as jest.Mock;
-const mockedDeletePatientList = deletePatientList as jest.Mock;
+const mockUsePatientListDetails = jest.mocked(usePatientListDetails);
+const mockUsePatientListMembers = jest.mocked(usePatientListMembers);
+const mockDeletePatientList = jest.mocked(deletePatientList);
 
 jest.mock('../api/hooks', () => ({
   usePatientListDetails: jest.fn(),
@@ -17,22 +18,18 @@ jest.mock('../api/hooks', () => ({
 
 jest.mock('../api/api-remote');
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  showSnackbar: jest.fn(),
-  navigate: jest.fn(),
-  ExtensionSlot: jest.fn(),
-}));
-
-const mockedPatientListDetails = {
+const mockPatientListDetails = {
   name: 'Test Patient List',
   description: 'This is a test patient list',
   size: 1,
   startDate: '2023-08-14',
-};
+} as OpenmrsCohort;
 
-const mockedPatientListMembers = [
+const mockPatientListMembers = [
   {
+    name: 'MINDSCAPE Cohort',
+    description:
+      'Mental Illness and Neuroimaging Study for Personalized Assessment and Care Evaluation (develops personalized treatment plans for mental illness based on brain imaging and individual factors)',
     patient: {
       person: {
         display: 'John Doe',
@@ -45,22 +42,31 @@ const mockedPatientListMembers = [
       ],
       uuid: '7cd38a6d-377e-491b-8284-b04cf8b8c6d8',
     },
+    attributes: [],
+    endDate: null,
     startDate: '2023-08-10',
     uuid: 'ce7d26fa-e1b4-4e78-a1f5-3a7a5de9c0db',
+    voided: false,
   },
-];
+] as OpenmrsCohortMember[];
 
 describe('ListDetails', () => {
   beforeEach(() => {
-    mockedUsePatientListDetails.mockReturnValue({
-      listDetails: mockedPatientListDetails,
+    mockUsePatientListDetails.mockReturnValue({
+      listDetails: mockPatientListDetails,
+      error: null,
+      isLoading: false,
+      mutateListDetails: jest.fn().mockResolvedValue({}),
     });
 
-    mockedUsePatientListMembers.mockReturnValue({
-      listMembers: mockedPatientListMembers,
+    mockUsePatientListMembers.mockReturnValue({
+      listMembers: mockPatientListMembers,
+      isLoadingListMembers: false,
+      error: null,
+      mutateListMembers: jest.fn().mockResolvedValue({}),
     });
 
-    mockedDeletePatientList.mockResolvedValue({});
+    mockDeletePatientList.mockResolvedValue({});
   });
 
   it('renders patient list details page', async () => {
@@ -77,8 +83,11 @@ describe('ListDetails', () => {
   });
 
   it('renders an empty state view if a list has no patients', async () => {
-    mockedUsePatientListMembers.mockReturnValue({
+    mockUsePatientListMembers.mockReturnValue({
       listMembers: [],
+      isLoadingListMembers: false,
+      error: null,
+      mutateListMembers: jest.fn().mockResolvedValue({}),
     });
 
     render(<ListDetails />);
@@ -87,12 +96,12 @@ describe('ListDetails', () => {
     expect(screen.getByText(/there are no patients in this list/i)).toBeInTheDocument();
   });
 
-  it('opens overlay with a form when the "Edit name or description" button is clicked', () => {
+  it('opens overlay with a form when the "Edit name or description" button is clicked', async () => {
     render(<ListDetails />);
 
-    userEvent.click(screen.getByText('Actions'));
+    await userEvent.click(screen.getByText('Actions'));
     const editBtn = screen.getByText('Edit name or description');
-    userEvent.click(editBtn);
+    await userEvent.click(editBtn);
   });
 
   it('deletes patient list and navigates back to the list page', async () => {
@@ -105,7 +114,8 @@ describe('ListDetails', () => {
     expect(screen.getByText('Delete')).toBeInTheDocument();
     expect(screen.getByText('Cancel')).toBeInTheDocument();
 
-    expect(screen.getByText('Delete').closest('button')).not.toHaveAttribute('disabled');
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('Delete').closest('button')).toBeEnabled();
 
     await userEvent.click(screen.getByText('Cancel'));
   });

package/src/list-details-table/list-details-table.component.tsx

@@ -388,7 +388,7 @@ const ListDetailsTable: React.FC<ListDetailsTableProps> = ({
     <>
       <BackButton />
       <Layer>
-        <Tile className={styles.tile}>
+        <Tile className={styles.tile} data-openmrs-role="Patient Empty tile">
           <div className={styles.illo}>
             <EmptyDataIllustration />
           </div>

package/src/list-details-table/list-details-table.scss

@@ -1,11 +1,11 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .searchContainer {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
   background-color: #ededed;
 }
 
@@ -16,7 +16,7 @@
 
 .searchOverrides {
   width: 100%;
-  max-width: 250px;
+  max-width: 15.625rem;
   border: 0px !important;
 }
 
@@ -29,7 +29,7 @@ div.tableOverride > div {
 }
 
 div#table-tool-bar {
-  margin-top: spacing.$spacing-09;
+  margin-top: layout.$spacing-09;
 }
 
 .table {
@@ -38,12 +38,12 @@ div#table-tool-bar {
 
 .desktopRow,
 .desktopHeader {
-  height: spacing.$spacing-07 !important;
+  height: layout.$spacing-07 !important;
 }
 
 .tabletRow,
 .tabletHeader {
-  height: spacing.$spacing-09 !important;
+  height: layout.$spacing-09 !important;
 }
 
 .paginationOverride {
@@ -65,32 +65,32 @@ div#table-tool-bar {
 
 .dataTableSkeleton {
   background-color: transparent;
-  padding: 0rem;
+  padding: 0;
 }
 
 .skeletonContainer {
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
 }
 
 .tile {
   text-align: center;
   border: 1px solid $ui-03;
-  margin: spacing.$spacing-05 0;
+  margin: layout.$spacing-05 0;
 }
 
 .illo {
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
 }
 
 .content {
   @include type.type-style('heading-compact-01');
   color: $text-02;
-  margin-top: spacing.$spacing-05;
-  margin-bottom: spacing.$spacing-03;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
 }
 
 .backButton {
-  padding: spacing.$spacing-03 0;
+  padding: layout.$spacing-03 0;
   max-width: fit-content;
 
   a {
@@ -103,7 +103,7 @@ div#table-tool-bar {
 
     svg {
       order: 1;
-      margin: 0 spacing.$spacing-03;
+      margin: 0 layout.$spacing-03;
     }
 
     span {
@@ -121,7 +121,7 @@ div#table-tool-bar {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: spacing.$spacing-09 !important;
+  padding: layout.$spacing-09 !important;
   text-align: center;
   border: 1px solid $ui-03;
   background-color: white;
@@ -134,7 +134,7 @@ div#table-tool-bar {
 .filterEmptyStateContent {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: 0.5rem;
+  margin-bottom: layout.$spacing-03;
 }
 
 .filterEmptyStateHelper {

package/src/list-details-table/list-details-table.test.tsx

@@ -2,12 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ListDetailsTable from './list-details-table.component';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  isDesktop: jest.fn(() => true),
-}));
-
-describe('ListDetailsTable Component', () => {
+describe('ListDetailsTable', () => {
   const patients = [
     {
       identifier: '123abced',
@@ -48,12 +43,12 @@ describe('ListDetailsTable Component', () => {
     },
   ];
 
-  const mockedOnChange = jest.fn();
+  const mockOnChange = jest.fn();
 
   let pagination = {
     usePagination: true,
     currentPage: 1,
-    onChange: mockedOnChange,
+    onChange: mockOnChange,
     pageSize: 10,
     totalItems: 100,
     pagesUnknown: false,

package/src/lists-dashboard/lists-dashboard.scss

@@ -1,10 +1,9 @@
-@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 *;
 
 .container {
-  margin: 1rem 0;
+  margin: layout.$spacing-05 0;
 }
 
 .dashboardContainer {
@@ -16,7 +15,7 @@
   height: 100%;
   width: 100%;
   background-color: $ui-02;
-  height: calc(100vh - 3rem);
+  height: calc(100vh - layout.$spacing-09);
 }
 
 .tabs {
@@ -24,7 +23,7 @@
 }
 
 .tablist {
-  padding: 0 spacing.$spacing-05;
+  padding: 0 layout.$spacing-05;
 }
 
 .tab {
@@ -46,7 +45,7 @@
 }
 
 .listsTableContainer {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   background-color: $ui-01;
   height: calc(100vh - 12rem);
 }
@@ -62,12 +61,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;
 }
 
 // Search Overlay
@@ -84,7 +83,7 @@
   grid-row: 2 / 4;
   grid-column: 1 / 2;
   background-color: $ui-01;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
 }
 
 // Results Overlay
@@ -93,11 +92,11 @@
   @include type.type-style('body-compact-01');
   color: $text-02;
   border-bottom: solid 1px #e0e0e0;
-  padding: spacing.$spacing-04 0;
+  padding: layout.$spacing-04 0;
 }
 
 .patientListResultsTableContainer {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .starButton {

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

@@ -2,13 +2,13 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { useLocation } from 'react-router-dom';
-import { openmrsFetch, restBaseUrl, useSession } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl, useSession } from '@openmrs/esm-framework';
 import { mockSession } from '__mocks__';
 import ListsDashboard from './lists-dashboard.component';
 
-const mockedUseLocation = jest.mocked(useLocation);
-const mockedUseSession = jest.mocked(useSession);
-const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockUseLocation = jest.mocked(useLocation);
+const mockUseSession = jest.mocked(useSession);
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -17,7 +17,7 @@ jest.mock('react-router-dom', () => ({
 
 describe('ListsDashboard', () => {
   beforeEach(() => {
-    mockedUseLocation.mockReturnValue({
+    mockUseLocation.mockReturnValue({
       pathname: '/',
       search: '',
       hash: '',
@@ -25,9 +25,9 @@ describe('ListsDashboard', () => {
       key: 'default',
     });
 
-    mockedUseSession.mockReturnValue(mockSession.data);
+    mockUseSession.mockReturnValue(mockSession.data);
 
-    mockedOpenmrsFetch.mockResolvedValue({
+    mockOpenmrsFetch.mockResolvedValue({
       data: {
         results: [
           {
@@ -86,7 +86,7 @@ describe('ListsDashboard', () => {
           },
         ],
       },
-    });
+    } as unknown as FetchResponse);
   });
 
   it('renders the patient list page UI correctly', async () => {