(fix): Workspace title must translate in the workspace container (#1141)

* Workspace title should be translated inside the workspace container

* Add test to validate translation takes place inside the workspace container

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)
 
 ___
 

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)

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": {

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

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,30 +18,45 @@ 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;
 }
 
 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,14 +65,25 @@ describe('WorkspaceContainer in window mode', () => {
 
     registerWorkspace({
       name: 'order-basket',
-      title: 'Order Basket',
+      title: 'orderBasket',
       load: jest.fn(),
       moduleName: '@openmrs/bar',
       canHide: true,
       canMaximize: true,
     });
   });
 
+  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();

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() {

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