@openmrs/esm-service-queues-app 9.2.1-pre.7366 → 9.2.1-pre.7380

package/src/create-queue-entry/queue-fields/queue-fields.component.tsx

@@ -371,7 +371,7 @@ const QueueFields = React.memo(({ setOnSubmit, defaultInitialServiceQueue }: Que
             control={control}
             render={({ field }) =>
               isLoadingQueues ? (
-                <RadioButtonGroup>
+                <RadioButtonGroup name="priority">
                   <RadioButtonSkeleton />
                   <RadioButtonSkeleton />
                   <RadioButtonSkeleton />

package/src/declarations.d.ts

@@ -1,8 +1,4 @@
-declare module '@carbon/react';
-
 declare module '*.scss' {
   const content: { [className: string]: string };
   export default content;
 }
-
-declare type SideNavProps = {};

package/src/home.test.tsx

@@ -7,6 +7,14 @@ import Home from './home.component';
 
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 
+jest.mock('./hooks/useQueues', () => ({
+  useQueues: jest.fn(() => ({ queues: [] })),
+}));
+
+jest.mock('./create-queue-entry/hooks/useQueueLocations', () => ({
+  useQueueLocations: jest.fn(() => ({ queueLocations: [], isLoading: false, error: undefined })),
+}));
+
 mockUseConfig.mockReturnValue({
   ...getDefaultsFromConfigSchema(configSchema),
   visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',

package/src/metrics/metrics-cards/waiting-patients.extension.tsx

@@ -62,6 +62,7 @@ export default function WaitingPatientsExtension() {
             item ? `${item.display} ${item.location?.display ? `- ${item.location.display}` : ''}` : ''
           }
           label=""
+          titleText=""
           onChange={handleServiceChange}
           size={isDesktop(layout) ? 'sm' : 'lg'}
           type="inline"

package/src/modals/queue-entry-actions-modal.component.tsx

@@ -16,16 +16,17 @@ import {
   TextArea,
   TimePicker,
   TimePickerSelect,
+  type OnChangeData,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { OpenmrsDatePicker, showSnackbar, type FetchResponse, useConfig } from '@openmrs/esm-framework';
 import { useMutateQueueEntries } from '../hooks/useQueueEntries';
 import { useQueues } from '../hooks/useQueues';
 import { DUPLICATE_QUEUE_ENTRY_ERROR_CODE, time12HourFormatRegexPattern } from '../constants';
+import { convertTime12to24, type amPm } from './time-helpers';
 import { type ConfigObject } from '../config-schema';
-import { type QueueEntry } from '../types';
+import { type Queue, type QueueEntry } from '../types';
 import QueuePriority from '../queue-table/components/queue-priority.component';
-import { convertTime12to24, type amPm } from './time-helpers';
 import styles from './queue-entry-actions.scss';
 
 interface QueueEntryActionModalProps {
@@ -255,10 +256,11 @@ export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
                   <RadioButtonGroup
                     className={styles.radioButtonGroup}
                     id="queue"
+                    name="queue"
                     invalidText="Required"
                     valueSelected={formState.selectedQueue}
                     orientation="vertical"
-                    onChange={(uuid) => setSelectedQueueUuid(uuid)}>
+                    onChange={(uuid) => setSelectedQueueUuid(String(uuid))}>
                     {queues?.map(({ uuid, display, location }) => (
                       <RadioButton
                         key={uuid}
@@ -274,20 +276,25 @@ export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
                     ))}
                   </RadioButtonGroup>
                 ) : (
-                  <Dropdown
+                  <Dropdown<Queue>
                     id="queue"
                     label={selectedQueue.display}
                     initialSelectedItem={selectedQueue}
-                    value={formState.selectedQueue}
                     items={queues}
-                    itemToString={(item) =>
+                    itemToString={(item: Queue) =>
                       item.uuid === queueEntry.queue.uuid
                         ? t('currentValueFormatted', '{{value}} (Current)', {
                             value: `${item.display} - ${item.location?.display}`,
                           })
                         : `${item.display} - ${item.location?.display}`
                     }
-                    onChange={({ selectedItem }) => setSelectedQueueUuid(selectedItem.uuid)}
+                    onChange={(data: OnChangeData<Queue>) => {
+                      const queue = data.selectedItem;
+                      if (queue) {
+                        setSelectedQueueUuid(queue.uuid);
+                      }
+                    }}
+                    titleText=""
                   />
                 )}
               </section>
@@ -310,7 +317,7 @@ export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
                     name="status"
                     valueSelected={formState.selectedStatus}
                     onChange={(uuid) => {
-                      setSelectedStatusUuid(uuid);
+                      setSelectedStatusUuid(String(uuid));
                     }}>
                     {statuses?.map(({ uuid, display }) => (
                       <RadioButton
@@ -344,9 +351,10 @@ export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
               ) : (
                 <RadioButtonGroup
                   className={styles.radioButtonGroup}
+                  name="priority"
                   valueSelected={formState.selectedPriority}
                   onChange={(uuid) => {
-                    setSelectedPriorityUuid(uuid);
+                    setSelectedPriorityUuid(String(uuid));
                   }}>
                   {priorities?.map(({ uuid, display }) => (
                     <RadioButton
@@ -394,6 +402,7 @@ export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
                   />
 
                   <TimePicker
+                    id="transitionTime"
                     labelText={t('time', 'Time')}
                     onChange={(event) => setTransitionTime(event.target.value)}
                     pattern={time12HourFormatRegexPattern}
@@ -404,7 +413,6 @@ export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
                       id="visitStartTimeSelect"
                       onChange={(event) => setTransitionTimeFormat(event.target.value as amPm)}
                       value={formState.transitionTimeFormat}
-                      labelText={t('time', 'Time')}
                       aria-label={t('time', 'Time')}>
                       <SelectItem value="AM" text="AM" />
                       <SelectItem value="PM" text="PM" />

package/src/modals/queue-entry-actions.test.tsx

@@ -1,14 +1,22 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { type FetchResponse, openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
+import {
+  type FetchResponse,
+  getDefaultsFromConfigSchema,
+  openmrsFetch,
+  showSnackbar,
+  useConfig,
+} from '@openmrs/esm-framework';
 import { screen } from '@testing-library/react';
 import { mockQueues, mockQueueEntryAlice } from '__mocks__';
 import { renderWithSwr } from 'tools';
+import { type ConfigObject, configSchema } from '../config-schema';
 import DeleteQueueEntryModal from './delete-queue-entry.modal';
 import QueueEntryActionModal from './queue-entry-actions-modal.component';
 import UndoTransitionQueueEntryModal from './undo-transition-queue-entry.modal';
 
 const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 
 jest.mock('../hooks/useQueues', () => {
   return {
@@ -18,6 +26,10 @@ jest.mock('../hooks/useQueues', () => {
   };
 });
 
+jest.mock('../create-queue-entry/hooks/useQueueLocations', () => ({
+  useQueueLocations: jest.fn(() => ({ queueLocations: [], isLoading: false, error: undefined })),
+}));
+
 jest.mock('../hooks/useQueueEntries', () => {
   return {
     useMutateQueueEntries: jest.fn().mockReturnValue({
@@ -26,33 +38,31 @@ jest.mock('../hooks/useQueueEntries', () => {
   };
 });
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    useConfig: jest.fn().mockReturnValue({
-      showQueueNumber: true,
-      showPriorityComment: true,
-      showTransitionDateTime: true,
-      priorityConfigs: [
-        {
-          conceptUuid: 'f4620bfa-3625-4883-bd3f-84c2cce14470',
-          style: null,
-          color: 'green',
-        },
-        {
-          conceptUuid: 'dc3492ef-24a5-4fd9-b58d-4fd2acf7071f',
-          style: null,
-          color: 'orange',
-        },
-      ],
-      concepts: {
-        defaultPriorityConceptUuid: 'f4620bfa-3625-4883-bd3f-84c2cce14470',
-        defaultStatusConceptUuid: '51ae5e4d-b72b-4912-bf31-a17efb690aeb',
-        defaultTransitionStatus: 'ca7494ae-437f-4fd0-8aae-b88b9a2ba47d',
+beforeEach(() => {
+  mockUseConfig.mockReturnValue({
+    ...getDefaultsFromConfigSchema(configSchema),
+    showQueueNumber: true,
+    showPriorityComment: true,
+    showTransitionDateTime: true,
+    priorityConfigs: [
+      {
+        conceptUuid: 'f4620bfa-3625-4883-bd3f-84c2cce14470',
+        style: null,
+        color: 'green',
       },
-    }),
-  };
+      {
+        conceptUuid: 'dc3492ef-24a5-4fd9-b58d-4fd2acf7071f',
+        style: null,
+        color: 'orange',
+      },
+    ],
+    concepts: {
+      ...getDefaultsFromConfigSchema(configSchema).concepts,
+      defaultPriorityConceptUuid: 'f4620bfa-3625-4883-bd3f-84c2cce14470',
+      defaultStatusConceptUuid: '51ae5e4d-b72b-4912-bf31-a17efb690aeb',
+      defaultTransitionStatus: 'ca7494ae-437f-4fd0-8aae-b88b9a2ba47d',
+    },
+  } as ConfigObject);
 });
 
 describe('UndoTransitionQueueEntryModal', () => {

package/src/modals/queue-entry-confirm-action.modal.tsx

@@ -1,8 +1,8 @@
 import React, { type ReactNode, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { type QueueEntry } from '../types';
 import { Button, ModalHeader, ModalBody, ModalFooter, Stack } from '@carbon/react';
 import { type FetchResponse, showSnackbar } from '@openmrs/esm-framework';
+import { type QueueEntry } from '../types';
 import { useMutateQueueEntries } from '../hooks/useQueueEntries';
 
 interface QueueEntryUndoActionsModalProps {
@@ -85,7 +85,7 @@ export const QueueEntryConfirmActionModal: React.FC<QueueEntryUndoActionsModalPr
             <span>{modalInstruction}</span>
           </Stack>
         ) : (
-          <p>{modalInstruction}</p>
+          <div>{modalInstruction}</div>
         )}
       </ModalBody>
       <ModalFooter>

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

@@ -141,36 +141,42 @@ const PastVisitSummary: React.FC<PastVisitSummaryProps> = ({ encounters, patient
 
   return (
     <div className={styles.wrapper}>
-      <Tabs className={tabsClasses}>
-        <TabList className={styles.verticalTabList} aria-label="Past visits tabs">
-          <Tab className={tabClasses(0)} id="vitals-tab" onClick={() => setSelectedTabIndex(0)}>
-            {t('vitals', 'Vitals')}
-          </Tab>
-          <Tab className={tabClasses(1)} id="notes-tab" onClick={() => setSelectedTabIndex(1)}>
-            {t('notes', 'Notes')}
-          </Tab>
-          <Tab className={tabClasses(2)} id="medications-tab" onClick={() => setSelectedTabIndex(2)}>
-            {t('medications', 'Medications')}
-          </Tab>
-          <Tab className={tabClasses(3)} id="encounters-tab" onClick={() => setSelectedTabIndex(3)}>
-            {t('encounters', 'Encounters')}
-          </Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel>
-            <Vitals vitals={useVitalsFromObs(vitalsToRetrieve)} patientUuid={patientUuid} visitType={visitTypes.PAST} />
-          </TabPanel>
-          <TabPanel>
-            <Notes notes={notes} diagnoses={diagnoses} />
-          </TabPanel>
-          <TabPanel>
-            <Medications medications={medications} />
-          </TabPanel>
-          <TabPanel>
-            <EncounterList encounters={encountersToDisplay} />
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
+      <div className={tabsClasses}>
+        <Tabs>
+          <TabList className={styles.verticalTabList} aria-label="Past visits tabs">
+            <Tab className={tabClasses(0)} id="vitals-tab" onClick={() => setSelectedTabIndex(0)}>
+              {t('vitals', 'Vitals')}
+            </Tab>
+            <Tab className={tabClasses(1)} id="notes-tab" onClick={() => setSelectedTabIndex(1)}>
+              {t('notes', 'Notes')}
+            </Tab>
+            <Tab className={tabClasses(2)} id="medications-tab" onClick={() => setSelectedTabIndex(2)}>
+              {t('medications', 'Medications')}
+            </Tab>
+            <Tab className={tabClasses(3)} id="encounters-tab" onClick={() => setSelectedTabIndex(3)}>
+              {t('encounters', 'Encounters')}
+            </Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <Vitals
+                vitals={useVitalsFromObs(vitalsToRetrieve)}
+                patientUuid={patientUuid}
+                visitType={visitTypes.PAST}
+              />
+            </TabPanel>
+            <TabPanel>
+              <Notes notes={notes} diagnoses={diagnoses} />
+            </TabPanel>
+            <TabPanel>
+              <Medications medications={medications} />
+            </TabPanel>
+            <TabPanel>
+              <EncounterList encounters={encountersToDisplay} />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
     </div>
   );
 };

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

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

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Dropdown, DropdownSkeleton, InlineNotification } from '@carbon/react';
+import { Dropdown, DropdownSkeleton, InlineNotification, type OnChangeData } from '@carbon/react';
 import { useConfig, useSession, PageHeader, PageHeaderContent, ServiceQueuesPictogram } from '@openmrs/esm-framework';
 import { useQueueLocations } from '../create-queue-entry/hooks/useQueueLocations';
 import {
@@ -9,9 +9,9 @@ import {
   updateSelectedService,
   useServiceQueuesStore,
 } from '../store/store';
+import { useQueues } from '../hooks/useQueues';
 import type { ConfigObject } from '../config-schema';
 import styles from './patient-queue-header.scss';
-import { useQueues } from '../hooks/useQueues';
 
 interface PatientQueueHeaderProps {
   title?: string | JSX.Element;
@@ -24,8 +24,7 @@ const PatientQueueHeader: React.FC<PatientQueueHeaderProps> = ({ title, showFilt
   const { queueLocations, isLoading, error } = useQueueLocations();
   const { dashboardTitle } = useConfig<ConfigObject>();
   const userSession = useSession();
-  const { selectedQueueLocationName, selectedQueueLocationUuid, selectedServiceDisplay, selectedServiceUuid } =
-    useServiceQueuesStore();
+  const { selectedQueueLocationName, selectedQueueLocationUuid, selectedServiceDisplay } = useServiceQueuesStore();
   const { queues } = useQueues();
   const showLocationDropdown = showFilters && queueLocations.length > 1;
   const showServiceDropdown = showFilters && queues.length > 1;
@@ -57,11 +56,14 @@ const PatientQueueHeader: React.FC<PatientQueueHeaderProps> = ({ title, showFilt
   );
 
   const handleServiceChange = useCallback(
-    ({ selectedItem }) => {
-      if (selectedItem.id === 'all') {
-        updateSelectedService(null, t('all', 'All'));
-      } else {
-        updateSelectedService(selectedItem.id, selectedItem.name);
+    (data: OnChangeData<{ id: string; name: string }>) => {
+      const selectedItem = data.selectedItem;
+      if (selectedItem) {
+        if (selectedItem.id === 'all') {
+          updateSelectedService(null, t('all', 'All'));
+        } else {
+          updateSelectedService(selectedItem.id, selectedItem.name);
+        }
       }
     },
     [t],
@@ -142,7 +144,6 @@ const PatientQueueHeader: React.FC<PatientQueueHeaderProps> = ({ title, showFilt
             titleText={t('service', 'Service')}
             type="inline"
             onChange={handleServiceChange}
-            value={selectedServiceUuid}
           />
         )}
         {actions}

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

@@ -4,8 +4,9 @@ import { type TFunction } from 'i18next';
 import {
   Button,
   DataTable,
-  type DataTableHeader,
+  DataTableSkeleton,
   Layer,
+  Pagination,
   Table,
   TableBody,
   TableCell,
@@ -18,8 +19,6 @@ import {
   TableToolbarSearch,
   Tag,
   Tile,
-  DataTableSkeleton,
-  Pagination,
 } from '@carbon/react';
 import { OverflowMenuVertical } from '@carbon/react/icons';
 import { ConfigurableLink, ExtensionSlot, formatDatetime, parseDate, usePagination } from '@openmrs/esm-framework';

package/src/queue-screen/queue-screen.component.tsx

@@ -12,7 +12,7 @@ const QueueScreen: React.FC<QueueScreenProps> = () => {
   const { activeTickets, isLoading, error } = useActiveTickets();
 
   if (isLoading) {
-    return <DataTableSkeleton row={5} className={styles.queueScreen} role="progressbar" />;
+    return <DataTableSkeleton rowCount={5} className={styles.queueScreen} data-testid="queue-screen-skeleton" />;
   }
 
   if (error) {

package/src/queue-screen/queue-screen.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { useActiveTickets } from './useActiveTickets';
-import QueueScreen from './queue-screen.component';
 import { updateSelectedQueueLocationName, updateSelectedQueueLocationUuid } from '../store/store';
+import QueueScreen from './queue-screen.component';
 
 const mockUseActiveTickets = jest.mocked(useActiveTickets);
 
@@ -10,8 +10,15 @@ jest.mock('./useActiveTickets', () => ({
   useActiveTickets: jest.fn(),
 }));
 
-describe('QueueScreen component', () => {
+jest.mock('../hooks/useQueues', () => ({
+  useQueues: jest.fn(() => ({ queues: [] })),
+}));
 
+jest.mock('../create-queue-entry/hooks/useQueueLocations', () => ({
+  useQueueLocations: jest.fn(() => ({ queueLocations: [], isLoading: false, error: undefined })),
+}));
+
+describe('QueueScreen component', () => {
   beforeEach(() => {
     updateSelectedQueueLocationName('Room A');
     updateSelectedQueueLocationUuid('123');
@@ -22,7 +29,7 @@ describe('QueueScreen component', () => {
 
     render(<QueueScreen />);
 
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    expect(screen.getByTestId('queue-screen-skeleton')).toBeInTheDocument();
   });
 
   test('renders error message when there is an error fetching data', () => {

package/src/queue-table/default-queue-table.component.tsx

@@ -103,7 +103,14 @@ function QueueTableSection() {
           <StatusDropdownFilter />
           <TableToolbarSearch
             className={styles.search}
-            onChange={(e) => setSearchTerm(e.target.value)}
+            onChange={(e) => {
+              if (typeof e === 'string') {
+                setSearchTerm(e);
+              } else if (e && 'target' in e) {
+                const target = e.target as HTMLInputElement;
+                setSearchTerm(target.value);
+              }
+            }}
             placeholder={t('searchThisList', 'Search this list')}
             size={isDesktop(layout) ? 'sm' : 'lg'}
             persistent

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

@@ -78,7 +78,7 @@ function QueueTable({
 
   const rows =
     paginatedQueueEntries?.map((queueEntry) => {
-      const row: Record<string, JSX.Element | string> = { id: queueEntry.uuid };
+      const row: { id: string; [key: string]: JSX.Element | string } = { id: queueEntry.uuid };
       columns.forEach(({ key, CellComponent }) => {
         row[key] = <CellComponent key={key} queueEntry={queueEntry} />;
       });

package/src/types/index.ts

@@ -490,5 +490,3 @@ export interface QueueEntrySearchCriteria {
 export interface Concept extends OpenmrsResource {
   setMembers?: Array<Concept>;
 }
-
-export interface Provider extends OpenmrsResource {}