add i18next and config for i18n of UI #2254

merobi-hub · 2022-11-18T20:41:36Z

Signed-off-by: Michael Robinson merobi@gmail.com

Problem

Internationalization is strongly recommended by the LFAI (in the CII Silver Badge). The UI is not currently internationalized.

Closes: #ISSUE-NUMBER

Solution

This change adds i18next, configures it, and edits the text to make use of the tool's translation capabilities.

Checklist

You've signed-off your work
Your changes are accompanied by tests (if relevant)
Your change contains a small diff and is self-contained
You've updated any relevant documentation (if relevant)
You've updated the CHANGELOG.md with details about your change under the "Unreleased" section (if relevant, depending on the change, this may not be necessary)
You've versioned your .sql database schema migration according to Flyway's naming convention (if relevant)
You've included a header in any source code files (if relevant)

phixMe · 2022-11-18T20:50:26Z

package.json

+{
+  "dependencies": {
+    "@types/react": "^18.0.25",
+    "i18next": "^22.0.6",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "react-i18next": "^12.0.0"
+  }
+}


This should be inside the existing package.json file inside the 'web` directory.

Just add these to the file:

"i18next": "^22.0.6", "i18next-browser-languagedetector": "^7.0.1", "react-i18next": "^12.0.0"

and run npm i

This file along with the lock file should then be deleted.

phixMe · 2022-11-18T20:51:25Z

web/src/i18n.js

+    }
+  });
+
+export default i18n;


You can apply formatting by running npm run eslint-fix that will cleanup newline issues like this.

ran eslint with npx, think I resolved this

phixMe · 2022-11-18T20:52:14Z

web/src/i18n.js

@@ -0,0 +1,46 @@
+import i18n from 'i18next';


Can you make this a TypeScript file? End it with the *.ts instead of the JavaScript extension.

codecov · 2022-11-18T20:59:48Z

Codecov Report

Merging #2254 (70d7cf2) into main (1f3e5da) will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##               main    #2254   +/-   ##
=========================================
  Coverage     77.01%   77.01%           
  Complexity     1166     1166           
=========================================
  Files           222      222           
  Lines          5307     5307           
  Branches        424      424           
=========================================
  Hits           4087     4087           
  Misses          747      747           
  Partials        473      473

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

merobi-hub · 2022-11-19T03:22:17Z

@phixMe reverting to i18n.js temporarily because the .ts version was causing the build to fail. Here's what it looks like when I set my system language to French:

merobi-hub · 2022-11-19T21:26:49Z

When the translation is longer than the original, the effect is not great, unfortunately. But there's no reason to assume these "translations" (from Google) are worth keeping. @julienledem @mobuchowski would you please review?

mobuchowski · 2022-11-21T16:06:35Z

web/src/i18n.js

+            jobs: 'Pracy',
+            and: 'i',
+            datasets: 'Zestawy Danych'
+          }


I think we need to agree on run, job, dataset translations. IMO

RUN: wykonanie (as in "wykonanie zadania") JOB: zadanie DATASET: zbiór danych

I think only wykonanie might be controversial - it translates more to execution, but I don't have better idea. Bieg or przebieg make sense only as the sport IMO.

then:

docs_link: Dokumentacja API latest_tab: OSTATNIE WYKONANIE history tab: HISTORIA WYKONAŃ location: LOKALIZACJA empty_title: Brak dostępnych informacji o wykonaniu empty_body: Spróbuj dodać kilka wykonań dla tego zadania search: Wyszukiwanie jobs: Zadania and: i datasets: Zbiory Danych

Still, translations of "computer concepts" will always sound awkward in Polish for me.

thank you, @mobuchowski . @pawel-big-lebowski @JDarDagran @tnazarew WDYT?

I'd say wykonanie sounds more natural to me. We shouldn't be so strict about translating this one to one. Job and dataset are just right.

Thanks, @mobuchowski and @JDarDagran . I've revised the translations.

mobuchowski · 2022-11-21T16:13:23Z

Does it add an option to switch language or does it force a translation based on something like browser language?

I think it would be great to have language switcher if we do something like it.

merobi-hub · 2022-11-21T16:16:39Z

@mobuchowski i18next does support a language-switcher setup, but that route is a bit more labor-intensive.

merobi-hub · 2022-11-21T18:54:39Z

@phixMe To translate the text in web/src/components/lineage/Lineage.tsx I did a workaround that required changing the tsconfig.json to set 'noImplicitAny' to 'false'. The initial problem was that there doesn't seem to be any way to use the useTranslation function (const {t} = useTranslation()), as in the other pages. I don't intend to leave this change to tsconfig. Would you please take a look at Lineage.tsx when you have time?

phixMe · 2022-11-21T21:26:04Z

web/package.json

+    "webpack-merge": "^4.2.1",
+    "i18next": "^22.0.6",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "react-i18next": "^12.0.0"


There should be an update to the lock file in this directory.

phixMe · 2022-11-21T21:32:14Z

web/src/components/lineage/Lineage.tsx

@@ -23,6 +23,8 @@ import MqEmpty from '../core/empty/MqEmpty'
 import MqText from '../core/text/MqText'
 import Node from './components/node/Node'
 import ParentSize from '@visx/responsive/lib/components/ParentSize'
+import { useTranslation } from 'react-i18next'
+import i18next from '../../i18n'


@merobi-hub I think you don't want to be importing this here. This should be your type issue for no-implicit-any

phixMe · 2022-12-05T23:03:39Z

web/src/components/sidenav/Sidenav.tsx

+          <FormControl variant='outlined' className={classes.formControl}>
+            <Select
+              value={i18next.resolvedLanguage}
+              onChange={event => {
+                changeLanguage(event.target.value as string)
+              }}
+              input={<MqInputBase />}
+            >
+              <MenuItem key={'en'} value={'en'}>
+                {'en'}
+              </MenuItem>
+              <MenuItem key={'es'} value={'es'}>
+                {'es'}
+              </MenuItem>
+              <MenuItem key={'fr'} value={'fr'}>
+                {'fr'}
+              </MenuItem>
+              <MenuItem key={'pl'} value={'pl'}>
+                {'pl'}
+              </MenuItem>
+            </Select>
+          </FormControl>


How is this looking now? Can you add a screenshot to the PR?

phixMe · 2022-12-05T23:04:46Z

web/tsconfig.json

@@ -11,7 +11,8 @@
    "lib": ["es2016", "es2017", "dom"],
    "skipLibCheck": true,
    "esModuleInterop": true,
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "resolveJsonModule": true
  },
  "include": ["./src/**/*"],
  "exclude": ["./src/__tests__/*"]


Can we do without these config changes now? Implicit any in TypeScript is not the best rule to have disabled.

phixMe · 2022-12-05T23:05:05Z

web/webpack.dev.js

@@ -22,7 +22,7 @@ const webpackDev = {
    },
    proxy: {
      '/api': {
-        target: `http://${process.env.MARQUEZ_HOST || 'localhost'}:${process.env.MARQUEZ_PORT || 8080}/`,
+        target: `http://${process.env.MARQUEZ_HOST || 'localhost'}:${process.env.MARQUEZ_PORT || 5000}/`,


I think we don't want this change committed.

where's the facepalm emoji? (reverted this)

merobi-hub · 2022-12-05T23:14:21Z

Signed-off-by: Michael Robinson <merobi@gmail.com>

…to ui/add-i18next Signed-off-by: Michael Robinson <merobi@gmail.com>

Signed-off-by: Michael Robinson <merobi@gmail.com>

merobi-hub · 2022-12-06T18:44:24Z

merobi-hub · 2022-12-06T18:46:24Z

@phixMe I believe this is RFR again. I added some missing translations I found, caught up to the new Events route and reverted the configuration changes. See the screenshots for what it looks like.

# Conflicts: # web/package-lock.json # web/src/components/header/Header.tsx # web/src/components/jobs/JobDetailPage.tsx # web/src/components/jobs/RunInfo.tsx # web/src/components/jobs/Runs.tsx # web/src/components/lineage/Lineage.tsx # web/src/components/search/SearchPlaceholder.tsx # web/src/components/sidenav/Sidenav.tsx # web/src/i18n/config.ts # web/src/types/i18next.d.ts # web/tsconfig.json

Signed-off-by: Michael Robinson <merobi@gmail.com>

merobi-hub · 2022-12-07T15:55:59Z

@phixMe This is RFR. Added a reload after a language change and fixed the reloading issue so the new language setting persists.

Signed-off-by: Michael Robinson <merobi@gmail.com>

merobi-hub · 2022-12-07T21:33:15Z

OK, now this is actually RFR @phixMe

phixMe

Looks great @merobi-hub. Thanks for the contribution.

wslulciuc · 2022-12-13T17:06:10Z

web/src/components/sidenav/Sidenav.tsx

-                  src="https://raw.githubusercontent.com/MarquezProject/marquez/main/web/src/img/iconSearchArrow.svg"
-                  width={'30px'}
-                />
+                <SVG src='../../img/iconSearchArrow.svg' width={'30px'} />


@merobi-hub, this reverts the change for #2280

boring-cyborg bot added the docs label Nov 18, 2022

merobi-hub force-pushed the ui/add-i18next branch from d98f5cf to be75a05 Compare November 18, 2022 20:43

boring-cyborg bot added the web label Nov 18, 2022

merobi-hub force-pushed the ui/add-i18next branch from be75a05 to 44867d8 Compare November 18, 2022 20:45

phixMe reviewed Nov 18, 2022

View reviewed changes

merobi-hub force-pushed the ui/add-i18next branch from 44867d8 to 1f2506c Compare November 18, 2022 20:54

merobi-hub force-pushed the ui/add-i18next branch 6 times, most recently from 0a368ca to 5c6e024 Compare November 19, 2022 03:20

merobi-hub force-pushed the ui/add-i18next branch 3 times, most recently from 18d2687 to 5997e68 Compare November 19, 2022 21:22

merobi-hub requested review from julienledem and mobuchowski November 19, 2022 21:29

mobuchowski reviewed Nov 21, 2022

View reviewed changes

merobi-hub force-pushed the ui/add-i18next branch 2 times, most recently from 52dac32 to 3745a7e Compare November 21, 2022 18:40

phixMe reviewed Nov 21, 2022

View reviewed changes

phixMe reviewed Dec 5, 2022

View reviewed changes

merobi-hub added 2 commits December 5, 2022 18:28

revert changes to tsconfig.json and webpack.dev.js

4b2984b

Signed-off-by: Michael Robinson <merobi@gmail.com>

Merge branch 'ui/add-i18next' of github.com:MarquezProject/marquez in…

1f322b1

…to ui/add-i18next Signed-off-by: Michael Robinson <merobi@gmail.com>

merobi-hub force-pushed the ui/add-i18next branch from 4820353 to 1f322b1 Compare December 6, 2022 00:17

merobi-hub added 3 commits December 6, 2022 11:13

add translations for jobs/Runs.tsx

bcbc372

Signed-off-by: Michael Robinson <merobi@gmail.com>

update sidenav translations for events

ebd2795

Signed-off-by: Michael Robinson <merobi@gmail.com>

add translations for DatasetInfo.tsx and DatasetVersions.tsx

854d863

Signed-off-by: Michael Robinson <merobi@gmail.com>

merobi-hub force-pushed the ui/add-i18next branch from b5ea8ea to 854d863 Compare December 6, 2022 17:30

add translations for events route

08a67aa

Signed-off-by: Michael Robinson <merobi@gmail.com>

phix and others added 3 commits December 6, 2022 13:31

Some updates for i18n.

d69e0c7

change i18next to reload on lng change and retain new lng on reload

1cdc8d4

Signed-off-by: Michael Robinson <merobi@gmail.com>

fix merge conflict in sidenav

ebbd680

Signed-off-by: Michael Robinson <merobi@gmail.com>

merobi-hub force-pushed the ui/add-i18next branch 2 times, most recently from a1d7c8e to be600e7 Compare December 7, 2022 20:58

restore en as default lng for i18next

287ba68

Signed-off-by: Michael Robinson <merobi@gmail.com>

merobi-hub force-pushed the ui/add-i18next branch from be600e7 to 287ba68 Compare December 7, 2022 21:01

phixMe approved these changes Dec 8, 2022

View reviewed changes

Merge branch 'main' into ui/add-i18next

70d7cf2

merobi-hub merged commit 68fcb96 into main Dec 8, 2022

merobi-hub deleted the ui/add-i18next branch December 8, 2022 21:10

wslulciuc mentioned this pull request Dec 13, 2022

remove 18next to restore prod build while fixing i18next feature #2307

Closed

7 tasks

wslulciuc reviewed Dec 13, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add i18next and config for i18n of UI #2254

add i18next and config for i18n of UI #2254

merobi-hub commented Nov 18, 2022

phixMe Nov 18, 2022

phixMe Nov 18, 2022

phixMe Nov 18, 2022

merobi-hub Nov 18, 2022

phixMe Nov 18, 2022

codecov bot commented Nov 18, 2022 •

edited

Loading

merobi-hub commented Nov 19, 2022

merobi-hub commented Nov 19, 2022

mobuchowski Nov 21, 2022 •

edited

Loading

merobi-hub Nov 21, 2022

JDarDagran Nov 21, 2022

merobi-hub Nov 22, 2022

mobuchowski commented Nov 21, 2022

merobi-hub commented Nov 21, 2022

merobi-hub commented Nov 21, 2022

phixMe Nov 21, 2022

phixMe Nov 21, 2022

phixMe Dec 5, 2022

merobi-hub Dec 5, 2022

phixMe Dec 5, 2022

phixMe Dec 5, 2022

merobi-hub Dec 5, 2022

merobi-hub commented Dec 5, 2022

merobi-hub commented Dec 6, 2022

merobi-hub commented Dec 6, 2022

merobi-hub commented Dec 7, 2022 •

edited

Loading

merobi-hub commented Dec 7, 2022

phixMe left a comment

wslulciuc Dec 13, 2022

add i18next and config for i18n of UI #2254

add i18next and config for i18n of UI #2254

Conversation

merobi-hub commented Nov 18, 2022

Problem

Solution

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Nov 18, 2022 • edited Loading

Codecov Report

merobi-hub commented Nov 19, 2022

merobi-hub commented Nov 19, 2022

mobuchowski Nov 21, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mobuchowski commented Nov 21, 2022

merobi-hub commented Nov 21, 2022

merobi-hub commented Nov 21, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

merobi-hub commented Dec 5, 2022

merobi-hub commented Dec 6, 2022

merobi-hub commented Dec 6, 2022

merobi-hub commented Dec 7, 2022 • edited Loading

merobi-hub commented Dec 7, 2022

phixMe left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Nov 18, 2022 •

edited

Loading

mobuchowski Nov 21, 2022 •

edited

Loading

merobi-hub commented Dec 7, 2022 •

edited

Loading