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

package/src/actions/actions.ts

@@ -29,6 +29,7 @@ import { generateDefaultUISchema, generateJsonSchema } from '../generators';
 
 import { RankedTester } from '../testers';
 import { UISchemaTester, ValidationMode } from '../reducers';
+import { ErrorTranslator, Translator } from '../i18n';
 
 export const INIT: 'jsonforms/INIT' = 'jsonforms/INIT';
 export const UPDATE_CORE: 'jsonforms/UPDATE_CORE' = `jsonforms/UPDATE_CORE`;
@@ -51,10 +52,10 @@ export const SET_VALIDATION_MODE: 'jsonforms/SET_VALIDATION_MODE' =
   'jsonforms/SET_VALIDATION_MODE';
 
 export const SET_LOCALE: 'jsonforms/SET_LOCALE' = `jsonforms/SET_LOCALE`;
-export const SET_LOCALIZED_SCHEMAS: 'jsonforms/SET_LOCALIZED_SCHEMAS' =
-  'jsonforms/SET_LOCALIZED_SCHEMAS';
-export const SET_LOCALIZED_UISCHEMAS: 'jsonforms/SET_LOCALIZED_UISCHEMAS' =
-  'jsonforms/SET_LOCALIZED_UISCHEMAS';
+export const SET_TRANSLATOR: 'jsonforms/SET_TRANSLATOR' =
+  'jsonforms/SET_TRANSLATOR';
+export const UPDATE_I18N: 'jsonforms/UPDATE_I18N' =
+  'jsonforms/UPDATE_I18N';
 
 export const ADD_DEFAULT_DATA: 'jsonforms/ADD_DEFAULT_DATA' = `jsonforms/ADD_DEFAULT_DATA`;
 export const REMOVE_DEFAULT_DATA: 'jsonforms/REMOVE_DEFAULT_DATA' = `jsonforms/REMOVE_DEFAULT_DATA`;
@@ -85,7 +86,7 @@ export interface InitAction {
   data: any;
   schema: JsonSchema;
   uischema: UISchemaElement;
-  options?: InitActionOptions | AJV.Ajv;
+  options?: InitActionOptions | AJV;
 }
 
 export interface UpdateCoreAction {
@@ -93,11 +94,11 @@ export interface UpdateCoreAction {
   data?: any;
   schema?: JsonSchema;
   uischema?: UISchemaElement;
-  options?: InitActionOptions | AJV.Ajv;
+  options?: InitActionOptions | AJV;
 }
 
 export interface InitActionOptions {
-  ajv?: AJV.Ajv;
+  ajv?: AJV;
   validationMode?: ValidationMode;
 }
 
@@ -110,7 +111,7 @@ export const init = (
   data: any,
   schema: JsonSchema = generateJsonSchema(data),
   uischema?: UISchemaElement,
-  options?: InitActionOptions | AJV.Ajv
+  options?: InitActionOptions | AJV
 ) => ({
   type: INIT,
   data,
@@ -124,7 +125,7 @@ export const updateCore = (
   data: any,
   schema: JsonSchema,
   uischema?: UISchemaElement,
-  options?: AJV.Ajv | InitActionOptions
+  options?: AJV | InitActionOptions
 ): UpdateCoreAction => ({
   type: UPDATE_CORE,
   data,
@@ -157,10 +158,10 @@ export const unregisterDefaultData = (schemaPath: string) => ({
 
 export interface SetAjvAction {
   type: 'jsonforms/SET_AJV';
-  ajv: AJV.Ajv;
+  ajv: AJV;
 }
 
-export const setAjv = (ajv: AJV.Ajv) => ({
+export const setAjv = (ajv: AJV) => ({
   type: SET_AJV,
   ajv
 });
@@ -275,33 +276,21 @@ export const unregisterUISchema = (
   };
 };
 
-export type LocaleActions =
+export type I18nActions =
   | SetLocaleAction
-  | SetLocalizedSchemasAction
-  | SetLocalizedUISchemasAction;
+  | SetTranslatorAction
+  | UpdateI18nAction
 
 export interface SetLocaleAction {
   type: 'jsonforms/SET_LOCALE';
-  locale: string;
+  locale: string | undefined;
 }
 
-export const setLocale = (locale: string): SetLocaleAction => ({
+export const setLocale = (locale: string | undefined): SetLocaleAction => ({
   type: SET_LOCALE,
   locale
 });
 
-export interface SetLocalizedSchemasAction {
-  type: 'jsonforms/SET_LOCALIZED_SCHEMAS';
-  localizedSchemas: Map<string, JsonSchema>;
-}
-
-export const setLocalizedSchemas = (
-  localizedSchemas: Map<string, JsonSchema>
-): SetLocalizedSchemasAction => ({
-  type: SET_LOCALIZED_SCHEMAS,
-  localizedSchemas
-});
-
 export interface SetSchemaAction {
   type: 'jsonforms/SET_SCHEMA';
   schema: JsonSchema;
@@ -312,16 +301,37 @@ export const setSchema = (schema: JsonSchema): SetSchemaAction => ({
   schema
 });
 
-export interface SetLocalizedUISchemasAction {
-  type: 'jsonforms/SET_LOCALIZED_UISCHEMAS';
-  localizedUISchemas: Map<string, UISchemaElement>;
+export interface SetTranslatorAction {
+  type: 'jsonforms/SET_TRANSLATOR';
+  translator?: Translator;
+  errorTranslator?: ErrorTranslator; 
+}
+
+export const setTranslator = (
+  translator?: Translator,
+  errorTranslator?: ErrorTranslator
+): SetTranslatorAction => ({
+  type: SET_TRANSLATOR,
+  translator,
+  errorTranslator
+});
+
+export interface UpdateI18nAction {
+  type: 'jsonforms/UPDATE_I18N';
+  locale: string | undefined;
+  translator: Translator | undefined;
+  errorTranslator: ErrorTranslator | undefined; 
 }
 
-export const setLocalizedUISchemas = (
-  localizedUISchemas: Map<string, UISchemaElement>
-): SetLocalizedUISchemasAction => ({
-  type: SET_LOCALIZED_UISCHEMAS,
-  localizedUISchemas
+export const updateI18n = (
+  locale: string | undefined,
+  translator: Translator | undefined,
+  errorTranslator: ErrorTranslator | undefined
+): UpdateI18nAction => ({
+  type: UPDATE_I18N,
+  locale,
+  translator,
+  errorTranslator
 });
 
 export interface SetUISchemaAction {

package/src/i18n/i18nTypes.ts

@@ -0,0 +1,17 @@
+import { ErrorObject } from 'ajv';
+import { JsonSchema, UISchemaElement } from '../models';
+
+export type Translator = {
+    (id: string, defaultMessage: string, values?: any): string;
+    (id: string, defaultMessage: undefined, values?: any): string | undefined;
+}
+
+export type ErrorTranslator = (error: ErrorObject, translate: Translator, uischema?: UISchemaElement) => string;
+
+export interface JsonFormsI18nState {
+  locale?: string;
+  translate?: Translator;
+  translateError?: ErrorTranslator;
+}
+
+export type i18nJsonSchema = JsonSchema & {i18n?: string};

package/src/i18n/i18nUtil.ts

@@ -0,0 +1,105 @@
+import { ErrorObject } from 'ajv';
+import { UISchemaElement } from '../models';
+import { getControlPath } from '../reducers';
+import { formatErrorMessage } from '../util';
+import { i18nJsonSchema, ErrorTranslator, Translator } from './i18nTypes';
+
+export const getI18nKeyPrefixBySchema = (
+  schema: i18nJsonSchema | undefined,
+  uischema: UISchemaElement | undefined
+): string | undefined => {
+  return uischema?.options?.i18n ?? schema?.i18n ?? undefined;
+};
+
+/**
+ * Transforms a given path to a prefix which can be used for i18n keys.
+ * Returns 'root' for empty paths and removes array indices
+ */
+export const transformPathToI18nPrefix = (path: string) => {
+  return (
+    path
+      ?.split('.')
+      .filter(segment => !/^\d+$/.test(segment))
+      .join('.') || 'root'
+  );
+};
+
+export const getI18nKeyPrefix = (
+  schema: i18nJsonSchema | undefined,
+  uischema: UISchemaElement | undefined,
+  path: string | undefined
+): string | undefined => {
+  return (
+    getI18nKeyPrefixBySchema(schema, uischema) ??
+    transformPathToI18nPrefix(path)
+  );
+};
+
+export const getI18nKey = (
+  schema: i18nJsonSchema | undefined,
+  uischema: UISchemaElement | undefined,
+  path: string | undefined,
+  key: string
+): string | undefined => {
+  return `${getI18nKeyPrefix(schema, uischema, path)}.${key}`;
+};
+
+export const defaultTranslator: Translator = (_id: string, defaultMessage: string | undefined) => defaultMessage;
+
+export const defaultErrorTranslator: ErrorTranslator = (error, t, uischema) => {
+  // check whether there is a special keyword message
+  const i18nKey = getI18nKey(
+    error.parentSchema,
+    uischema,
+    getControlPath(error),
+    `error.${error.keyword}`
+  );
+  const specializedKeywordMessage = t(i18nKey, undefined);
+  if (specializedKeywordMessage !== undefined) {
+    return specializedKeywordMessage;
+  }
+
+  // check whether there is a generic keyword message
+  const genericKeywordMessage = t(`error.${error.keyword}`, undefined);
+  if (genericKeywordMessage !== undefined) {
+    return genericKeywordMessage;
+  }
+
+  // check whether there is a customization for the default message
+  const messageCustomization = t(error.message, undefined);
+  if (messageCustomization !== undefined) {
+    return messageCustomization;
+  }
+
+  // rewrite required property messages (if they were not customized) as we place them next to the respective input
+  if (error.keyword === 'required' && error.message?.startsWith('must have required property')) {
+    return t('is a required property', 'is a required property');
+  }
+
+  return error.message;
+};
+
+/**
+ * Returns the determined error message for the given errors.
+ * All errors must correspond to the given schema, uischema or path.
+ */
+export const getCombinedErrorMessage = (
+  errors: ErrorObject[],
+  et: ErrorTranslator,
+  t: Translator,
+  schema?: i18nJsonSchema,
+  uischema?: UISchemaElement,
+  path?: string
+) => {
+  if (errors.length > 0 && t) {
+    // check whether there is a special message which overwrites all others
+    const customErrorKey = getI18nKey(schema, uischema, path, 'error.custom');
+    const specializedErrorMessage = t(customErrorKey, undefined);
+    if (specializedErrorMessage !== undefined) {
+      return specializedErrorMessage;
+    }
+  }
+  return formatErrorMessage(
+    errors.map(error => et(error, t, uischema))
+  );
+};

package/src/i18n/index.ts

@@ -0,0 +1,2 @@
+export * from './i18nTypes';
+export * from './i18nUtil';

package/src/index.ts

@@ -34,3 +34,4 @@ export * from './util';
 
 export * from './Helpers';
 export * from './store';
+export * from './i18n';

package/src/reducers/core.ts

@@ -29,7 +29,7 @@ import get from 'lodash/get';
 import filter from 'lodash/filter';
 import isEqual from 'lodash/isEqual';
 import isFunction from 'lodash/isFunction';
-import { Ajv, ErrorObject, ValidateFunction } from 'ajv';
+import Ajv, { ErrorObject, ValidateFunction } from 'ajv';
 import {
   CoreActions,
   INIT,
@@ -47,28 +47,17 @@ import {
 import { createAjv, Reducer } from '../util';
 import { JsonSchema, UISchemaElement } from '../models';
 
-const validate = (validator: ValidateFunction, data: any): ErrorObject[] => {
+export const validate = (validator: ValidateFunction | undefined, data: any): ErrorObject[] => {
+  if (validator === undefined) {
+    return [];
+  }
   const valid = validator(data);
   if (valid) {
     return [];
   }
-
   return validator.errors;
 };
 
-export const sanitizeErrors = (validator: ValidateFunction, data: any) => {
-  if (validator === alwaysValid) {
-    return [];
-  }
-  return validate(validator, data).map(error => {
-    error.dataPath = error.dataPath.replace(/\//g, '.').substr(1);
-
-    return error;
-  });
-};
-
-const alwaysValid: ValidateFunction = () => true;
-
 export type ValidationMode = 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation';
 
 export interface JsonFormsCore {
@@ -86,9 +75,9 @@ const initState: JsonFormsCore = {
   schema: {},
   uischema: undefined,
   errors: [],
-  validator: alwaysValid,
+  validator: undefined,
   ajv: undefined,
-  validationMode: 'ValidateAndShow'
+  validationMode: 'ValidateAndShow',
 };
 
 const reuseAjvForSchema = (ajv: Ajv, schema: JsonSchema): Ajv => {
@@ -154,8 +143,8 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
       const thisAjv = getOrCreateAjv(state, action);
 
       const validationMode = getValidationMode(state, action);
-      const v = validationMode === 'NoValidation' ? alwaysValid : thisAjv.compile(action.schema);
-      const e = sanitizeErrors(v, action.data);
+      const v = validationMode === 'NoValidation' ? undefined : thisAjv.compile(action.schema);
+      const e = validate(v, action.data);
 
       return {
         ...state,
@@ -165,7 +154,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         errors: e,
         validator: v,
         ajv: thisAjv,
-        validationMode
+        validationMode,
       };
     }
     case UPDATE_CORE: {
@@ -181,11 +170,11 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         // revalidate only if necessary
         validator =
           validationMode === 'NoValidation'
-            ? alwaysValid
+            ? undefined
             : thisAjv.compile(action.schema);
-        errors = sanitizeErrors(validator, action.data);
+        errors = validate(validator, action.data);
       } else if (state.data !== action.data) {
-        errors = sanitizeErrors(validator, action.data);
+        errors = validate(validator, action.data);
       }
 
       const stateChanged =
@@ -195,24 +184,24 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         state.ajv !== thisAjv ||
         state.errors !== errors ||
         state.validator !== validator ||
-        state.validationMode !== validationMode;
+        state.validationMode !== validationMode
       return stateChanged
         ? {
             ...state,
-            data: state.data === action.data ? state.data : action.data,
-            schema: state.schema === action.schema ? state.schema : action.schema,
-            uischema: state.uischema === action.uischema ? state.uischema : action.uischema,
-            ajv: thisAjv === state.ajv ? state.ajv : thisAjv,
+            data: action.data,
+            schema: action.schema,
+            uischema: action.uischema,
+            ajv: thisAjv,
             errors: isEqual(errors, state.errors) ? state.errors : errors,
-            validator: validator === state.validator ? state.validator : validator,
-            validationMode: validationMode === state.validationMode ? state.validationMode : validationMode
+            validator: validator,
+            validationMode: validationMode,
           }
         : state;
     }
     case SET_AJV: {
       const currentAjv = action.ajv;
-      const validator = state.validationMode === 'NoValidation' ? alwaysValid : currentAjv.compile(state.schema);
-      const errors = sanitizeErrors(validator, state.data);
+      const validator = state.validationMode === 'NoValidation' ? undefined : currentAjv.compile(state.schema);
+      const errors = validate(validator, state.data);
       return {
         ...state,
         validator,
@@ -224,7 +213,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
       const v = needsNewValidator
         ? reuseAjvForSchema(state.ajv, action.schema).compile(action.schema)
         : state.validator;
-      const errors = sanitizeErrors(v, state.data);
+      const errors = validate(v, state.data);
       return {
         ...state,
         validator: v,
@@ -244,7 +233,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
       } else if (action.path === '') {
         // empty path is ok
         const result = action.updater(cloneDeep(state.data));
-        const errors = sanitizeErrors(state.validator, result);
+        const errors = validate(state.validator, result);
         return {
           ...state,
           data: result,
@@ -258,7 +247,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
           newData,
           state.data === undefined ? {} : state.data
         );
-        const errors = sanitizeErrors(state.validator, newState);
+        const errors = validate(state.validator, newState);
         return {
           ...state,
           data: newState,
@@ -277,17 +266,16 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         return state;
       }
       if (action.validationMode === 'NoValidation') {
-        const errors = sanitizeErrors(alwaysValid, state.data);
+        const errors = validate(undefined, state.data);
         return {
           ...state,
-          validator: alwaysValid,
           errors,
           validationMode: action.validationMode
         };
       }
       if (state.validationMode === 'NoValidation') {
         const validator = reuseAjvForSchema(state.ajv, state.schema).compile(state.schema);
-        const errors = sanitizeErrors(validator, state.data);
+        const errors = validate(validator, state.data);
         return {
           ...state,
           validator,
@@ -310,6 +298,40 @@ export const extractSchema = (state: JsonFormsCore) => get(state, 'schema');
 export const extractUiSchema = (state: JsonFormsCore) => get(state, 'uischema');
 export const extractAjv = (state: JsonFormsCore) => get(state, 'ajv');
 
+const getInvalidProperty = (error: ErrorObject): string | undefined => {
+  switch (error.keyword) {
+    case 'required':
+    case 'dependencies':
+      return error.params.missingProperty;
+    case 'additionalProperties':
+      return error.params.additionalProperty;
+    default:
+      return undefined;
+  }
+};
+
+export const getControlPath = (error: ErrorObject) => {
+  const dataPath = (error as any).dataPath;
+  // older AJV version
+  if (dataPath) {
+    return dataPath.replace(/\//g, '.').substr(1);
+  }
+  // dataPath was renamed to instancePath in AJV v8
+  var controlPath: string = error.instancePath;
+
+  // change '/' chars to '.'
+  controlPath = controlPath.replace(/\//g, '.');
+  
+  const invalidProperty = getInvalidProperty(error);
+  if (invalidProperty !== undefined && !controlPath.endsWith(invalidProperty)) {
+    controlPath = `${controlPath}.${invalidProperty}`;
+  }
+  
+  // remove '.' chars at the beginning of paths
+  controlPath = controlPath.replace(/^./, '');
+  return controlPath;
+}
+
 export const errorsAt = (
   instancePath: string,
   schema: JsonSchema,
@@ -319,15 +341,15 @@ export const errorsAt = (
   const combinatorPaths = filter(
     errors,
     error => error.keyword === 'oneOf' || error.keyword === 'anyOf'
-  ).map(error => error.dataPath);
-
-  return filter(errors, error => {
-    // Filter errors that match any keyword that we don't want to show in the UI
-    if (filteredErrorKeywords.indexOf(error.keyword) !== -1) {
-      return false;
-    }
-
-    let result = matchPath(error.dataPath);
+    ).map(error => getControlPath(error));
+    
+    return filter(errors, error => {
+      // Filter errors that match any keyword that we don't want to show in the UI
+      if (filteredErrorKeywords.indexOf(error.keyword) !== -1) {
+        return false;
+      }
+    const controlPath = getControlPath(error);
+    let result = matchPath(controlPath);
     // In anyOf and oneOf blocks with "primitive" (i.e. string, number etc.) or array subschemas,
     // we want to make sure that errors are only shown for the correct subschema.
     // Therefore, we compare the error's parent schema with the property's schema.

package/src/reducers/i18n.ts

@@ -23,66 +23,72 @@
   THE SOFTWARE.
 */
 
-import { SET_LOCALE, SET_LOCALIZED_SCHEMAS, SET_LOCALIZED_UISCHEMAS } from '../actions';
-import { JsonSchema, UISchemaElement } from '../models';
+import { defaultErrorTranslator, defaultTranslator, JsonFormsI18nState } from '../i18n';
+import { I18nActions, SET_LOCALE, SET_TRANSLATOR, UPDATE_I18N } from '../actions';
 import { Reducer } from '../util';
 
-export interface JsonFormsLocaleState {
-  locale?: string;
-  localizedSchemas: Map<string, JsonSchema>;
-  localizedUISchemas: Map<string, UISchemaElement>;
-}
-
-const initState: JsonFormsLocaleState = {
-  locale: undefined,
-  localizedSchemas: new Map(),
-  localizedUISchemas: new Map()
+export const defaultJsonFormsI18nState: JsonFormsI18nState = {
+  locale: 'en',
+  translate: defaultTranslator,
+  translateError: defaultErrorTranslator
 };
 
-export const i18nReducer: Reducer<any, any> = (state = initState, action) => {
+export const i18nReducer: Reducer<JsonFormsI18nState, I18nActions> = (state = defaultJsonFormsI18nState, action) => {
   switch (action.type) {
-    case SET_LOCALIZED_SCHEMAS:
-      return {
-        ...state,
-        localizedSchemas: action.localizedSchemas
-      };
-    case SET_LOCALIZED_UISCHEMAS:
+    case UPDATE_I18N: {
+      const locale = action.locale ?? defaultJsonFormsI18nState.locale;
+      const translate =
+        action.translator ?? defaultJsonFormsI18nState.translate;
+      const translateError =
+        action.errorTranslator ?? defaultJsonFormsI18nState.translateError;
+
+      if (
+        locale !== state.locale ||
+        translate !== state.translate ||
+        translateError !== state.translateError
+      ) {
+        return {
+          ...state,
+          locale,
+          translate,
+          translateError
+        };
+      }
+      return state;
+    }
+    case SET_TRANSLATOR:
       return {
         ...state,
-        localizedUISchemas: action.localizedUISchemas
+        translate: action.translator ?? defaultTranslator,
+        translateError: action.errorTranslator ?? defaultErrorTranslator
       };
     case SET_LOCALE:
       return {
         ...state,
-        locale:
-          action.locale === undefined ? navigator.languages[0] : action.locale
+        locale: action.locale ?? navigator.languages[0]
       };
     default:
       return state;
   }
 };
 
-export const fetchLocale = (state?: JsonFormsLocaleState) => {
+export const fetchLocale = (state?: JsonFormsI18nState) => {
   if (state === undefined) {
     return undefined;
   }
   return state.locale;
 };
 
-export const findLocalizedSchema = (locale: string) => (
-  state?: JsonFormsLocaleState
-): JsonSchema => {
+export const fetchTranslator = (state?: JsonFormsI18nState) => {
   if (state === undefined) {
-    return undefined;
+    return defaultTranslator;
   }
-  return state.localizedSchemas.get(locale);
-};
+  return state.translate;
+}
 
-export const findLocalizedUISchema = (locale: string) => (
-  state?: JsonFormsLocaleState
-): UISchemaElement => {
+export const fetchErrorTranslator = (state?: JsonFormsI18nState) => {
   if (state === undefined) {
-    return undefined;
+    return defaultErrorTranslator;
   }
-  return state.localizedUISchemas.get(locale);
-};
+  return state.translateError;
+}