Localization refactor part3 (#10442)

* ui: refactor localization file

* addressing comments

* fixed failing unit test

* ui: refactoring localization part 2

* miner fix

* fixing cypress and miner localization changes

* Localization refactor part 3

* updated sync-i18n commond for empty key sync, and removed empty key-value from other language

* sync fr-fr and zh-cn file

* updated script to not include empty empty localization key

* added refresh after language change and i18n script to lintstagedrc file

openmetadata-ui/src/main/resources/ui/.lintstagedrc.yaml

@@ -12,7 +12,10 @@
 #
 
 # Insert license header
-'*': yarn license-header-fix
+'*':
+  - yarn license-header-fix
+  # Sync localization file
+  - yarn i18n
 
 '*.{ts,tsx,js,jsx}':
   # Organize Imports

openmetadata-ui/src/main/resources/ui/package.json

@@ -122,7 +122,7 @@
     "cypress:open": "cypress open --e2e",
     "cypress:run": "cypress run --config-file=cypress.config.ts",
     "cypress:run:record": "cypress run --config-file=cypress.config.ts --record --parallel",
-    "i18n": "sync-i18n --files '**/locale/languages/*.json' --primary en-us --space 2 -e ",
+    "i18n": "sync-i18n --files '**/locale/languages/*.json' --primary en-us --space 2 ",
     "check-i18n": "npm run i18n -- --check"
   },
   "browserslist": {

openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/AddDataQualityTestV1.tsx

@@ -119,7 +119,7 @@ const AddDataQualityTestV1: React.FC<AddDataQualityTestProps> = ({
           url: getTableTabPath(entityTypeFQN, 'profiler'),
         },
         {
-          name: t('message.add-entity-test', { entity: t('label.column') }),
+          name: t('label.add-entity-test', { entity: t('label.column') }),
           url: '',
           activeTitle: true,
         },
@@ -127,7 +127,7 @@ const AddDataQualityTestV1: React.FC<AddDataQualityTestProps> = ({
       data.push(...colVal);
     } else {
       data.push({
-        name: t('message.add-entity-test', { entity: t('label.table') }),
+        name: t('label.add-entity-test', { entity: t('label.table') }),
         url: '',
         activeTitle: true,
       });
@@ -289,7 +289,7 @@ const AddDataQualityTestV1: React.FC<AddDataQualityTestProps> = ({
             <Typography.Paragraph
               className="tw-heading tw-text-base"
               data-testid="header">
-              {t('message.add-entity-test', {
+              {t('label.add-entity-test', {
                 entity: isColumnFqn ? t('label.column') : t('label.table'),
               })}
             </Typography.Paragraph>

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

@@ -379,7 +379,9 @@ const AddGlossaryTerm = ({
               data-testid="synonyms"
               id="synonyms"
               name="synonyms"
-              placeholder={t('message.enter-comma-separated-keywords')}
+              placeholder={t('message.enter-comma-separated-field', {
+                field: t('label.keyword-lowercase-plural'),
+              })}
               type="text"
               value={synonyms}
               onChange={handleValidation}

openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/MetadataToESConfigForm/MetadataToESConfigForm.tsx

@@ -97,7 +97,7 @@ const MetadataToESConfigForm = ({
       <Divider />
       <Form.Item
         className="switch-item"
-        label={t('label.use-ssl')}
+        label={t('label.use-ssl-uppercase')}
         name="useSSL">
         <Switch />
       </Form.Item>

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

@@ -116,7 +116,7 @@ const CreateUser = ({
   const slashedBreadcrumbList = useMemo(
     () => [
       {
-        name: forceBot ? t('label.bot-plural') : t('label.users'),
+        name: forceBot ? t('label.bot-plural') : t('label.user-plural'),
         url: forceBot ? getBotsPagePath() : getUsersPagePath(),
       },
       {

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

@@ -1260,7 +1260,12 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
         )
       );
     } catch (error) {
-      showErrorToast(error as AxiosError, t('server.fetch-suggestions-error'));
+      showErrorToast(
+        error as AxiosError,
+        t('server.entity-fetch-error', {
+          entity: t('label.suggestion-lowercase-plural'),
+        })
+      );
     }
   };
 

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

@@ -168,7 +168,9 @@ const EntityVersionTimeLine: React.FC<Props> = ({
   return (
     <div className={classNames('timeline-drawer', { open: show })}>
       <header className="tw-flex tw-justify-between">
-        <p className="tw-font-medium tw-mr-2">{t('label.versions-history')}</p>
+        <p className="tw-font-medium tw-mr-2">
+          {t('label.version-plural-history')}
+        </p>
         <div className="tw-flex" onClick={onBack}>
           <svg
             className="tw-w-5 tw-h-5 tw-ml-1 tw-cursor-pointer"

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx

@@ -963,7 +963,9 @@ const TeamDetailsV1 = ({
               data-testid="synonyms"
               id="synonyms"
               name="synonyms"
-              placeholder={t('message.enter-comma-separated-term')}
+              placeholder={t('message.enter-comma-separated-field', {
+                field: t('label.term-lowercase'),
+              })}
               type="text"
               value={heading}
               onChange={(e) => setHeading(e.target.value)}

openmetadata-ui/src/main/resources/ui/src/components/Users/ChangePasswordForm.tsx

@@ -47,7 +47,7 @@ const ChangePasswordForm: React.FC<ChangePasswordForm> = ({
         type: 'primary',
         htmlType: 'submit',
       }}
-      okText={t('label.update-password')}
+      okText={t('label.update-entity', { entity: t('label.password') })}
       open={visible}
       title={t('label.change-entity', {
         entity: t('label.password'),

openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx

@@ -122,7 +122,7 @@ const ErrorPlaceHolderES = ({ type, errorMessage, query = '' }: Props) => {
       <div className="tw-mb-5" data-testid="es-error">
         <div className="tw-mb-3 tw-text-center">
           <p>
-            <span>{t('label.welcome-to-open-metadata')} </span>
+            <span>{t('message.welcome-to-open-metadata')} </span>
             <span data-testid="error-text">
               {t('message.unable-to-error-elasticsearch', { error: errorText })}
             </span>

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

@@ -19,6 +19,7 @@ import { debounce, toString } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NavLink, useHistory } from 'react-router-dom';
+import { refreshPage } from 'utils/CommonUtils';
 import AppState from '../../AppState';
 import Logo from '../../assets/svg/logo-monogram.svg';
 
@@ -284,6 +285,7 @@ const NavBar = ({
   const handleLanguageChange = useCallback((langCode: string) => {
     setLanguage(langCode);
     i18next.changeLanguage(langCode);
+    refreshPage();
   }, []);
 
   const handleModalCancel = useCallback(() => handleFeatureModal(false), []);

openmetadata-ui/src/main/resources/ui/src/components/onboarding/Onboarding.tsx

@@ -22,7 +22,7 @@ const Onboarding: FC = () => {
       className="tw-mt-10 tw-text-base tw-font-medium"
       data-testid="onboarding">
       <div className="tw-text-center tw-text-xl tw-font-semibold tw-mb-1">
-        {t('label.welcome-to-open-metadata')}
+        {t('message.welcome-to-open-metadata')}
       </div>
       <div className="tw-mb-5">
         <div className="tw-mb-3 tw-text-center">

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -20,6 +20,7 @@
     "add-custom-entity-property": "Add Custom {{entity}} Property",
     "add-deploy": "Add & Deploy",
     "add-entity": "Add {{entity}}",
+    "add-entity-test": "Add {{entity}} test",
     "add-new-entity": "Add New {{entity}}",
     "add-workflow-ingestion": "Add {{workflow}} Ingestion",
     "added": "Added",
@@ -376,6 +377,7 @@
     "jump-to-end": "Jump to End",
     "june": "June",
     "jwt-uppercase": "JWT",
+    "keyword-lowercase-plural": "keywords",
     "kill": "Kill",
     "kpi-display-name": "KPI Display Name",
     "kpi-list": "KPI List",
@@ -707,6 +709,7 @@
     "table-plural": "Tables",
     "table-tests-summary": "Table Tests Summary",
     "tag": "Tag",
+    "tag-category-lowercase": "tag category",
     "tag-lowercase": "tag",
     "tag-plural": "Tags",
     "target": "Target",
@@ -756,7 +759,6 @@
     "topic-lowercase": "topic",
     "topic-name": "Topic Name",
     "topic-plural": "Topics",
-    "topics": "Topics",
     "total-entity": "Total {{entity}}",
     "total-index-sent": " Total index sent",
     "tour": "Tour",
@@ -775,7 +777,6 @@
     "update": "Update",
     "update-description": "Update Description",
     "update-entity": "Update {{entity}}",
-    "update-password": "Update Password",
     "update-request-tag-plural": "Update Request Tags",
     "updated": "Updated",
     "updated-by": "Updated by",
@@ -789,7 +790,7 @@
     "usage-lowercase": "usage",
     "use-aws-credential-plural": "Use AWS Credentials",
     "use-fqn-for-filtering": "Use FQN For Filtering",
-    "use-ssl": "Use SSL",
+    "use-ssl-uppercase": "Use SSL",
     "user": "User",
     "user-account": "User account",
     "user-analytics-report": "User Analytics Report",
@@ -798,7 +799,6 @@
     "user-plural": "Users",
     "username": "Username",
     "username-or-email": "Username or Email",
-    "users": "Users",
     "valid-condition": "Valid condition",
     "validating-condition": "Validating the condition...",
     "value": "Value",
@@ -807,7 +807,7 @@
     "verify-cert-plural": "Verify Certs",
     "version": "Version",
     "version-plural": "Versions",
-    "versions-history": "Versions History",
+    "version-plural-history": "Versions History",
     "view": "View",
     "view-all": "View All",
     "view-entity": "View {{entity}}",
@@ -819,7 +819,6 @@
     "webhook-display-text": "Webhook {{displayText}}",
     "wednesday": "Wednesday",
     "week": "Week",
-    "welcome-to-open-metadata": "Welcome to OpenMetadata!",
     "whats-new": "What's New",
     "yes": "Yes",
     "your-entity": "Your {{entity}}"
@@ -829,7 +828,6 @@
     "action-has-been-done-but-deploy-successfully": "has been {{action}} and deployed successfully",
     "action-has-been-done-but-failed-to-deploy": "has been {{action}}, but failed to deploy",
     "active-users": "Display the number of active users.",
-    "add-entity-test": "Add {{entity}} test",
     "add-kpi-message": "Identify the Key Performance Indicators (KPI) that best reflect the health of your data assets. Review your data assets based on Description, Ownership, and Tier. Define your target metrics in absolute or percentage to track your progress. Finally, set a start and end date to achieve your data goals.",
     "add-new-service-description": "Choose from the range of services that OpenMetadata integrates with. To add a new service, start by selecting a Service Category (Database, Messaging, Dashboard, or Pipeline). From the list of available services, select the one you'd want to integrate with.",
     "add-policy-message": "Policies are assigned to teams. In OpenMetadata, a policy is a collection of rules, which define access based on certain conditions. We support rich SpEL (Spring Expression Language) based conditions. All the operations supported by an entity are published. Use these fine grained operations to define the conditional rules for each policy. Create well-defined policies based on conditional rules to build rich access control roles.",
@@ -918,8 +916,6 @@
     "enter-a-field": "Enter a {{field}}",
     "enter-column-description": "Enter column description",
     "enter-comma-separated-field": "Enter comma(,) separated {{field}}",
-    "enter-comma-separated-keywords": "Enter comma separated keywords",
-    "enter-comma-separated-term": "Enter comma separated term",
     "enter-display-name": "Enter display name",
     "enter-feature-description": "Enter feature description",
     "enter-interval": "Enter interval",
@@ -1141,6 +1137,7 @@
     "webhook-listing-message": "The webhook allows external services to be notified of the metadata change events happening in your organization through APIs. Register callback URLs with webhook integration to receive metadata event notifications. You can add, list, update, and delete webhooks.",
     "webhook-type-listing-message": "Provide timely updates to the producers and consumers of metadata via {{webhookType}} notifications. Use {{webhookType}} webhooks to send notifications regarding the metadata change events in your organization through APIs. You can add, list, update, and delete these webhooks.",
     "welcome-to-om": "Welcome to OpenMetadata!",
+    "welcome-to-open-metadata": "Welcome to OpenMetadata!",
     "would-like-to-start-adding-some": "Would like to start adding some?",
     "write-your-announcement-lowercase": "write your announcement",
     "write-your-description": "Write your description",
@@ -1153,10 +1150,7 @@
     "connection-tested-successfully": "Connection tested successfully",
     "create-entity-error": "Error while creating {{entity}}!",
     "create-entity-success": "{{entity}} created successfully.",
-    "create-tag-category-error": "Error while creating tag category.",
+    "delete-entity-error": "Error while deleting {{entity}}.",
-    "create-tag-error": "Error while creating tag.",
-    "delete-tag-category-error": "Error while deleting tag category.",
-    "delete-tag-error": "Error while deleting tag.",
     "deploy-entity-error": "Error while deploying {{entity}}!",
     "email-confirmation": "Please confirm your email, confirmation has been sent to your email",
     "email-found": "User with the given email address already exists!",
@@ -1170,8 +1164,6 @@
     "error-while-renewing-id-token-with-message": "Error while renewing id token from Auth0 SSO: {{message}}",
     "feed-post-error": "Error while posting the message!",
     "fetch-entity-permissions-error": "Unable to get permission for {{entity}}.",
-    "fetch-suggestions-error": "Error while fetching suggestions!",
-    "fetch-tags-category-error": "Error while fetching tags category!",
     "fetch-updated-conversation-error": "Error while fetching updated conversation!",
     "forgot-password-email-error": "There is some issue in sending the mail. Please contact your Administrator.",
     "ingestion-workflow-operation-error": "Error while {{operation}} ingestion workflow {{displayName}}",
@@ -1197,6 +1189,5 @@
     "unexpected-response": "Unexpected response from server.",
     "update-entity-success": "{{entity}} updated successfully.",
     "you-have-not-action-anything-yet": "You have not {{action}} anything yet."
-  },
+  }
-  "url": {}
 }

openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPage.test.tsx

@@ -87,7 +87,7 @@ describe('Test Roles Details Page', () => {
 
     const policiesTab = await screen.findByText('label.policy-plural');
     const teamsTab = await screen.findByText('label.team-plural');
-    const usersTab = await screen.findByText('label.users');
+    const usersTab = await screen.findByText('label.user-plural');
 
     expect(container).toBeInTheDocument();
 

openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPage.tsx

@@ -335,7 +335,7 @@ const RolesDetailPage = () => {
                     }
                   />
                 </TabPane>
-                <TabPane key="users" tab={t('label.users')}>
+                <TabPane key="users" tab={t('label.user-plural')}>
                   <RolesDetailPageList
                     hasAccess={rolePermission.EditAll}
                     list={role.users ?? []}

openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx

@@ -209,7 +209,9 @@ const TagsPage = () => {
     } catch (error) {
       const errMsg = getErrorText(
         error as AxiosError,
-        t('server.fetch-tags-category-error')
+        t('server.entity-fetch-error', {
+          entity: t('label.tag-category-lowercase'),
+        })
       );
       showErrorToast(errMsg);
       setError(errMsg);
@@ -248,7 +250,9 @@ const TagsPage = () => {
       } catch (err) {
         const errMsg = getErrorText(
           err as AxiosError,
-          t('server.fetch-tags-category-error')
+          t('server.entity-fetch-error', {
+            entity: t('label.tag-category-lowercase'),
+          })
         );
         showErrorToast(errMsg);
         setError(errMsg);
@@ -310,7 +314,12 @@ const TagsPage = () => {
           }
         })
         .catch((err: AxiosError) => {
-          showErrorToast(err, t('server.create-tag-category-error'));
+          showErrorToast(
+            err,
+            t('server.create-entity-error', {
+              entity: t('label.tag-category-lowercase'),
+            })
+          );
         })
         .finally(() => {
           setIsAddingClassification(false);
@@ -361,11 +370,20 @@ const TagsPage = () => {
             return updatedClassification;
           });
         } else {
-          showErrorToast(t('server.delete-tag-category-error'));
+          showErrorToast(
+            t('server.delete-entity-error', {
+              entity: t('label.tag-category-lowercase'),
+            })
+          );
         }
       })
       .catch((err: AxiosError) => {
-        showErrorToast(err, t('server.delete-tag-category-error'));
+        showErrorToast(
+          err,
+          t('server.delete-entity-error', {
+            entity: t('label.tag-category-lowercase'),
+          })
+        );
       })
       .finally(() => {
         setDeleteTags({ data: undefined, state: false });
@@ -390,11 +408,18 @@ const TagsPage = () => {
             });
           }
         } else {
-          showErrorToast(t('server.delete-tag-error'));
+          showErrorToast(
+            t('server.delete-entity-error', {
+              entity: t('label.tag-lowercase'),
+            })
+          );
         }
       })
       .catch((err: AxiosError) => {
-        showErrorToast(err, t('server.delete-tag-error'));
+        showErrorToast(
+          err,
+          t('server.delete-entity-error', { entity: t('label.tag-lowercase') })
+        );
       })
       .finally(() => {
         setDeleteTags({ data: undefined, state: false });
@@ -513,7 +538,12 @@ const TagsPage = () => {
           }
         })
         .catch((err: AxiosError) => {
-          showErrorToast(err, t('label.create-tag-error'));
+          showErrorToast(
+            err,
+            t('label.create-entity-error', {
+              entity: t('label.tag-lowercase'),
+            })
+          );
         })
         .finally(() => {
           setIsAddingTag(false);