(fix) O3-4455 : Update translated workspace title once rendered (#1289)

Co-authored-by: Vineet Sharma <[email protected]>
openmrs · Feb 18, 2025 · 52f5fa1 · 52f5fa1
1 parent eb8a851
commit 52f5fa1
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 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,4 +1,4 @@
-import React, { Suspense, useCallback, useContext, useMemo } from 'react';
+import React, { Suspense, useCallback, useContext, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import { Header, HeaderGlobalAction, HeaderGlobalBar, HeaderMenuButton, HeaderName } from '@carbon/react';
 import { DownToBottom, Maximize, Minimize } from '@carbon/react/icons';
@@ -148,6 +148,17 @@ function Workspace({ workspaceInstance, additionalWorkspaceProps }: WorkspacePro
   const currentGroupName = workspaceGroup?.name;
   const isMaximized = workspaceWindowState === 'maximized';
 
+  // Translate the workspace title
+  // The workspace title is a translation key whose translation resides in the workspace module.
+  // Since the workspace module is not loaded at the time of workspace registration, we need to translate it here
+  // when the workspace is actually rendered and the workspace module along with its translations are loaded.
+  useEffect(() => {
+    const translatedTitle = t(workspaceInstance.title);
+    if (translatedTitle !== workspaceInstance.title) {
+      workspaceInstance.setTitle(translatedTitle);
+    }
+  }, [workspaceInstance.title, t, workspaceInstance.setTitle]);
+
   // We use the feature name of the app containing the workspace in order to set the extension
   // slot name. We can't use contextKey for this because we don't want the slot name to be
   // different for different patients, but we do want it to be different for different apps.

diff --git a/packages/framework/esm-styleguide/src/workspaces/workspaces.test.ts b/packages/framework/esm-styleguide/src/workspaces/workspaces.test.ts
@@ -88,7 +88,7 @@ describe('workspace system', () => {
       expect(prompt).toBeTruthy();
       expect(prompt.title).toMatch(/unsaved changes/i);
       expect(prompt.body).toMatch(
-        'There may be unsaved changes in Allergies. Please save them before opening another workspace.',
+        'There may be unsaved changes in "Allergies". Please save them before opening another workspace.',
       );
       expect(prompt.confirmText).toMatch(/Open anyway/i);
 
@@ -179,7 +179,7 @@ describe('workspace system', () => {
       expect(prompt).toBeTruthy();
       expect(prompt.title).toMatch(/unsaved changes/i);
       expect(prompt.body).toMatch(
-        'There may be unsaved changes in Allergies. Please save them before opening another workspace.',
+        'There may be unsaved changes in "Allergies". Please save them before opening another workspace.',
       );
       expect(prompt.confirmText).toMatch(/Open anyway/i);
 
@@ -287,7 +287,7 @@ describe('workspace system', () => {
       const prompt = store.getState().prompt as Prompt;
       expect(prompt).toBeTruthy();
       expect(prompt.body).toMatch(
-        'There may be unsaved changes in Conditions. Please save them before opening another workspace.',
+        'There may be unsaved changes in "Conditions". Please save them before opening another workspace.',
       );
       // Closing the conditions workspace because it cannot be hidden
 
@@ -301,7 +301,7 @@ describe('workspace system', () => {
 
       expect(prompt2).toBeTruthy();
       expect(prompt2.body).toMatch(
-        'There may be unsaved changes in Allergies. Please save them before opening another workspace.',
+        'There may be unsaved changes in "Allergies". Please save them before opening another workspace.',
       );
 
       prompt2.onConfirm();

diff --git a/packages/framework/esm-styleguide/src/workspaces/workspaces.ts b/packages/framework/esm-styleguide/src/workspaces/workspaces.ts
@@ -617,7 +617,7 @@ export function showWorkspacePrompts(
         title: getCoreTranslation('unsavedChangesTitleText', 'Unsaved changes'),
         body: getCoreTranslation(
           'unsavedChangesInWorkspace',
-          'There may be unsaved changes in {{workspaceName}}. Please save them before opening another workspace.',
+          'There may be unsaved changes in "{{workspaceName}}". Please save them before opening another workspace.',
           { workspaceName: workspaceTitle },
         ),
         onConfirm: () => {

diff --git a/packages/framework/esm-translations/src/translations.ts b/packages/framework/esm-translations/src/translations.ts
@@ -29,7 +29,7 @@ const workspaceTranslations = {
   openAnyway: 'Open anyway',
   unsavedChangesInOpenedWorkspace: `You may have unsaved changes in the opened workspace. Do you want to discard these changes?`,
   unsavedChangesInWorkspace:
-    'There may be unsaved changes in {{workspaceName}}. Please save them before opening another workspace.',
+    'There may be unsaved changes in "{{workspaceName}}". Please save them before opening another workspace.',
   unsavedChangesTitleText: 'Unsaved changes',
   workspaceHeader: 'Workspace header',
 };

diff --git a/packages/framework/esm-translations/translations/en.json b/packages/framework/esm-translations/translations/en.json
@@ -55,7 +55,7 @@
   "stateProvince": "State",
   "toggleDevTools": "Toggle dev tools",
   "unknown": "Unknown",
-  "unsavedChangesInWorkspace": "There are unsaved changes in {{workspaceName}}. Please save them before opening another workspace.",
+  "unsavedChangesInWorkspace": "There may be unsaved changes in \"{{workspaceName}}\". Please save them before opening another workspace.",
   "unsavedChangesTitleText": "Unsaved changes",
   "workspaceHeader": "Workspace header"
 }