feat: respect "default" values when creating new elements in an array

Initialize new array elements with their default values.
Fixes default value returned for string schemas with a date format.

Fixes #2195

Contributed on behalf of STMicroelectronics

Signed-off-by: Alexandra Buzila <[email protected]>

Author: AlexandraBuzila

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

@@ -180,7 +180,10 @@ export class ArrayLayoutRenderer
     this.removeItems(this.propsPath, [index])();
   }
   add(): void {
-    this.addItem(this.propsPath, createDefaultValue(this.scopedSchema))();
+    this.addItem(
+      this.propsPath,
+      createDefaultValue(this.scopedSchema, this.rootSchema)
+    )();
   }
   up(index: number): void {
     this.moveItemUp(this.propsPath, index)();

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

@@ -263,7 +263,10 @@ export class MasterListComponent
   }
 
   onAddClick() {
-    this.addItem(this.propsPath, createDefaultValue(this.scopedSchema))();
+    this.addItem(
+      this.propsPath,
+      createDefaultValue(this.scopedSchema, this.rootSchema)
+    )();
   }
 
   onDeleteClick(item: number) {

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

@@ -175,7 +175,10 @@ export class TableRenderer extends JsonFormsArrayControl implements OnInit {
     this.removeItems(this.propsPath, [index])();
   }
   add(): void {
-    this.addItem(this.propsPath, createDefaultValue(this.scopedSchema))();
+    this.addItem(
+      this.propsPath,
+      createDefaultValue(this.scopedSchema, this.rootSchema)
+    )();
   }
   up(index: number): void {
     this.moveItemUp(this.propsPath, index)();

packages/core/src/util/renderer.ts

@@ -57,7 +57,7 @@ import { createLabelDescriptionFrom } from './label';
 import type { CombinatorKeyword } from './combinators';
 import { moveDown, moveUp } from './array';
 import type { AnyAction, Dispatch } from './type';
-import { Resolve } from './util';
+import { Resolve, convertDateToString, hasType } from './util';
 import { composePaths, composeWithUi } from './path';
 import { CoreActions, update } from '../actions';
 import type { ErrorObject } from 'ajv';
@@ -79,6 +79,7 @@ import {
   ArrayTranslations,
 } from '../i18n/arrayTranslations';
 import { resolveSchema } from './resolvers';
+import cloneDeep from 'lodash/cloneDeep';
 
 const isRequired = (
   schema: JsonSchema,
@@ -138,33 +139,65 @@ export const showAsRequired = (
 };
 
 /**
- * Create a default value based on the given scheam.
+ * Create a default value based on the given schema.
  * @param schema the schema for which to create a default value.
  * @returns {any}
  */
-export const createDefaultValue = (schema: JsonSchema) => {
-  switch (schema.type) {
-    case 'string':
-      if (
-        schema.format === 'date-time' ||
-        schema.format === 'date' ||
-        schema.format === 'time'
-      ) {
-        return new Date();
+export const createDefaultValue = (
+  schema: JsonSchema,
+  rootSchema: JsonSchema
+) => {
+  const resolvedSchema = Resolve.schema(schema, schema.$ref, rootSchema);
+  if (resolvedSchema.default !== undefined) {
+    return extractDefaults(resolvedSchema, rootSchema);
+  }
+  if (hasType(resolvedSchema, 'string')) {
+    if (
+      resolvedSchema.format === 'date-time' ||
+      resolvedSchema.format === 'date' ||
+      resolvedSchema.format === 'time'
+    ) {
+      return convertDateToString(new Date(), resolvedSchema.format);
+    }
+    return '';
+  } else if (
+    hasType(resolvedSchema, 'integer') ||
+    hasType(resolvedSchema, 'number')
+  ) {
+    return 0;
+  } else if (hasType(resolvedSchema, 'boolean')) {
+    return false;
+  } else if (hasType(resolvedSchema, 'array')) {
+    return [];
+  } else if (hasType(resolvedSchema, 'object')) {
+    return extractDefaults(resolvedSchema, rootSchema);
+  } else if (hasType(resolvedSchema, 'null')) {
+    return null;
+  } else {
+    return {};
+  }
+};
+
+/**
+ * Returns the default value defined in the given schema.
+ * @param schema the schema for which to create a default value.
+ * @returns {any}
+ */
+export const extractDefaults = (schema: JsonSchema, rootSchema: JsonSchema) => {
+  if (hasType(schema, 'object') && schema.default === undefined) {
+    const result: { [key: string]: any } = {};
+    for (const key in schema.properties) {
+      const property = schema.properties[key];
+      const resolvedProperty = property.$ref
+        ? Resolve.schema(rootSchema, property.$ref, rootSchema)
+        : property;
+      if (resolvedProperty.default !== undefined) {
+        result[key] = cloneDeep(resolvedProperty.default);
       }
-      return '';
-    case 'integer':
-    case 'number':
-      return 0;
-    case 'boolean':
-      return false;
-    case 'array':
-      return [];
-    case 'null':
-      return null;
-    default:
-      return {};
+    }
+    return result;
   }
+  return cloneDeep(schema.default);
 };
 
 /**

packages/core/src/util/util.ts

@@ -33,6 +33,49 @@ import { composePaths, toDataPathSegments } from './path';
 import { isEnabled, isVisible } from './runtime';
 import type Ajv from 'ajv';
 
+/**
+ * Returns the string representation of the given date. The format of the output string can be specified:
+ * - 'date' for a date-only string (YYYY-MM-DD),
+ * - 'time' for a time-only string (HH:mm:ss), or
+ * - 'date-time' for a full date-time string in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ).
+ * If no format is specified, the full date-time ISO string is returned by default.
+ *
+ * @returns {string} A string representation of the date in the specified format.
+ *
+ * @example
+ * // returns '2023-11-09'
+ * convertDateToString(new Date('2023-11-09T14:22:54.131Z'), 'date');
+ *
+ * @example
+ * // returns '14:22:54'
+ * convertDateToString(new Date('2023-11-09T14:22:54.131Z'), 'time');
+ *
+ * @example
+ * // returns '2023-11-09T14:22:54.131Z'
+ * convertDateToString(new Date('2023-11-09T14:22:54.131Z'), 'date-time');
+ *
+ * @example
+ * // returns '2023-11-09T14:22:54.131Z'
+ * convertDateToString(new Date('2023-11-09T14:22:54.131Z'));
+ */
+export const convertDateToString = (
+  date: Date,
+  format?: 'date' | 'time' | 'date-time'
+): string => {
+  //e.g. '2023-11-09T14:22:54.131Z'
+  const dateString = date.toISOString();
+  if (format === 'date-time') {
+    return dateString;
+  } else if (format === 'date') {
+    // e.g. '2023-11-09'
+    return dateString.split('T')[0];
+  } else if (format === 'time') {
+    //e.g. '14:22:54'
+    return dateString.split('T')[1].split('.')[0];
+  }
+  return dateString;
+};
+
 /**
  * Escape the given string such that it can be used as a class name,
  * i.e. hashes and slashes will be replaced.