@jsonforms/core 3.0.0-alpha.1 → 3.0.0-alpha.2

package/src/util/renderer.ts

@@ -25,7 +25,6 @@
 
 import get from 'lodash/get';
 import { ControlElement, JsonSchema, UISchemaElement } from '../models';
-import union from 'lodash/union';
 import find from 'lodash/find';
 import {
   findUISchema,
@@ -34,9 +33,11 @@ import {
   getConfig,
   getData,
   getErrorAt,
+  getErrorTranslator,
   getRenderers,
   getSchema,
   getSubErrorsAt,
+  getTranslator,
   getUiSchema,
   JsonFormsCellRendererRegistryEntry,
   JsonFormsRendererRegistryEntry,
@@ -48,12 +49,13 @@ import { createLabelDescriptionFrom } from './label';
 import { CombinatorKeyword, resolveSubSchemas } from './combinators';
 import { moveDown, moveUp } from './array';
 import { AnyAction, Dispatch } from './type';
-import { formatErrorMessage, Resolve } from './util';
+import { Resolve } from './util';
 import { composePaths, composeWithUi } from './path';
 import { isVisible } from './runtime';
 import { CoreActions, update } from '../actions';
 import { ErrorObject } from 'ajv';
 import { JsonFormsState } from '../store';
+import { getCombinedErrorMessage, getI18nKey, i18nJsonSchema, Translator } from '../i18n';
 
 export { JsonFormsRendererRegistryEntry, JsonFormsCellRendererRegistryEntry };
 
@@ -88,6 +90,7 @@ const isRequired = (
  *
  * @param {string} label the label string
  * @param {boolean} required whether the label belongs to a control which is required
+ * @param {boolean} hideRequiredAsterisk applied UI Schema option
  * @returns {string} the label string
  */
 export const computeLabel = (
@@ -98,6 +101,20 @@ export const computeLabel = (
   return required && !hideRequiredAsterisk ? label + '*' : label;
 };
 
+/**
+ * Indicates whether to mark a field as required.
+ *
+ * @param {boolean} required whether the label belongs to a control which is required
+ * @param {boolean} hideRequiredAsterisk applied UI Schema option
+ * @returns {boolean} should the field be marked as required
+ */
+ export const showAsRequired = (
+  required: boolean,
+  hideRequiredAsterisk: boolean
+): boolean => {
+  return required && !hideRequiredAsterisk;
+};
+
 /**
  * Create a default value based on the given scheam.
  * @param schema the schema for which to create a default value.
@@ -159,16 +176,45 @@ export interface EnumOption {
   value: any;
 }
 
-export const enumToEnumOptionMapper = (e: any): EnumOption => {
-  const stringifiedEnum = typeof e === 'string' ? e : JSON.stringify(e);
-  return { label: stringifiedEnum, value: e };
+export const enumToEnumOptionMapper = (
+  e: any,
+  t?: Translator,
+  i18nKey?: string
+): EnumOption => {
+  let label = typeof e === 'string' ? e : JSON.stringify(e);
+  if (t) {
+    if (i18nKey) {
+      label = t(`${i18nKey}.${label}`, label);
+    } else {
+      label = t(label, label);
+    }
+  }
+  return { label, value: e };
 };
 
-export const oneOfToEnumOptionMapper = (e: any): EnumOption => ({
-  value: e.const,
-  label:
-    e.title ?? (typeof e.const === 'string' ? e.const : JSON.stringify(e.const))
-});
+export const oneOfToEnumOptionMapper = (
+  e: any,
+  t?: Translator,
+  uiSchemaI18nKey?: string
+): EnumOption => {
+  let label =
+    e.title ??
+    (typeof e.const === 'string' ? e.const : JSON.stringify(e.const));
+  if (t) {
+    // prefer schema keys as they can be more specialized
+    if (e.i18n) {
+      label = t(e.i18n, label);
+    } else if (uiSchemaI18nKey) {
+      label = t(`${uiSchemaI18nKey}.${label}`, label);
+    } else {
+      label = t(label, label);
+    }
+  }
+  return {
+    label,
+    value: e.const,
+  };
+};
 
 export interface OwnPropsOfRenderer {
   /**
@@ -398,9 +444,8 @@ export const mapStateToControlProps = (
     controlElement.scope,
     rootSchema
   );
-  const errors = formatErrorMessage(
-    union(getErrorAt(path, resolvedSchema)(state).map(error => error.message))
-  );
+  const errors = getErrorAt(path, resolvedSchema)(state);
+  
   const description =
     resolvedSchema !== undefined ? resolvedSchema.description : '';
   const data = Resolve.data(rootData, path);
@@ -415,18 +460,26 @@ export const mapStateToControlProps = (
     rootData,
     config
   );
+
+  const schema = resolvedSchema ?? rootSchema;
+  const t = getTranslator()(state);
+  const te = getErrorTranslator()(state);
+  const i18nLabel = t(getI18nKey(schema, uischema, 'label') ?? label, label);
+  const i18nDescription = t(getI18nKey(schema, uischema, 'description') ?? description, description);
+  const i18nErrorMessage = getCombinedErrorMessage(errors, te, t, schema, uischema);
+
   return {
     data,
-    description,
-    errors,
-    label,
+    description: i18nDescription,
+    errors: i18nErrorMessage,
+    label: i18nLabel,
     visible,
     enabled,
     id,
     path,
     required,
-    uischema: ownProps.uischema,
-    schema: resolvedSchema || rootSchema,
+    uischema,
+    schema,
     config: getConfig(state),
     cells: ownProps.cells || state.jsonforms.cells,
     rootSchema
@@ -461,8 +514,20 @@ export const mapStateToEnumControlProps = (
   const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    props.schema.enum?.map(enumToEnumOptionMapper) ||
-    (props.schema.const && [enumToEnumOptionMapper(props.schema.const)]);
+    props.schema.enum?.map(e =>
+      enumToEnumOptionMapper(
+        e,
+        getTranslator()(state),
+        props.uischema?.options?.i18n ?? (props.schema as i18nJsonSchema).i18n
+      )
+    ) ||
+    (props.schema.const && [
+      enumToEnumOptionMapper(
+        props.schema.const,
+        getTranslator()(state),
+        props.uischema?.options?.i18n ?? (props.schema as i18nJsonSchema).i18n
+      )
+    ]);
   return {
     ...props,
     options
@@ -482,7 +547,13 @@ export const mapStateToOneOfEnumControlProps = (
   const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    (props.schema.oneOf as JsonSchema[])?.map(oneOfToEnumOptionMapper);
+    (props.schema.oneOf as JsonSchema[])?.map(oneOfSubSchema =>
+      oneOfToEnumOptionMapper(
+        oneOfSubSchema,
+        getTranslator()(state),
+        props.uischema?.options?.i18n
+      )
+    );
   return {
     ...props,
     options
@@ -504,8 +575,20 @@ export const mapStateToMultiEnumControlProps = (
   const options: EnumOption[] =
     ownProps.options ||
     (items?.oneOf &&
-      (items.oneOf as JsonSchema[]).map(oneOfToEnumOptionMapper)) ||
-    items?.enum?.map(enumToEnumOptionMapper);
+      (items.oneOf as JsonSchema[]).map(oneOfSubSchema =>
+        oneOfToEnumOptionMapper(
+          oneOfSubSchema,
+          state.jsonforms.i18n?.translate,
+          props.uischema?.options?.i18n
+        )
+      )) ||
+    items?.enum?.map(e =>
+      enumToEnumOptionMapper(
+        e,
+        state.jsonforms.i18n?.translate,
+        props.uischema?.options?.i18n ?? (props.schema as i18nJsonSchema).i18n
+      )
+    );
   return {
     ...props,
     options
@@ -961,9 +1044,17 @@ export const mapStateToArrayLayoutProps = (
   } = mapStateToControlWithDetailProps(state, ownProps);
 
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
-  const childErrors = formatErrorMessage(
-    getSubErrorsAt(path, resolvedSchema)(state).map(error => error.message)
+
+  // TODO Does not consider a specialized '.custom' error message overriding all other error messages
+  // TODO Does not consider 'i18n' keys which are specified in the ui schemas of the sub errors
+  const childErrors = getCombinedErrorMessage(
+    getSubErrorsAt(path, resolvedSchema)(state),
+    getErrorTranslator()(state),
+    getTranslator()(state),
+    undefined,
+    undefined
   );
+
   const allErrors =
     errors +
     (errors.length > 0 && childErrors.length > 0 ? '\n' : '') +
@@ -979,8 +1070,6 @@ export const mapStateToArrayLayoutProps = (
   };
 };
 
-export type CombinatorProps = StatePropsOfCombinator & DispatchPropsOfControl;
-
 /**
  * Props of an array control.
  */

package/src/util/runtime.ts

@@ -36,7 +36,7 @@ import {
 } from '../models';
 import { resolveData } from './resolvers';
 import { composeWithUi } from './path';
-import { Ajv } from 'ajv';
+import Ajv from 'ajv';
 import { getAjv } from '../reducers';
 import { JsonFormsState } from '../store';
 import { JsonSchema } from '../models/jsonSchema';

package/src/util/util.ts

@@ -31,7 +31,7 @@ import { JsonSchema, Scopable, UISchemaElement } from '..';
 import { resolveData, resolveSchema } from './resolvers';
 import { composePaths, toDataPathSegments } from './path';
 import { isEnabled, isVisible } from './runtime';
-import { Ajv } from 'ajv';
+import Ajv from 'ajv';
 
 /**
  * Escape the given string such that it can be used as a class name,

package/src/util/validator.ts

@@ -22,21 +22,17 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-
-import AJV from 'ajv';
+import Ajv from 'ajv';
+import addFormats from 'ajv-formats';
 import { Options } from 'ajv';
-import { Draft4 } from '../models';
 
 export const createAjv = (options?: Options) => {
-  const ajv = new AJV({
-    schemaId: 'auto',
+  const ajv = new Ajv({
     allErrors: true,
-    jsonPointers: true,
-    errorDataPath: 'property',
     verbose: true,
+    strict: false,
     ...options
   });
-  ajv.addFormat('time', '^([0-1][0-9]|2[0-3]):[0-5][0-9]$');
-  ajv.addMetaSchema(Draft4);
+  addFormats(ajv);
   return ajv;
 };

package/test/reducers/core.test.ts

@@ -23,14 +23,14 @@
   THE SOFTWARE.
 */
 import test from 'ava';
-import AJV from 'ajv';
+import Ajv from 'ajv';
 import { coreReducer } from '../../src/reducers';
 import { init, update, updateErrors } from '../../src/actions';
 import { JsonSchema } from '../../src/models/jsonSchema';
 import {
   errorAt,
   JsonFormsCore,
-  sanitizeErrors,
+  validate,
   subErrorsAt
 } from '../../src/reducers/core';
 
@@ -84,9 +84,7 @@ test('core reducer - no previous state - init with ajv as options object should
       }
     }
   };
-  const myAjv = new AJV({
-    errorDataPath: 'mypath'
-  });
+  const myAjv = new Ajv();
   const after = coreReducer(undefined, init({}, schema, undefined, myAjv));
   t.deepEqual(after.ajv, myAjv);
 });
@@ -115,9 +113,7 @@ test('core reducer - no previous state - init with options object with ajv', t =
       }
     }
   };
-  const myAjv = new AJV({
-    errorDataPath: 'mypath'
-  });
+  const myAjv = new Ajv();
   const after = coreReducer(
     undefined,
     init({}, schema, undefined, {
@@ -137,9 +133,7 @@ test('core reducer - previous state - init without options should keep previous
       }
     }
   };
-  const myAjv = new AJV({
-    errorDataPath: 'mypath'
-  });
+  const myAjv = new Ajv();
   const after = coreReducer(
     {
       data: {},
@@ -164,12 +158,8 @@ test('core reducer - previous state - init with ajv options object should overwr
       }
     }
   };
-  const previousAjv = new AJV({
-    errorDataPath: 'mypath'
-  });
-  const newAjv = new AJV({
-    errorDataPath: 'newajv'
-  });
+  const previousAjv = new Ajv();
+  const newAjv = new Ajv();
   const after = coreReducer(
     {
       data: {},
@@ -194,9 +184,7 @@ test('core reducer - previous state - init with empty options should not overwri
       }
     }
   };
-  const myAjv = new AJV({
-    errorDataPath: 'mypath'
-  });
+  const myAjv = new Ajv();
   const after = coreReducer(
     {
       data: {},
@@ -279,7 +267,7 @@ test('core reducer - update - undefined data should update for given path', t =>
       type: 'Label'
     },
     errors: [],
-    validator: new AJV().compile(schema)
+    validator: new Ajv().compile(schema)
   };
 
   const after = coreReducer(
@@ -386,7 +374,7 @@ test('core reducer - update - empty path should update root state', t => {
     uischema: {
       type: 'Label'
     },
-    validator: new AJV().compile(schema)
+    validator: new Ajv().compile(schema)
   };
 
   const after = coreReducer(
@@ -427,7 +415,7 @@ test('core reducer - update - providing a path should update data only belonging
     uischema: {
       type: 'Label'
     },
-    validator: new AJV().compile(schema)
+    validator: new Ajv().compile(schema)
   };
 
   const after = coreReducer(
@@ -467,7 +455,7 @@ test('core reducer - update - should update errors', t => {
     uischema: {
       type: 'Label'
     },
-    validator: new AJV().compile(schema)
+    validator: new Ajv().compile(schema)
   };
 
   const after = coreReducer(
@@ -482,9 +470,9 @@ test('core reducer - update - should update errors', t => {
     data: { ...before.data, color: 'Yellow' },
     errors: [
       {
-        dataPath: 'color',
+        instancePath: '/color',
         keyword: 'enum',
-        message: 'should be equal to one of the allowed values',
+        message: 'must be equal to one of the allowed values',
         params: {
           allowedValues: ['Blue', 'Green']
         },
@@ -514,7 +502,7 @@ test('core reducer - updateErrors - should update errors with error', t => {
   };
 
   const error = {
-    dataPath: 'color',
+    instancePath: '/color',
     keyword: 'enum',
     message: 'should be equal to one of the allowed values',
     params: {
@@ -556,7 +544,7 @@ test('errorAt filters enum', t => {
   };
   const data = { foo: '', bar: '' };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -587,7 +575,7 @@ test('errorAt filters required', t => {
   };
   const data = {};
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -636,7 +624,7 @@ test('errorAt filters required in oneOf object', t => {
   };
   const data = { fooOrBar: { } };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -688,7 +676,7 @@ test('errorAt filters required in anyOf object', t => {
   };
   const data = { fooOrBar: { } };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -736,7 +724,7 @@ test('errorAt filters array minItems', t => {
     numbers: []
   };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -781,7 +769,7 @@ test('errorAt filters array inner value', t => {
     numbers: ['Bar']
   };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -817,7 +805,7 @@ test('errorAt filters oneOf simple', t => {
   };
   const data: { coloursOrNumbers: string } = { coloursOrNumbers: 'Foo' };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -856,7 +844,7 @@ test('errorAt filters anyOf simple', t => {
   };
   const data: { coloursOrNumbers: string } = { coloursOrNumbers: 'Foo' };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -910,7 +898,7 @@ test('errorAt filters oneOf objects', t => {
   };
   const data = { coloursOrNumbers: { colour: 'Foo' } };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -962,7 +950,7 @@ test('errorAt filters oneOf objects same properties', t => {
   };
   const data = { coloursOrNumbers: { colourOrNumber: 'Foo' } };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -1011,7 +999,7 @@ test('errorAt filters oneOf array', t => {
   };
   const data: { coloursOrNumbers: string[] } = { coloursOrNumbers: [] };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -1060,7 +1048,7 @@ test('errorAt filters oneOf array inner', t => {
   };
   const data: { coloursOrNumbers: string[] } = { coloursOrNumbers: ['Foo'] };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -1107,7 +1095,7 @@ test('subErrorsAt filters array inner', t => {
     numbers: ['Bar']
   };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,
@@ -1156,7 +1144,7 @@ test('subErrorsAt filters oneOf array inner', t => {
   };
   const data: { coloursOrNumbers: string[] } = { coloursOrNumbers: ['Foo'] };
   const v = ajv.compile(schema);
-  const errors = sanitizeErrors(v, data);
+  const errors = validate(v, data);
 
   const state: JsonFormsCore = {
     data,

package/test/util/cell.test.ts

@@ -286,7 +286,7 @@ test('mapStateToEnumCellProps - set default options for dropdown list', t => {
   const props = defaultMapStateToEnumCellProps(createState(uischema), ownProps);
   t.deepEqual(
     props.options,
-    ['DE', 'IT', 'JP', 'US', 'RU', 'Other'].map(enumToEnumOptionMapper)
+    ['DE', 'IT', 'JP', 'US', 'RU', 'Other'].map(e => enumToEnumOptionMapper(e))
   );
   t.is(props.data, undefined);
 });
@@ -315,7 +315,7 @@ test('mapStateToOneOfEnumCellProps - set one of options for dropdown list', t =>
   };
 
   const props = mapStateToOneOfEnumCellProps(createState(uischema), ownProps);
-  t.deepEqual(props.options, [{title: 'Australia' , const: 'AU', }, { title: 'New Zealand', const: 'NZ' }].map(oneOfToEnumOptionMapper));
+  t.deepEqual(props.options, [{title: 'Australia' , const: 'AU', }, { title: 'New Zealand', const: 'NZ' }].map(schema => oneOfToEnumOptionMapper(schema)));
   t.is(props.data, undefined);
 });