Internationalization support for the UI: Javascript

Registered by Julie Pichon

Strings in the UI are not currently translatable. We should investigate the available i18n libraries for React, internationalise the current code, and hook the string catalogues with CI so that they are kept up to date in Zanata.

Blueprint information

Emilien Macchi
Julie Pichon
Florian Fuchs
Series goal:
Accepted for ocata
Milestone target:
milestone icon ocata-rc1
Started by
Florian Fuchs
Completed by
Florian Fuchs


1. Add i18n library to the dependencies list/packages [flfuchs] looks promising, is BSD licensed.

2. Implement the i18n changes in the UI [flfuchs]


3. Integrate with Zanata [jpich]
    Make sure the string catalogue is appropriate updated and uploaded on each commit.

Some Notes for testing:

The basic implementation ( contains a language file that only translates the "Deploy" step header. To switch to Japanese type the following in your browser console and reload the page:

  localStorage.setItem('language', 'ja');

You will see a lot of "Missing message" warnings in the console and the word "Deploy" translated into Japanese. To switch back to English and get rid of the warnings type:

  localStorage.setItem('language', 'en');

Gerrit topic:,topic:bp/tripleo-ui-i18n-support-for-js,n,z

Addressed by:
    Adds basic internationalization support

Addressed by:
    Add dependencies for UI internationalisation

Gerrit topic:,topic:bug/1650560,n,z

Addressed by:
    Add i18n strings to deployment components

Gerrit topic:,topic:bug/1650563,n,z

Addressed by:
    Add i18n strings to parameters components

Gerrit topic:,topic:bug/1650564,n,z

Addressed by:
    Add i18n strings to plan components

Gerrit topic:,topic:bug/1650565,n,z

Addressed by:
    Add i18n strings to roles components

Gerrit topic:,topic:bug/1650559,n,z

Addressed by:
    Add i18n strings to the navigation bar

Gerrit topic:,topic:bug/1650567,n,z

Addressed by:
    Add i18n strings to validations components

Gerrit topic:,topic:bug/1650557,n,z

Addressed by:
    Add i18n strings to the login page

Addressed by:
    i18n for minor string on DeployStep

Gerrit topic:,topic:bug/1650561,n,z

Addressed by:
    Add i18n string to environment config components

Addressed by:
    De-deduplicate i18n string definitions

Addressed by:
    Adds language selector to NavBar

Addressed by:
    Create .pot message file under ./i18n

Addressed by:
    Change locale key from 'messages' to locale name

Gerrit topic:,topic:notifications-i18n,n,z


Work Items

Work items:
Add react-intl dependency (2.1.2 already a dependency): DONE
Update react-intl dependency from 2.1.2 to 2.1.5 (Maybe this should be done as part of a general review of current dependency versions): TODO
Implement basic usage of react-intl in the UI (deployment_plan components): DONE
Implement language switching in the UI: DONE
Documentation: Howto detect new message ids; integrate new translation: DONE

Dependency tree

* Blueprints in grey have been implemented.

This blueprint contains Public information 
Everyone can see this information.