fix(ui): localization sync issue fix (#10379)

* fix(ui): localization sync issue fix

* chore: update i18n script

* doc: update the README with add new language guide

* minor change

* minor change

* chore: update README

* chore: add UI screenshots in README

---------

Co-authored-by: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>

openmetadata-ui/src/main/resources/ui/README.md

@@ -50,3 +50,61 @@ Once the node and yarn are installed in the system, you can perform the followin
 ```
 
 **Step 3**: Visit [localhost:3000](http://localhost:3000/) to access the OpenMetadata UI.
+
+## How to Add Language Support
+
+To add support for a new language in our internationalization setup using `react-i18next` and `i18next`, please follow the steps below:
+
+### Create a Language JSON File
+
+First, create a new JSON file for the language you want to add in the `openmetadata-ui/src/main/resources/ui/src/locale/languages` directory.
+
+For example, if you want to add support for the `French` language, you can create a file called `fr-fr.json` in the languages directory:
+
+```shell
+# Navigate to the ui/src/locale/languages directory
+cd openmetadata-ui/src/main/resources/ui/src/locale/languages
+
+# Create the French language file
+touch fr-fr.json
+
+```
+
+### Sync the Language File with the Primary Language
+
+Since we use `en-us` as our primary language, if you have added a new language file, you need to sync the newly added language file with the primary language. You can use the `i18n` script to achieve this.
+
+```shell
+yarn run i18n
+```
+
+### Update the `i18nextUtil.ts`
+
+Now add the newly added language in `i18nextUtil.ts` , so that `i18next` can have the translation resource available.
+
+```diff
+import { InitOptions } from 'i18next';
+import { map } from 'lodash';
+import enUS from '../../locale/languages/en-us.json';
++ import frFR from '../../locale/languages/fr-fr.json';
+
+export const getInitOptions = (): InitOptions => {
+  return {
++   supportedLngs: ['en-US', 'fr-FR'],
+    resources: {
+      'en-US': { translation: enUS },
++     'fr-FR': { translation: frFR },
+    },
+    fallbackLng: ['en-US'],
+```
+
+### Test the language translation
+
+To check the language translation functionality, please follow the steps outlined below:
+
+1. Click on the language selection dropdown, and a list of available languages will appear.
+2. Choose the language you wish to test, and the translation will be applied.
+
+Please refer to the image below for assistance:
+
+<img width="1440" alt="image" src="https://user-images.githubusercontent.com/59080942/222646947-7ec6422e-4669-4db1-92c1-c6aec596dfdd.png">

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

@@ -47,6 +47,7 @@
     "https-browserify": "^1.0.0",
     "i18next": "^21.10.0",
     "i18next-browser-languagedetector": "^6.1.6",
+    "i18next-json-sync": "^3.1.2",
     "ieee754": "^1.2.1",
     "immutable": "^4.0.0-rc.14",
     "jwt-decode": "^3.1.2",
@@ -121,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 --languages fr-fr --space 2  ",
+    "i18n": "sync-i18n --files '**/locale/languages/*.json' --primary en-us --space 2 -e ",
     "check-i18n": "npm run i18n -- --check"
   },
   "browserslist": {

openmetadata-ui/src/main/resources/ui/yarn.lock

@@ -5482,6 +5482,15 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
@@ -7867,7 +7876,7 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.6:
+glob@^7.1.6, glob@^7.2.0:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -8304,6 +8313,15 @@ i18next-browser-languagedetector@^6.1.6:
   dependencies:
     "@babel/runtime" "^7.19.0"
 
+i18next-json-sync@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/i18next-json-sync/-/i18next-json-sync-3.1.2.tgz#996d6731fa03e6240c078b91c1402062869e65a5"
+  integrity sha512-svJXk7Zt40ddLZPJjRpDx2acEmvbyua9/ijiBc3LoR5urmOQpPf/vYJEBxbCoZKRXRVaj4S+Jqv1yPQ5pk3Zlg==
+  dependencies:
+    glob "^7.2.0"
+    json-stable-stringify "^1.0.1"
+    yargs "^17.0.0"
+
 i18next@^21.10.0:
   version "21.10.0"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-21.10.0.tgz#85429af55fdca4858345d0e16b584ec29520197d"
@@ -9522,6 +9540,13 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
+json-stable-stringify@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.2.tgz#e06f23128e0bbe342dc996ed5a19e28b57b580e0"
+  integrity sha512-eunSSaEnxV12z+Z73y/j5N37/In40GK4GmsSy+tEHJMxknvqnA7/djeYtAgW0GsWHUfg+847WJjKaEylk2y09g==
+  dependencies:
+    jsonify "^0.0.1"
+
 json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
@@ -9565,6 +9590,11 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonify@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
+  integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
+
 jsonpath-plus@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/jsonpath-plus/-/jsonpath-plus-6.0.1.tgz#9a3e16cedadfab07a3d8dc4e8cd5df4ed8f49c4d"
@@ -14986,6 +15016,11 @@ yargs-parser@^21.0.0:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.0.0.tgz#a485d3966be4317426dd56bdb6a30131b281dc55"
   integrity sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==
 
+yargs-parser@^21.1.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
+
 yargs@^13.3.0:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
@@ -15019,6 +15054,19 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yargs@^17.0.0:
+  version "17.7.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.1.tgz#34a77645201d1a8fc5213ace787c220eabbd0967"
+  integrity sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.1.1"
+
 yargs@^17.0.1:
   version "17.3.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.3.0.tgz#295c4ffd0eef148ef3e48f7a2e0f58d0e4f26b1c"