@kenyaemr/esm-service-queues-app 8.1.1-pre.129 → 8.1.2-pre.152

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

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dropdown } from '@carbon/react';
 import { useConfig, useSession, PageHeader, PageHeaderContent, ServiceQueuesPictogram } from '@openmrs/esm-framework';
-import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import { useQueueLocations } from '../create-queue-entry/hooks/useQueueLocations';
 import {
   updateSelectedQueueLocationUuid,
   updateSelectedQueueLocationName,
@@ -27,16 +27,19 @@ const PatientQueueHeader: React.FC<PatientQueueHeaderProps> = ({ title, showLoca
   const currentQueueLocationName = useSelectedQueueLocationName();
   const currentQueueLocationUuid = useSelectedQueueLocationUuid();
 
-  const handleQueueLocationChange = useCallback(({ selectedItem }) => {
-    if (selectedItem.id === 'all') {
-      updateSelectedQueueLocationUuid(null);
-      updateSelectedQueueLocationName(null);
-    } else {
-      updateSelectedQueueLocationUuid(selectedItem.id);
-      updateSelectedQueueLocationName(selectedItem.name);
-      updateSelectedService(null, t('all', 'All'));
-    }
-  }, []);
+  const handleQueueLocationChange = useCallback(
+    ({ selectedItem }) => {
+      if (selectedItem.id === 'all') {
+        updateSelectedQueueLocationUuid(null);
+        updateSelectedQueueLocationName(null);
+      } else {
+        updateSelectedQueueLocationUuid(selectedItem.id);
+        updateSelectedQueueLocationName(selectedItem.name);
+        updateSelectedService(null, t('all', 'All'));
+      }
+    },
+    [t],
+  );
 
   useEffect(() => {
     if (!isLoading && !error && !currentQueueLocationUuid) {
@@ -56,11 +59,13 @@ const PatientQueueHeader: React.FC<PatientQueueHeaderProps> = ({ title, showLoca
       }
     }
   }, [
-    queueLocations,
     currentQueueLocationName,
     currentQueueLocationUuid,
-    isLoading,
     error,
+    handleQueueLocationChange,
+    isLoading,
+    queueLocations,
+    userSession?.sessionLocation?.display,
     userSession?.sessionLocation?.uuid,
   ]);
 

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

@@ -37,12 +37,12 @@ const MetricsHeader = () => {
     <div className={styles.metricsContainer}>
       <span className={styles.metricsTitle}>{metricsTitle}</span>
       <ComboButton
+        className={styles.comboBtn}
         label={queueScreenText}
-        size={isDesktop(layout) ? 'sm' : 'lg'}
         menuAlignment="bottom-end"
-        className={styles.comboBtn}
-        tooltipAlignment="top-right"
-        onClick={navigateToQueueScreen}>
+        onClick={navigateToQueueScreen}
+        size={isDesktop(layout) ? 'sm' : 'lg'}
+        tooltipAlignment="left">
         <UserHasAccess privilege="Emr: View Legacy Interface">
           <MenuItem
             label={t('addNewService', 'Add new service')}

package/src/queue-entry-table-components/queue-priority.component.tsx

@@ -13,23 +13,28 @@ interface QueuePriorityProps {
 
 const QueuePriority: React.FC<QueuePriorityProps> = ({ priority, priorityComment, priorityConfigs }) => {
   const priorityConfig = priorityConfigs.find((c) => c.conceptUuid === priority.uuid);
+
+  const tag = (
+    <Tag
+      role={priorityComment ? 'tooltip' : null}
+      className={classNames(
+        styles.tag,
+        priorityConfig?.style === 'bold' && styles.bold,
+        priorityConfig?.color === 'orange' && styles.orange,
+      )}
+      type={priorityConfig?.color !== 'orange' ? priorityConfig?.color : null}>
+      {priority.display}
+    </Tag>
+  );
+
   return (
     <>
       {priorityComment ? (
         <DefinitionTooltip className={styles.tooltip} align="bottom-left" definition={priorityComment}>
-          <Tag
-            role="tooltip"
-            className={classNames(styles.tag, priorityConfig?.style === 'bold' && styles.bold)}
-            type={priorityConfig?.color}>
-            {priority.display}
-          </Tag>
+          {tag}
         </DefinitionTooltip>
       ) : (
-        <Tag
-          className={classNames(styles.tag, priorityConfig?.style === 'bold' && styles.bold)}
-          type={priorityConfig?.color}>
-          {priority.display}
-        </Tag>
+        tag
       )}
     </>
   );

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

@@ -1,5 +1,6 @@
 @use '@carbon/layout';
 @use '@openmrs/esm-styleguide/src/vars' as *;
+@use '@carbon/colors';
 
 .tag {
   margin: layout.$spacing-02 0;
@@ -9,3 +10,7 @@
 .bold {
   font-weight: bold;
 }
+
+.orange {
+  background-color: colors.$orange-20;
+}

package/src/queue-entry-table-components/transition-entry.component.tsx

@@ -35,7 +35,7 @@ const TransitionMenu: React.FC<TransitionMenuProps> = ({ queueEntry }) => {
       closeModal: () => dispose(),
       queueEntry,
     });
-  }, [queueEntry]);
+  }, [queueEntry, t]);
 
   return (
     <Button

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

@@ -148,7 +148,7 @@ const QueuePatientBaseTable: React.FC<QueuePatientTableProps> = ({
 
       <Layer>
         <Tile className={styles.filterTile}>
-          <Tag size="md" title="Clear Filter" type="blue">
+          <Tag size="md" type="blue">
             {t('today', 'Today')}
           </Tag>
 

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

@@ -1,18 +1,18 @@
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
+  Button,
+  ButtonSet,
+  Column,
   DatePicker,
   DatePickerInput,
+  Dropdown,
   Form,
   Layer,
-  Stack,
-  RadioButtonGroup,
-  RadioButton,
-  Dropdown,
-  Column,
-  Button,
-  ButtonSet,
   NumberInput,
+  RadioButton,
+  RadioButtonGroup,
+  Stack,
   Toggle,
 } from '@carbon/react';
 import dayjs from 'dayjs';
@@ -23,18 +23,19 @@ import {
   useLayoutType,
   useVisitTypes,
 } from '@openmrs/esm-framework';
-import styles from './queue-linelist-filter.scss';
 import { datePickerFormat, datePickerPlaceHolder } from '../constants';
+import styles from './queue-linelist-filter.scss';
 
 const QueueLinelistFilter: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) => {
   const { t } = useTranslation();
+  const allVisitTypes = useVisitTypes();
+  const isTablet = useLayoutType() === 'tablet';
+
+  const [endAge, setEndAge] = useState();
   const [gender, setGender] = useState('');
-  const [startAge, setStartAge] = useState<number>();
-  const [endAge, setEndAge] = useState<number>();
   const [returnDate, setReturnDate] = useState(new Date());
+  const [startAge, setStartAge] = useState();
   const [visitType, setVisitType] = useState('');
-  const isTablet = useLayoutType() === 'tablet';
-  const allVisitTypes = useVisitTypes();
 
   const handleFilter = useCallback(
     (event) => {

package/src/queue-patient-linelists/scheduled-appointments-table.component.tsx

@@ -193,7 +193,7 @@ const AppointmentsTable: React.FC = () => {
 
       <Layer>
         <Tile className={styles.filterTile}>
-          <Tag size="md" title="Clear Filter" type="blue">
+          <Tag size="md" type="blue">
             {t('today', 'Today')}
           </Tag>
 

package/src/queue-rooms/queue-room-form.test.tsx

@@ -6,8 +6,8 @@ import QueueRoomForm from './queue-room-form.workspace';
 
 const mockUseLayoutType = jest.mocked(useLayoutType);
 
-jest.mock('../patient-search/hooks/useQueueLocations', () => ({
-  ...jest.requireActual('../patient-search/hooks/useQueueLocations'),
+jest.mock('../create-queue-entry/hooks/useQueueLocations', () => ({
+  ...jest.requireActual('../create-queue-entry/hooks/useQueueLocations'),
   useQueueLocations: jest.fn(() => ({
     queueLocations: { uuid: 'e7786d9a-ab62-11ec-b909-0242ac120002', display: 'Location Test' },
   })),

package/src/queue-rooms/queue-room-form.workspace.tsx

@@ -14,7 +14,7 @@ import {
 } from '@carbon/react';
 import { type DefaultWorkspaceProps, restBaseUrl, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
 import { mutate } from 'swr';
-import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import { useQueueLocations } from '../create-queue-entry/hooks/useQueueLocations';
 import { saveQueueRoom } from './queue-room.resource';
 import styles from './queue-room-form.scss';
 import { useQueues } from '../hooks/useQueues';

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

@@ -3,7 +3,12 @@ import { render, screen } from '@testing-library/react';
 import { useActiveTickets } from './useActiveTickets';
 import QueueScreen from './queue-screen.component';
 
-jest.mock('./useActiveTickets');
+const mockUseActiveTickets = jest.mocked(useActiveTickets);
+
+jest.mock('./useActiveTickets', () => ({
+  useActiveTickets: jest.fn(),
+}));
+
 jest.mock('../helpers/helpers', () => ({
   useSelectedQueueLocationName: jest.fn().mockReturnValue('Room A'),
   useSelectedQueueLocationUuid: jest.fn().mockReturnValue(''),
@@ -11,26 +16,26 @@ jest.mock('../helpers/helpers', () => ({
 
 describe('QueueScreen component', () => {
   test('renders loading skeleton when data is loading', () => {
-    const mockUseActiveTickets = useActiveTickets as jest.MockedFunction<typeof useActiveTickets>;
     mockUseActiveTickets.mockReturnValue({ isLoading: true, activeTickets: [], error: undefined, mutate: jest.fn() });
+
     render(<QueueScreen />);
+
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
   test('renders error message when there is an error fetching data', () => {
-    const mockUseActiveTickets = useActiveTickets as jest.MockedFunction<typeof useActiveTickets>;
     mockUseActiveTickets.mockReturnValue({
       error: new Error('Error'),
       isLoading: false,
       activeTickets: [],
       mutate: jest.fn(),
     });
+
     render(<QueueScreen />);
     expect(screen.getByText(/Error State/i)).toBeInTheDocument();
   });
 
   test('renders table with active tickets when data is loaded', () => {
-    const mockUseActiveTickets = useActiveTickets as jest.MockedFunction<typeof useActiveTickets>;
     mockUseActiveTickets.mockReturnValue({
       activeTickets: [
         {
@@ -43,7 +48,9 @@ describe('QueueScreen component', () => {
       error: undefined,
       mutate: jest.fn(),
     });
+
     render(<QueueScreen />);
+
     expect(screen.getByText('Room : Room A')).toBeInTheDocument();
     expect(screen.getByText('Ticket number')).toBeInTheDocument();
     expect(screen.getByText('123')).toBeInTheDocument();

package/src/queue-services/queue-service-form.test.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { useLayoutType } from '@openmrs/esm-framework';
+import { showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { saveQueue } from './queue-service.resource';
 import QueueServiceForm from './queue-service-form.workspace';
 
 const defaultProps = {
   closeWorkspace: jest.fn(),
-  promptBeforeClosing: jest.fn(),
   closeWorkspaceWithSavedChanges: jest.fn(),
+  promptBeforeClosing: jest.fn(),
   setTitle: jest.fn(),
 };
 
+const mockSaveQueue = jest.mocked(saveQueue);
+const mockShowSnackbar = jest.mocked(showSnackbar);
 const mockUseLayoutType = jest.mocked(useLayoutType);
 
 jest.mock('./queue-service.resource', () => ({
@@ -23,7 +26,7 @@ jest.mock('./queue-service.resource', () => ({
   saveQueue: jest.fn(() => Promise.resolve({ status: 201 })),
 }));
 
-jest.mock('../patient-search/hooks/useQueueLocations', () => ({
+jest.mock('../create-queue-entry/hooks/useQueueLocations', () => ({
   useQueueLocations: () => ({
     queueLocations: [
       { id: '34567eb0-b035-4acd-b284-da45f5067502', name: 'Location 1' },
@@ -37,31 +40,88 @@ describe('QueueServiceForm', () => {
     mockUseLayoutType.mockReturnValue('tablet');
   });
 
-  it('should display required error messages when form is submitted with missing fields', async () => {
+  it('renders validation errors when form is submitted with missing fields', async () => {
     const user = userEvent.setup();
-
     render(<QueueServiceForm {...defaultProps} />);
 
-    const submitButton = screen.getByText('Save');
-    await user.click(submitButton);
-    expect(screen.getByText('Missing queue name')).toBeInTheDocument();
+    const queueNameInput = screen.getByRole('textbox', { name: /queue name/i });
+    const serviceTypeSelect = screen.getByRole('combobox', { name: /select a service type/i });
+    const locationSelect = screen.getByRole('combobox', { name: /select a location/i });
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    const saveButton = screen.getByRole('button', { name: /save/i });
+    expect(cancelButton).toBeInTheDocument();
+    expect(saveButton).toBeInTheDocument();
+    expect(queueNameInput).toBeInTheDocument();
+    expect(queueNameInput).not.toBeInvalid();
+    expect(serviceTypeSelect).toBeInTheDocument();
+    expect(serviceTypeSelect).not.toBeInvalid();
+
+    await user.click(saveButton);
+    expect(queueNameInput).toBeInvalid();
+
+    await user.type(queueNameInput, 'Test Queue');
+    expect(queueNameInput).not.toBeInvalid();
+    expect(serviceTypeSelect).toBeInvalid();
+
+    await user.selectOptions(serviceTypeSelect, '6f017eb0-b035-4acd-b284-da45f5067502');
+    await user.selectOptions(locationSelect, '34567eb0-b035-4acd-b284-da45f5067502');
+    await user.click(saveButton);
+
+    expect(serviceTypeSelect).not.toBeInvalid();
+    expect(queueNameInput).not.toBeInvalid();
+    expect(locationSelect).not.toBeInvalid();
   });
 
-  it('should submit the form when all fields are filled', async () => {
+  it('submits the form when all required fields are filled', async () => {
     const user = userEvent.setup();
+    render(<QueueServiceForm {...defaultProps} />);
+
+    const queueNameInput = screen.getByRole('textbox', { name: /queue name/i });
+    const serviceTypeSelect = screen.getByRole('combobox', { name: /select a service type/i });
+    const locationSelect = screen.getByRole('combobox', { name: /select a location/i });
+    const saveButton = screen.getByRole('button', { name: /save/i });
+
+    await user.type(queueNameInput, 'Test Queue');
+    await user.selectOptions(serviceTypeSelect, '6f017eb0-b035-4acd-b284-da45f5067502');
+    await user.selectOptions(locationSelect, '34567eb0-b035-4acd-b284-da45f5067502');
+    await user.click(saveButton);
+
+    expect(mockSaveQueue).toHaveBeenCalledTimes(1);
+    expect(mockSaveQueue).toHaveBeenCalledWith(
+      'Test Queue',
+      '6f017eb0-b035-4acd-b284-da45f5067502',
+      '',
+      '34567eb0-b035-4acd-b284-da45f5067502',
+    );
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      kind: 'success',
+      title: expect.stringMatching(/queue service created/i),
+      subtitle: expect.stringMatching(/queue service created successfully/i),
+    });
+  });
 
+  it('renders an error message when the queue service creation fails', async () => {
+    const user = userEvent.setup();
+    mockSaveQueue.mockRejectedValueOnce(new Error('Internal server error'));
     render(<QueueServiceForm {...defaultProps} />);
 
-    const queueNameInput = screen.getByLabelText('Queue name');
-    const serviceSelect = screen.getByLabelText('Select a service type');
-    const locationSelect = screen.getByLabelText('Select a location');
+    const queueNameInput = screen.getByRole('textbox', { name: /queue name/i });
+    const serviceTypeSelect = screen.getByRole('combobox', { name: /select a service type/i });
+    const locationSelect = screen.getByRole('combobox', { name: /select a location/i });
+    const saveButton = screen.getByRole('button', { name: /save/i });
 
     await user.type(queueNameInput, 'Test Queue');
-    await user.selectOptions(serviceSelect, '6f017eb0-b035-4acd-b284-da45f5067502');
+    await user.selectOptions(serviceTypeSelect, '6f017eb0-b035-4acd-b284-da45f5067502');
     await user.selectOptions(locationSelect, '34567eb0-b035-4acd-b284-da45f5067502');
+    await user.click(saveButton);
 
-    expect(queueNameInput).toHaveValue('Test Queue');
-    expect(serviceSelect).toHaveValue('6f017eb0-b035-4acd-b284-da45f5067502');
-    expect(locationSelect).toHaveValue('34567eb0-b035-4acd-b284-da45f5067502');
+    expect(mockShowSnackbar).toHaveBeenCalledTimes(1);
+    expect(mockShowSnackbar).toHaveBeenCalledWith({
+      isLowContrast: false,
+      kind: 'error',
+      title: expect.stringMatching(/error creating queue service/i),
+      subtitle: expect.stringMatching(/internal server error/i),
+    });
   });
 });