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

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

@@ -1,15 +1,12 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import { type ConfigObject, configSchema } from '../config-schema';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { mockAppointmentsData } from '__mocks__';
 import AppointmentsTable from './scheduled-appointments-table.component';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  useConfig: () => ({
-    appointmentStatuses: ['All', 'Scheduled', 'Completed'],
-  }),
-}));
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 
 jest.mock('./queue-linelist.resource', () => ({
   useAppointments: () => ({
@@ -19,6 +16,13 @@ jest.mock('./queue-linelist.resource', () => ({
 }));
 
 describe('AppointmentsTable', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      appointmentStatuses: ['All', 'Scheduled', 'Completed'],
+    });
+  });
+
   it('renders appointments when loading is complete', () => {
     render(<AppointmentsTable />);
 
@@ -28,7 +32,6 @@ describe('AppointmentsTable', () => {
 
   it('filters appointments based on status selection', async () => {
     const user = userEvent.setup();
-
     render(<AppointmentsTable />);
 
     const statusDropdown = screen.getAllByLabelText('Status:');

package/src/queue-rooms/queue-room-form.scss

@@ -1,18 +1,18 @@
-@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 *;
 
 $overlay-header-height: 5.5rem;
 
 .heading {
   @include type.type-style('heading-compact-01');
-  margin: spacing.$spacing-05 0 spacing.$spacing-05;
+  margin: layout.$spacing-05 0 layout.$spacing-05;
 }
 
 .warningContainer {
   background-color: $carbon--red-50;
-  padding: spacing.$spacing-04;
-  margin: spacing.$spacing-03 0 spacing.$spacing-03;
+  padding: layout.$spacing-04;
+  margin: layout.$spacing-03 0 layout.$spacing-03;
   display: flex;
   justify-content: space-between;
   .warning {
@@ -29,16 +29,16 @@ $overlay-header-height: 5.5rem;
 }
 
 .grid {
-  margin: 0 spacing.$spacing-05;
-  padding: 0rem;
+  margin: 0 layout.$spacing-05;
+  padding: 0;
 }
 
 .input {
-  margin-top: spacing.$spacing-04;
+  margin-top: layout.$spacing-04;
 }
 
 .button {
-  height: spacing.$spacing-10;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -46,11 +46,11 @@ $overlay-header-height: 5.5rem;
 }
 
 .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;
 }

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

@@ -1,21 +1,23 @@
 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 QueueRoomForm from './queue-room-form.workspace';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  useLayoutType: jest.fn(() => 'tablet'),
+const mockUseLayoutType = jest.mocked(useLayoutType);
+
+jest.mock('../patient-search/hooks/useQueueLocations', () => ({
+  ...jest.requireActual('../patient-search/hooks/useQueueLocations'),
   useQueueLocations: jest.fn(() => ({
     queueLocations: { uuid: 'e7786d9a-ab62-11ec-b909-0242ac120002', display: 'Location Test' },
   })),
-  showSnackbar: jest.fn(),
 }));
 
 const workspaceProps = {
   closeWorkspace: jest.fn(),
   promptBeforeClosing: jest.fn(),
   closeWorkspaceWithSavedChanges: jest.fn(),
+  setTitle: jest.fn(),
 };
 
 jest.mock('./queue-room.resource', () => ({
@@ -23,6 +25,10 @@ jest.mock('./queue-room.resource', () => ({
 }));
 
 describe('QueueRoomForm', () => {
+  beforeEach(() => {
+    mockUseLayoutType.mockReturnValue('tablet');
+  });
+
   it('renders the form with queue room elements', () => {
     render(<QueueRoomForm {...workspaceProps} />);
 
@@ -39,7 +45,6 @@ describe('QueueRoomForm', () => {
     render(<QueueRoomForm {...workspaceProps} />);
 
     await user.click(screen.getByText('Save'));
-
     expect(screen.getByText('Missing queue room name')).toBeInTheDocument();
   });
 
@@ -52,7 +57,6 @@ describe('QueueRoomForm', () => {
 
     await user.type(queueRoomNameInput, 'Room 123');
     await user.click(screen.getByText('Save'));
-
     expect(screen.getByText('Missing queue room service')).toBeInTheDocument();
   });
 
@@ -63,7 +67,6 @@ describe('QueueRoomForm', () => {
     render(<QueueRoomForm {...{ ...workspaceProps, closeWorkspace }} />);
 
     await user.click(screen.getByText('Cancel'));
-
     expect(closeWorkspace).toHaveBeenCalledTimes(1);
   });
 
@@ -74,7 +77,6 @@ describe('QueueRoomForm', () => {
 
     const queueRoomNameInput = screen.getByLabelText('Queue room name');
     await user.type(queueRoomNameInput, 'Room 123');
-
     expect(queueRoomNameInput).toHaveValue('Room 123');
   });
 });

package/src/queue-screen/queue-screen.scss

@@ -1,14 +1,16 @@
+@use '@carbon/layout';
+
 .gridFlow {
   display: flex;
   flex-direction: row;
-  padding: 2rem;
+  padding: layout.$spacing-07;
   flex-wrap: wrap;
 }
 
 .card {
   border-radius: 0.9rem;
   border: 1px solid #343332;
-  margin: 1.5rem;
+  margin: layout.$spacing-06;
   padding: 1.3rem;
   width: 30%;
   text-align: center;
@@ -16,13 +18,13 @@
 }
 
 .header {
-  font-size: 2rem;
+  font-size: layout.$spacing-07;
   font-weight: bold;
   color: black;
 }
 
 .headerBlinking {
-  font-size: 2rem;
+  font-size: layout.$spacing-07;
   font-weight: bold;
   color: red;
   animation: blinker 1s linear infinite;

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

@@ -11,15 +11,15 @@ jest.mock('../helpers/helpers', () => ({
 
 describe('QueueScreen component', () => {
   test('renders loading skeleton when data is loading', () => {
-    const mockedUseActiveTickets = useActiveTickets as jest.MockedFunction<typeof useActiveTickets>;
-    mockedUseActiveTickets.mockReturnValue({ isLoading: true, activeTickets: [], error: undefined, mutate: jest.fn() });
+    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 mockedUseActiveTickets = useActiveTickets as jest.MockedFunction<typeof useActiveTickets>;
-    mockedUseActiveTickets.mockReturnValue({
+    const mockUseActiveTickets = useActiveTickets as jest.MockedFunction<typeof useActiveTickets>;
+    mockUseActiveTickets.mockReturnValue({
       error: new Error('Error'),
       isLoading: false,
       activeTickets: [],
@@ -30,8 +30,8 @@ describe('QueueScreen component', () => {
   });
 
   test('renders table with active tickets when data is loaded', () => {
-    const mockedUseActiveTickets = useActiveTickets as jest.MockedFunction<typeof useActiveTickets>;
-    mockedUseActiveTickets.mockReturnValue({
+    const mockUseActiveTickets = useActiveTickets as jest.MockedFunction<typeof useActiveTickets>;
+    mockUseActiveTickets.mockReturnValue({
       activeTickets: [
         {
           room: 'Room A',

package/src/queue-services/queue-service-form.scss

@@ -1,16 +1,16 @@
-@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 *;
 
 .heading {
   @include type.type-style('heading-compact-01');
-  margin: spacing.$spacing-05 0 spacing.$spacing-05;
+  margin: layout.$spacing-05 0 layout.$spacing-05;
 }
 
 .warningContainer {
   background-color: $carbon--red-50;
-  padding: spacing.$spacing-04;
-  margin: spacing.$spacing-03 0 spacing.$spacing-03;
+  padding: layout.$spacing-04;
+  margin: layout.$spacing-03 0 layout.$spacing-03;
   display: flex;
   justify-content: space-between;
   .warning {
@@ -27,16 +27,16 @@
 }
 
 .grid {
-  margin: 0 spacing.$spacing-05;
-  padding: 0rem;
+  margin: 0 layout.$spacing-05;
+  padding: 0;
 }
 
 .input {
-  margin-top: spacing.$spacing-04;
+  margin-top: layout.$spacing-04;
 }
 
 .button {
-  height: spacing.$spacing-10;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
@@ -44,8 +44,8 @@
 }
 
 .buttonSet {
-  padding: 0rem;
-  margin-top: spacing.$spacing-05;
+  padding: 0;
+  margin-top: layout.$spacing-05;
 }
 
 /* Tablet */
@@ -55,7 +55,7 @@
   }
 
   .buttonSet {
-    padding: spacing.$spacing-06 spacing.$spacing-05;
+    padding: layout.$spacing-06 layout.$spacing-05;
     background-color: $ui-02;
   }
 }

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

@@ -1,12 +1,17 @@
 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 QueueServiceForm from './queue-service-form.workspace';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  useLayoutType: () => 'desktop',
-  showSnackbar: jest.fn(),
-}));
+const defaultProps = {
+  closeWorkspace: jest.fn(),
+  promptBeforeClosing: jest.fn(),
+  closeWorkspaceWithSavedChanges: jest.fn(),
+  setTitle: jest.fn(),
+};
+
+const mockUseLayoutType = jest.mocked(useLayoutType);
 
 jest.mock('./queue-service.resource', () => ({
   useServiceConcepts: () => ({
@@ -28,22 +33,24 @@ jest.mock('../patient-search/hooks/useQueueLocations', () => ({
 }));
 
 describe('QueueServiceForm', () => {
+  beforeEach(() => {
+    mockUseLayoutType.mockReturnValue('tablet');
+  });
+
   it('should display required error messages when form is submitted with missing fields', async () => {
     const user = userEvent.setup();
 
-    render(<QueueServiceForm toggleSearchType={() => {}} closePanel={() => {}} />);
+    render(<QueueServiceForm {...defaultProps} />);
 
     const submitButton = screen.getByText('Save');
-
     await user.click(submitButton);
-
     expect(screen.getByText('Missing queue name')).toBeInTheDocument();
   });
 
   it('should submit the form when all fields are filled', async () => {
     const user = userEvent.setup();
 
-    render(<QueueServiceForm toggleSearchType={() => {}} closePanel={() => {}} />);
+    render(<QueueServiceForm {...defaultProps} />);
 
     const queueNameInput = screen.getByLabelText('Queue name');
     const serviceSelect = screen.getByLabelText('Select a service type');

package/src/queue-table/cells/queue-table-action-cell.component.tsx

@@ -13,7 +13,7 @@ export function QueueTableActionCell({ queueEntry }: QueueTableCellComponentProp
     <div className={styles.actionsCell}>
       <Button
         kind="ghost"
-        aria-label={t('actions', 'Actions')}
+        aria-label={t('transition', 'Transition')}
         onClick={() => {
           const dispose = showModal('transition-queue-entry-modal', {
             closeModal: () => dispose(),
@@ -23,7 +23,7 @@ export function QueueTableActionCell({ queueEntry }: QueueTableCellComponentProp
         size={isDesktop(layout) ? 'sm' : 'lg'}>
         {t('transition', 'Transition')}
       </Button>
-      <OverflowMenu aria-label="Actions menu" size={isDesktop(layout) ? 'sm' : 'lg'} flipped>
+      <OverflowMenu aria-label="Actions menu" size={isDesktop(layout) ? 'sm' : 'lg'} align="left" flipped>
         <OverflowMenuItem
           className={styles.menuItem}
           aria-label={t('edit', 'Edit')}

package/src/queue-table/cells/queue-table-coming-from-cell.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { type QueueTableColumnFunction, type QueueTableCellComponentProps } from '../../types';
 
 export const QueueTableComingFromCell = ({ queueEntry }: QueueTableCellComponentProps) => {
-  return <>{queueEntry.queueComingFrom?.display}</>;
+  return <>{queueEntry.queueComingFrom?.display ?? '--'}</>;
 };
 
 export const queueTableComingFromColumn: QueueTableColumnFunction = (key, header) => ({

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { DataTableSkeleton, Dropdown, TableToolbarSearch } from '@carbon/react';
+import { DataTableSkeleton, Dropdown, Layer, TableToolbarSearch } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
 import {
   closeWorkspace,
@@ -11,7 +11,6 @@ import {
   useLayoutType,
 } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import ClearQueueEntries from '../clear-queue-entries-dialog/clear-queue-entries.component';
 import {
   updateSelectedQueueStatus,
   updateSelectedService,
@@ -19,13 +18,14 @@ import {
   useSelectedQueueStatus,
   useSelectedService,
 } from '../helpers/helpers';
+import { useColumns } from './cells/columns.resource';
+import useQueueStatuses from '../hooks/useQueueStatuses';
+import useQueueServices from '../hooks/useQueueService';
+import ClearQueueEntries from '../clear-queue-entries-dialog/clear-queue-entries.component';
 import { useMutateQueueEntries, useQueueEntries } from '../hooks/useQueueEntries';
 import QueueTableExpandedRow from './queue-table-expanded-row.component';
 import QueueTable from './queue-table.component';
 import styles from './queue-table.scss';
-import { useColumns } from './cells/columns.resource';
-import useQueueStatuses from '../hooks/useQueueStatuses';
-import useQueueServices from '../hooks/useQueueService';
 
 const serviceQueuesPatientSearchWorkspace = 'service-queues-patient-search';
 
@@ -91,63 +91,65 @@ function DefaultQueueTable() {
   }, [queueEntries, searchTerm]);
 
   return (
-    <div className={styles.container}>
-      <div className={styles.headerContainer}>
-        <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
-          <h4>{t('patientsCurrentlyInQueue', 'Patients currently in queue')}</h4>
-        </div>
-        <div className={styles.headerButtons}>
-          <ExtensionSlot
-            name="patient-search-button-slot"
-            state={{
-              isOpen: isPatientSearchOpen,
-              searchQuery: patientSearchQuery,
-              buttonText: t('addPatientToQueue', 'Add patient to queue'),
-              overlayHeader: t('addPatientToQueue', 'Add patient to queue'),
-              buttonProps: {
-                kind: 'secondary',
-                renderIcon: (props) => <Add size={16} {...props} />,
-                size: 'sm',
-              },
-              searchQueryUpdatedAction: (searchQuery: string) => {
-                setPatientSearchQuery(searchQuery);
-              },
-              selectPatientAction: (selectedPatientUuid: string) => {
-                setIsPatientSearchOpen(false);
-                launchWorkspace(serviceQueuesPatientSearchWorkspace, {
-                  selectedPatientUuid,
-                  currentServiceQueueUuid: selectedService?.serviceUuid,
-                  handleBackToSearchList,
-                });
-              },
-            }}
-          />
-        </div>
-      </div>
-      {!isLoading ? (
-        <div className={styles.paddedQueueTable}>
-          <QueueTable
-            queueEntries={filteredQueueEntries ?? []}
-            isValidating={isValidating}
-            queueUuid={null}
-            statusUuid={null}
-            ExpandedRow={QueueTableExpandedRow}
-            tableFilter={[
-              <QueueDropdownFilter />,
-              <StatusDropdownFilter />,
-              <TableToolbarSearch
-                className={styles.search}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                placeholder={t('searchThisList', 'Search this list')}
-                size={isDesktop(layout) ? 'sm' : 'lg'}
-              />,
-              <ClearQueueEntries queueEntries={filteredQueueEntries} />,
-            ]}
-          />
+    <div className={styles.defaultQueueTable}>
+      <Layer className={styles.container}>
+        <div className={styles.headerContainer}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+            <h4>{t('patientsCurrentlyInQueue', 'Patients currently in queue')}</h4>
+          </div>
+          <div className={styles.headerButtons}>
+            <ExtensionSlot
+              name="patient-search-button-slot"
+              state={{
+                isOpen: isPatientSearchOpen,
+                searchQuery: patientSearchQuery,
+                buttonText: t('addPatientToQueue', 'Add patient to queue'),
+                overlayHeader: t('addPatientToQueue', 'Add patient to queue'),
+                buttonProps: {
+                  kind: 'secondary',
+                  renderIcon: (props) => <Add size={16} {...props} />,
+                  size: 'sm',
+                },
+                searchQueryUpdatedAction: (searchQuery: string) => {
+                  setPatientSearchQuery(searchQuery);
+                },
+                selectPatientAction: (selectedPatientUuid: string) => {
+                  setIsPatientSearchOpen(false);
+                  launchWorkspace(serviceQueuesPatientSearchWorkspace, {
+                    selectedPatientUuid,
+                    currentServiceQueueUuid: selectedService?.serviceUuid,
+                    handleBackToSearchList,
+                  });
+                },
+              }}
+            />
+          </div>
         </div>
-      ) : (
-        <DataTableSkeleton role="progressbar" />
-      )}
+        {!isLoading ? (
+          <div>
+            <QueueTable
+              queueEntries={filteredQueueEntries ?? []}
+              isValidating={isValidating}
+              queueUuid={null}
+              statusUuid={null}
+              ExpandedRow={QueueTableExpandedRow}
+              tableFilter={[
+                <QueueDropdownFilter />,
+                <StatusDropdownFilter />,
+                <TableToolbarSearch
+                  className={styles.search}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  placeholder={t('searchThisList', 'Search this list')}
+                  size={isDesktop(layout) ? 'sm' : 'lg'}
+                />,
+                <ClearQueueEntries queueEntries={filteredQueueEntries} />,
+              ]}
+            />
+          </div>
+        ) : (
+          <DataTableSkeleton role="progressbar" />
+        )}
+      </Layer>
     </div>
   );
 }