Rework Paths.compose to accept segments and increase usage

- Rework Paths.compose to accept a JSON pointer and a variable number of unencoded segments to add
- Add unit tests for Path.compose
- Increase usage of Paths.compose across renderers
- Remove obsolete leading slashes of segments

Author: lucas-koehler

packages/angular-material/src/library/layouts/array-layout.renderer.ts

@@ -233,7 +233,7 @@ export class ArrayLayoutRenderer
     }
     return {
       schema: this.scopedSchema,
-      path: Paths.compose(this.propsPath, `/${index}`),
+      path: Paths.compose(this.propsPath, `${index}`),
       uischema,
     };
   }

packages/angular-material/src/library/other/master-detail/master.ts

@@ -45,6 +45,7 @@ import {
   JsonFormsState,
   mapDispatchToArrayControlProps,
   mapStateToArrayControlProps,
+  Paths,
   RankedTester,
   rankWith,
   setReadonly,
@@ -224,7 +225,7 @@ export class MasterListComponent
           ? d.toString()
           : get(d, labelRefInstancePath ?? getFirstPrimitiveProp(schema)),
         data: d,
-        path: `${path}/${index}`,
+        path: Paths.compose(path, `${index}`),
         schema,
         uischema: detailUISchema,
       };

packages/angular-material/src/library/other/table.renderer.ts

@@ -34,7 +34,6 @@ import {
   ControlElement,
   createDefaultValue,
   deriveTypes,
-  encode,
   isObjectArrayControl,
   isPrimitiveArrayControl,
   JsonSchema,
@@ -209,8 +208,9 @@ export class TableRenderer extends JsonFormsArrayControl implements OnInit {
   ): ColumnDescription[] => {
     if (schema.type === 'object') {
       return this.getValidColumnProps(schema).map((prop) => {
-        const encProp = encode(prop);
-        const uischema = controlWithoutLabel(`#/properties/${encProp}`);
+        const uischema = controlWithoutLabel(
+          Paths.compose('#', 'properties', prop)
+        );
         if (!this.isEnabled()) {
           setReadonly(uischema);
         }
@@ -273,7 +273,7 @@ export const controlWithoutLabel = (scope: string): ControlElement => ({
 @Pipe({ name: 'getProps' })
 export class GetProps implements PipeTransform {
   transform(index: number, props: OwnPropsOfRenderer) {
-    const rowPath = Paths.compose(props.path, `/${index}`);
+    const rowPath = Paths.compose(props.path, `${index}`);
     return {
       schema: props.schema,
       uischema: props.uischema,

packages/core/src/util/path.ts

@@ -23,37 +23,42 @@
   THE SOFTWARE.
 */
 
-import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 
 /**
- * Composes two JSON pointer. Pointer2 is appended to pointer1.
- * Example: pointer1 `'/foo/0'` and pointer2 `'/bar'` results in `'/foo/0/bar'`.
+ * Composes a valid JSON pointer with an arbitrary number of unencoded segments.
+ * This method encodes the segments to escape JSON pointer's special characters.
+ * Empty segments (i.e. empty strings) are skipped.
  *
- * @param {string} pointer1 Initial JSON pointer
- * @param {string} pointer2 JSON pointer to append to `pointer1`
+ * Example:
+ * ```ts
+ * const composed = compose('/path/to/object', '~foo', 'b/ar');
+ * // compose === '/path/to/object/~0foo/b~1ar'
+ * ```
+ *
+ * The segments are appended in order to the JSON pointer and the special characters `~` and `/` are automatically encoded.
+ *
+ * @param {string} pointer Initial valid JSON pointer
+ * @param {...string[]} segments **unencoded** path segments to append to the JSON pointer
  * @returns {string} resulting JSON pointer
  */
-export const compose = (pointer1: string, pointer2: string) => {
-  let p2 = pointer2;
-  if (!isEmpty(pointer2) && !pointer2.startsWith('/')) {
-    p2 = '/' + pointer2;
-  }
-
-  if (isEmpty(pointer1)) {
-    return p2;
-  } else if (isEmpty(pointer2)) {
-    return pointer1;
-  } else {
-    return `${pointer1}${p2}`;
-  }
+export const compose = (pointer: string, ...segments: string[]): string => {
+  return segments.reduce((currentPointer, segment) => {
+    // Only skip undefined segments, as empty string segments are allowed
+    // and reference a property that has the empty string as property name.
+    if (segment === undefined) {
+      return currentPointer;
+    }
+    return `${currentPointer}/${encode(segment)}`;
+  }, pointer ?? '');
 };
 
 export { compose as composePaths };
 
 /**
  * Convert a schema path (i.e. JSON pointer) to an array by splitting
- * at the '/' character and removing all schema-specific keywords.
+ * at the '/' character, removing all schema-specific keywords,
+ * and decoding each segment to remove JSON pointer specific escaping.
  *
  * The returned value can be used to de-reference a root object by folding over it
  * and de-referencing the single segments to obtain a new object.

packages/core/src/util/uischema.ts

@@ -101,12 +101,7 @@ export const composeWithUi = (scopableUi: Scopable, path: string): string => {
   }
 
   const segments = toDataPathSegments(scopableUi.scope);
-
-  if (isEmpty(segments)) {
-    return path ?? '';
-  }
-
-  return compose(path, segments.join('.'));
+  return compose(path, ...segments);
 };
 
 export const isInternationalized = (

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

@@ -1865,7 +1865,7 @@ test('core reducer helpers - getControlPath - fallback to AJV <=7 errors does no
   t.is(controlPath, '');
 });
 
-test('core reducer helpers - getControlPath - decodes JSON Pointer escape sequences', (t) => {
+test('core reducer helpers - getControlPath - does not decode JSON Pointer escape sequences', (t) => {
   const errorObject = { instancePath: '/~0group/~1name' } as ErrorObject;
   const controlPath = getControlPath(errorObject);
   t.is(controlPath, '/~0group/~1name');

packages/core/test/util/path.test.ts

@@ -24,7 +24,7 @@
 */
 import test from 'ava';
 import { JsonSchema } from '../../src/models';
-import { Resolve, toDataPath } from '../../src';
+import { compose, Resolve, toDataPath } from '../../src/util';
 
 test('resolve ', (t) => {
   const schema: JsonSchema = {
@@ -269,3 +269,58 @@ test('resolve $ref complicated', (t) => {
     },
   });
 });
+
+test('compose - encodes segments', (t) => {
+  const result = compose('/foo', '/bar', '~~prop');
+  t.is(result, '/foo/~1bar/~0~0prop');
+});
+
+test('compose - does not re-encode initial pointer', (t) => {
+  const result = compose('/f~0oo', 'bar');
+  t.is(result, '/f~0oo/bar');
+});
+
+/*
+ * Unexpected edge case but the RFC6901 standard defines that empty segments point to a property with key `''`.
+ * For instance, '/' points to a property with key `''` in the root object.
+ */
+test('compose - handles empty string segments', (t) => {
+  const result = compose('/foo', '', 'bar');
+  t.is(result, '/foo//bar');
+});
+
+test('compose - returns initial pointer for no given segments', (t) => {
+  const result = compose('/foo');
+  t.is(result, '/foo');
+});
+
+test("compose - accepts initial pointer starting with URI fragment '#'", (t) => {
+  const result = compose('#/foo', 'bar');
+  t.is(result, '#/foo/bar');
+});
+
+test('compose - handles root json pointer', (t) => {
+  const result = compose('', 'foo');
+  t.is(result, '/foo');
+});
+
+/*
+ * Unexpected edge case but the RFC6901 standard defines that `/` points to a property with key `''`.
+ * To point to the root object, the empty string `''` is used.
+ */
+test('compose - handles json pointer pointing to property with empty string as key', (t) => {
+  const result = compose('/', 'foo');
+  t.is(result, '//foo');
+});
+
+/** undefined JSON pointers are not valid but we still expect compose to handle them gracefully. */
+test('compose - handles undefined root json pointer', (t) => {
+  const result = compose(undefined as any, 'foo');
+  t.is(result, '/foo');
+});
+
+/** undefined segment elements are not valid but we still expect compose to handle them gracefully. */
+test('compose - ignores undefined segments', (t) => {
+  const result = compose('/foo', undefined as any, 'bar');
+  t.is(result, '/foo/bar');
+});

packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx

@@ -80,7 +80,7 @@ export const MaterialEnumArrayRenderer = ({
       </FormLabel>
       <FormGroup row>
         {options.map((option: any, index: number) => {
-          const optionPath = Paths.compose(path, `/${index}`);
+          const optionPath = Paths.compose(path, `${index}`);
           const checkboxValue = data?.includes(option.value)
             ? option.value
             : undefined;

packages/material-renderers/src/complex/MaterialTableControl.tsx

@@ -54,7 +54,6 @@ import {
   Resolve,
   JsonFormsRendererRegistryEntry,
   JsonFormsCellRendererRegistryEntry,
-  encode,
   ArrayTranslations,
 } from '@jsonforms/core';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -94,7 +93,7 @@ const generateCells = (
 ) => {
   if (schema.type === 'object') {
     return getValidColumnProps(schema).map((prop) => {
-      const cellPath = Paths.compose(rowPath, '/' + prop);
+      const cellPath = Paths.compose(rowPath, prop);
       const props = {
         propName: prop,
         schema,
@@ -231,10 +230,12 @@ const NonEmptyCellComponent = React.memo(function NonEmptyCellComponent({
         <DispatchCell
           schema={Resolve.schema(
             schema,
-            `#/properties/${encode(propName)}`,
+            Paths.compose('#', 'properties', propName),
             rootSchema
           )}
-          uischema={controlWithoutLabel(`#/properties/${encode(propName)}`)}
+          uischema={controlWithoutLabel(
+            Paths.compose('#', 'properties', propName)
+          )}
           path={path}
           enabled={enabled}
           renderers={renderers}
@@ -421,7 +422,7 @@ const TableRows = ({
   return (
     <React.Fragment>
       {range(data).map((index: number) => {
-        const childPath = Paths.compose(path, `/${index}`);
+        const childPath = Paths.compose(path, `${index}`);
 
         return (
           <NonEmptyRow

packages/vanilla-renderers/src/complex/TableArrayControl.tsx

@@ -40,7 +40,6 @@ import {
   Resolve,
   Test,
   getControlPath,
-  encode,
 } from '@jsonforms/core';
 import { DispatchCell, withJsonFormsArrayControlProps } from '@jsonforms/react';
 import { withVanillaControlProps } from '../util';
@@ -97,7 +96,8 @@ class TableArrayControl extends React.Component<
     const createControlElement = (key?: string): ControlElement => ({
       type: 'Control',
       label: false,
-      scope: schema.type === 'object' ? `#/properties/${key}` : '#',
+      scope:
+        schema.type === 'object' ? Paths.compose('#', 'properties', key) : '#',
     });
     const isValid = errors.length === 0;
     const divClassNames = [validationClass]
@@ -146,8 +146,7 @@ class TableArrayControl extends React.Component<
               </tr>
             ) : (
               data.map((_child, index) => {
-                const childPath = Paths.compose(path, `/${index}`);
-                // TODO
+                const childPath = Paths.compose(path, `${index}`);
                 const errorsPerEntry: any[] = filter(childErrors, (error) => {
                   const errorPath = getControlPath(error);
                   return errorPath.startsWith(childPath);
@@ -173,29 +172,24 @@ class TableArrayControl extends React.Component<
                           (prop) => schema.properties[prop].type !== 'array'
                         ),
                         fpmap((prop) => {
-                          const childPropPath = Paths.compose(
-                            childPath,
-                            '/' + prop.toString()
-                          );
+                          const childPropPath = Paths.compose(childPath, prop);
                           return (
                             <td key={childPropPath}>
                               <DispatchCell
                                 schema={Resolve.schema(
                                   schema,
-                                  `#/properties/${encode(prop)}`,
+                                  Paths.compose('#', 'properties', prop),
                                   rootSchema
                                 )}
-                                uischema={createControlElement(encode(prop))}
-                                path={childPath + '/' + prop}
+                                uischema={createControlElement(prop)}
+                                path={childPropPath}
                               />
                             </td>
                           );
                         })
                       )(schema.properties)
                     ) : (
-                      <td
-                        key={Paths.compose(childPath, '/' + index.toString())}
-                      >
+                      <td key={Paths.compose(childPath, `${index}`)}>
                         <DispatchCell
                           schema={schema}
                           uischema={createControlElement()}