Auto detect and set language

docs/modules/ROOT/pages/neo4j-arc/i18n.adoc

@@ -7,13 +7,18 @@ Default displaed text is in English if left un-translated
 
 == How to Enable i18n in neo4j-arc
 
-=== Intalling https://qubitpi.gitbook.io/react-i18next/[react-i18next]
+=== Intalling https://qubitpi.gitbook.io/i18next/[i18next] and https://qubitpi.gitbook.io/react-i18next/[react-i18next] with https://github.com/i18next/i18next-browser-languageDetector[auto language detector]
 
-[source,javascript]
+[source,shell]
 ----
-yarn add react-i18next i18next
+yarn add react-i18next i18next i18next-browser-languagedetector
 ----
 
+[NOTE]
+====
+If we choose to have fixed locale, we can opt-out `i18next-browser-languagedetector`
+====
+
 === Load Translations
 
 ==== Add on i18next Init
@@ -23,26 +28,30 @@ We can add the translations on init by create a new file `i18n.ts` beside our `A
 [source,typescript]
 ----
 import i18n from 'i18next'
-import { resources } from 'neo4j-arc/graph-visualization'
 import { initReactI18next } from 'react-i18next'
-
-i18n.use(initReactI18next).init({
-  resources,
-  lng: 'zh',
-  interpolation: {
-    escapeValue: false
-  }
-})
+import { resources } from 'neo4j-arc/graph-visualization'
+import LanguageDetector from 'i18next-browser-languagedetector'
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    interpolation: {
+      escapeValue: false
+    }
+  })
 
 export default i18n
 ----
 
 [NOTE]
 ====
-* In the example above, we've configured i18n language to be Simplified Chinese
 * The file does not need to be named `i18n.ts`, it can be any other filename. Just make sure it is imported accordingly.
 * Those interested in the details above can refer to the
   https://qubitpi.gitbook.io/react-i18next/guides/quick-start[react-i18next documentation]
+* The example above uses `LanguageDetector` plugin which detects user language in the broser automatically. If we have
+  decided not to install `i18next-browser-languagedetector` then we do not need to import and use `LanguageDetector`. 
 ====
 
 ==== Add after Init
@@ -53,14 +62,17 @@ We can also add the translations after init:
 ----
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
-
-i18n.use(initReactI18next).init({
-  resources: {},
-  lng: 'zh',
-  interpolation: {
-    escapeValue: false
-  }
-})
+import LanguageDetector from 'i18next-browser-languagedetector'
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {},
+    interpolation: {
+      escapeValue: false
+    }
+  })
 
 export default i18n
 ----
@@ -98,3 +110,24 @@ const App = (): JSX.Element => {
 }
 export default AppInit
 ----
+
+== Troubleshooting
+
+=== Switching Browser Lanauage Does Not Alter the Displayed Language in Neo4j Browser
+
+Please make sure the i18n is either
+
+1. set up with fixed language, for example
++
+The initialization assumes provider pattern around regular App component:
+[source,typescript]
+----
+i18n
+  .use(initReactI18next)
+  .init({
+    ...
+    lng: 'zh'
+  })
+----
+
+2. or, if auto language detection is enabled, try clearing browser cookie and try again.

e2e_tests/integration/i18n.spec.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright Jiaqi Liu
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+describe('Internationalization', () => {
+  before(function () {
+    cy.visit(Cypress.config('url'), {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, 'language', { value: 'zh-CN' })
+        Object.defineProperty(win.navigator, 'languages', { value: ['zh'] })
+        Object.defineProperty(win.navigator, 'accept_languages', {
+          value: ['zh']
+        })
+      }
+    })
+      .title()
+      .should('include', 'Neo4j Browser')
+    cy.wait(3000)
+    cy.ensureConnection()
+  })
+
+  it('supports Chinese', () => {
+    cy.executeCommand(':clear')
+    cy.executeCommand(`CREATE (a:TestLabel {name: 'testNode'}) RETURN a`, {
+      parseSpecialCharSequences: false
+    })
+
+    cy.get('[data-testid="vizInspector"]').contains('节点类型')
+
+    cy.executeCommand('MATCH (n) DETACH DELETE n')
+  })
+})

e2e_tests/integration/viz.spec.ts

@@ -18,8 +18,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { should } from 'chai'
-
 /* global Cypress, cy, before */
 
 const GREY = 'rgb(165, 171, 182)' // Default color for nodes and relationships

package.json

@@ -201,6 +201,7 @@
     "firebase": "^7.24.0",
     "graphql": "^15.3.0",
     "i18next": "^23.7.6",
+    "i18next-browser-languagedetector": "^7.2.0",
     "isomorphic-fetch": "^3.0.0",
     "jsonic": "^0.3.0",
     "jszip": "3.8.0",

src/browser/i18n.ts

@@ -1,13 +1,16 @@
 import i18n from 'i18next'
-import { resources } from 'neo4j-arc/graph-visualization'
 import { initReactI18next } from 'react-i18next'
+import { resources } from 'neo4j-arc/graph-visualization'
+import LanguageDetector from 'i18next-browser-languagedetector'
 
-i18n.use(initReactI18next).init({
-  resources,
-  lng: 'zh',
-  interpolation: {
-    escapeValue: false
-  }
-})
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    interpolation: {
+      escapeValue: false
+    }
+  })
 
 export default i18n

src/neo4j-arc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neo4j-devtools-arc",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "main": "dist/neo4j-arc.js",
   "author": "Neo4j Inc.",
   "license": "GPL-3.0",

yarn.lock

@@ -7357,6 +7357,13 @@ hyphenate-style-name@^1.0.2:
   resolved "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz"
   integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
 
+i18next-browser-languagedetector@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.0.tgz#de0321cba6881be37d82e20e4d6f05aa75f6e37f"
+  integrity sha512-U00DbDtFIYD3wkWsr2aVGfXGAj2TgnELzOX9qv8bT0aJtvPV9CRO77h+vgmHFBMe7LAxdwvT/7VkCWGya6L3tA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 i18next@^23.7.6:
   version "23.7.6"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.7.6.tgz#7328e76c899052d5d33d930164612dd21e575f74"