Refactor translation process

[shawnbot]

After working on an urgent form this weekend, I've found that the way we're minting translation strings automatically to be kind of a headache. Some challenges:

• For one, it's tempting to edit the strings in form.io after you've put them into Phrase, only to re-discover during testing that your changes will be overridden by translations.

• Secondly, not all of the strings are "caught" by the API that we use to generate the initial Phrase upload. Some of these include:

  • Select component options labels with autocomplete (Choices.js). For the form in question, I ended up having to rename the Phrase keys from key.values.* to the English label in order for the t() function called on the labels to find the translations.
  • For some custom messages (?) I ended up having to put the Phrase key into the form.io field, e.g. componentKey.validate.customMessage.

It would be nice when you're in form.io to: 1) see the form in other languages with Phrase translations loaded, and 2) know which strings have been "moved" from form.io to Phrase for the purposes of translating. What if, for instance, there was a process that could:

1. Find all of the human/English content in the form (or just gave you a UI to run down the list and check or uncheck each one??)
2. Generate appropriate string keys automatically (e.g. by their "path" in the data)
3. Replace all of the English content in form.io with the string keys so that it's really obvious what can and can't be edited there.
4. Maybe augment the form.io editor with links to each Phrase key alongside the field in question??