Move i18n key specification from UI Schema options to UI Schema element

The 'i18n' base key is no longer specified as part of the UI Schema `options` but moved up to the UI Schema element itself. The new 'Internationalizable' interface can be extended by internationalizable UI Schema elements. For now this is the 'ControlELement'.

Author: lucas-koehler

packages/core/src/i18n/i18nUtil.ts

@@ -1,5 +1,5 @@
 import { ErrorObject } from 'ajv';
-import { UISchemaElement } from '../models';
+import { isInternationalized, 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 (isInternationalized(uischema)) {
+ return uischema.i18n;
+ }
+ return schema?.i18n ?? undefined;
 };
 
 /**

packages/core/src/models/uischema.ts

@@ -36,6 +36,15 @@ export interface Scopable {
  scope: string;
 }
 
+/**
+ * Interface for describing an UI schema element that can provide an internationalization base key.
+ * If defined, this key is suffixed to derive applicable message keys for the UI schema element.
+ * For example, such suffixes are `.label` or `.description` to derive the corresponding message keys for a control element.
+ */
+export interface Internationalizable {
+ i18n?: string;
+}
+
 /**
  * A rule that may be attached to any UI schema element.
  */
@@ -207,7 +216,7 @@ export interface LabelElement extends UISchemaElement {
  * A control element. The scope property of the control determines
  * to which part of the schema the control should be bound.
  */
-export interface ControlElement extends UISchemaElement, Scopable {
+export interface ControlElement extends UISchemaElement, Scopable, Internationalizable {
  type: 'Control';
  /**
  * An optional label that will be associated with the control
@@ -244,6 +253,10 @@ export interface Categorization extends UISchemaElement {
  elements: (Category | Categorization)[];
 }
 
+export const isInternationalized = (element: unknown): element is Required<Internationalizable> => {
+ return typeof element === 'object' && element !== null && typeof (element as Internationalizable).i18n === 'string';
+}
+
 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';