Internationalization support for the UI: Javascript

Registered by Julie Pichon on 2016-10-13

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

Status:
Complete
Approver:
Emilien Macchi
Priority:
Medium
Drafter:
Julie Pichon
Direction:
Approved
Assignee:
Florian Fuchs
Definition:
Approved
Series goal:
Accepted for ocata
Implementation:
Implemented
Milestone target:
milestone icon ocata-rc1
Started by
Florian Fuchs on 2016-11-16
Completed by
Florian Fuchs on 2017-02-06

Whiteboard

1. Add i18n library to the dependencies list/packages [flfuchs]

https://github.com/yahoo/react-intl looks promising, is BSD licensed.

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

Wireframes: https://openstack.invisionapp.com/share/B98IXOG5M#/screens/186611712

3. Integrate with Zanata [jpich]
    Make sure the string catalogue is appropriate updated and uploaded on each commit.
    See https://review.openstack.org/#/c/424760/

Some Notes for testing:

The basic implementation (https://review.openstack.org/399626) 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: https://review.openstack.org/#q,topic:bp/tripleo-ui-i18n-support-for-js,n,z

Addressed by: https://review.openstack.org/399626
    Adds basic internationalization support

Addressed by: https://review.openstack.org/401205
    Add dependencies for UI internationalisation

Gerrit topic: https://review.openstack.org/#q,topic:bug/1650560,n,z

Addressed by: https://review.openstack.org/413657
    Add i18n strings to deployment components

Gerrit topic: https://review.openstack.org/#q,topic:bug/1650563,n,z

Addressed by: https://review.openstack.org/416034
    Add i18n strings to parameters components

Gerrit topic: https://review.openstack.org/#q,topic:bug/1650564,n,z

Addressed by: https://review.openstack.org/416564
    Add i18n strings to plan components

Gerrit topic: https://review.openstack.org/#q,topic:bug/1650565,n,z

Addressed by: https://review.openstack.org/416566
    Add i18n strings to roles components

Gerrit topic: https://review.openstack.org/#q,topic:bug/1650559,n,z

Addressed by: https://review.openstack.org/418570
    Add i18n strings to the navigation bar

Gerrit topic: https://review.openstack.org/#q,topic:bug/1650567,n,z

Addressed by: https://review.openstack.org/418967
    Add i18n strings to validations components

Gerrit topic: https://review.openstack.org/#q,topic:bug/1650557,n,z

Addressed by: https://review.openstack.org/419045
    Add i18n strings to the login page

Addressed by: https://review.openstack.org/420212
    i18n for minor string on DeployStep

Gerrit topic: https://review.openstack.org/#q,topic:bug/1650561,n,z

Addressed by: https://review.openstack.org/421233
    Add i18n string to environment config components

Addressed by: https://review.openstack.org/424092
    De-deduplicate i18n string definitions

Addressed by: https://review.openstack.org/424676
    Adds language selector to NavBar

Addressed by: https://review.openstack.org/425627
    Create .pot message file under ./i18n

Addressed by: https://review.openstack.org/426181
    Change locale key from 'messages' to locale name

Gerrit topic: https://review.openstack.org/#q,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.