i18n support in React for Jira Server / Data Center apps

Hello!

In this article I will show how you can setup i18n support in React for Jira Server / Data Center apps.

I will base my code on the code which I wrote in my previous article about React and Atlaskit for Jira Server / Data Center apps.

So what do we want to accomplish?

When you create a Jira Server / Data Center app you have property files which contain messages which can be translated to any language which you chose in Jira.

If you want to have translation in vm or soy templates or javascript you can use the following notation:

$i18n.getText("com.example.plugin.fruit.basket.contains", [$fruits.size()])

You can read more information about internalisation here.

If you use React you will not be able to use this notation by default.

I will show you what should be done in React to make it work.

What to do?

Let ‘s have a look at the screen which is called from the Form menu:

We want the First name field be called First Name in English and Имя in Russian.

Change previous app

First we need add @atlassian/wrm-react-i18n dependency to frontend/package.json:

"@atlassian/wrm-react-i18n": "^0.7.0",

Then we add a message for the First name field into backend/src/main/resources/jira-react-atlaskit.properties:

first.name.label=First Name

Now we have to change code in frontend/src/js/components/Form.js.

First add import of i18n from the wrm-react-i18n package:

import { I18n } from '@atlassian/wrm-react-i18n';

Then use it for the First Name field:

<Field name="firstname" defaultValue="" label={I18n.getText('first.name.label')} isRequired>

As you can see we used I18n.getText() to get a message from the property file.

Now let’s have a look what we have:

As you can see we have the First Name label from the property file.

Now let’s add a new property file for the Russian language.

backend/src/main/resources/jira-react-atlaskit_ru_Ru.properties:

#put any key/value pairs here
first.name.label=Имя

Let’s package our app and change the language for my user to Russian :

Now let’s open our Form menu:

Everything works! We did it.

You can take source code from here.