(fix) Fix React missing key warning for QueueTable table filters

packages/esm-service-queues-app/src/queue-table/default-queue-table.component.tsx

@@ -133,17 +133,18 @@ function DefaultQueueTable() {
               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} />,
-              ]}
+              tableFilters={
+                <>
+                  <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>
         ) : (
@@ -159,16 +160,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 +197,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 ?? [])]}

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>

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>

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,18 @@ function QueueTable({
                 </span>
               ) : null}
 
-              {tableFilter && (
+              {tableFilters && (
                 <TableToolbar {...getToolbarProps()}>
-                  <TableToolbarContent className={styles.toolbarContent}>{tableFilter}</TableToolbarContent>
+                  <TableToolbarContent className={styles.toolbarContent}>{tableFilters}</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 +146,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>
                       )}

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) {

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)",