(fix) service-queues: Fix queue table empty state (#1452)

This PR is a follow-up to #1390 which amended the Service Queues dashboard to align more closely with the designs. This PR fixes an additional issue with the queue table where the empty state wasn't being displayed correctly. More specifically, it: - Amends the styling of the queue table empty state to match the designs. - Fixes the positioning of the loading indicator in the queue table toolbar so it's further offset to the right.
openmrs · Jan 18, 2025 · 4a82e38 · 4a82e38
1 parent 30c81cb
commit 4a82e38
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git a/packages/esm-service-queues-app/src/queue-table/default-queue-table.component.tsx b/packages/esm-service-queues-app/src/queue-table/default-queue-table.component.tsx
@@ -133,13 +133,18 @@ function QueueTableSection() {
     });
   }, [columns, queueEntries, searchTerm]);
 
-  return !isLoading ? (
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
     <QueueTable
-      queueEntries={filteredQueueEntries ?? []}
+      ExpandedRow={QueueTableExpandedRow}
+      isLoading={isLoading}
       isValidating={isValidating}
+      queueEntries={filteredQueueEntries ?? []}
       queueUuid={null}
       statusUuid={null}
-      ExpandedRow={QueueTableExpandedRow}
       tableFilters={
         <>
           <QueueDropdownFilter /> <StatusDropdownFilter />
@@ -153,8 +158,6 @@ function QueueTableSection() {
         </>
       }
     />
-  ) : (
-    <DataTableSkeleton role="progressbar" />
   );
 }
 

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
@@ -76,7 +76,7 @@ function QueueTable({
     goTo(1);
   }, [goTo, queueEntries]);
 
-  const rowsData =
+  const rows =
     paginatedQueueEntries?.map((queueEntry) => {
       const row: Record<string, JSX.Element | string> = { id: queueEntry.uuid };
       columns.forEach(({ key, CellComponent }) => {
@@ -97,7 +97,7 @@ function QueueTable({
     <DataTable
       data-floating-menu-container
       overflowMenuOnHover={isDesktop(layout)}
-      rows={rowsData}
+      rows={rows}
       headers={columns}
       size={responsiveSize}
       useZebraStyles>
@@ -106,9 +106,9 @@ function QueueTable({
           <TableContainer className={styles.tableContainer}>
             <div className={styles.toolbarContainer}>
               {isValidating ? (
-                <span>
+                <div className={styles.loaderContainer}>
                   <InlineLoading />
-                </span>
+                </div>
               ) : null}
 
               {tableFilters && (

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
@@ -11,22 +11,37 @@
   border: 1px solid colors.$gray-20;
 }
 
+.tableSection {
+  background: colors.$gray-10;
+}
+
 .headerContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: layout.$spacing-05;
-  background-color: $ui-01;
+  background-color: colors.$gray-10;
 }
 
 .headerButtons {
   display: flex;
-  justify-content: space-between;
+
   .filterSearch {
     margin-left: layout.$spacing-05;
   }
 }
 
+.loaderContainer {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+
+  :global(.cds--inline-loading) {
+    justify-content: end;
+  }
+}
+
 .filterContainer {
   label {
     margin-right: layout.$spacing-03 !important;
@@ -65,7 +80,7 @@
 
 .statusTableContainer {
   padding: layout.$spacing-05;
-  background-color: $ui-01;
+  background-color: colors.$gray-10;
 }
 
 .statusTableHeader {
@@ -77,7 +92,7 @@
 }
 
 .tableContainer {
-  background-color: $ui-01;
+  background-color: colors.$gray-10;
   // margin: 0 layout.$spacing-05;
   padding: 0 1rem;
 
@@ -105,6 +120,7 @@
   }
 
   :global(.cds--table-toolbar) {
+    flex: 3;
     position: static;
     overflow: visible;
   }
@@ -193,11 +209,13 @@ html[dir='rtl'] {
 
 .tileContainer {
   border-top: 1px solid $ui-03;
-  padding: layout.$spacing-07 0;
+  padding: layout.$spacing-07 layout.$spacing-05;
+  background: white;
+  margin: 0 layout.$spacing-05;
 }
 
 .tile {
-  background-color: $ui-01;
+  background-color: colors.$gray-10;
   margin: auto;
   width: fit-content;
 }