Translation support (i18next) + Translation DE

[madejackson]

Hi,

I represent a distributor of a custom Raspberry Pi Solution for the professional electrician and integrator market. So far we shipped our product without a software. This can be somewhat cumbersome depending on the customer. That's why I am working on modifying cosmos-server to fit on our hardware (customized Front-End, custom Market) so we can offer it as an option (free of charge) to our customers.

As we are in a multi-language region, I need cosmos to be multilingual. Hence this PR.

I included i18next library, modified all the code to support i18next translations and added German translation already.

The translations per language all live in a single file https://github.com/aseracorp/resiOS/tree/master/client/src/utils/locales, though it could be split up quiet easily into separate namespaces. I'd say ~95% of the Frontend is translated or ready for translation.

Take this PR as a base for further discussion. If you can use my contribution at all, feel free to request any changes or improvements.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[azukaar]

Hello, thanks for you contribution! I will review it ASAP Is the PR complete or do you still need time to work on it? thanks again!

[mbret]

Thanks for your work, you went the extra mile and that's appreciated. A couple of suggestions:

1. You have to namespace your keys. "New" is hard to understand and maintain. A better key is "container.created.newLabel" for exemple. We have more context, we understand it's a label and we understand it's shown in a context of a container creation. Even better, include the feature / pages or whatever else make it unique in the key.

"management.servApps.list.refreshButton.refreshLabel"

• We understand it's the management section
• We understand it's the servApps sub section
• We understand it's the list tab (containers)
• We understand it's related to the button refresh
• We understand it's the label

Don't hesitat to be verbose, this is usually better than not.

2. Don't use deep object in the translation config. Use a flat config. It's easier to type (typescript), easier to navigate and locate. You can split your files into several if it becomes too big.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[madejackson]

Thanks @mbret @azukaar for looking at the code. I'll try to fix the aforementioned points from @mbret in the coming days.

While working on my fork I found some issues and more text to translate so I updated the commit a couple of times.

Still on the todo is translation-support for the market. Not quiet sure how I want to do that.

I did not translate the migrate014. I think that's not nececary as this is for migrating from an english-only-version.

[mbret]

Thanks @mbret @azukaar for looking at the code. I'll try to fix the aforementioned points from @mbret in the coming days.

While working on my fork I found some issues and more text to translate so I updated the commit a couple of times.

Still on the todo is translation-support for the market. Not quiet sure how I want to do that.

I did not translate the migrate014. I think that's not nececary as this is for migrating from an english-only-version.

I think you don't have to translate everything, as long as it suits your need at least. You already setup the fundation which is the most important point. Again thanks.

Translations can be added as we move forward and detect some missing texts.

[azukaar]

For the market you mean the application? I'd say don't worry about it for now, because that needs to be done separately on the market's repo: https://github.com/azukaar/cosmos-servapps-official

[madejackson]

Thanks for your work, you went the extra mile and that's appreciated. A couple of suggestions:

1. You have to namespace your keys. 

2. Don't use deep object in the translation config. Use a flat config.

@mbret Just to confirm, You prefer a flat config, mostly like it is now, but then the keys should be formatted with dots (.)?

So...

• ...I add keySeparator: false which disables the dot (.) as a nesting seperator to avoid object nesting
• ...this means I'll always use the full key including namespaces in the translation-files
• ...In the code I use keyPrefix while defining { t } where applicable, otherwise using the full key.

That's my plan anyhow.

[mbret]

You prefer a flat config, mostly like it is now, but then the keys should be formatted with dots (.)?

Yes

.this means I'll always use the full key including namespaces in the translation-files

That's the point, full intent is more clear.

.In the code I use keyPrefix while defining { t } where applicable, otherwise using the full key.

That is hard to maintain. Use the full key everywhere.

Remember that, the next developer should be able to understand what it is directly by looking at it. You should not have to look for a potentiall key prefix somewhere else in the code to understand which part you are working on. Most importantly it is not to my knowledge typable with typescript which is unfortunatly an absolute no go (unless proven otherwise)

The deepest the feature is in the code the longest the key will be yes, however we can probably find middleground or shortcut in the name to mitigate it. These crazy keys might still exist but nothing is perfect, you would also have a crazy deep object otherwise anyway.

Additionally and thanks to the flat structure, you can if you want introduce typing for the keys. That would be a neat addition which will prevent developers to make mistakes. Otherwise we can always have a ticket to track this for later.

You will have to rewrite all of your keys unfortunately, sorry about that, especially considering the initial effort. Don't hesitate to talk about it before implementation next time to avoid this situation

[madejackson]

In the process of changing the keys.

Regex used for renaming, for further reference: search: ((\{?t\(')|((i18nKey=")|( ")))<oldkey>(('\)\}?)|(":?)) replace: $1<newkey>$6

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[madejackson]

I think this PR is now ready to be merged. I'm gonna focus on the market now. This will be a separate PR though.

[azukaar]

Thanks for your work, I think for the market we need to talk about the solution before you implement anything (feel free to ping me on Discord)

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[cla-bot[bot]]

We require contributors to sign our Contributor License Agreement. In order for us to review and merge your code, add yourself to the .clabot file as contributor, as a way of signing the CLA.

[azukaar]

Hello! Had to revert the merge... I (thankfully in time) realised that you create yoru PR against MASTER instead of UNSTABLE I typically release on the unstable beta channel before going to production Could you re-open a PR to unstable please?