fix(relation-widget): i18n options

[demshy]

Summary
Options in relation widget were not translated for collection or file based relations. I passed the locale into the component so that the function that parses these options can use it accordingly.

fixes #4491

Test plan
As I'm new here, I didn't feel quite comfortable adding props to the main editor blocks, but didn't find another way to access locale of the component that is rendered. If there is another (better) way, please inform me and I will update this accordingly.

Config:

collections:
  - name: taxonomies
    label: Taxonomies
    format: json
    i18n:
      structure: single_file
      locales: [en, de]
    files: [
      {label: Travel type ideas, name: travelTypes, file: data/travelTypes.json, i18n: true, fields: [
        {name: title, label: title, widget: string, i18n: true},
        {name: items, label: items, widget: list, label_singular: item, i18n: true, fields: [
          {name: title, label: title, widget: string, i18n: true},
          {name: items, label: items, widget: list, label_singular: item, i18n: true, fields: [
            {name: title, label: title, widget: string},
            {name: id, label: id, widget: string, pattern: ['^[a-z0-9-]+$', 'Only lowercase letters, numbers, and hyphens allowed'], hint: 'IMPORTANT: All translations of this item must have the same ID'},
          ]},
        ]},
      ]},
    ]
  - name: travel-ideas
    label: Travel Ideas (experiences)
    label_singular: travel idea
    folder: content/experiences/travel-ideas
    create: true
    i18n: true
    fields: [
      {name: title, label: Title, widget: string, i18n: true},
      {name: travelType, label: Travel idea type, widget: relation, collection: taxonomies, file: travelTypes, search_fields: ["items.*.title"], display_fields: ["items.*.title"], value_field: "items.*.id", i18n: duplicate},
    ]

content in data/travelTypes.json

{
  "en": {
    "title": "Travel types EN",
    "items": [
      {
        "title": "Art and Culture",
        "id": "art-and-culture"
      },
      {
        "title": "Food and drink",
        "id": "food-and-drink"
      },
      {
        "title": "Outdoors",
        "id": "outdoors"
      }
    ]
  },
  "de": {
    "title": "Travel types DE",
    "items": [
      {
        "title": "Kunst und Kultur",
        "id": "art-and-culture"
      },
      {
        "title": "Essen und Trinken",
        "id": "food-and-drink"
      },
      {
        "title": "Draußen",
        "id": "outdoors"
      }
    ]
  }
}

Checklist

• I have read the contribution guidelines.
• Code is formatted via running yarn format.
• Tests are passing via running yarn test.
• The status checks are successful (continuous integration). Those can be seen below.

A picture of a cute animal (not mandatory but encouraged)

[bytrangle]

@demshy Can you give more details in your description about how to set up the config file so that one can get the same result as your second screenshot? To be more specific, what goes under the Travel Idea Type collection and what the relation widget setup looks like?

[demshy]

Hi, of course, I completely forgot about this. I resolved this an extension of another issue (#6264) which can be closed so I used the test case from that issue.

Anyhow, I have added the collection config and example json data file to the description.

[bytrangle]

And this is what the i18n support in the relation and object widgets should look like with your proposed changes, correct?

[demshy]

Yes, this was the idea. Currently english texts would be displayed on both sides.

[bytrangle]

Good job in retrieving options in the correct locale. However, the locale prop is being passed through several intermediary components that don't explicitly use them, namely EditorControlPane and EditorControl.

What do you think about using the context API to let Widget subscribe to locale value from EditorControlPane?

[erezrokah]

Thanks @demshy, this works great and sorry for the very late review.

@bytrangle great point on using context API. I think this PR is consistent with the rest of the codebase, so I'm happy to ship it as is to fix the issue. We can re-visit the usage of context API in the codebase as a general approach, WDYT?

We can re-visit context API in a separate PR

[demshy]

Hey guys, sorry for my late response, but this was not a blocker for us and I had to attend to other matters for a while.
Thanks to both of you for taking your time. I think we have another locale related issue coming up very soon and I will try to go with @bytrangle's suggestion there. I'll make sure to tag you both to see what you think.

[bytrangle]

@erezrokah I'm fine with your suggestion.

[bytrangle]

@demshy Do you mind if I work on the context API? I'm already working on it locally and it's still fresh in my mind. It's alright if you want to work on it.

[demshy]

@bytrangle of course, that would be great! I will try to delay our thing until you're done.
I think we have something about translatable lists widget coming up, but I don't know the details yet.

[bplmp]

Was this fix deployed to a release? I'm running netlify-cms 2.10.192 but I'm having issues with the i18n options in the relation widget. It is only showing the default language title in the select box, even when changing locale.