MFE Translation How To's


How to internationalize your React App

This is a step by step guide to making your React app ready to accept translations. The instructions here are very specific to the edX setup.

How to format strings

There are two main ways we format strings for translations.

Using strings directly in <FormattedMessage /> components.

1 2 3 4 <FormattedMessage id="myApp.genericString.okay" defaultMessage="Okay" />

Separating strings into a messages.js file and then using intl.formatMessage()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 const myString = { id: "myApp.genericString.okay", defaultMessage: "Okay", }; function OkayButton({ intl }) { return ( <> {intl.formatMessage(myString)} </> ); } OkayButton.propTypes = { intl: intlShape.isRequired, }; export default injectIntl(OkayButton);

For more context:  

Using the “description” field

The description field is used to provide context of our strings to translators. When the context of a string is not obvious, it can lead to inconsistent translations across our platform.

In the following example, the string “Apply” may be translated to “Aplicar” in Spanish, which is incorrect in this scenario. The correct Spanish translation would be “Actualizar.” This is why it’s important to provide context!

Don’t write a vague description about the HTML element itself

1 2 3 4 5 'applyLinkLabel': { id: 'myApp.application.apply', defaultMessage: 'Apply', description: 'a link label', }

Do describe the context of an ambiguous string if the context is not clear in the string itself.

1 2 3 4 5 6 'applyLinkLabel': { id: 'myApp.application.apply', defaultMessage: 'Apply', description: 'A link that prompts users to apply to the university. This link navigates users to an online application.', }

Plurals vs. Singular 

The English language only has "singular" and "plural" (or "not singular"); other languages such as Russian or Arabic have more than two options, depending on whether zero, one, two, a few, or many items exist. If we do not handle these cases, a string as incorrect as 1 results may be rendered in those languages.

1 2 3 4 5 6 7 8 9 <FormattedMessage defaultMessage="Hello you have {count, plural, one {Message} other {Messages}}" description="Welcome message that alerts users to how many messages they have received in their notification inbox." values={{ count: 1000 }} tagName="p" />

Gender agreement

It’s important to be aware of when gender agreement may be a factor in translations. In the English language, verbs, adjectives, adverbs, etc. do not have gender forms. The following example demonstrates how in the Polish language, the gender of the subject of the sentence impacts the gender form of the verb.

1 2 3 4 5 6 7 8 9 10 11 <FormattedMessage defaultMessage="{subject} {gender, select, male{went} female{went} neutral{went}}." description="" values={{ subject: 'Billy', gender: 'male' }} /> >> English translation: Billy went. >> Polish translation: Billy poszedł.
1 2 3 4 5 6 7 8 9 10 11 <FormattedMessage defaultMessage="{subject} {gender, select, male{went} female{went} neutral{went}}." description="" values={{ subject: 'Sam', gender: 'neutral' }} /> >> English translation: Sam went. >> Polish translation: Sam poszło.

How to get strings translated in MFE’s

  1. Get access to the Jenkins translation jobs by asking your Embedded SRE to add you to the Github team, or if you don’t have an Embedded SRE filing an SRE ticket.

  2. Get access to the translations Google Group.

  3. Add your strings in their respective components (see above for formatting in MFE’s), merge your changes to master. 

  4. Run the command to run the Transifex job for the repo your string are in.

    1. For example, Learning MFE push translations.

  5. Your strings will be translated by translators in Transifex, and approved. 

    1. If this is a time sensitive translation, contact an edX engineer who has translation permissions to approve the new strings.

    2. If this is not time sensitive, most MFE’s have an edX Transifex Bot that will capture new strings and automatically create a new pull request. Please note the pull request will not be automatically deployed to prod. Example pull request.

  6. Run the command to pull translations in for the same repo.

    1. For example, Learning MFE pull translations.

  7. After the translation update build finishes deploying to stage, check the page you added the translations to see if they are in fact translated correctly. If something needs to be edited, forward fix them. 

  8. Deploy to prod and verify prod is translated as expected.