(chore) O3-3069 - service queues - Tweak the queue table UI (#1256)

* (chore) O3-3069 - service queues - Tweak the queue table UI * Apply suggestions from code review Co-authored-by: Dennis Kigen <kigen.work@gmail.com> * Fixup --------- Co-authored-by: Dennis Kigen <kigen.work@gmail.com>
openmrs · Jul 26, 2024 · 92c84bc · 92c84bc
1 parent 2c08c60
commit 92c84bc
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 94 deletions.
diff --git a/packages/esm-service-queues-app/src/queue-table/cells/queue-table-action-cell.component.tsx b/packages/esm-service-queues-app/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(),

diff --git a/...s/esm-service-queues-app/src/queue-table/cells/queue-table-coming-from-cell.component.tsx b/...s/esm-service-queues-app/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) => ({

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
@@ -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,
@@ -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 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>
-        <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>
-      ) : (
-        <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>
   );
 }

diff --git a/packages/esm-service-queues-app/src/queue-table/queue-table-by-status-skeleton.component.tsx b/packages/esm-service-queues-app/src/queue-table/queue-table-by-status-skeleton.component.tsx
@@ -1,12 +1,8 @@
-import { DataTableSkeleton, SkeletonText, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
-import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import { DataTableSkeleton, SkeletonText } from '@carbon/react';
 import React from 'react';
 import styles from './queue-table.scss';
-import classNames from 'classnames';
 
 export const QueueTableByStatusSkeleton = () => {
-  const layout = useLayoutType();
-
   return (
     <div className={styles.container}>
       <div className={styles.statusTableContainer}>

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
@@ -48,9 +48,6 @@ interface QueueTableProps {
   // if provided, adds addition table toolbar elements
   tableFilter?: React.ReactNode[];
 
-  // if provided, adds title to the top-left
-  header?: string;
-
   isLoading?: boolean;
 }
 
@@ -62,7 +59,6 @@ function QueueTable({
   queueTableColumnsOverride,
   ExpandedRow,
   tableFilter,
-  header,
   isLoading,
 }: QueueTableProps) {
   const { t } = useTranslation();
@@ -109,7 +105,6 @@ function QueueTable({
         <>
           <TableContainer className={styles.tableContainer}>
             <div className={styles.toolbarContainer}>
-              <h5 className={styles.tableHeader}>{header}</h5>
               {isValidating ? (
                 <span>
                   <InlineLoading />

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
@@ -1,9 +1,14 @@
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.defaultQueueTable {
+  margin: 1rem;
+}
 
 .container {
-  background-color: $ui-01;
+  border: 1px solid colors.$gray-20;
 }
 
 .headerContainer {
@@ -18,7 +23,7 @@
   display: flex;
   justify-content: space-between;
   .filterSearch {
-    margin-left: spacing.$spacing-05;
+    margin-left: layout.$spacing-05;
   }
 }
 
@@ -55,7 +60,12 @@
 }
 
 .statusTableContainer {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
+  background-color: $ui-01;
+}
+
+.statusTableHeader {
+  padding: layout.$spacing-03 0;
 }
 
 .tableHeader {
@@ -64,7 +74,7 @@
 
 .tableContainer {
   background-color: $ui-01;
-  // margin: 0 spacing.$spacing-05;
+  // margin: 0 layout.$spacing-05;
   padding: 0;
 
   a {
@@ -113,7 +123,7 @@
 .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 
   h4:after {
     content: '';
@@ -148,7 +158,7 @@ html[dir='rtl'] {
   .headerContainer {
     svg {
       margin-left: 0;
-      margin-right: spacing.$spacing-03;
+      margin-right: layout.$spacing-03;
     }
     h4 {
       text-align: right;
@@ -162,25 +172,25 @@ html[dir='rtl'] {
       text-align: right;
       .serviceColor {
         margin-right: 0;
-        margin-left: spacing.$spacing-03;
+        margin-left: layout.$spacing-03;
       }
       button {
-        padding: spacing.$spacing-03 0 spacing.$spacing-03 spacing.$spacing-05;
+        padding: layout.$spacing-03 0 layout.$spacing-03 layout.$spacing-05;
         text-align: right;
       }
     }
   }
 }
 
 .tabList {
-  padding-left: spacing.$spacing-05;
+  padding-left: layout.$spacing-05;
 }
 
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
   padding: 2rem 0;
-  // margin: 0 spacing.$spacing-05;
+  // margin: 0 layout.$spacing-05;
 }
 
 .tile {
@@ -194,7 +204,3 @@ html[dir='rtl'] {
   justify-content: center;
   align-items: center;
 }
-
-.paddedQueueTable {
-  padding: 0 spacing.$spacing-05;
-}
diff --git a/packages/esm-service-queues-app/src/views/queue-tables-for-all-statuses.component.tsx b/packages/esm-service-queues-app/src/views/queue-tables-for-all-statuses.component.tsx
@@ -171,14 +171,16 @@ function QueueTableForQueueAndStatus({
   const filteredQueueEntries = filterQueueEntries(queueEntries, searchTerm, statusUuid);
   return (
     <div className={styles.statusTableContainer}>
-      <QueueTable
-        key={statusUuid}
-        queueEntries={filteredQueueEntries}
-        header={status.display}
-        isValidating={isValidating}
-        queueUuid={queue.uuid}
-        statusUuid={statusUuid}
-      />
+      <h5 className={styles.statusTableHeader}>{status.display}</h5>
+      <div className={styles.container}>
+        <QueueTable
+          key={statusUuid}
+          queueEntries={filteredQueueEntries}
+          isValidating={isValidating}
+          queueUuid={queue.uuid}
+          statusUuid={statusUuid}
+        />
+      </div>
     </div>
   );
 }