cherry pick user dropdown translation issue

Author: Shrabanti Paul

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/LanguageOverride.spec.ts

@@ -0,0 +1,87 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { Browser, expect, Page, test as base } from '@playwright/test';
+import { redirectToHomePage } from '../../utils/common';
+
+const test = base.extend<{ germanLocalePage: Page }>({
+  germanLocalePage: async ({ browser }: { browser: Browser }, use) => {
+    const context = await browser.newContext({
+      locale: 'de-DE',
+      storageState: 'playwright/.auth/admin.json',
+    });
+    const page = await context.newPage();
+    await use(page);
+    await context.close();
+  },
+});
+
+test.describe('Language Override Tests', () => {
+  test('App language should override browser language on landing page and user dropdown', async ({
+    germanLocalePage,
+  }) => {
+    test.slow(true);
+
+    await redirectToHomePage(germanLocalePage);
+
+    await germanLocalePage
+      .getByTestId('language-selector-button')
+      .waitFor({ state: 'visible' });
+    await germanLocalePage.getByTestId('language-selector-button').click();
+    await germanLocalePage.waitForSelector('.ant-dropdown', {
+      state: 'visible',
+    });
+    await germanLocalePage.getByText('EN', { exact: true }).click();
+    await germanLocalePage.waitForLoadState('networkidle');
+
+    await germanLocalePage.locator('[data-testid="dropdown-profile"]').click();
+    await germanLocalePage.waitForSelector('[role="menu"].profile-dropdown', {
+      state: 'visible',
+    });
+
+    const profileDropdown = germanLocalePage.locator(
+      '[role="menu"].profile-dropdown'
+    );
+
+    await expect(
+      profileDropdown.getByText('View Profile', { exact: true })
+    ).toBeVisible();
+    await expect(
+      profileDropdown.getByText('Switch Persona', { exact: true })
+    ).toBeVisible();
+    await expect(
+      profileDropdown.getByText('Roles', { exact: true })
+    ).toBeVisible();
+    await expect(
+      profileDropdown.getByText('Inherited Roles', { exact: true })
+    ).toBeVisible();
+    await expect(
+      profileDropdown.getByText('Logout', { exact: true })
+    ).toBeVisible();
+
+    await expect(
+      profileDropdown.getByText('Profil anzeigen', { exact: true })
+    ).not.toBeVisible();
+    await expect(
+      profileDropdown.getByText('Persona wechseln', { exact: true })
+    ).not.toBeVisible();
+    await expect(
+      profileDropdown.getByText('Rollen', { exact: true })
+    ).not.toBeVisible();
+    await expect(
+      profileDropdown.getByText('Geerbte Rollen', { exact: true })
+    ).not.toBeVisible();
+    await expect(
+      profileDropdown.getByText('Abmelden', { exact: true })
+    ).not.toBeVisible();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/components/NavBar/NavBar.tsx

@@ -175,18 +175,20 @@ const NavBar = () => {
       if (visible) {
         switch (activeTab) {
           case 'Task':
-            hasTaskNotification &&
+            if (hasTaskNotification) {
               setTimeout(() => {
                 handleTaskNotificationRead();
               }, NOTIFICATION_READ_TIMER);
+            }
 
             break;
 
           case 'Conversation':
-            hasMentionNotification &&
+            if (hasMentionNotification) {
               setTimeout(() => {
                 handleMentionsNotificationRead();
               }, NOTIFICATION_READ_TIMER);
+            }
 
             break;
         }
@@ -518,6 +520,7 @@ const NavBar = () => {
               trigger={['click']}>
               <Button
                 className="flex-center gap-2 p-x-xs font-medium"
+                data-testid="language-selector-button"
                 type="text">
                 {language ? upperCase(language.split('-')[0]) : ''}{' '}
                 <DropDownIcon width={12} />

openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationBox.component.tsx

@@ -151,9 +151,11 @@ const NotificationBox = ({
 
       if (hasTaskNotification || hasMentionNotification) {
         setTimeout(() => {
-          key === NotificationTabsKey.TASK
-            ? onMarkTaskNotificationRead()
-            : onMarkMentionsNotificationRead();
+          if (key === NotificationTabsKey.TASK) {
+            onMarkTaskNotificationRead();
+          } else {
+            onMarkMentionsNotificationRead();
+          }
         }, NOTIFICATION_READ_TIMER);
       }
     },
@@ -212,7 +214,7 @@ const NotificationBox = ({
           size="small"
         />
       ),
-    [notifications, notificationDropDownList, viewAllPath]
+    [notifications, notificationDropDownList, viewAllPath, t]
   );
 
   return (

openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationFeedCard.component.tsx

@@ -84,7 +84,7 @@ const NotificationFeedCard: FC<NotificationFeedProp> = ({
         </Link>
       </>
     );
-  }, [entityType, task, taskDetails]);
+  }, [entityType, task, taskDetails, t]);
 
   const entityName = useMemo(() => {
     return task?.entityRef

openmetadata-ui/src/main/resources/ui/src/components/Settings/CustomProperty/CustomPropertyTable.tsx

@@ -263,7 +263,7 @@ export const CustomPropertyTable: FC<CustomPropertyTableProp> = ({
         ),
       },
     ],
-    [hasAccess]
+    [hasAccess, t]
   );
 
   return (

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamDetails/UserTab/UserTab.component.tsx

@@ -245,7 +245,7 @@ export const UserTab = ({
     return tabColumns.filter((column) =>
       column.key === 'actions' ? !isTeamDeleted : true
     );
-  }, [handleRemoveClick, editUserPermission, isTeamDeleted]);
+  }, [handleRemoveClick, editUserPermission, isTeamDeleted, t]);
 
   const sortedUser = useMemo(() => orderBy(users, ['name'], 'asc'), [users]);
 
@@ -307,7 +307,7 @@ export const UserTab = ({
     }
 
     return option;
-  }, [handleUserExportClick, handleImportClick, permission]);
+  }, [handleUserExportClick, handleImportClick, permission, t]);
 
   const handleRemoveUser = () => {
     if (deletingUser?.id) {
@@ -325,7 +325,7 @@ export const UserTab = ({
     return permission.EditAll
       ? t('label.add-new-entity', { entity: t('label.user') })
       : t('message.no-permission-for-action');
-  }, [permission, isTeamDeleted]);
+  }, [permission, isTeamDeleted, t]);
 
   if (isEmpty(users) && !searchText && !isLoading) {
     return isGroupType ? (

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/TeamImportResult/TeamImportResult.component.tsx

@@ -187,7 +187,7 @@ export const TeamImportResult = ({
     ];
 
     return data;
-  }, [parsedRecords]);
+  }, [parsedRecords, t]);
 
   const parseCsvFile = () => {
     if (csvImportResult.importResultsCsv) {

openmetadata-ui/src/main/resources/ui/src/components/Settings/Team/UserImportResult/UserImportResult.component.tsx

@@ -171,7 +171,7 @@ export const UserImportResult = ({
     ];
 
     return data;
-  }, [parsedRecords]);
+  }, [parsedRecords, t]);
 
   const parseCsvFile = () => {
     if (csvImportResult.importResultsCsv) {

openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UserProfileIcon/UserProfileIcon.component.tsx

@@ -165,7 +165,7 @@ export const UserProfileIcon = () => {
         </div>
       );
     },
-    [handleSelectedPersonaChange, selectedPersona, defaultPersona]
+    [handleSelectedPersonaChange, selectedPersona, defaultPersona, t]
   );
 
   const teamLabelRenderer = useCallback(
@@ -197,7 +197,7 @@ export const UserProfileIcon = () => {
           {count} {t('label.more')}
         </Link>
       ),
-    [currentUser]
+    [currentUser, t]
   );
 
   const handleCloseDropdown = useCallback(() => {
@@ -377,6 +377,9 @@ export const UserProfileIcon = () => {
       roles,
       personas,
       showAllPersona,
+      sortedPersonas,
+      inheritedRoles,
+      t,
     ]
   );
 

openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UserProfileIcon/UserProfileIcon.test.tsx

@@ -26,10 +26,45 @@ jest.mock('../../../../hooks/authHooks', () => ({
     onLogoutHandler: jest.fn(),
   }),
 }));
+const translationState = {
+  language: 'en',
+};
+
+const germanTranslations: Record<string, string> = {
+  'label.role-plural': 'Rollen',
+  'label.team-plural': 'Teams',
+  'label.logout': 'Abmelden',
+  'label.switch-persona': 'Persona wechseln',
+  'label.inherited-role-plural': 'Geerbte Rollen',
+  'label.default': 'Standard',
+  'label.more': 'mehr',
+};
+
+const mockChangeLanguage = jest.fn((lng: string) => {
+  translationState.language = lng;
+});
+
+const mockI18n = {
+  changeLanguage: mockChangeLanguage,
+  language: translationState.language,
+};
+
 jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
+  useTranslation: () => {
+    const currentLanguage = translationState.language;
+    const getTranslation = (key: string) => {
+      if (currentLanguage === 'de') {
+        return germanTranslations[key] || key;
+      }
+
+      return key;
+    };
+
+    return {
+      t: getTranslation,
+      i18n: mockI18n,
+    };
+  },
 }));
 
 const mockPersonas: EntityReference[] = [
@@ -95,6 +130,7 @@ describe('UserProfileIcon', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     mockUseApplicationStore.mockReturnValue(createMockStoreData());
+    translationState.language = 'en';
   });
 
   const openDropdown = () => {
@@ -196,4 +232,31 @@ describe('UserProfileIcon', () => {
     expect(screen.queryByTestId('default-persona-tag')).not.toBeInTheDocument();
     expect(screen.getAllByRole('radio').length).toBeGreaterThan(0);
   });
+
+  it('should update dropdown labels when language changes', async () => {
+    const { rerender } = render(
+      <MockWrapper>
+        <UserProfileIcon />
+      </MockWrapper>
+    );
+
+    openDropdown();
+    await screen.findByText('label.switch-persona');
+
+    expect(screen.getByText('label.role-plural')).toBeInTheDocument();
+    expect(screen.getByText('label.team-plural')).toBeInTheDocument();
+    expect(screen.getByText('label.logout')).toBeInTheDocument();
+
+    mockChangeLanguage('de');
+    rerender(
+      <MockWrapper>
+        <UserProfileIcon />
+      </MockWrapper>
+    );
+
+    expect(screen.getByText('Persona wechseln')).toBeInTheDocument();
+    expect(screen.getByText('Rollen')).toBeInTheDocument();
+    expect(screen.getByText('Teams')).toBeInTheDocument();
+    expect(screen.getByText('Abmelden')).toBeInTheDocument();
+  });
 });