@openmrs/esm-styleguide 5.8.2-pre.2345 → 5.8.2-pre.2352

package/.turbo/turbo-build.log

@@ -45,4 +45,4 @@ WARNING in webpack performance recommendations:
 You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
 For more info visit https://webpack.js.org/guides/code-splitting/
 
-webpack 5.88.0 compiled with 3 warnings in 28190 ms
+webpack 5.88.0 compiled with 3 warnings in 28212 ms

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "5.8.2-pre.2345",
+  "version": "5.8.2-pre.2352",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "browser": "dist/openmrs-esm-styleguide.js",
@@ -63,12 +63,12 @@
     "rxjs": "6.x"
   },
   "devDependencies": {
-    "@openmrs/esm-error-handling": "5.8.2-pre.2345",
-    "@openmrs/esm-extensions": "5.8.2-pre.2345",
-    "@openmrs/esm-navigation": "5.8.2-pre.2345",
-    "@openmrs/esm-react-utils": "5.8.2-pre.2345",
-    "@openmrs/esm-state": "5.8.2-pre.2345",
-    "@openmrs/esm-translations": "5.8.2-pre.2345",
+    "@openmrs/esm-error-handling": "5.8.2-pre.2352",
+    "@openmrs/esm-extensions": "5.8.2-pre.2352",
+    "@openmrs/esm-navigation": "5.8.2-pre.2352",
+    "@openmrs/esm-react-utils": "5.8.2-pre.2352",
+    "@openmrs/esm-state": "5.8.2-pre.2352",
+    "@openmrs/esm-translations": "5.8.2-pre.2352",
     "@types/geopattern": "^1.2.9",
     "autoprefixer": "^9.8.8",
     "css-minimizer-webpack-plugin": "^1.2.0",

package/src/workspaces/container/workspace-container.component.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { Suspense, useCallback, useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import { Header, HeaderGlobalAction, HeaderGlobalBar, HeaderMenuButton, HeaderName } from '@carbon/react';
 import { DownToBottom, Maximize, Minimize } from '@carbon/react/icons';
 import { ComponentContext, ExtensionSlot, isDesktop, useBodyScrollLock, useLayoutType } from '@openmrs/esm-react-utils';
 import { getCoreTranslation } from '@openmrs/esm-translations';
+import { I18nextProvider, useTranslation } from 'react-i18next';
 
 import { ArrowLeftIcon, ArrowRightIcon, CloseIcon } from '../../icons';
 import { WorkspaceNotification } from '../notification/workspace-notification.component';
@@ -11,7 +12,6 @@ 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;
@@ -105,10 +105,14 @@ export function WorkspaceContainer({
           >
             {workspaces.map((workspace, i) => (
               <div
-                key={`workspace-container-${workspace ? workspace.name : 'empty'}`}
+                key={`workspace-container-${workspace ? workspace.name : `empty-${i}`}`}
                 className={classNames({ [styles.hiddenExtraWorkspace]: i !== 0 }, styles.workspaceInnerContainer)}
               >
-                <Workspace workspaceInstance={workspace} additionalWorkspaceProps={additionalWorkspaceProps} />
+                <Suspense fallback={null}>
+                  <I18nextProvider i18n={window.i18next} defaultNS={workspace.moduleName}>
+                    <Workspace workspaceInstance={workspace} additionalWorkspaceProps={additionalWorkspaceProps} />
+                  </I18nextProvider>
+                </Suspense>
               </div>
             ))}
           </div>
@@ -126,7 +130,7 @@ interface WorkspaceProps {
 }
 
 function Workspace({ workspaceInstance, additionalWorkspaceProps }: WorkspaceProps) {
-  const { t } = useTranslation(workspaceInstance.moduleName);
+  const { t } = useTranslation();
   const layout = useLayoutType();
   const { workspaceWindowState } = useWorkspaces();
   const isMaximized = workspaceWindowState === 'maximized';

package/src/workspaces/container/workspace-container.test.tsx

@@ -5,7 +5,6 @@ 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 {
@@ -18,13 +17,6 @@ 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;
 
@@ -38,22 +30,6 @@ 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: 'clinicalForm',
@@ -78,10 +54,10 @@ describe('WorkspaceContainer in window mode', () => {
     renderWorkspaceWindow();
     act(() => launchWorkspace('clinical-form'));
     let header = screen.getByRole('banner');
-    expect(within(header).getByText('Clinical Form')).toBeInTheDocument();
+    expect(within(header).getByText('clinicalForm')).toBeInTheDocument();
     act(() => launchWorkspace('order-basket'));
     header = screen.getByRole('banner');
-    expect(within(header).getByText('Order basket')).toBeInTheDocument();
+    expect(within(header).getByText('orderBasket')).toBeInTheDocument();
   });
 
   test('should override title via additional props and via setTitle', async () => {
@@ -161,7 +137,7 @@ describe('WorkspaceContainer in window mode', () => {
 
     act(() => launchWorkspace('clinical-form'));
     const header = screen.getByRole('banner');
-    expect(within(header).getByText('Clinical Form')).toBeInTheDocument();
+    expect(within(header).getByText('clinicalForm')).toBeInTheDocument();
     expect(screen.getByRole('complementary').firstChild).not.toHaveClass('maximizedWindow');
 
     const maximizeButton = await screen.findByRole('button', { name: 'Maximize' });