BN-19 | Add. i18n for labels in SideNavBar Items

Author: mohan-13

src/__mocks__/configMocks.ts

@@ -203,7 +203,6 @@ export const validDashboardConfig: DashboardConfig = {
     {
       name: 'Vitals',
       icon: 'heartbeat',
-      translationKey: 'DASHBOARD_VITALS_KEY',
       controls: [],
     },
     {

src/components/common/sidebar/Sidebar.tsx

@@ -3,6 +3,7 @@ import { SideNav, SideNavItems, SideNavLink } from '@carbon/react';
 import BahmniIcon from '@components/common/bahmniIcon/BahmniIcon';
 import { ICON_SIZE } from '@constants/icon';
 import * as styles from './styles/Sidebar.module.scss';
+import { useTranslation } from 'react-i18next';
 
 /**
  * SidebarItem component displays a single item in the sidebar with an icon and label.
@@ -34,6 +35,8 @@ interface SidebarProps {
 }
 
 const Sidebar: React.FC<SidebarProps> = ({ items }) => {
+  const { t } = useTranslation();
+
   const handleOnClick = (e: React.MouseEvent, action: () => void) => {
     e.preventDefault();
     action();
@@ -63,7 +66,7 @@ const Sidebar: React.FC<SidebarProps> = ({ items }) => {
             isActive={item.active}
             data-testid={`sidebar-item-${item.id}`}
           >
-            {item.label}
+            {t(item.label)}
           </SideNavLink>
         ))}
       </SideNavItems>

src/components/common/sidebar/__tests__/Sidebar.test.tsx

@@ -2,6 +2,16 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import Sidebar from '../Sidebar';
 
+// Mock react-i18next
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      // For testing, we'll return the key to simulate translation
+      return key;
+    },
+  }),
+}));
+
 // Mock the CSS module
 jest.mock('../styles/Sidebar.module.scss', () => ({
   sidebar: 'sidebar-mock',
@@ -89,11 +99,13 @@ describe('Sidebar', () => {
       icon: 'fa-clipboard-list',
       label: 'Item 1',
       active: true,
+      action: () => {},
     },
     {
       id: 'item2',
       icon: 'fa-heartbeat',
       label: 'Item 2',
+      action: () => {},
     },
   ];
 
@@ -130,7 +142,7 @@ describe('Sidebar', () => {
     const mockAction = jest.fn();
     const itemsWithAction = [
       { ...defaultItems[0], action: mockAction },
-      defaultItems[1],
+      { ...defaultItems[1] }, // action is already included from defaultItems
     ];
 
     render(<Sidebar items={itemsWithAction} />);

src/services/ConsultationPageService.ts

@@ -41,7 +41,7 @@ export const getSidebarItems = (
     id: section.name,
     icon: section.icon,
     // TODO: add translation
-    label: section.name,
+    label: section.translationKey || section.name,
     active: false,
     action: () => {},
   }));