# fix(angular-material): don't mutate the given UI schema in detail renderers

MIGRATION.md

@@ -2,6 +2,17 @@
 
 ## Migration to JSON Forms 3.9
 
+### Angular Material detail renderers no longer modify the given UI schema
+
+The Angular Material array layout, object control and list-with-detail renderers modified the detail UI schema given via `options.detail` or the `uischemas` registry in place (see [#2343](https://github.com/eclipsesource/jsonforms/issues/2343)).
+They now work on a copy instead.
+
+- Nothing is written into your UI schema anymore, e.g. the `readonly` option. If you read such state back out of your own object, track it yourself.
+- The array layout no longer forces the `readonly` option to `false` on the controls of its detail. A `readonly`/`readOnly` option, a `readonly`/`readOnly` config entry and a `readOnly: true` in the JSON schema now take effect for controls inside an array's `options.detail`, so such a field may now be readonly where it previously was not.
+- The object control no longer overrides the `type` and `label` of a detail UI schema given via `options.detail` or the `uischemas` registry. If you relied on the previous label, set `label` in your detail UI schema.
+- In-place modifications of your UI schema are not picked up anymore. Provide a new UI schema object instead.
+- If you subclass `ArrayLayoutRenderer` and override `mapAdditionalProps`, call `super.mapAdditionalProps(props)`. The item props are precalculated there and exposed as `itemProps`; `getProps(index)` returns `undefined` for an out of range index.
+
 ### Data update paths treat all segments literally
 
 Data updates (e.g. dispatched `update` actions) previously wrote to the form data via lodash's `set`/`unset`, which interpret bracket notation and array indices in paths.

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

@@ -22,7 +22,13 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
@@ -36,7 +42,6 @@ import {
   ArrayTranslations,
   createDefaultValue,
   defaultJsonFormsI18nState,
-  findUISchema,
   getArrayTranslations,
   isObjectArrayWithNesting,
   JsonFormsState,
@@ -46,12 +51,12 @@ import {
   Paths,
   RankedTester,
   rankWith,
-  setReadonly,
   StatePropsOfArrayLayout,
   UISchemaElement,
   UISchemaTester,
-  unsetReadonly,
 } from '@jsonforms/core';
+import { depsChanged } from '../util/deps';
+import { createDetailUiSchemaResolver } from '../util/detail-uischema';
 
 @Component({
   selector: 'app-array-layout-renderer',
@@ -84,7 +89,7 @@ import {
       <p *ngIf="noData">{{ translations.noDataMessage }}</p>
       <div
         *ngFor="
-          let item of [].constructor(data);
+          let item of itemProps;
           let idx = index;
           trackBy: trackByFn;
           last as last;
@@ -93,7 +98,7 @@ import {
       >
         <mat-card class="array-item" appearance="outlined">
           <mat-card-content>
-            <jsonforms-outlet [renderProps]="getProps(idx)"></jsonforms-outlet>
+            <jsonforms-outlet [renderProps]="item"></jsonforms-outlet>
           </mat-card-content>
           <mat-card-actions *ngIf="isEnabled()">
             <button
@@ -188,6 +193,12 @@ export class ArrayLayoutRenderer
     tester: UISchemaTester;
     uischema: UISchemaElement;
   }[];
+  detailUiSchema: UISchemaElement;
+  /** Also determines how many items are rendered. */
+  itemProps: OwnPropsOfRenderer[] = [];
+  private resolveDetailUiSchema = createDetailUiSchemaResolver();
+  private itemPropsDeps: unknown[] | undefined;
+  private changeDetectorRef = inject(ChangeDetectorRef);
   mapToProps(
     state: JsonFormsState
   ): StatePropsOfArrayLayout & { translations: ArrayTranslations } {
@@ -234,27 +245,40 @@ export class ArrayLayoutRenderer
     this.noData = !props.data || props.data === 0;
     this.uischemas = props.uischemas;
     this.translations = props.translations;
-  }
-  getProps(index: number): OwnPropsOfRenderer {
-    const uischema = findUISchema(
-      this.uischemas,
-      this.scopedSchema,
-      this.uischema.scope,
-      this.propsPath,
-      undefined,
-      this.uischema,
-      this.rootSchema
+    this.detailUiSchema = this.resolveDetailUiSchema(
+      props,
+      this.isEnabled(),
+      props.uischema.scope
     );
-    if (this.isEnabled()) {
-      unsetReadonly(uischema);
-    } else {
-      setReadonly(uischema);
+    this.updateItemProps(props, this.detailUiSchema);
+    // OnPush: changes without an event in this view must schedule the check
+    this.changeDetectorRef.markForCheck();
+  }
+  /**
+   * Not created in the template: each new object makes the outlet deep clone
+   * the whole form state.
+   */
+  private updateItemProps(
+    props: ArrayLayoutProps,
+    detailUiSchema: UISchemaElement
+  ): void {
+    // `props.data` is the item count, but it is only derived from `length`, so
+    // it is `undefined` for data that isn't an array. Treat that as no items.
+    const itemCount = props.data > 0 ? props.data : 0;
+    const deps = [detailUiSchema, props.schema, props.path, itemCount];
+    if (!depsChanged(this.itemPropsDeps, deps)) {
+      return;
     }
-    return {
-      schema: this.scopedSchema,
-      path: Paths.compose(this.propsPath, `${index}`),
-      uischema,
-    };
+    this.itemPropsDeps = deps;
+
+    this.itemProps = Array.from({ length: itemCount }, (_unused, index) => ({
+      schema: props.schema,
+      path: Paths.compose(props.path, `${index}`),
+      uischema: detailUiSchema,
+    }));
+  }
+  getProps(index: number): OwnPropsOfRenderer {
+    return this.itemProps[index];
   }
   trackByFn(index: number) {
     return index;

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

@@ -45,19 +45,19 @@ import {
   createDefaultValue,
   decode,
   defaultJsonFormsI18nState,
-  findUISchema,
   getArrayTranslations,
   getFirstPrimitiveProp,
   JsonFormsState,
   mapDispatchToArrayControlProps,
   mapStateToArrayControlProps,
   RankedTester,
   rankWith,
-  setReadonly,
   StatePropsOfArrayControl,
   uiTypeIs,
+  UISchemaElement,
 } from '@jsonforms/core';
 import { JsonFormsDetailComponent } from './detail';
+import { createDetailUiSchemaResolver } from '../../util/detail-uischema';
 
 const keywords = ['#', 'properties', 'items'];
 
@@ -183,6 +183,8 @@ export class MasterListComponent
   removeItems: (path: string, toDelete: number[]) => () => void;
   highlightedIdx: number;
   translations: ArrayTranslations;
+  detailUiSchema: UISchemaElement;
+  private resolveDetailUiSchema = createDetailUiSchemaResolver();
 
   private changeDetectorRef = inject(ChangeDetectorRef);
 
@@ -210,20 +212,13 @@ export class MasterListComponent
     const { data, path, schema, uischema } = props;
     const controlElement = uischema as ControlElement;
     this.propsPath = props.path;
-    const detailUISchema = findUISchema(
-      props.uischemas,
-      schema,
+    this.detailUiSchema = this.resolveDetailUiSchema(
+      props,
+      this.isEnabled(),
       `${controlElement.scope}/items`,
-      props.path,
-      'VerticalLayout',
-      controlElement,
-      props.rootSchema
+      'VerticalLayout'
     );
 
-    if (!this.isEnabled()) {
-      setReadonly(detailUISchema);
-    }
-
     this.translations = props.translations;
 
     const masterItems = (data || []).map((d: any, index: number) => {
@@ -238,7 +233,7 @@ export class MasterListComponent
         data: d,
         path: `${path}.${index}`,
         schema,
-        uischema: detailUISchema,
+        uischema: this.detailUiSchema,
       };
       return masterItem;
     });

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

@@ -24,35 +24,39 @@
 */
 import isEmpty from 'lodash/isEmpty';
 import startCase from 'lodash/startCase';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
 import {
   JsonFormsControlWithDetail,
   JsonFormsModule,
 } from '@jsonforms/angular';
 import { MatCardModule } from '@angular/material/card';
 import {
   ControlWithDetailProps,
-  findUISchema,
   Generate,
   GroupLayout,
   isObjectControl,
+  OwnPropsOfRenderer,
   RankedTester,
   rankWith,
-  setReadonly,
   UISchemaElement,
 } from '@jsonforms/core';
 import cloneDeep from 'lodash/cloneDeep';
+import { createDetailUiSchemaResolver } from '../util/detail-uischema';
 
 @Component({
   selector: 'ObjectRenderer',
   template: `
     <mat-card class="object-layout" appearance="outlined">
       <jsonforms-outlet
-        [uischema]="detailUiSchema"
-        [schema]="scopedSchema"
-        [path]="propsPath"
-      >
-      </jsonforms-outlet>
+        *ngIf="renderProps"
+        [renderProps]="renderProps"
+      ></jsonforms-outlet>
     </mat-card>
   `,
   styles: [
@@ -63,40 +67,50 @@ import cloneDeep from 'lodash/cloneDeep';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [JsonFormsModule, MatCardModule],
+  imports: [CommonModule, JsonFormsModule, MatCardModule],
 })
 export class ObjectControlRenderer extends JsonFormsControlWithDetail {
   detailUiSchema: UISchemaElement;
+  /** Bound as a whole, as the outlet only re-dispatches when this is set. */
+  renderProps: OwnPropsOfRenderer;
+  private resolveDetailUiSchema = createDetailUiSchemaResolver();
+  private changeDetectorRef = inject(ChangeDetectorRef);
   mapAdditionalProps(props: ControlWithDetailProps) {
-    this.detailUiSchema = findUISchema(
-      props.uischemas,
-      props.schema,
+    const detailUiSchema = this.resolveDetailUiSchema(
+      props,
+      this.isEnabled(),
       props.uischema.scope,
-      props.path,
       () => {
         const newSchema = cloneDeep(props.schema);
         // delete unsupported operators
         delete newSchema.oneOf;
         delete newSchema.anyOf;
         delete newSchema.allOf;
-        return Generate.uiSchema(
+        const generated = Generate.uiSchema(
           newSchema,
           'Group',
           undefined,
-          this.rootSchema
+          props.rootSchema
         );
-      },
-      props.uischema,
-      props.rootSchema
+        if (isEmpty(props.path)) {
+          generated.type = 'VerticalLayout';
+        } else {
+          (generated as GroupLayout).label = startCase(props.path);
+        }
+        return generated;
+      }
     );
-    if (isEmpty(props.path)) {
-      this.detailUiSchema.type = 'VerticalLayout';
-    } else {
-      (this.detailUiSchema as GroupLayout).label = startCase(props.path);
-    }
-    if (!this.isEnabled()) {
-      setReadonly(this.detailUiSchema);
+    if (detailUiSchema === this.detailUiSchema) {
+      return;
     }
+    this.detailUiSchema = detailUiSchema;
+    this.renderProps = {
+      uischema: detailUiSchema,
+      schema: props.schema,
+      path: props.path,
+    };
+    // OnPush: nothing below reports the new detail, so schedule the check
+    this.changeDetectorRef.markForCheck();
   }
 }
 export const ObjectControlRendererTester: RankedTester = rankWith(

packages/angular-material/src/library/util/deps.ts

@@ -0,0 +1,34 @@
+/*
+  The MIT License
+
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+/**
+ * Compares two dependency arrays by reference, like React's `useMemo` deps.
+ */
+export const depsChanged = (
+  previous: unknown[] | undefined,
+  next: unknown[]
+): boolean =>
+  previous === undefined ||
+  previous.length !== next.length ||
+  next.some((dep, index) => dep !== previous[index]);