Move i18n key specification from UI Schema options to ControlElement

* The i18n base key can no longer be specified as part of the UI Schema `options`
* Add optional `i18n` property to `ControlElement`
* Adapt i18n key resolution
* Add explicit tests for i18n key extraction from UI Schema and Json Schema

Fix #1942

Author: lucas-koehler

packages/core/src/i18n/i18nUtil.ts

@@ -1,5 +1,5 @@
 import { ErrorObject } from 'ajv';
-import { UISchemaElement } from '../models';
+import { isControlElement, UISchemaElement } from '../models';
 import { getControlPath } from '../reducers';
 import { formatErrorMessage } from '../util';
 import { i18nJsonSchema, ErrorTranslator, Translator } from './i18nTypes';
@@ -8,7 +8,10 @@ export const getI18nKeyPrefixBySchema = (
   schema: i18nJsonSchema | undefined,
   uischema: UISchemaElement | undefined
 ): string | undefined => {
-  return uischema?.options?.i18n ?? schema?.i18n ?? undefined;
+  if (uischema && isControlElement(uischema) && uischema.i18n) {
+    return uischema.i18n;
+  }
+  return schema?.i18n ?? undefined;
 };
 
 /**

packages/core/src/models/uischema.ts

@@ -213,6 +213,11 @@ export interface ControlElement extends UISchemaElement, Scopable {
    * An optional label that will be associated with the control
    */
   label?: string | boolean | LabelDescription;
+  /**
+   * The i18n key for the control. It is used to identify the string that needs to be translated.
+   * It is suffixed with `.label`, `.description` and `.error.<keyword>` to derive the corresponding message keys for the control.
+   */
+  i18n?: string;
 }
 
 /**
@@ -244,6 +249,9 @@ export interface Categorization extends UISchemaElement {
   elements: (Category | Categorization)[];
 }
 
+export const isControlElement = (element: UISchemaElement): element is ControlElement =>
+  element.type === 'Control';
+
 export const isGroup = (layout: Layout): layout is GroupLayout =>
   layout.type === 'Group';
 

packages/core/test/i18n/i18nUtil.test.ts

@@ -24,7 +24,7 @@
 */
 import test from 'ava';
 
-import { transformPathToI18nPrefix } from '../../src';
+import { ControlElement, getI18nKeyPrefixBySchema, i18nJsonSchema, transformPathToI18nPrefix } from '../../src';
 
 test('transformPathToI18nPrefix returns root when empty', t => {
   t.is(transformPathToI18nPrefix(''), 'root');
@@ -46,3 +46,43 @@ test('transformPathToI18nPrefix removes array indices', t => {
   t.is(transformPathToI18nPrefix('foo1.23.b2ar3.1.5.foo'), 'foo1.b2ar3.foo');
   t.is(transformPathToI18nPrefix('3'), 'root');
 });
+
+test('getI18nKeyPrefixBySchema gets key from uischema over schema', t => {
+  const control: ControlElement = {
+    type: 'Control',
+    scope: '#/properties/foo',
+    i18n: 'controlFoo'
+  };
+  const schema: i18nJsonSchema = {
+    type: 'string',
+    i18n: 'schemaFoo'
+  }
+  t.is(getI18nKeyPrefixBySchema(schema, control), 'controlFoo');
+});
+
+test('getI18nKeyPrefixBySchema gets schema key for missing uischema key', t => {
+  const control: ControlElement = {
+    type: 'Control',
+    scope: '#/properties/foo',
+  };
+  const schema: i18nJsonSchema = {
+    type: 'string',
+    i18n: 'schemaFoo'
+  }
+  t.is(getI18nKeyPrefixBySchema(schema, control), 'schemaFoo');
+});
+
+test('getI18nKeyPrefixBySchema returns undefined for missing uischema and schema keys', t => {
+  const control: ControlElement = {
+    type: 'Control',
+    scope: '#/properties/foo',
+  };
+  const schema: i18nJsonSchema = {
+    type: 'string',
+  }
+  t.is(getI18nKeyPrefixBySchema(schema, control), undefined);
+});
+
+test('getI18nKeyPrefixBySchema returns undefined for undefined parameters', t => {
+  t.is(getI18nKeyPrefixBySchema(undefined, undefined), undefined);
+});

packages/core/test/util/renderer.test.ts

@@ -1344,7 +1344,7 @@ test('mapStateToControlProps - i18n - translation via UI Schema i18n key', t =>
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  ownProps.uischema = {...ownProps.uischema, options: {i18n: 'my-key'}};
+  ownProps.uischema = {...ownProps.uischema, i18n: 'my-key'};
   state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
     switch(key){
       case 'my-key.label': return 'my label';