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

package/src/past-visit/past-visit-details/past-visit-summary.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 *;
 
 .medicationContainer {
-  margin-bottom: spacing.$spacing-06;
+  margin-bottom: layout.$spacing-06;
 }
 
 .medicationRecord {
@@ -28,7 +28,7 @@
 
 .dosage {
   @include type.type-style('heading-compact-01');
-  margin-left: spacing.$spacing-03;
+  margin-left: layout.$spacing-03;
 }
 
 .date {
@@ -39,13 +39,13 @@
 .metadata {
   @include type.type-style('label-01');
   color: $text-02;
-  margin: spacing.$spacing-02 0;
+  margin: layout.$spacing-02 0;
 }
 
 .label01 {
   @include type.type-style('label-01');
   color: $text-02;
-  margin: spacing.$spacing-02 0;
+  margin: layout.$spacing-02 0;
 }
 
 .notesSubHeading {
@@ -54,5 +54,5 @@
 }
 
 .notesContainer {
-  margin: spacing.$spacing-05 0 spacing.$spacing-05;
+  margin: layout.$spacing-05 0 layout.$spacing-05;
 }

package/src/past-visit/past-visit.component.tsx

@@ -12,7 +12,7 @@ interface PastVisitProps {
 
 const PastVisit: React.FC<PastVisitProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
-  const { visits, isError, isLoading } = usePastVisits(patientUuid);
+  const { visits, isLoading } = usePastVisits(patientUuid);
 
   if (isLoading) {
     return <StructuredListSkeleton role="progressbar" />;

package/src/past-visit/past-visit.resource.ts

@@ -25,7 +25,7 @@ export function usePastVisits(patientUuid: string) {
 
   return {
     visits: data ? previousVisit : null,
-    isError: error,
+    error,
     isLoading,
     isValidating,
   };

package/src/past-visit/past-visit.scss

@@ -1,9 +1,9 @@
-@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 {
-  margin-top: spacing.$spacing-03;
+  margin-top: layout.$spacing-03;
 }
 
 .bodyShort02 {
@@ -17,7 +17,7 @@
 .date {
   @include type.type-style('label-01');
   color: $text-02;
-  margin: spacing.$spacing-03 0rem spacing.$spacing-03;
+  margin: layout.$spacing-03 0 layout.$spacing-03;
 }
 
 .visitType {
@@ -26,19 +26,19 @@
 
 .container {
   background-color: $ui-background;
-  padding: spacing.$spacing-03;
-  margin: spacing.$spacing-03 0rem spacing.$spacing-03;
+  padding: layout.$spacing-03;
+  margin: layout.$spacing-03 0 layout.$spacing-03;
   width: 100%;
 }
 
 .tabs > :global(.cds--tab-content) {
-  padding: spacing.$spacing-05 0rem !important;
+  padding: layout.$spacing-05 0 !important;
 }
 
 .header::after {
   content: '';
   display: block;
-  width: spacing.$spacing-07;
+  width: layout.$spacing-07;
   padding-top: 0.188rem;
   border-bottom: 0.375rem solid var(--brand-03);
 }
@@ -47,7 +47,7 @@
   background-color: $ui-background;
   display: grid;
   grid-template-columns: max-content auto;
-  min-height: spacing.$spacing-13;
+  min-height: layout.$spacing-13;
 }
 
 .flexSections {
@@ -55,10 +55,10 @@
 }
 
 .verticalTabs {
-  margin: spacing.$spacing-04 0;
+  margin: layout.$spacing-04 0;
 
   &:global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
-    margin-left: 0rem;
+    margin-left: 0;
   }
 
   > ul {
@@ -76,13 +76,13 @@
 
 .desktopTabs {
   button {
-    height: spacing.$spacing-07;
+    height: layout.$spacing-07;
   }
 }
 
 .tabletTabs {
   button {
-    height: spacing.$spacing-09;
+    height: layout.$spacing-09;
   }
 }
 
@@ -99,13 +99,13 @@
     border-left: 3px solid var(--brand-03);
     border-bottom: none;
     font-weight: 600;
-    margin-left: 0rem !important;
+    margin-left: 0 !important;
   }
 
   &[aria-selected='false'] {
     border-bottom: none;
     border-left: 2px solid $ui-03;
-    margin-left: 0rem !important;
+    margin-left: 0 !important;
   }
 }
 
@@ -117,7 +117,7 @@
 
 .tabContent {
   border-top: 1px solid $ui-03;
-  padding: spacing.$spacing-05 0;
+  padding: layout.$spacing-05 0;
   width: 70%;
 }
 

package/src/past-visit/past-visit.test.tsx

@@ -1,41 +1,36 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
-import PastVisitSummary from './past-visit-details/past-visit-summary.component';
 import userEvent from '@testing-library/user-event';
 import { mockPastVisit } from '__mocks__';
 import { mockPatient, renderWithSwr } from 'tools';
 import { usePastVisits } from './past-visit.resource';
+import PastVisitSummary from './past-visit-details/past-visit-summary.component';
 
-const mockUsePastVisits = usePastVisits as jest.Mock;
+const mockUsePastVisits = jest.mocked(usePastVisits);
 
 jest.mock('./past-visit.resource', () => ({
   usePastVisits: jest.fn(),
 }));
 
-describe('PastVisit: ', () => {
+describe('PastVisit', () => {
   it('renders an empty state when notes, encounters, medications, and vitals data is not available', async () => {
     const user = userEvent.setup();
 
     mockUsePastVisits.mockReturnValueOnce({
-      data: mockPastVisit.data.results,
+      visits: mockPastVisit.data.results[0],
+      error: null,
+      isLoading: false,
+      isValidating: false,
     });
 
-    renderPastVisitTabs();
+    renderWithSwr(<PastVisitSummary patientUuid={mockPatient.id} encounters={[]} />);
 
     expect(screen.queryAllByText(/vitals/i));
     const vitalsTab = screen.getByRole('tab', { name: /vitals/i });
-
     expect(vitalsTab).toBeInTheDocument();
-
     expect(screen.getByRole('tab', { name: /notes/i })).toBeInTheDocument();
     expect(screen.getByRole('tab', { name: /medications/i })).toBeInTheDocument();
-
     await user.click(vitalsTab);
-
     expect(vitalsTab).toHaveAttribute('aria-selected', 'true');
   });
 });
-
-function renderPastVisitTabs() {
-  renderWithSwr(<PastVisitSummary patientUuid={mockPatient.id} encounters={[]} />);
-}

package/src/patient-info/appointment-details.scss

@@ -1,20 +1,20 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .widgetCard {
   border: 1px solid colors.$blue-20;
   border-left: none;
   border-right: none;
   background-color: colors.$blue-10;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
 }
 
 .title {
   @include type.type-style('heading-compact-01');
   color: $text-02;
-  margin-bottom: spacing.$spacing-02;
+  margin-bottom: layout.$spacing-02;
 }
 
 .subtitle {
@@ -25,7 +25,7 @@
 .content {
   @include type.type-style('heading-compact-01');
   background-color: colors.$blue-10;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   border: 1px solid colors.$blue-20;
 }
 

package/src/patient-info/appointment-details.test.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import { mockPatient, renderWithSwr } from 'tools';
-import AppointmentDetails from './appointment-details.component';
-import { usePastVisits } from './../past-visit/past-visit.resource';
 import { useAppointments } from './appointments.resource';
+import { usePastVisits } from './../past-visit/past-visit.resource';
+import AppointmentDetails from './appointment-details.component';
 
 const testProps = {
   patientUuid: mockPatient.id,
 };
 
-const mockUseAppointments = useAppointments as jest.Mock;
-const mockUsePastVisits = usePastVisits as jest.Mock;
+const mockUseAppointments = jest.mocked(useAppointments);
+const mockUsePastVisits = jest.mocked(usePastVisits);
 
 jest.mock('./../past-visit/past-visit.resource', () => ({
   usePastVisits: jest.fn(),
@@ -22,8 +22,13 @@ jest.mock('./appointments.resource', () => ({
 
 describe('RecentandUpcomingAppointments', () => {
   it('renders no data if past and upcoming visit is empty', async () => {
-    mockUseAppointments.mockReturnValueOnce({ data: [] });
-    mockUsePastVisits.mockReturnValueOnce({ data: [] });
+    mockUseAppointments.mockReturnValueOnce({
+      upcomingAppointment: null,
+      error: null,
+      isLoading: false,
+      isValidating: false,
+    });
+    mockUsePastVisits.mockReturnValueOnce({ visits: null, error: null, isLoading: false, isValidating: false });
     renderAppointments();
 
     expect(screen.getByText(/there is no last encounter to display for this patient/i)).toBeInTheDocument();

package/src/patient-info/appointments.resource.ts

@@ -36,7 +36,7 @@ export function useAppointments(patientUuid: string, startDate: string) {
 
   return {
     upcomingAppointment: upcomingAppointment ? upcomingAppointment : null,
-    isError: error,
+    error,
     isLoading,
     isValidating,
   };

package/src/patient-info/patient-info.scss

@@ -1,6 +1,6 @@
-@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 *;
 
 .container {
   border-bottom: 0.0125rem solid $color-gray-30;
@@ -10,7 +10,7 @@
 
 .patientInfoContainer {
   background-color: $ui-02;
-  padding: 0 0 0 spacing.$spacing-05;
+  padding: 0 0 0 layout.$spacing-05;
   display: flex;
   align-items: center;
   min-height: 7rem;
@@ -18,7 +18,7 @@
 
 .activePatientInfoContainer {
   background-color: $color-blue-10;
-  padding: 0 0 0 spacing.$spacing-05;
+  padding: 0 0 0 layout.$spacing-05;
   display: flex;
   align-items: center;
   min-height: 7rem;
@@ -29,14 +29,14 @@
 }
 
 .patientInfoContent {
-  margin: spacing.$spacing-05 0 0 spacing.$spacing-05;
+  margin: layout.$spacing-05 0 0 layout.$spacing-05;
   width: 100%;
 }
 
 .demographics {
   @include type.type-style('body-compact-02');
   color: $text-02;
-  margin-top: spacing.$spacing-02;
+  margin-top: layout.$spacing-02;
 }
 
 .identifier {
@@ -50,11 +50,11 @@
   align-items: center;
 
   & > button {
-    min-height: 2rem;
+    min-height: layout.$spacing-07;
   }
 }
 
 .patientEditBtn {
   color: $ui-05;
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }

package/src/patient-info/patient-info.test.tsx

@@ -1,29 +1,18 @@
 import React from 'react';
-import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
 import { age } from '@openmrs/esm-framework';
 import { mockPatient, mockPatientWithLongName, mockPatientWithoutFormattedName } from 'tools';
 import PatientInfo from './patient-info.component';
 
-const mockAge = age as jest.Mock;
+const mockAge = jest.mocked(age);
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    age: jest.fn(),
-  };
-});
-
-describe('Patient Info', () => {
+describe('Patient info', () => {
   it.each([
     [mockPatient, 'Wilson, John'],
     [mockPatientWithLongName, 'family name, Some very long given name'],
     [mockPatientWithoutFormattedName, 'given middle family name'],
   ])(`should render patient info correctly`, async (patient, displayName) => {
-    const user = userEvent.setup();
-
-    mockAge.mockReturnValue(35);
+    mockAge.mockReturnValue('35');
 
     renderPatientInfo(patient);
 

package/src/patient-queue-header/patient-queue-header.component.tsx

@@ -47,7 +47,10 @@ const PatientQueueHeader: React.FC<PatientQueueHeaderProps> = ({ title, showLoca
       if (queueLocations.length === 1) {
         handleQueueLocationChange({ selectedItem: queueLocations[0] });
       }
-      if (queueLocations.some((location) => location.id === userSession?.sessionLocation?.uuid)) {
+      if (
+        queueLocations.some((location) => location.id === userSession?.sessionLocation?.uuid) &&
+        currentQueueLocationUuid
+      ) {
         handleQueueLocationChange({
           selectedItem: {
             id: userSession?.sessionLocation?.uuid,

package/src/patient-queue-header/patient-queue-header.scss

@@ -1,6 +1,6 @@
-@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 *;
 
 .header {
   @include type.type-style('body-compact-02');
@@ -10,7 +10,7 @@
   border-left: 0px;
   display: flex;
   justify-content: space-between;
-  padding-right: 1rem;
+  padding-right: layout.$spacing-05;
 }
 
 .left-justified-items {
@@ -22,7 +22,7 @@
 .right-justified-items {
   @include type.type-style('body-compact-02');
   color: $text-02;
-  padding-top: 1rem;
+  padding-top: layout.$spacing-05;
 }
 
 .page-name {
@@ -31,7 +31,7 @@
 
 .page-labels {
   p:first-of-type {
-    margin-bottom: 0.25rem;
+    margin-bottom: layout.$spacing-02;
   }
 }
 
@@ -42,11 +42,11 @@
 }
 
 .value {
-  margin-left: 0.25rem;
+  margin-left: layout.$spacing-02;
 }
 
 .middot {
-  margin: 0 0.5rem;
+  margin: 0 layout.$spacing-03;
 }
 
 .view {
@@ -57,7 +57,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  margin-top: 0.5rem;
+  margin-top: layout.$spacing-03;
 }
 
 .dropdown {
@@ -67,7 +67,7 @@
   }
 
   :global(.cds--dropdown--inline .cds--list-box__menu) {
-    left: -4rem;
+    left: -(layout.$spacing-10);
   }
 }
 
@@ -75,7 +75,7 @@
 html[dir='rtl'] {
   .date-and-location {
     margin-right: unset;
-    margin-left: spacing.$spacing-05;
+    margin-left: layout.$spacing-05;
     & > svg:first-child {
       order: -1;
     }

package/src/patient-queue-metrics/clinic-metrics.component.tsx

@@ -21,7 +21,7 @@ function ClinicMetrics() {
   const layout = useLayoutType();
   const mutate = useMutateQueueEntries();
   const currentQueueLocation = useSelectedQueueLocationUuid();
-  const { services } = useQueueServices(currentQueueLocation);
+  const { services } = useQueueServices();
   const currentService = useSelectedService();
   const { serviceCount } = useServiceMetricsCount(currentService?.serviceUuid, currentQueueLocation);
   const [initialSelectedItem, setInitialSelectItem] = useState(() => {

package/src/patient-queue-metrics/clinic-metrics.resource.ts

@@ -35,7 +35,7 @@ export function useActiveVisits() {
   return {
     activeVisitsCount: uniquePatientUUIDs.size,
     isLoading,
-    isError: error,
+    error,
     isValidating,
   };
 }
@@ -51,7 +51,7 @@ export function useAverageWaitTime(serviceUuid: string, statusUuid: string) {
   return {
     waitTime: data ? data?.data : null,
     isLoading,
-    isError: error,
+    error,
     isValidating,
     mutate,
   };

package/src/patient-queue-metrics/clinic-metrics.scss

@@ -1,11 +1,11 @@
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .cardContainer {
   background-color: $ui-02;
   display: flex;
   justify-content: space-between;
-  padding: 0 spacing.$spacing-05 spacing.$spacing-07 spacing.$spacing-03;
+  padding: 0 layout.$spacing-05 layout.$spacing-07 layout.$spacing-03;
   flex-flow: row wrap;
-  margin-top: -(spacing.$spacing-03);
+  margin-top: -(layout.$spacing-03);
 }

package/src/patient-queue-metrics/clinic-metrics.test.tsx

@@ -1,20 +1,26 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import {
+  type FetchResponse,
+  getDefaultsFromConfigSchema,
+  openmrsFetch,
+  useConfig,
+  useLocations,
+  useSession,
+} from '@openmrs/esm-framework';
 import { mockMetrics, mockServiceTypes, mockLocations, mockSession } from '__mocks__';
+import { type ConfigObject, configSchema } from '../config-schema';
 import ClinicMetrics from './clinic-metrics.component';
 
-const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
-const mockedUseConfig = useConfig as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
+const mockUseLocations = jest.mocked(useLocations);
+const mockUseSession = jest.mocked(useSession);
 
-jest.mock('./queue-metrics.resource', () => {
-  const originalModule = jest.requireActual('./queue-metrics.resource');
-
-  return {
-    ...originalModule,
-    useServiceMetricsCount: jest.fn().mockReturnValue(5),
-  };
-});
+jest.mock('./queue-metrics.resource', () => ({
+  ...jest.requireActual('./queue-metrics.resource'),
+  useServiceMetricsCount: jest.fn().mockReturnValue(5),
+}));
 
 jest.mock('../hooks/useQueues', () => {
   return {
@@ -22,44 +28,37 @@ jest.mock('../hooks/useQueues', () => {
   };
 });
 
-jest.mock('./clinic-metrics.resource', () => {
-  const originalModule = jest.requireActual('./clinic-metrics.resource');
+jest.mock('./clinic-metrics.resource', () => ({
+  ...jest.requireActual('./clinic-metrics.resource'),
+  useActiveVisits: jest.fn().mockReturnValue({
+    activeVisitsCount: mockMetrics.activeVisitsCount,
+  }),
+  useAverageWaitTime: jest.fn().mockReturnValue({ waitTime: mockMetrics.waitTime }),
+}));
 
-  return {
-    ...originalModule,
-    useAverageWaitTime: jest.fn().mockImplementation(() => ({ waitTime: mockMetrics.waitTime })),
-    useActiveVisits: jest.fn().mockImplementation(() => ({ activeVisitsCount: mockMetrics.activeVisitsCount })),
-  };
-});
-
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    useLocations: jest.fn().mockImplementation(() => mockLocations.data),
-    useSession: jest.fn().mockImplementation(() => mockSession.data),
-  };
-});
-
-jest.mock('../helpers/helpers', () => {
-  const originalModule = jest.requireActual('../helpers/helpers');
-
-  return {
-    ...originalModule,
-    useSelectedServiceName: jest.fn().mockReturnValue('All'),
-  };
-});
+jest.mock('../helpers/helpers', () => ({
+  ...jest.requireActual('../helpers/helpers'),
+  useSelectedServiceName: jest.fn().mockReturnValue('All'),
+}));
 
 describe('Clinic metrics', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+    });
+    mockUseLocations.mockReturnValue(mockLocations.data.results);
+    mockUseSession.mockReturnValue(mockSession.data);
+  });
+
   it('renders a dashboard outlining metrics from the outpatient clinic', async () => {
-    mockedUseConfig.mockReturnValue({
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
       visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
     });
 
-    mockedOpenmrsFetch.mockReturnValue({ data: mockMetrics });
+    mockOpenmrsFetch.mockResolvedValue({ data: mockMetrics } as unknown as FetchResponse);
 
-    renderClinicMetrics();
+    render(<ClinicMetrics />);
 
     await screen.findByText(/Checked in patients/i);
     expect(screen.getByText(/100/i)).toBeInTheDocument();
@@ -70,7 +69,3 @@ describe('Clinic metrics', () => {
     expect(screen.getByText(/69/i)).toBeInTheDocument();
   });
 });
-
-function renderClinicMetrics() {
-  render(<ClinicMetrics />);
-}