Merge branch 'main' into feat/O3-4211

openmrs · Feb 17, 2025 · 1e6f7fa · 1e6f7fa
2 parents acd1046 + 9201ed3
commit 1e6f7fa
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/...rvice-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.modal.tsx b/...rvice-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.modal.tsx
@@ -85,7 +85,7 @@ export const QueueEntryConfirmActionModal: React.FC<QueueEntryUndoActionsModalPr
         ) : (
           <Stack gap={4}>
             <h5>{queueEntry.display}</h5>
-            <p>{modalInstruction}</p>
+            <span>{modalInstruction}</span>
           </Stack>
         )}
       </ModalBody>

diff --git a/packages/esm-service-queues-app/src/queue-table/queue-table.component.tsx b/packages/esm-service-queues-app/src/queue-table/queue-table.component.tsx
@@ -100,7 +100,7 @@ function QueueTable({
       rows={rows}
       headers={columns}
       size={responsiveSize}
-      useZebraStyles>
+      useZebraStyles={columns?.length > 1}>
       {({ rows, headers, getTableProps, getHeaderProps, getRowProps, getToolbarProps, getExpandHeaderProps }) => (
         <>
           <TableContainer className={styles.tableContainer}>
@@ -117,7 +117,7 @@ function QueueTable({
                 </TableToolbar>
               )}
             </div>
-            <Table {...getTableProps()} className={styles.queueTable} useZebraStyles>
+            <Table {...getTableProps()} className={styles.queueTable}>
               <TableHead>
                 <TableRow>
                   {ExpandedRow && <TableExpandHeader enableToggle {...getExpandHeaderProps()} />}
@@ -145,13 +145,15 @@ function QueueTable({
                           </TableCell>
                         ))}
                       </Row>
-                      {ExpandedRow && row.isExpanded && (
+                      {ExpandedRow && row.isExpanded ? (
                         <TableExpandedRow
-                          key={i}
                           className={styles.expandedActiveVisitRow}
-                          colSpan={headers.length + 1}>
+                          colSpan={headers.length + 2}
+                          key={i}>
                           <ExpandedRow queueEntry={paginatedQueueEntries[i]} />
                         </TableExpandedRow>
+                      ) : (
+                        <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
                       )}
                     </React.Fragment>
                   );

diff --git a/packages/esm-service-queues-app/src/queue-table/queue-table.scss b/packages/esm-service-queues-app/src/queue-table/queue-table.scss
@@ -237,3 +237,7 @@ html[dir='rtl'] {
   @include type.type-style('body-compact-01');
   color: $text-02;
 }
+
+.hiddenRow {
+  display: none;
+}
diff --git a/packages/esm-service-queues-app/src/queue-table/queue-table.test.tsx b/packages/esm-service-queues-app/src/queue-table/queue-table.test.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable testing-library/no-node-access */
 import React from 'react';
-import { getDefaultsFromConfigSchema, useConfig, useSession } from '@openmrs/esm-framework';
 import { screen, within } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig, useSession } from '@openmrs/esm-framework';
+import { renderWithSwr } from 'tools';
 import { type ConfigObject, configSchema } from '../config-schema';
 import { mockPriorityNonUrgent, mockPriorityUrgent, mockQueueEntries, mockSession } from '__mocks__';
-import { renderWithSwr } from 'tools';
 import QueueTable from './queue-table.component';
 
 const mockUseSession = jest.mocked(useSession);
@@ -67,9 +67,12 @@ const defaultProps = {
 };
 
 describe('QueueTable', () => {
+  let consoleSpy: jest.SpyInstance;
+
   beforeEach(() => {
     mockUseSession.mockReturnValue(mockSession.data);
     mockUseConfig.mockReturnValue(configDefaults);
+    consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
   });
 
   it('renders an empty table with default columns when there are no queue entries', () => {
@@ -202,13 +205,15 @@ describe('QueueTable', () => {
     });
 
     const rows = screen.queryAllByRole('row');
-    const firstRow = rows[1];
-    const cells = within(firstRow).getAllByRole('cell');
+    expect(rows).toHaveLength(5);
+
+    const briansRow = rows[1];
+    const alicesRow = rows[3];
+    const cells = within(briansRow).getAllByRole('cell');
     expect(cells[1].childNodes[0]).toHaveClass('bold');
 
-    const secondRow = rows[2];
-    const secondCells = within(secondRow).getAllByRole('cell');
-    expect(secondCells[1].childNodes[0]).toHaveClass('orange');
+    const alicesCells = within(alicesRow).getAllByRole('cell');
+    expect(alicesCells[1].childNodes[0]).toHaveClass('orange');
   });
 
   it('uses the visitQueueNumberAttributeUuid defined at the top level', () => {