From 10e8dee956f47eb4dd3e738a77d9d350f550f816 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <sharmava05@gmail.com>
Date: Thu, 5 Sep 2024 18:49:27 +0300
Subject: [PATCH 1/2] Workspace title should be translated inside the workspace
 container

---
 packages/framework/esm-framework/docs/API.md              | 2 +-
 .../docs/interfaces/WorkspaceContainerProps.md            | 8 ++++----
 packages/framework/esm-styleguide/package.json            | 1 +
 .../container/workspace-container.component.tsx           | 4 +++-
 .../framework/esm-styleguide/src/workspaces/workspaces.ts | 2 +-
 yarn.lock                                                 | 1 +
 6 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
index 0d39c2ad4..8e989a4a3 100644
--- a/packages/framework/esm-framework/docs/API.md
+++ b/packages/framework/esm-framework/docs/API.md
@@ -5777,7 +5777,7 @@ This component also provides everything needed for workspace notifications to be
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx:67](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx#L67)
+[packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx:68](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx#L68)
 
 ___
 
diff --git a/packages/framework/esm-framework/docs/interfaces/WorkspaceContainerProps.md b/packages/framework/esm-framework/docs/interfaces/WorkspaceContainerProps.md
index 9954cf2e2..07cd2b74e 100644
--- a/packages/framework/esm-framework/docs/interfaces/WorkspaceContainerProps.md
+++ b/packages/framework/esm-framework/docs/interfaces/WorkspaceContainerProps.md
@@ -19,7 +19,7 @@
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx:19](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx#L19)
+[packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx:20](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx#L20)
 
 ___
 
@@ -29,7 +29,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx:16](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx#L16)
+[packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx:17](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx#L17)
 
 ___
 
@@ -39,7 +39,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx:17](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx#L17)
+[packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx#L18)
 
 ___
 
@@ -49,4 +49,4 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx#L18)
+[packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx:19](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx#L19)
diff --git a/packages/framework/esm-styleguide/package.json b/packages/framework/esm-styleguide/package.json
index 258fedcdd..6bac1a0db 100644
--- a/packages/framework/esm-styleguide/package.json
+++ b/packages/framework/esm-styleguide/package.json
@@ -59,6 +59,7 @@
     "i18next": "21.x",
     "react": "18.x",
     "react-dom": "18.x",
+    "react-i18next": "11.x",
     "rxjs": "6.x"
   },
   "devDependencies": {
diff --git a/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx b/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx
index 603542550..eb9f5b282 100644
--- a/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx
+++ b/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.component.tsx
@@ -11,6 +11,7 @@ import ActionMenu from './action-menu.component';
 import { type OpenWorkspace, updateWorkspaceWindowState, useWorkspaces } from '../workspaces';
 import { WorkspaceRenderer } from './workspace-renderer.component';
 import styles from './workspace.module.scss';
+import { useTranslation } from 'react-i18next';
 
 export interface WorkspaceContainerProps {
   contextKey: string;
@@ -125,6 +126,7 @@ interface WorkspaceProps {
 }
 
 function Workspace({ workspaceInstance, additionalWorkspaceProps }: WorkspaceProps) {
+  const { t } = useTranslation(workspaceInstance.moduleName);
   const layout = useLayoutType();
   const { workspaceWindowState } = useWorkspaces();
   const isMaximized = workspaceWindowState === 'maximized';
@@ -160,7 +162,7 @@ function Workspace({ workspaceInstance, additionalWorkspaceProps }: WorkspacePro
           {!isDesktop(layout) && !canHide && (
             <HeaderMenuButton renderMenuIcon={<ArrowLeftIcon />} onClick={closeWorkspace} />
           )}
-          <HeaderName prefix="">{workspaceInstance.titleNode ?? workspaceInstance.title}</HeaderName>
+          <HeaderName prefix="">{workspaceInstance.titleNode ?? t(workspaceInstance.title)}</HeaderName>
           <div className={styles.overlayHeaderSpacer} />
           <HeaderGlobalBar className={styles.headerButtons}>
             <ExtensionSlot
diff --git a/packages/framework/esm-styleguide/src/workspaces/workspaces.ts b/packages/framework/esm-styleguide/src/workspaces/workspaces.ts
index 1b841d12b..7a4051121 100644
--- a/packages/framework/esm-styleguide/src/workspaces/workspaces.ts
+++ b/packages/framework/esm-styleguide/src/workspaces/workspaces.ts
@@ -550,7 +550,7 @@ export function showWorkspacePrompts(
 }
 
 function getWorkspaceTitle(workspace: WorkspaceRegistration, additionalProps?: object) {
-  return additionalProps?.['workspaceTitle'] ?? translateFrom(workspace.moduleName, workspace.title, workspace.title);
+  return additionalProps?.['workspaceTitle'] ?? workspace.title;
 }
 
 export function resetWorkspaceStore() {
diff --git a/yarn.lock b/yarn.lock
index c9493236d..37ff6a025 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3417,6 +3417,7 @@ __metadata:
     i18next: 21.x
     react: 18.x
     react-dom: 18.x
+    react-i18next: 11.x
     rxjs: 6.x
   languageName: unknown
   linkType: soft

From e4238924ae0a1823d7632e744ee8d0eb5cfab9d7 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <sharmava05@gmail.com>
Date: Thu, 5 Sep 2024 19:36:29 +0300
Subject: [PATCH 2/2] Add test to validate translation takes place inside the
 workspace container

---
 .../container/workspace-container.test.tsx    | 47 +++++++++++++++----
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.test.tsx b/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.test.tsx
index 97b813559..611120914 100644
--- a/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.test.tsx
+++ b/packages/framework/esm-styleguide/src/workspaces/container/workspace-container.test.tsx
@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { registerWorkspace } from '@openmrs/esm-extensions';
 import { ComponentContext, isDesktop, useLayoutType } from '@openmrs/esm-react-utils';
 import { type DefaultWorkspaceProps, WorkspaceContainer, launchWorkspace, useWorkspaces } from '..';
+import { useTranslation } from 'react-i18next';
 
 jest.mock('./workspace-renderer.component.tsx', () => {
   return {
@@ -17,20 +18,19 @@ jest.mock('./workspace-renderer.component.tsx', () => {
   };
 });
 
+jest.mock('react-i18next', () => ({
+  ...jest.requireActual('react-i18next'),
+  useTranslation: jest.fn(),
+}));
+
+const mockedUseTranslation = jest.mocked(useTranslation);
+
 const mockedIsDesktop = isDesktop as unknown as jest.Mock;
 const mockedUseLayoutType = useLayoutType as jest.Mock;
 
 window.history.pushState({}, 'Workspace Container', '/workspace-container');
 
 jest.mock('single-spa-react/parcel', () => jest.fn().mockImplementation(() => <div>Parcel</div>));
-jest.mock('@openmrs/esm-translations', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-translations');
-
-  return {
-    ...originalModule,
-    translateFrom: (module, key, defaultValue, options) => defaultValue,
-  };
-});
 
 interface ClinicalFormWorkspaceProps extends DefaultWorkspaceProps {
   patientUuid: string;
@@ -38,9 +38,25 @@ interface ClinicalFormWorkspaceProps extends DefaultWorkspaceProps {
 
 describe('WorkspaceContainer in window mode', () => {
   beforeAll(() => {
+    // @ts-ignore
+    mockedUseTranslation.mockImplementation((namespace) => {
+      const getTranslations = () =>
+        namespace === '@openmrs/foo'
+          ? {
+              clinicalForm: 'Clinical Form',
+            }
+          : namespace === '@openmrs/bar'
+            ? { orderBasket: 'Order basket' }
+            : {};
+
+      return {
+        t: (key: string) => getTranslations()?.[key] ?? key,
+      };
+    });
+
     registerWorkspace({
       name: 'clinical-form',
-      title: 'Clinical Form',
+      title: 'clinicalForm',
       load: jest.fn(),
       moduleName: '@openmrs/foo',
       canHide: true,
@@ -49,7 +65,7 @@ describe('WorkspaceContainer in window mode', () => {
 
     registerWorkspace({
       name: 'order-basket',
-      title: 'Order Basket',
+      title: 'orderBasket',
       load: jest.fn(),
       moduleName: '@openmrs/bar',
       canHide: true,
@@ -57,6 +73,17 @@ describe('WorkspaceContainer in window mode', () => {
     });
   });
 
+  test('should translate the workspace title inside the workspace container', () => {
+    mockedIsDesktop.mockReturnValue(true);
+    renderWorkspaceWindow();
+    act(() => launchWorkspace('clinical-form'));
+    let header = screen.getByRole('banner');
+    expect(within(header).getByText('Clinical Form')).toBeInTheDocument();
+    act(() => launchWorkspace('order-basket'));
+    header = screen.getByRole('banner');
+    expect(within(header).getByText('Order basket')).toBeInTheDocument();
+  });
+
   test('should override title via additional props and via setTitle', async () => {
     mockedIsDesktop.mockReturnValue(true);
     renderWorkspaceWindow();