From 9201ed389bd8f811ff2c1f265c4ccbf60d5c3079 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Mon, 17 Feb 2025 14:52:11 +0300
Subject: [PATCH] (fix) Improve queue table layout stability (#1484)

Fixes zebra styling for the Queue table by:

- Make zebra striping conditional on having multiple columns
- Fix table layout shift by adding hidden expanded rows
- Remove redundant zebra styling
- Update expanded row colspan to match header count

This improves visual consistency and ensures proper layout across different table configurations.

Co-authored-by: Nethmi Rodrigo <34070216+NethmiRodrigo@users.noreply.github.com>
---
 .../queue-entry-confirm-action.modal.tsx      |  2 +-
 .../src/queue-table/queue-table.component.tsx | 12 +++++++-----
 .../src/queue-table/queue-table.scss          |  4 ++++
 .../src/queue-table/queue-table.test.tsx      | 19 ++++++++++++-------
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.modal.tsx b/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.modal.tsx
index 77bb7435e..b8f2fef9a 100644
--- a/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.modal.tsx
+++ b/packages/esm-service-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
index 674ea4bbf..599352b87 100644
--- 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
index de93cf796..ba2519bf4 100644
--- 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
index 69a027e6b..b693f4cfa 100644
--- 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', () => {