Explore more options for translation embedding

[shawnbot]

The runtime integration with Phrase has some issues:

1. Using the form's custom properties introduces a delay in rendering the translated form: the form renders, translations are fetched from our API, then the form re-renders when the translations are loaded.
2. Copying form.io forms between environments ("stages") doesn't copy the custom properties, so we have to remember to copy them manually.

The fix for the copying issue is to move the translation properties to the "Form.io render options" JSON blob in Drupal. However, in order for this to also fix the rendering delay we would need to either load the translations before the form (which would delay rendering anything) or load the form and the translations in parallel, like:

const [translations, form] = await Promise.all(loadTranslations(options), createForm(...args))
applyTranslations(translations, form)
form.redraw()

Drupal

Another option to consider is that translations could be loaded into Drupal from Phrase somehow (at publish time?), and embedded in the form options in our template. @jacine @aekong I would love your thoughts on this.

[aekong]

I think I'd prefer to have it loaded on the drupal end to avoid any async race conditions. Let's figure that out 👍

[shawnbot]

I spoke with Arlina a bit about this in Slack, but here is my thinking so far:

• At edit and/or publish time, we would fetch the strings for the form data source URL using this API:

  https://formio-sfds.vercel.app/api/strings?formUrl=:url
  

• Iterate over JSON response's data key to get the list of strings for translation. (The values are the original/English translations.)

• TMGMT offers an API for translation sources, which sounds like where we'd want to push these.

• From then on, translations for a form page should be something that we'd be able to add to a TMGMT job for translation by a vendor.