fix: properly match AJV paths with slashes

AJV error paths are JSON Pointers. These paths are converted to dot-notation in JSON
Forms. However escaped JSON Pointer characters were not decoded. Therefore errors for
properties containing one of the escaped characters were not properly matched.

Background information: In JSON Pointers two characters need to be escaped: '~' is
converted to '~0' and '/' is converted to '~1'. Therefore properties containing either
'~' or '/' were not properly matched to errors before this fix.

Fixes #2146

Author: sdirix

packages/core/src/reducers/core.ts

@@ -45,7 +45,7 @@ import {
   UPDATE_CORE,
   UpdateCoreAction,
 } from '../actions';
-import { createAjv, isOneOfEnumSchema, Reducer } from '../util';
+import { createAjv, decode, isOneOfEnumSchema, Reducer } from '../util';
 import type { JsonSchema, UISchemaElement } from '../models';
 
 export const validate = (
@@ -356,13 +356,9 @@ const getInvalidProperty = (error: ErrorObject): string | 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
-  let controlPath: string = error.instancePath;
+  // Up until AJV v7 the path property was called 'dataPath'
+  // With AJV v8 the property was renamed to 'instancePath'
+  let controlPath = (error as any).dataPath || error.instancePath || '';
 
   // change '/' chars to '.'
   controlPath = controlPath.replace(/\//g, '.');
@@ -374,6 +370,9 @@ export const getControlPath = (error: ErrorObject) => {
 
   // remove '.' chars at the beginning of paths
   controlPath = controlPath.replace(/^./, '');
+
+  // decode JSON Pointer escape sequences
+  controlPath = decode(controlPath);
   return controlPath;
 };
 

packages/core/test/reducers/core.test.ts

@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import test from 'ava';
-import Ajv from 'ajv';
+import Ajv, { ErrorObject } from 'ajv';
 import { coreReducer } from '../../src/reducers';
 import {
   init,
@@ -39,6 +39,7 @@ import {
   JsonFormsCore,
   validate,
   subErrorsAt,
+  getControlPath,
 } from '../../src/reducers/core';
 
 import { cloneDeep } from 'lodash';
@@ -1812,3 +1813,27 @@ test('core reducer - setSchema - schema with id', (t) => {
   const after: JsonFormsCore = coreReducer(before, setSchema(updatedSchema));
   t.is(after.schema.properties.animal.minLength, 5);
 });
+
+test('core reducer helpers - getControlPath - converts JSON Pointer notation to dot notation', (t) => {
+  const errorObject = { instancePath: '/group/name' } as ErrorObject;
+  const controlPath = getControlPath(errorObject);
+  t.is(controlPath, 'group.name');
+});
+
+test('core reducer helpers - getControlPath - fallback to AJV <=7 errors', (t) => {
+  const errorObject = { dataPath: '/group/name' } as unknown as ErrorObject;
+  const controlPath = getControlPath(errorObject);
+  t.is(controlPath, 'group.name');
+});
+
+test('core reducer helpers - getControlPath - fallback to AJV <=7 errors does not crash for empty paths', (t) => {
+  const errorObject = { dataPath: '' } as unknown as ErrorObject;
+  const controlPath = getControlPath(errorObject);
+  t.is(controlPath, '');
+});
+
+test('core reducer helpers - getControlPath - decodes JSON Pointer escape sequences', (t) => {
+  const errorObject = { instancePath: '/~0group/~1name' } as ErrorObject;
+  const controlPath = getControlPath(errorObject);
+  t.is(controlPath, '~group./name');
+});