@kenyaemr/esm-service-queues-app 7.0.3-pre.89 → 7.0.3-pre.94

package/src/patient-search/search-results.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 *;
 
 .patientChart {
   text-decoration: none;
@@ -25,9 +25,9 @@
 }
 
 .patientAvatar {
-  width: spacing.$spacing-11;
-  height: spacing.$spacing-11;
-  margin: spacing.$spacing-05 spacing.$spacing-05 0;
+  width: layout.$spacing-11;
+  height: layout.$spacing-11;
+  margin: layout.$spacing-05 layout.$spacing-05 0;
   border-radius: 1px;
 }
 
@@ -35,7 +35,7 @@
   width: 100%;
   display: flex;
   flex-flow: column wrap;
-  margin: spacing.$spacing-05 0;
+  margin: layout.$spacing-05 0;
   cursor: pointer;
 }
 
@@ -51,8 +51,8 @@
 }
 
 .actionsContainer {
-  padding-top: spacing.$spacing-03;
-  margin-top: spacing.$spacing-05;
+  padding-top: layout.$spacing-03;
+  margin-top: layout.$spacing-05;
 }
 
 .sortingCriteriaSelect {
@@ -67,7 +67,7 @@
   }
 
   :global(.cds--list-box__menu-icon) {
-    height: spacing.$spacing-05;
+    height: layout.$spacing-05;
   }
 
   :global(.cds--list-box__menu) {
@@ -75,6 +75,6 @@
   }
 
   :global(.cds--label) {
-    margin-right: spacing.$spacing-02;
+    margin-right: layout.$spacing-02;
   }
 }

package/src/patient-search/search-results.test.tsx

@@ -3,15 +3,7 @@ import { screen, render } from '@testing-library/react';
 import { age } from '@openmrs/esm-framework';
 import SearchResults from './search-results.component';
 
-const mockAge = age as jest.Mock;
-
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    age: jest.fn(),
-  };
-});
+const mockAge = jest.mocked(age);
 
 const patients = [
   {
@@ -63,7 +55,7 @@ const mockToggleSearchType = jest.fn();
 
 describe('Search Results', () => {
   it('should search results page', () => {
-    mockAge.mockReturnValue(35);
+    mockAge.mockReturnValue('35');
     renderSearchResults();
     expect(screen.getByText(/John Smith/)).toBeInTheDocument();
     expect(screen.getByText(/35/)).toBeInTheDocument();

package/src/patient-search/visit-form/visit-form.scss

@@ -1,25 +1,24 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
 @use '@carbon/layout';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
   flex: 1;
 
   & section {
-    margin: spacing.$spacing-05 spacing.$spacing-05 spacing.$spacing-05;
+    margin: layout.$spacing-05 layout.$spacing-05 layout.$spacing-05;
   }
 }
 
 .heading {
   @include type.type-style('heading-03');
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
 }
 
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .dateTimeSection {
@@ -27,7 +26,7 @@
 }
 
 .radioButton {
-  margin: spacing.$spacing-05 0;
+  margin: layout.$spacing-05 0;
 }
 
 .headerGridRow {
@@ -38,7 +37,7 @@
 .dataGridRow {
   display: grid;
   grid-template-columns: 50% 10% 1fr;
-  margin: spacing.$spacing-03 spacing.$spacing-05;
+  margin: layout.$spacing-03 layout.$spacing-05;
   width: 100%;
 }
 
@@ -50,7 +49,7 @@
 }
 
 .button {
-  height: 4rem;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -58,14 +57,14 @@
 }
 
 .tabletButtons {
-  padding: spacing.$spacing-06 spacing.$spacing-05;
-  margin-top: spacing.$spacing-10;
+  padding: layout.$spacing-06 layout.$spacing-05;
+  margin-top: layout.$spacing-10;
   background-color: $ui-02;
 }
 
 .desktopButtons {
-  padding: 0rem;
-  margin-top: spacing.$spacing-10;
+  padding: 0;
+  margin-top: layout.$spacing-10;
 }
 
 @media screen and (max-width: 600px) {

package/src/patient-search/visit-form/visit-type-selector.component.tsx

@@ -1,23 +1,21 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import classNames from 'classnames';
-import debounce from 'lodash-es/debounce';
 import isEmpty from 'lodash-es/isEmpty';
 import { useTranslation } from 'react-i18next';
-import { Layer, Search, RadioButtonGroup, RadioButton, StructuredListSkeleton, Tile } from '@carbon/react';
 import {
-  ResponsiveWrapper,
-  reportError,
-  useDebounce,
-  useLayoutType,
-  usePagination,
-  useVisitTypes,
-  type VisitType,
-} from '@openmrs/esm-framework';
+  InlineNotification,
+  Layer,
+  RadioButton,
+  RadioButtonGroup,
+  Search,
+  StructuredListSkeleton,
+  Tile,
+} from '@carbon/react';
+import { ResponsiveWrapper, useDebounce, useLayoutType, useVisitTypes, type VisitType } from '@openmrs/esm-framework';
 import EmptyDataIllustration from '../empty-data-illustration.component';
 import styles from './visit-type-selector.scss';
 import { useRecommendedVisitTypes } from '../hooks/useRecommendedVisitTypes';
 import { type PatientProgram } from '../../types';
-import { InlineNotification } from '@carbon/react';
 
 export interface VisitTypeSelectorProps {
   onChange: (event) => void;

package/src/patient-search/visit-form/visit-type-selector.scss

@@ -1,9 +1,9 @@
-@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 *;
 
 .visitTypeOverviewWrapper {
-  margin: spacing.$spacing-05 0rem;
+  margin: layout.$spacing-05 0;
   border: 0.0625rem solid $grey-2;
 }
 
@@ -31,22 +31,22 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-top: spacing.$spacing-03;
-  min-height: spacing.$spacing-10;
+  margin-top: layout.$spacing-03;
+  min-height: layout.$spacing-10;
   width: 100%;
   @include type.type-style('body-compact-01');
 }
 
 .radioButton {
-  padding: spacing.$spacing-02 spacing.$spacing-05;
-  margin: spacing.$spacing-03 0;
+  padding: layout.$spacing-02 layout.$spacing-05;
+  margin: layout.$spacing-03 0;
 }
 
 .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;
 }
 
 .desktopHeading {
@@ -67,12 +67,12 @@
 .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 
   h4:after {
     content: '';
     display: block;
-    width: 2rem;
+    width: layout.$spacing-07;
     padding-top: 0.188rem;
     border-bottom: 0.375rem solid var(--brand-03);
   }
@@ -81,7 +81,7 @@
 .heading:after {
   content: '';
   display: block;
-  width: 2rem;
+  width: layout.$spacing-07;
   padding-top: 0.188rem;
   border-bottom: 0.375rem solid var(--brand-03);
 }

package/src/patient-search/visit-form/visit-type-selector.test.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable testing-library/no-node-access */
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { VisitTypeSelector } from './visit-type-selector.component';
 import { render, screen } from '@testing-library/react';
-import { mockPatient, mockVisitTypes } from '__mocks__';
+import { mockVisitTypes } from '__mocks__';
 import { useVisitTypes } from '@openmrs/esm-framework';
+import { VisitTypeSelector } from './visit-type-selector.component';
 
 const mockUseVisitTypes = jest.mocked(useVisitTypes);
 
@@ -28,7 +29,7 @@ describe('VisitTypeSelector', () => {
   it('renders the first 5 visit types with a search bar if there are more than 5', () => {
     render(<VisitTypeSelector onChange={() => {}} />);
 
-    expect(screen.queryByRole('searchbox')).toBeInTheDocument();
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
 
     mockVisitTypes.slice(0, 5).forEach((visitType) => {
       const radioButton = screen.getByLabelText(visitType.display);

package/src/patient-search/visit-form-queue-fields/visit-form-queue-fields.scss

@@ -1,8 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '@carbon/styles/scss/spacing';
-
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .sectionTitle {
   @include type.type-style('heading-compact-02');

package/src/patient-search/visit-form-queue-fields/visit-form-queue-fields.test.tsx

@@ -1,17 +1,15 @@
+/* eslint-disable testing-library/no-node-access */
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig, useLayoutType, useSession } from '@openmrs/esm-framework';
+import { configSchema, type ConfigObject } from '../../config-schema';
+import { mockSession } from '__mocks__';
 import VisitFormQueueFields from './visit-form-queue-fields.component';
-import { defineConfigSchema, useLayoutType, useSession } from '@openmrs/esm-framework';
-import { configSchema } from '../../config-schema';
 
-defineConfigSchema('@openmrs/esm-service-queues-app', configSchema);
-
-const mockUseLayoutType = useLayoutType as jest.Mock;
-mockUseLayoutType.mockReturnValue('small-desktop');
-
-const mockUseSession = useSession as jest.Mock;
-mockUseSession.mockReturnValue({ sessionLocation: { uuid: '1' } });
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
+const mockUseLayoutType = jest.mocked(useLayoutType);
+const mockUseSession = jest.mocked(useSession);
 
 jest.mock('../hooks/useQueueLocations', () => ({
   useQueueLocations: jest.fn(() => ({
@@ -35,6 +33,14 @@ jest.mock('../../hooks/useQueues', () => {
 });
 
 describe('VisitFormQueueFields', () => {
+  beforeEach(() => {
+    mockUseLayoutType.mockReturnValue('small-desktop');
+    mockUseSession.mockReturnValue(mockSession.data);
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+    });
+  });
+
   it('renders the form fields and returns the set values', async () => {
     const user = userEvent.setup();
     const setFormFields = jest.fn();

package/src/queue-entry-table-components/edit-entry.scss

@@ -1,4 +1,4 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .editIcon {
   background-color: transparent;

package/src/queue-entry-table-components/queue-priority.scss

@@ -1,9 +1,8 @@
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tag {
-  margin: 0.25rem 0;
+  margin: layout.$spacing-02 0;
   white-space: nowrap;
 }
 

package/src/queue-entry-table-components/transition-entry.scss

@@ -1,4 +1,4 @@
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .callBtn:hover {
   background-color: transparent;

package/src/queue-patient-linelists/queue-linelist-base-table.scss

@@ -1,10 +1,9 @@
-@use '@carbon/styles/scss/colors';
-@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 *;
 
 .container {
-  padding-bottom: spacing.$spacing-07;
+  padding-bottom: layout.$spacing-07;
   background-color: $ui-01;
 }
 
@@ -16,8 +15,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: spacing.$spacing-05;
-  margin: spacing.$spacing-03;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-03;
   border-top: 1px solid $text-03;
   border-bottom: 1px solid $text-03;
 }
@@ -25,19 +24,19 @@
 .title {
   @include type.type-style('body-compact-02');
 
-  margin: 0 spacing.$spacing-04 spacing.$spacing-04;
+  margin: 0 layout.$spacing-04 layout.$spacing-04;
 }
 
 .subTitle {
   @include type.type-style('label-01');
   color: $text-02;
-  margin: spacing.$spacing-01;
-  margin-left: spacing.$spacing-04;
+  margin: layout.$spacing-01;
+  margin-left: layout.$spacing-04;
 }
 
 .filterTile {
   border-bottom: 1px solid $text-03;
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
   background-color: $ui-01;
 }
 
@@ -46,7 +45,7 @@
 }
 
 .tableContainer {
-  margin: 0 spacing.$spacing-05;
+  margin: 0 layout.$spacing-05;
   padding: 0;
 }
 
@@ -66,12 +65,12 @@
   }
 
   tr {
-    width: spacing.$spacing-01;
+    width: layout.$spacing-01;
   }
 
   .toolbarContent {
-    height: spacing.$spacing-07;
-    margin-bottom: spacing.$spacing-02;
+    height: layout.$spacing-07;
+    margin-bottom: layout.$spacing-02;
   }
 }
 
@@ -84,7 +83,7 @@
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
-  padding: spacing.$spacing-11 0;
+  padding: layout.$spacing-11 0;
 }
 
 .tile {
@@ -101,7 +100,7 @@
 .content {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .helper {

package/src/queue-patient-linelists/queue-linelist-base-table.test.tsx

@@ -38,7 +38,7 @@ const tableHeaders = [
   },
 ];
 
-const testProps = {
+const defaultProps = {
   title: 'Scheduled appointments',
   patientData: mockMappedAppointmentsData.data,
   headers: tableHeaders,
@@ -46,13 +46,13 @@ const testProps = {
   isLoading: false,
 };
 
-describe('QueuePatientBaseTable: ', () => {
+describe('QueuePatientBaseTable', () => {
   it('renders a tabular overview of appointments data when available', async () => {
     const user = userEvent.setup();
 
     renderQueueBaseTable();
 
-    expect(screen.queryByText(/scheduled appointments/i)).toBeInTheDocument();
+    expect(screen.getByText(/scheduled appointments/i)).toBeInTheDocument();
     const expectedColumnHeaders = [/name/, /return date/, /gender/, /age/, /visit type/, /phone number/];
     expectedColumnHeaders.forEach((header) => {
       expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
@@ -70,7 +70,7 @@ describe('QueuePatientBaseTable: ', () => {
     const searchBox = screen.getByRole('searchbox');
     await user.type(searchBox, 'John');
 
-    expect(screen.queryByText(/john wilson/i)).toBeInTheDocument();
+    expect(screen.getByText(/john wilson/i)).toBeInTheDocument();
     expect(screen.queryByText(/eric test ric/i)).not.toBeInTheDocument();
 
     await user.clear(searchBox);
@@ -80,14 +80,13 @@ describe('QueuePatientBaseTable: ', () => {
   });
 
   it('renders an empty state view if data is unavailable', async () => {
-    testProps.patientData = [];
-    renderQueueBaseTable();
+    renderQueueBaseTable({ patientData: [] });
 
     expect(screen.getByText(/scheduled appointments/i)).toBeInTheDocument();
     expect(screen.getByText(/no patients to display/i)).toBeInTheDocument();
   });
 });
 
-function renderQueueBaseTable() {
-  renderWithSwr(<QueuePatientBaseTable {...testProps} />);
+function renderQueueBaseTable(props = {}) {
+  renderWithSwr(<QueuePatientBaseTable {...defaultProps} {...props} />);
 }

package/src/queue-patient-linelists/queue-linelist-filter.scss

@@ -1,30 +1,30 @@
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .wrapper {
   background-color: $ui-02;
-  padding: spacing.$spacing-06;
+  padding: layout.$spacing-06;
 }
 
 .grid {
-  padding: 0 spacing.$spacing-06 spacing.$spacing-03;
+  padding: 0 layout.$spacing-06 layout.$spacing-03;
   background-color: $ui-01;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .heading {
   color: $text-02;
   @include type.type-style('heading-compact-02');
-  margin: spacing.$spacing-04 0 spacing.$spacing-04;
+  margin: layout.$spacing-04 0 layout.$spacing-04;
 }
 
 .radioButton {
-  margin-top: spacing.$spacing-03;
+  margin-top: layout.$spacing-03;
 }
 
 .button {
-  height: spacing.$spacing-10;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -32,20 +32,20 @@
 }
 
 .numberInputs {
-  margin-top: spacing.$spacing-02;
+  margin-top: layout.$spacing-02;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
 .tablet {
-  padding: spacing.$spacing-06 spacing.$spacing-05;
+  padding: layout.$spacing-06 layout.$spacing-05;
   background-color: $ui-02;
 }
 
 .desktop {
-  padding: 0rem;
-  margin-top: spacing.$spacing-05;
+  padding: 0;
+  margin-top: layout.$spacing-05;
 }
 
 .form {

package/src/queue-patient-linelists/queue-linelist-filter.test.tsx

@@ -1,23 +1,26 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import { useLayoutType, useVisitTypes } from '@openmrs/esm-framework';
 import { mockVisitTypes } from '__mocks__';
 import QueueLinelistFilter from './queue-linelist-filter.workspace';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  useLayoutType: jest.fn(() => 'tablet'),
-  useVisitTypes: jest.fn(() => mockVisitTypes),
-  toOpemrsIsoString: jest.fn(),
-}));
+const mockUseLayoutType = jest.mocked(useLayoutType);
+const mockUseVisitTypes = jest.mocked(useVisitTypes);
 
 const workspaceProps = {
   closeWorkspace: jest.fn(),
   promptBeforeClosing: jest.fn(),
   closeWorkspaceWithSavedChanges: jest.fn(),
+  setTitle: jest.fn(),
 };
 
 describe('QueueLinelistFilter', () => {
+  beforeEach(() => {
+    mockUseLayoutType.mockReturnValue('tablet');
+    mockUseVisitTypes.mockReturnValue(mockVisitTypes);
+  });
+
   it('renders the form with filter elements', () => {
     render(<QueueLinelistFilter {...workspaceProps} />);
 

package/src/queue-patient-linelists/queue-linelist.resource.ts

@@ -12,7 +12,7 @@ export function useAppointments() {
   return {
     appointmentQueueEntries: data ? data?.data : [],
     isLoading,
-    isError: error,
+    error,
     isValidating,
   };
 }
@@ -25,7 +25,7 @@ export function useCheckedInAppointments() {
   return {
     checkedInAppointments: data ? data?.data : [],
     isLoading,
-    isError: error,
+    error,
     isValidating,
   };
 }
@@ -41,7 +41,7 @@ export function useProviders() {
   return {
     providers: data ? data.data?.results : [],
     isLoading,
-    isError: error,
+    error,
     isValidating,
   };
 }
@@ -77,7 +77,7 @@ export function usePatientAppointments(patientUuid: string, startDate) {
 
   return {
     upcomingAppointment: upcomingAppointments ? upcomingAppointments?.[0] : null,
-    isError: error,
+    error,
     isLoading,
     isValidating,
   };