Merge branch 'main' into O3-4016

openmrs · Oct 24, 2024 · fa603f9 · fa603f9
2 parents 8d6847f + bd30184
commit fa603f9
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 56 deletions.
diff --git a/packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx b/packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
@@ -1,16 +1,15 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dropdown } from '@carbon/react';
-import MetricsCard from './metrics-card.component';
-import MetricsHeader from './metrics-header.component';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
 import { updateSelectedService, useSelectedService, useSelectedQueueLocationUuid } from '../helpers/helpers';
 import { useActiveVisits, useAverageWaitTime } from './clinic-metrics.resource';
 import { useServiceMetricsCount } from './queue-metrics.resource';
-import styles from './clinic-metrics.scss';
-import { useQueues } from '../hooks/useQueues';
 import { useQueueEntries } from '../hooks/useQueueEntries';
+import MetricsCard from './metrics-card.component';
+import MetricsHeader from './metrics-header.component';
 import useQueueServices from '../hooks/useQueueService';
-import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import styles from './clinic-metrics.scss';
 
 export interface Service {
   uuid: string;
@@ -64,13 +63,14 @@ function ClinicMetrics() {
           locationUuid={currentQueueLocation}>
           <Dropdown
             id="inline"
-            type="inline"
             items={[{ display: `${t('all', 'All')}` }, ...(services ?? [])]}
             itemToString={(item) =>
               item ? `${item.display} ${item.location?.display ? `- ${item.location.display}` : ''}` : ''
             }
+            label=""
             onChange={handleServiceChange}
             size={isDesktop(layout) ? 'sm' : 'lg'}
+            type="inline"
           />
         </MetricsCard>
         <MetricsCard

diff --git a/packages/esm-service-queues-app/src/patient-queue-metrics/metrics-header.component.tsx b/packages/esm-service-queues-app/src/patient-queue-metrics/metrics-header.component.tsx
@@ -1,3 +1,5 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ComboButton, MenuItem } from '@carbon/react';
 import {
   UserHasAccess,
@@ -8,22 +10,29 @@ import {
   useLayoutType,
   useSession,
 } from '@openmrs/esm-framework';
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { spaBasePath } from '../constants';
 import styles from './metrics-header.scss';
 
 const MetricsHeader = () => {
   const { t } = useTranslation();
+  const currentUserSession = useSession();
+  const layout = useLayoutType();
+
   const metricsTitle = t('clinicMetrics', 'Clinic metrics');
   const queueScreenText = t('queueScreen', 'Queue screen');
-  const currentUserSession = useSession();
   const providerUuid = currentUserSession?.currentProvider?.uuid;
-  const layout = useLayoutType();
 
-  const navigateToQueueScreen = () => {
+  const launchAddProviderToRoomModal = useCallback(() => {
+    const dispose = showModal('add-provider-to-room-modal', {
+      closeModal: () => dispose(),
+      providerUuid,
+    });
+  }, [providerUuid]);
+
+  const navigateToQueueScreen = useCallback(() => {
     navigate({ to: `${spaBasePath}/service-queues/screen` });
-  };
+  }, []);
+
   return (
     <div className={styles.metricsContainer}>
       <span className={styles.metricsTitle}>{metricsTitle}</span>
@@ -44,15 +53,7 @@ const MetricsHeader = () => {
             onClick={() => launchWorkspace('service-queues-room-form')}
           />
         </UserHasAccess>
-        <MenuItem
-          label={t('addProviderQueueRoom', 'Add provider queue room')}
-          onClick={() => {
-            const dispose = showModal('add-provider-to-room-modal', {
-              closeModal: () => dispose(),
-              providerUuid,
-            });
-          }}
-        />
+        <MenuItem label={t('addProviderQueueRoom', 'Add provider queue room')} onClick={launchAddProviderToRoomModal} />
       </ComboButton>
     </div>
   );

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,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 ?? [])]}

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

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

diff --git a/packages/esm-ward-app/src/ward-view-header/ward-metric.scss b/packages/esm-ward-app/src/ward-view-header/ward-metric.scss
@@ -1,9 +1,9 @@
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .metric {
-  margin-left: spacing.$spacing-05;
+  margin-left: layout.$spacing-05;
   display: flex;
   align-items: end;
   gap: 5px;
@@ -20,6 +20,6 @@
 }
 
 .skeleton {
-  height: 15px;
-  width: 15px;
+  height: layout.$spacing-05;
+  width: layout.$spacing-05;
 }
diff --git a/packages/esm-ward-app/src/ward-view-header/ward-metrics.scss b/packages/esm-ward-app/src/ward-view-header/ward-metrics.scss
@@ -1,5 +1,4 @@
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .metricsContainer {
   display: flex;

diff --git a/packages/esm-ward-app/src/ward-view/ward-view.scss b/packages/esm-ward-app/src/ward-view/ward-view.scss
@@ -1,5 +1,5 @@
 @use '@carbon/layout';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .wardView {
   background-color: #e4e4e4;