[i18n] Form labelling translations
Support multiple languages for labels in dynamic forms, so that forms can be displayed in the user's selected language, both in editable and readonly mode. (This will also facilitate aspects of translations to Flax and possibly other exports -- not covered in this ticket.)
This ticket does not cover data entry in multiple languages, e.g. allowing a user to enter multiple abstracts in English, Russian and French. That would need to be considered in a separate ticket.
Labels that can be translated
When a user chooses their preferred language in the UI, this should also change the language of the following data items:
- form title (
name
) - form description (
description
-- rich text) - form submission-confirmation modal title (
popuptitle
) - form submission-confirmation modal text (
popupdescription
-- rich text) - field title (
title
) - field short-form title (
shortDescription
) - field description (
description
-- rich text) - field placeholder (
placeholder
) - select/radio/checkbox field option label (
label
)
Data structure
Currently each of the above data items are stored as a string in the form, representing either plain text or html ('rich text'). We should in each case replace the string with an array of { label: string, lang: string }
. Example of data for a field title:
[{ label: 'Abstract', lang: 'en' }, { label: 'Реферат', lang: 'ru-RU' }]
To keep the data tidy, empty string translations should be removed from the array.
We'll need to provide migrations for existing forms to move to the new structure.
Form-builder changes
In the form-builder, text entry components will need to change. Current state:
These should change to
Clicking the globe icon (react-feather
Globe
) toggles expanding it to the following:
Similarly, for rich text data items:
The language options displayed, and the 'default' language shown when the options are collapsed, should be configured via the config manager (details below). The examples above show what would display if the default language is configured to be English, and subsequent languages are Russian and French (in that order).
When editing required fields, only the default language is required.
Alerting users to missing translations (in the form-builder)
If a form contains any translations other than the default language for any data item in the form, the globe icon should be shown in warning colour for all data items that don't have translations for all configured languages. E.g., if the default language is English, and a form only contains English translations, globe icons should all be normal colour; but then let's say the user adds a French translation for a field placeholder text: now the globe icons of every data item in that form are displayed in warning colour unless all language translations are supplied for that data item. Globe icons in warning state should have tooltips saying e.g. "Русский, Français not supplied".
Config manager changes
In the config manager the list of supported languages can be configured: this is stored as an array of { label: string, lang: string }
, where the user enters the label
as e.g. "Русский" and the lang
as e.g. 'ru-RU'. This is displayed as a list of language items, each with two text fields ("Language name" and "ISO 639-1 tag"). Languages in the list can be reorganised, and the first in the list is taken to be the default language.
Displaying labels in forms
The FormTemplate
and ReadOnlyFormTemplate
components should in each case choose the best label to display, according to what translations are available. Order of precedence is:
- the user's current selected language
- the default language (first language listed in config manager)
- second language listed in config manager
- etc.
The first available label (with a non-empty string) in this order of precedence is the label chosen for display.