Internationalization

How to add and use a message

All messages are kept in messages object in src/intl/messages.js. Message values are in ICU Message format (demo).

Message define as

src/intl/messages.js:

export const messages = {
    foo: 'Foo {var}'
}

can be used either programmatically (preferred way)

import { msg } from './intl'

const translated = msg.foo({ var: 'bar' }) // 'Foo bar'

or declaratively

import { FormattedMessage } from 'react-intl'
import { id } from './intl'

const rendered = (<FormattedMessage id={id.foo} values={ var: 'bar' } />) // <span>Foo bar</span>

Please note that <FormattedMessage> component wraps rendered string in often unnecessary <span>.

Locale selection

• When the application is loaded and the url contains query parameter locale value of which is supported, this locale is used.
• If value of navigator.language is supported, this locale is used.
• If a value of navigator.language is supported, this locale is used.
• en

I18l libraries

Web UI uses internationalization libraries from format.js project. intl-messageformat to format messages and react-intl to render strings in React environment.

Zanata

Messages are translated using Zanata translation platform. Project page. Communication with Zanata platform is done by zanata-cli client (zanata-client rpm package). To configure the zanata-cli one needs to download ~/.config/zanata.ini from Zanata user settings and zanata.xml (in root of project, already in git) from project settings.

Workflow

Threre are 4 yarn scripts dedicated to translations intended to be used in following order:

1. intl:extract extracts messages to extra/to-zanata directory into a '.pot' file.
2. intl:push uploads strings to Zanata
3. intl:pull downloads translated strings from Zanata and stores them in extra/from-zanata directory in form of a '.po' file per language.
4. intl:apply converts .po files to src/intl/translated-messages.json that are consumed by the application.

zanata-cli push --push-type=trans -l it,ja,fr can be used to upload selected '.po' files. This is often used when English value is changed.

How to

Upgrade zanata version

1. Create new version in Zanata by cloning
   1. Go at https://translate.zanata.org/project/view/ovirt-web-ui/versions.
   2. Click "..." > "New Version".
   3. Check "Copy from previous version".
2. (optional) Make old version read-only if applicable.
   1. Go at https://translate.zanata.org/iteration/view/ovirt-web-ui/{old-version-name}/settings
   2. Click "Make this version read only"
3. Update value of /config/project-version tag in file zanata.xml in the repository.

Download new translations from Zanata to the repo

1. yarn run intl:extract to create extra/to-zanata/messages.pot
2. yarn run intl:pull to download files from Zanata to extra/from-zanata directory
3. yarn run intl:apply to update src/intl/messages.js based on content of extra/from-zanata and extra/to-zanata/messages.pot