Поддержка i18n для React в плагинах для Jira Server / Data Center

Всем привет!

В этой статье поговорим о поддержке i18n для React в плагинах для Jira Server / Data Center.

Я буду дорабатывать плагин, который я сделал в статье React and Atlaskit for Jira Server / Data Center apps.

Итак, что нужно получить?

Когда Вы создаете плагин для Jira Server / Data Center у Вас есть проперти файл, в котором содержатся строки для вывода в UI. Эти строки могут быть переведены на другой язык в зависимости от выбранного в Jira языка.

Если Вы хотите вывести строку из такого проперти файла, Вы можете использовать следующую нотацию:

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

Больше про i18n Вы можете почитать здесь.

Если Вы используете React, то из коробки Вы не сможете так легко получить доступ к проперти файлу.

Я покажу, что нужно сделать, чтобы использовать нотацию выше.

Что делаем?

Давайте посмортим на экран, который вызывается из меню Form:

Мы хотим, чтобы First name в английском варинате было First Name, а в русском Имя.

Меняем плагин

Сначала добавим зависимость @atlassian/wrm-react-i18n в файл frontend/package.json:

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

Затем добавим соответствующую строчку в файл backend/src/main/resources/jira-react-atlaskit.properties:

first.name.label=First Name

Теперь можно менять файл frontend/src/js/components/Form.js.

Сначала сделаем импорт i18n из пакета wrm-react-i18n:

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

Теперь выведем значение из проперти файла для поля First name:

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

Как Вы видите, я использую I18n.getText(), чтобы получить значение из проперти файла.

Теперь посмотрим, что получилось:

У нас подтянулось значение из проперти файла для поля First name.

Теперь добавим проперти файл для русского языка.

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

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

Теперь соберем наш плагин и поменяем язык для нашего пользователя на русский:

Теперь снова откроем меню Form:

Все получилось! Вы можете взять код вот отсюда.