(fix) service queues: Fix React missing key warning for table filters…

… in QueueTable This PR fixes a missing React key warning for the tableFilter prop in QueueTable. `tableFilter` is an array of React nodes that get rendered as children of the `TableToolbarContent` component. I've renamed the prop to `tableFilters` to better describe that it's an array of filters. Second, I've updated the rendering logic to use the `map` function to iterate over the `tableFilters` array and provide a unique `key` prop to each child. I'm using a `React.Fragment` to wrap each child in the array to avoid unnecessary additional DOM elements. Each of these fragments uses the index of the array as the key. This is not a perfect solution in the sense that keys should be stable and unique identifiers for elements in the array. However, in this case, the array contents are dynamic and may change in size, so a static index identifier works for now. I've also added keys to the `QueueTableByStatusMenu` and `QueueTableMetricsCard` components. I've also fixed the spacing of the filters in the `QueueTable` component as well as removed some unnecessary space from the filter label text.
openmrs · Oct 23, 2024 · 379d1ce · 379d1ce
1 parent a14dade
commit 379d1ce
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 17 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,7 +133,7 @@ function DefaultQueueTable() {
               queueUuid={null}
               statusUuid={null}
               ExpandedRow={QueueTableExpandedRow}
-              tableFilter={[
+              tableFilters={[
                 <QueueDropdownFilter />,
                 <StatusDropdownFilter />,
                 <TableToolbarSearch
@@ -159,16 +159,17 @@ function QueueDropdownFilter() {
   const layout = useLayoutType();
   const { services } = useQueueServices();
   const selectedService = useSelectedService();
-  const handleServiceChange = ({ selectedItem }) => {
+
+  const handleServiceChange = useCallback(({ selectedItem }) => {
     updateSelectedService(selectedItem.uuid, selectedItem?.display);
-  };
+  }, []);
 
   return (
     <>
       <div className={styles.filterContainer}>
         <Dropdown
           id="serviceFilter"
-          titleText={t('filterByService', 'Filter by service :')}
+          titleText={t('filterByService', 'Filter by service:')}
           label={selectedService?.serviceDisplay ?? t('all', 'All')}
           type="inline"
           items={[{ display: `${t('all', 'All')}` }, ...(services ?? [])]}
@@ -195,7 +196,7 @@ function StatusDropdownFilter() {
       <div className={styles.filterContainer}>
         <Dropdown
           id="statusFilter"
-          titleText={t('filterByStatus', 'Filter by status :')}
+          titleText={t('filterByStatus', 'Filter by status:')}
           label={queueStatus?.statusDisplay ?? t('all', 'All')}
           type="inline"
           items={[{ display: `${t('all', 'All')}` }, ...(statuses ?? [])]}

diff --git a/packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.component.tsx b/packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.component.tsx
@@ -18,7 +18,7 @@ export default function QueueTableByStatusMenu() {
     <SideNavMenu title={t('serviceQueues', 'Service queues')} className={styles.queueTableByStatusNavMenu}>
       <BrowserRouter>
         {queues.map((queue) => (
-          <QueueTableByStatusLink queue={queue} />
+          <QueueTableByStatusLink key={queue.uuid} queue={queue} />
         ))}
       </BrowserRouter>
     </SideNavMenu>

diff --git a/packages/esm-service-queues-app/src/queue-table/queue-table-metrics.component.tsx b/packages/esm-service-queues-app/src/queue-table/queue-table-metrics.component.tsx
@@ -20,7 +20,12 @@ function QueueTableMetrics({ selectedQueue }: QueueTableMetricsProps) {
       <QueueTableMetricsCard value={count} headerLabel={t('totalPatients', 'Total Patients')} />
       {allowedStatuses?.map((status) => {
         return (
-          <QueueTableMetricsCard queueUuid={selectedQueue.uuid} status={status.uuid} headerLabel={status.display} />
+          <QueueTableMetricsCard
+            headerLabel={status.display}
+            key={status.uuid}
+            queueUuid={selectedQueue.uuid}
+            status={status.uuid}
+          />
         );
       })}
     </div>

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
@@ -46,7 +46,7 @@ interface QueueTableProps {
   ExpandedRow?: FC<{ queueEntry: QueueEntry }>;
 
   // if provided, adds addition table toolbar elements
-  tableFilter?: React.ReactNode[];
+  tableFilters?: React.ReactNode[];
 
   isLoading?: boolean;
 }
@@ -58,7 +58,7 @@ function QueueTable({
   statusUuid,
   queueTableColumnsOverride,
   ExpandedRow,
-  tableFilter,
+  tableFilters,
   isLoading,
 }: QueueTableProps) {
   const { t } = useTranslation();
@@ -80,7 +80,7 @@ function QueueTable({
     paginatedQueueEntries?.map((queueEntry) => {
       const row: Record<string, JSX.Element | string> = { id: queueEntry.uuid };
       columns.forEach(({ key, CellComponent }) => {
-        row[key] = <CellComponent queueEntry={queueEntry} />;
+        row[key] = <CellComponent key={key} queueEntry={queueEntry} />;
       });
       return row;
     }) ?? [];
@@ -111,18 +111,22 @@ function QueueTable({
                 </span>
               ) : null}
 
-              {tableFilter && (
+              {tableFilters && (
                 <TableToolbar {...getToolbarProps()}>
-                  <TableToolbarContent className={styles.toolbarContent}>{tableFilter}</TableToolbarContent>
+                  <TableToolbarContent className={styles.toolbarContent}>
+                    {tableFilters.map((tableFilter, index) => (
+                      <React.Fragment key={index}>{tableFilter}</React.Fragment>
+                    ))}
+                  </TableToolbarContent>
                 </TableToolbar>
               )}
             </div>
             <Table {...getTableProps()} className={styles.queueTable} useZebraStyles>
               <TableHead>
                 <TableRow>
                   {ExpandedRow && <TableExpandHeader enableToggle {...getExpandHeaderProps()} />}
-                  {headers.map((header, i) => (
-                    <TableHeader key={i} {...getHeaderProps({ header })}>
+                  {headers.map((header) => (
+                    <TableHeader key={header.key} {...getHeaderProps({ header })}>
                       {header.header}
                     </TableHeader>
                   ))}
@@ -146,7 +150,10 @@ function QueueTable({
                         ))}
                       </Row>
                       {ExpandedRow && row.isExpanded && (
-                        <TableExpandedRow className={styles.expandedActiveVisitRow} colSpan={headers.length + 1}>
+                        <TableExpandedRow
+                          key={i}
+                          className={styles.expandedActiveVisitRow}
+                          colSpan={headers.length + 1}>
                           <ExpandedRow queueEntry={paginatedQueueEntries[i]} />
                         </TableExpandedRow>
                       )}

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
@@ -28,6 +28,10 @@
 }
 
 .filterContainer {
+  label {
+    margin-right: layout.$spacing-03 !important;
+  }
+
   :global(.cds--dropdown__wrapper--inline) {
     gap: 0;
   }
@@ -97,6 +101,7 @@
   .toolbarContent {
     display: flex;
     z-index: 1; // prevent dropdown from getting covered by table elements
+    column-gap: layout.$spacing-03;
   }
 
   :global(.cds--table-toolbar) {

diff --git a/packages/esm-service-queues-app/translations/en.json b/packages/esm-service-queues-app/translations/en.json
@@ -83,8 +83,8 @@
   "femaleLabelText": "Female",
   "fields": "of the following fields",
   "filter": "Filter",
-  "filterByService": "Filter by service :",
-  "filterByStatus": "Filter by status :",
+  "filterByService": "Filter by service:",
+  "filterByStatus": "Filter by status:",
   "filterTable": "Filter table",
   "firstName": "First name",
   "firstNameSort": "First name (a-z)",