feat(ui): Add multi-language support for kopia-ui

[lupusA]

Hi,

this PR adds the multi-language support feature to kopia-ui. Users can select their language in the preference tab. The following languages are supported:

• English
• German
• French
• Polish
• Russian
• Italian
• Spanish
• Japanese (Maybe)

This PR also adds new libaries and dependencies (i18next, react-i18next, i18next-http-backend) The PR will close https://github.com/kopia/kopia/issues/3708 and has a dependency to https://github.com/kopia/kopia/pull/3768.

Tasks to be resolved:

• [x] Language selector should probably use a flag + always language's own name in own script
• [x] Language selector should be located in upper-right corner and be always visible so that users can immediately switch to their language with 2 clicks
• [x] i18next needs to be initialized first before rendering
• [ ] Navbar needs to be refreshed when changing language. Potentially we need a change as the component is updated via context currently.
• [x] Provide a full (machine-based) translation for the mentioned languages
• [ ] Can we make the drop-down only show the flag icon for the selected language when not expanded?
• [x] Select component has a bug with empty string (getElementyByID) which needs to be fixed
• [ ] Auto-select the language based on browser/OS regional settings
• [x] Add a build-test that ensures that all translations are always available in all languages
• [ ] Document the process for adding new text in the UI (which will need translations)
• [ ] Add a translation guide that explains the context in which each text appears (e.g. the word "Stop" can be a verb or a noun)
• [x] Extract languages and put it in "language.name" that's specified only in a single JSON file
• [x] Ideally listing language should collect all JSON files to ease the addition of new languages
• [x] Check for plugin that will flag all string literals that are not translated
• [x] Check support for localized string formatting

Cheers,

[jkowalski]

This is promising, i took it for a quick spin. Some first impressions/questions/ideas:

• language selector should probably use a flag + always language's own name in own script (so it's 🇬🇧 English 🇩🇪 Deutsch, 🇵🇱 polski, 🇷🇺 Русский)

• i don't undeerstand why Language is its own section in Preferences, it probably just makes sense to put the language selector in upper-right corner and be always visible so that folks can immediately switch to their language with 2 clicks.

• translating some terminology will be hard

• I will try to translate this into Polish (looks very difficult)

• can this auto-select the language based on browser/OS regional settings?

• instead of adding all those languages initially we should start with 3-4 languages folks on core team can speak natively and provide translations for

• can we add a build-test that ensures that all translations are always available in all languages?

• we should probably we add a test that ensures all i18n.t have corresponding entries in JSON files? also, dangling translations that are no longer used and/or lists missing words

• what should be the process for adding new text in the UI (which will need translations)?

• we should add a translation guide that explains the context in which each text appears (e.g. the word "Stop" can be a verb or a noun)

• the following should be replaced with a single "language.name" that's specified only in a single JSON file, so that adding a new language requires only specifying its own native name and not updating any other translations.

	"lang.en": "English",
	"lang.de": "German",
	"lang.es": "Spanish",
	"lang.fr": "French",
	"lang.ru": "Russian",
	"lang.jp": "Japanese",
	"lang.it": "Italian",
	"lang.pl": "Polish",

• ideally listing language should collect all JSON files, instead of hardcoding it, so that it's easier to add new languages.
• there's a lot of hard cases where we build strings dynamically, including formatting of time, etc, in particular in the policy editor and snapshot list

[jkowalski]

@lupusA this is looking very nice, I found a few minor things:

1. the language selector needs to be wider and/or have non-breaking spaces between the flag and the text, otherwise i'm seeing this:

2. Can we make the drop-down only show the flag icon for the selected language when not expanded?

3. After changing the language, some the translations take ~3-5s to change. We probably need to trigger some additional refresh.

[lupusA]

@lupusA this is looking very nice, I found a few minor things:

1. the language selector needs to be wider and/or have non-breaking spaces between the flag and the text, otherwise i'm seeing this:

2. Can we make the drop-down only show the flag icon for the selected language when not expanded?

3. After changing the language, some the translations take ~3-5s to change. We probably need to trigger some additional refresh.

There are a couple of things that aren't perfect right now. I will try to fix them first and add them to the list. Thanks for the feedback.

Cheers,

[NavyStack]

Could you kindly consider adding support for Korean as well? I'll be responsible for translating into Korean. Additionally, I'm also capable of providing Japanese translations.

[lupusA]

Hi @NavyStack,

supporting additional languages will be easy. You just have to create a PR with the translation and a little adjustment to the language.json file. Thats all :-)

[NavyStack]

Thanks! I will make a PR soon.

[lupusA]

Thanks! I will make a PR soon.

By the way, japenese will be added in the initial commit. But it will be a machine-based translation :-)

Cheers,

[NavyStack]

@lupusA Opened a PR that reflects the Korean translation. Please confirm. https://github.com/lupusA/htmlui/pull/1

We tried to be consistent with words and distinguish subtle differences in meaning. Where possible, please put full stops in the original English text.

Thanks.

[hudishijie]

考虑中文么

[mcthesw]

I can be responsible for translating Simplified Chinese. Chinese can generally be divided into Simplified Chinese and Traditional Chinese. So how should I fill in the code and value in languages.json? I usually see Simplified Chinese represented as zh-CN and Traditional Chinese represented as zh-HK

[lupusA]

I will work on it again next week. I am currently busy in private matters.

I need to refactor the translation keys again, to provide a good basis for further translations.

@NavyStack I will incorporate your changes as well.

[NavyStack]

@lupusA , Don't worry about the Korean translation. Even if you make a lot of changes, the Korean translation will be quick.

Cheers.

[NavyStack]

@lupusA I will be reset hard from English key.

[inschrift-spruch-raum]

• the following should be replaced with a single "language.name" that's specified only in a single JSON file, so that adding a new language requires only specifying its own native name and not updating any other translations.

	"lang.en": "English",
	"lang.de": "German",
	"lang.es": "Spanish",
	"lang.fr": "French",
	"lang.ru": "Russian",
	"lang.jp": "Japanese",
	"lang.it": "Italian",
	"lang.pl": "Polish",

I think naming needs to follow certain international norms because a language may have multiple variants

for example,

English -> en-US / en-UK Chinese -> zh-CN / zh-HK

[cr4zyduck]

Please consider adding Catalan language too

[krombel]

IMHO i would freeze the number of added languages in this initial state - with optionally even skipping some. This PR should lay the groundwork for multiple languages.

As @lupusA mentioned

supporting additional languages will be easy

[lupusA]

IMHO i would freeze the number of added languages in this initial state - with optionally even skipping some. This PR should lay the groundwork for multiple languages.

As @lupusA mentioned

supporting additional languages will be easy

Hopefully, i can work on this PR in the next months again. Currently, i do not have the spare time to work on it. However, the underlying code basis should still work :-)