eclipsesource / jsonforms

Customizable JSON Schema-based forms with React, Angular and Vue support out of the box.
http://jsonforms.io
Other
2.04k stars 351 forks source link

deriveLabelForUISchemaElement() return undefined if no translation was found and no label defined #2290

Open davewwww opened 5 months ago

davewwww commented 5 months ago

Describe the bug

While working on https://github.com/eclipsesource/jsonforms/pull/2270#pullrequestreview-1884750920, it was discovered that the translation was not working properly.

In the example https://deploy-preview-2270--jsonforms-examples.netlify.app/vue-vanilla/#categorization the second tab "address" is empty. In uischema there is only an "i18n" key defined and no label.

"type": "Category",
"i18n": "address",
"elements": []

Expected behavior

the expected behavior is that at least the key "address" will be returned, even if it cannot be translated.

Steps to reproduce the issue

  1. Go to https://deploy-preview-2270--jsonforms-examples.netlify.app/vue-vanilla/#categorization
  2. second tab is empty, but should be labeled with "address"

Screenshots

No response

Which Version of JSON Forms are you using?

v3.2.1

Framework

Vue

RendererSet

Vanilla

Additional context

No response

lucas-koehler commented 5 months ago

Hi @davewwww , thanks for reporting this issue. I agree that it is unexpected and possibly hard to properly detect in the UI when just undefined is returned. I think we should either return the i18n key as is or return the key with a prefix. E.g. for an unknown key foo something like: MISSING_I18N:foo. @sdirix what do you think?

sdirix commented 5 months ago

I'm not sure. If you have a category without i18n and without a label it will also not render any label. To use the i18n value as a fallback, all the user needs to do is to add it as a label too, e.g.

"type": "Category",
"i18n": "address",
"label": "address",
"elements": []
davewwww commented 5 months ago

But in deriveLabelForUISchemaElement() you have this check:

  if (
    (uischema.label === undefined ||
      uischema.label === null ||
      uischema.label === true) &&
    !isInternationalized(uischema)
  ) {
    return undefined;
  }

it says that if you have no label and no i18n, then return undefined. this means that if no label exists but an i18n does, then this check does not apply. so either this check is wrong or the following code ignores the fact that you don't need a label if i18n is set.

so what is the intended behavior of you?