[Research] osd translation issue

[ananzh]

[Issue - 1]

Seems a lot of react components which use to translate are not working. (example)

Currently, we have two ways to translate the react components (did not research much on angular, since we will remove them sooner or later): 1) a <FormattedMessage> component 2) a global imported method i18n.translate.

So far the issues are:

1. <FormattedMessage> component not working
2. i18n.translate does not work on formatTime\Date\Plural etc.

In this research, I would like to investigate on two questions:

1. why we need two duplicate ways to translate? can we remove one?
2. why <FormattedMessage> component is not working? if we need it, how to fix it?

[ananzh]

There are two ways to translate strings:

1. i18n.translate method
I18n is first initialized by setting up locale if there is a customized one. Otherwise, it will set the locale to default en.
After i18n is initialized, when i18n.translate method is called, it will call getMessageById and pass the message id.
This getMessageById will first load all the translations like below by getTranslation method. Then it use translationsForLocale[currentLocale].messages[id] to translate.

translationsForLocale[currentLocale]: { formats:
{ number: { currency: [Object], percent: [Object] },
date:
{ short: [Object],
medium: [Object],
long: [Object],
full: [Object] },
time:
{ short: [Object],
medium: [Object],
long: [Object],
full: [Object] },
relative:
{ years: [Object],
months: [Object],
days: [Object],
hours: [Object],
minutes: [Object],
seconds: [Object] } },
locale: 'demo',
messages:
{ 'console.devToolsDescription': '跳过 cURL 并使用 JSON 接口在控制台中处理您的数据。',
'console.devToolsTitle': '与 OpenSearch API 进行交互',
'core.ui.welcomeMessage': '正在加载 OpenSearch',
'dashboard.featureCatalogue.dashboardSubtitle': '在控制板中分析数据。',
'discover.discoverSubtitle': '搜索和查找数据分析结果。',
'home.addData.sectionTitle': '获取你的数据',
'home.breadcrumbs.homeTitle': '主页',
'home.header.title': '欢迎归来',
'home.manageData.sectionTitle': '管理你的数据',
'home.tutorialDirectory.featureCatalogueDescription': '从热门应用和服务中采集数据。',
'home.tutorialDirectory.featureCatalogueTitle': '添加数据',
'opensearchDashboardsOverview.opensearchDashboards.solution.subtitle': '可视化和分析',
'opensearch-dashboards-react.osdOverviewPageHeader.addDataButtonLabel': '添加数据',
'opensearch-dashboards-react.osdOverviewPageHeader.devToolsButtonLabel': '开发工具',
'opensearch-dashboards-react.osdOverviewPageHeader.stackManagementButtonLabel': '管理',
'opensearch-dashboards-react.pageFooter.appDirectoryButtonLabel': '查看应用目录',
'opensearch-dashboards-react.pageFooter.changeHomeRouteLink': '登录时显示不同页面',
'discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle': '没有结果' } }

2.ForfamttedMessage
The <FormattedMessage /> is a react components in react-intl to translate string for other react components. For it to work, you first need to prepare a locale provided by react-intl and specifies the date, time, number and etc. The locale data is needed to be registered by addLocaleData() ( packages/osd-i18n/src/core/locales.js ).

[ananzh]

Therefore for the previous two questions:
why we need two duplicate ways to translate? can we remove one?
--> ForfamttedMessage is used to translate react component and require some setup. i18n.translate is easier to use and only requires the translation json file. But it could not translate date, time, number and some formats.

why component is not working? if we need it, how to fix it?
--> <FormattedMessage> needs to setup in packages/osd-i18n/src/core/locales.js . For example, if your translation file is called demo.json and is chinese, then you need to add below at the bottom.

addLocaleData({ locale: "demo", pluralRuleFunction: function (n,ord){if(ord)return"other";return"other"},"fields":{"year":{"displayName":"年","relative":{"0":"今年","1":"明年","-1":"去年"},"relativeTime":{"future":{"other":"{0}年后"},"past":{"other":"{0}年前"}}},"year-short":{"displayName":"年","relative":{"0":"今年","1":"明年","-1":"去年"},"relativeTime":{"future":{"other":"{0}年后"},"past":{"other":"{0}年前"}}},"month":{"displayName":"月","relative":{"0":"本月","1":"下个月","-1":"上个月"},"relativeTime":{"future":{"other":"{0}个月后"},"past":{"other":"{0}个月前"}}},"month-short":{"displayName":"月","relative":{"0":"本月","1":"下个月","-1":"上个月"},"relativeTime":{"future":{"other":"{0}个月后"},"past":{"other":"{0}个月前"}}},"day":{"displayName":"日","relative":{"0":"今天","1":"明天","2":"后天","-2":"前天","-1":"昨天"},"relativeTime":{"future":{"other":"{0}天后"},"past":{"other":"{0}天前"}}},"day-short":{"displayName":"日","relative":{"0":"今天","1":"明天","2":"后天","-2":"前天","-1":"昨天"},"relativeTime":{"future":{"other":"{0}天后"},"past":{"other":"{0}天前"}}},"hour":{"displayName":"小时","relative":{"0":"这一时间 \u002F 此时"},"relativeTime":{"future":{"other":"{0}小时后"},"past":{"other":"{0}小时前"}}},"hour-short":{"displayName":"小时","relative":{"0":"这一时间 \u002F 此时"},"relativeTime":{"future":{"other":"{0}小时后"},"past":{"other":"{0}小时前"}}},"minute":{"displayName":"分钟","relative":{"0":"此刻"},"relativeTime":{"future":{"other":"{0}分钟后"},"past":{"other":"{0}分钟前"}}},"minute-short":{"displayName":"分","relative":{"0":"此刻"},"relativeTime":{"future":{"other":"{0}分钟后"},"past":{"other":"{0}分钟前"}}},"second":{"displayName":"秒","relative":{"0":"现在"},"relativeTime":{"future":{"other":"{0}秒钟后"},"past":{"other":"{0}秒钟前"}}},"second-short":{"displayName":"秒","relative":{"0":"现在"},"relativeTime":{"future":{"other":"{0}秒后"},"past":{"other":"{0}秒前"}}}} });

[ananzh]

Action item:

1. For i18n-plugin, setup demo locale to packages/osd-i18n/src/core/locales.js.
2. Add some words in i18n package README.

[ananzh]

Others:

If you see this below error or similar, it means you haven't register your locale. You need to add it in packages/osd-i18n/src/core/locales.js.

If you see this diff error or similar, it means something is missing from your translation file. You can get what is missing from the message. Just need to add it to the translation file.

[joshuarrrr]

@ananzh Can we close this now? I think you made the necessary doc updates, right?