From 83a1141006bd64acb67fc46e4a2d3bc2c5e5484a Mon Sep 17 00:00:00 2001
From: Nethmi Rodrigo <34070216+NethmiRodrigo@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:27:34 +0530
Subject: [PATCH] (fix): Wrap page header in t function (#226)

Co-authored-by: Dennis Kigen <kigen.work@gmail.com>
---
 .../src/dashboard/home-dashboard.component.tsx       |  3 ++-
 packages/esm-home-app/src/index.ts                   | 12 ++----------
 .../src/page-header/page-header.component.tsx        | 11 +++++++++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/esm-home-app/src/dashboard/home-dashboard.component.tsx b/packages/esm-home-app/src/dashboard/home-dashboard.component.tsx
index 4c075e1a5..b6ae21eaf 100644
--- a/packages/esm-home-app/src/dashboard/home-dashboard.component.tsx
+++ b/packages/esm-home-app/src/dashboard/home-dashboard.component.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { useLayoutType, isDesktop, useExtensionStore, ExtensionSlot, WorkspaceContainer } from '@openmrs/esm-framework';
-import DashboardView from './dashboard-view.component';
 import type { DashboardConfig } from '../types/index';
+import DashboardView from './dashboard-view.component';
 import styles from './home-dashboard.scss';
 
 export default function HomeDashboard() {
   const params = useParams();
   const extensionStore = useExtensionStore();
   const layout = useLayoutType();
+
   const ungroupedDashboards =
     extensionStore.slots['homepage-dashboard-slot']?.assignedExtensions
       .map((e) => e.meta)
diff --git a/packages/esm-home-app/src/index.ts b/packages/esm-home-app/src/index.ts
index 7cebda503..7d6540a39 100644
--- a/packages/esm-home-app/src/index.ts
+++ b/packages/esm-home-app/src/index.ts
@@ -1,10 +1,10 @@
-import { registerBreadcrumbs, defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
 import { createDashboardLink } from './createDashboardLink.component';
 import { dashboardMeta } from './dashboard.meta';
 import { esmHomeSchema } from './openmrs-esm-home-schema';
-import rootComponent from './root.component';
 import homeNavMenuComponent from './side-menu/side-menu.component';
 import homeWidgetDashboardComponent from './home-page-widgets/home-page-widgets.component';
+import rootComponent from './root.component';
 
 const moduleName = '@openmrs/esm-home-app';
 const pageName = 'home';
@@ -30,12 +30,4 @@ export const metrics = getAsyncLifecycle(() => import('./metrics/metrics.compone
 
 export function startupApp() {
   defineConfigSchema(moduleName, esmHomeSchema);
-  // t('home', 'Home');
-
-  registerBreadcrumbs([
-    {
-      path: `${window.spaBase}/${pageName}`,
-      title: () => Promise.resolve(window.i18next.t('home', { defaultValue: 'Home', ns: moduleName })),
-    },
-  ]);
 }
diff --git a/packages/esm-home-app/src/page-header/page-header.component.tsx b/packages/esm-home-app/src/page-header/page-header.component.tsx
index 40184c462..13861b26b 100644
--- a/packages/esm-home-app/src/page-header/page-header.component.tsx
+++ b/packages/esm-home-app/src/page-header/page-header.component.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { PageHeader, HomePictogram } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { HomePictogram, PageHeader } from '@openmrs/esm-framework';
 import styles from './page-header.scss';
 
 interface PageHeaderProps {
@@ -7,7 +8,13 @@ interface PageHeaderProps {
 }
 
 const HomePageHeader: React.FC<PageHeaderProps> = ({ dashboardTitle }) => {
-  return <PageHeader illustration={<HomePictogram />} title={dashboardTitle} className={styles.pageHeader} />;
+  const { t } = useTranslation();
+
+  /**
+   * Translation for the home page header
+   * // t('home', 'Home')
+   */
+  return <PageHeader className={styles.pageHeader} illustration={<HomePictogram />} title={t(dashboardTitle)} />;
 };
 
 export default HomePageHeader;