Поддержка 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:

This image has an empty alt attribute; its file name is Screenshot-2020-09-17-at-21.35.36-1024x735.png

Мы хотим, чтобы 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(), чтобы получить значение из проперти файла.

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

This image has an empty alt attribute; its file name is Screenshot-2020-09-17-at-21.46.44.png

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

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

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

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

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

This image has an empty alt attribute; its file name is Screenshot-2020-09-17-at-21.50.32-1024x462.png

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

This image has an empty alt attribute; its file name is Screenshot-2020-09-17-at-21.51.24.png

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

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

Leave a Reply

%d bloggers like this:

Spelling error report

The following text will be sent to our editors: