(fix) O3-4052: Wrap SideNavMenu title in t function (#1928)

* (fix): Wrap sidebar title in t function * (chore): Update yarn.lock * (test): Fix test failing due to partial mock * (chore) Wrap table and tab headers in t function * Wrap actions in t function * Update tsconfig to include es2022
UCSF-IGHS · Oct 14, 2024 · 3cf5e33 · 3cf5e33
1 parent 3e450ea
commit 3cf5e33
Show file tree

Hide file tree

Showing 10 changed files with 1,694 additions and 1,304 deletions.
diff --git a/packages/esm-commons-lib/src/components/empty-state/table-empty-state.component.tsx b/packages/esm-commons-lib/src/components/empty-state/table-empty-state.component.tsx
@@ -9,11 +9,13 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 
 export const TableEmptyState: React.FC<{ tableHeaders: Array<{ key: string; header: string }>; message: string }> = ({
   tableHeaders,
   message,
 }) => {
+  const { t } = useTranslation();
   return (
     <div style={{ marginLeft: '-16px' }}>
       <DataTable rows={[]} headers={tableHeaders} isSortable={true} size="short" useZebraStyles={true}>
@@ -29,14 +31,14 @@ export const TableEmptyState: React.FC<{ tableHeaders: Array<{ key: string; head
                         isSortable: header.isSortable,
                       })}
                     >
-                      {header.header?.content ?? header.header}
+                      {t(header.header?.content ?? header.header)}
                     </TableHeader>
                   ))}
                 </TableRow>
               </TableHead>
               <TableBody>
                 <TableRow>
-                  <TableCell colSpan={tableHeaders.length}>{message}</TableCell>
+                  <TableCell colSpan={tableHeaders.length}>{t(message)}</TableCell>
                 </TableRow>
               </TableBody>
             </Table>

diff --git a/packages/esm-commons-lib/src/components/encounter-list/encounter-list.component.tsx b/packages/esm-commons-lib/src/components/encounter-list/encounter-list.component.tsx
@@ -245,7 +245,7 @@ export const EncounterList: React.FC<EncounterListProps> = ({
             {actions.map((actionItem, index) => (
               <OverflowMenuItem
                 index={index}
-                itemText={actionItem.label}
+                itemText={t(actionItem.label)}
                 onClick={(e) => {
                   e.preventDefault();
                   actionItem.mode == 'delete'

diff --git a/packages/esm-commons-lib/src/components/encounter-tile/encounter-tile.test.tsx b/packages/esm-commons-lib/src/components/encounter-tile/encounter-tile.test.tsx
@@ -17,19 +17,12 @@ const tileTestProps = {
   headerTitle: 'Test header title',
 };
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    openmrsFetch: jest.fn(),
-  };
-});
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+mockOpenmrsFetch.mockImplementation(jest.fn());
 
 const mockUseLastEncounter = useLastEncounter as jest.Mock;
 jest.mock('../../hooks/useLastEncounter');
 
-const mockOpenmrsFetch = openmrsFetch as jest.Mock;
-
 describe('Encounter tile component', () => {
   beforeEach(() => {
     jest.clearAllMocks();

diff --git a/...ges/esm-commons-lib/src/components/patient-list-tabs/ohri-patient-list-tabs.component.tsx b/...ges/esm-commons-lib/src/components/patient-list-tabs/ohri-patient-list-tabs.component.tsx
@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Tabs, Tab, TabList, TabPanels, TabPanel } from '@carbon/react';
 import { CohortPatientList } from '../cohort-patient-list/cohort-patient-list.component';
 
 import styles from './ohri-patient-list-tabs.scss';
 
 export function OHRIPatientListTabs({ patientListConfigs, moduleName }) {
+  const { t } = useTranslation();
   const [activeTabIndex, setActiveTabIndex] = useState(0); // State to track active tab index
   const handleTabChange = ({selectedIndex}) => {
     setActiveTabIndex(selectedIndex);
@@ -15,7 +17,7 @@ export function OHRIPatientListTabs({ patientListConfigs, moduleName }) {
         {patientListConfigs.map((config, index) => {
           return (
             <Tab key={index} id={config.cohortId}>
-              {config.label}
+              {t(config.label)}
             </Tab>
           );
         })}

diff --git a/packages/esm-commons-lib/src/components/patient-table/patient-table.component.tsx b/packages/esm-commons-lib/src/components/patient-table/patient-table.component.tsx
@@ -231,7 +231,7 @@ export const PatientTable: React.FC<PatientTableProps> = ({
                           })}
                           className={isDesktop(layout) ? styles.desktopHeader : styles.tabletHeader}
                         >
-                          {header.header?.content ?? header.header}
+                          {t(header.header?.content ?? header.header)}
                         </TableHeader>
                       ))}
                     </TableRow>

diff --git a/packages/esm-commons-lib/src/utils/createOHRIGroupedLink.tsx b/packages/esm-commons-lib/src/utils/createOHRIGroupedLink.tsx
@@ -34,7 +34,7 @@ function DashboardExtension({ dashboardLinkConfig }: { dashboardLinkConfig: Dash
   if (isFolder) {
     return (
       <SideNavItems>
-        <SideNavMenu title={folderTitle} renderIcon={folderIcon}>
+        <SideNavMenu title={t(folderTitle)} renderIcon={folderIcon}>
           <ConfigurableLink
             className={classNames('cds--side-nav__link', {
               'active-left-nav-link': navLink.match(name),

diff --git a/packages/esm-commons-lib/tsconfig.json b/packages/esm-commons-lib/tsconfig.json
@@ -14,7 +14,8 @@
       "es2015.promise",
       "es2016.array.include",
       "es2018",
-      "es2020"
+      "es2020",
+      "es2022"
     ],
     "resolveJsonModule": true,
     "noEmit": true,

diff --git a/...pp/src/hct/home-dashboard/care-and-treatment/summary-tiles/ct-summary-tiles.component.tsx b/...pp/src/hct/home-dashboard/care-and-treatment/summary-tiles/ct-summary-tiles.component.tsx
@@ -24,7 +24,7 @@ function CTSummaryTiles() {
     {
       title: t('missedAppointments', 'Missed appointments'),
       linkAddress: '#',
-      subTitle: '0-30 days',
+      subTitle: t('zeroToThirtyDays', '0-30 days'),
       value: 50,
     },
     {

diff --git a/packages/esm-hiv-care-treatment-app/translations/fr.json b/packages/esm-hiv-care-treatment-app/translations/fr.json
@@ -8,5 +8,6 @@
   "missedAppointments": "Rendez-vous manqués",
   "noDrugsPickedLast90days": "Aucun médicament pris, 90 derniers jours",
   "patientsInClinicPopulation": "Patients dans la population de la clinique",
-  "suspectedLTFU": "LTFU suspecté"
+  "suspectedLTFU": "LTFU suspecté",
+  "zeroToThirtyDays": "0-30 jours"
 }