(fix) Wrap Workspace in suspense container (#1148)

openmrs · Sep 20, 2024 · 35baf04 · 35baf04
1 parent 455c56b
commit 35baf04
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 32 deletions.
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
@@ -1,17 +1,17 @@
-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';
 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';

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
@@ -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' });