Allow the translation of enum value used for elementLabelProp in ExpandPanelRenderer

packages/core/src/models/uischema.ts

@@ -309,3 +309,7 @@ export const isLabelable = (obj: unknown): obj is Labelable =>
 
 export const isLabeled = <T = never>(obj: unknown): obj is Labeled<T> =>
   isLabelable(obj) && ['string', 'boolean'].includes(typeof obj.label);
+
+export const isControlElement = (
+  uiSchema: UISchemaElement
+): uiSchema is ControlElement => uiSchema.type === 'Control';

packages/core/src/util/label.ts

@@ -25,8 +25,27 @@
 
 import startCase from 'lodash/startCase';
 
-import type { ControlElement, JsonSchema, LabelDescription } from '../models';
+import {
+  ControlElement,
+  JsonSchema,
+  LabelDescription,
+  UISchemaElement,
+} from '../models';
 import { decode } from './path';
+import { getI18nKeyPrefix, Translator } from '../i18n';
+import { Resolve } from './util';
+import {
+  getFirstPrimitiveProp,
+  isEnumSchema,
+  isOneOfEnumSchema,
+} from './schema';
+import get from 'lodash/get';
+import { findUiControl, getPropPath } from './uischema';
+import {
+  EnumOption,
+  enumToEnumOptionMapper,
+  oneOfToEnumOptionMapper,
+} from './renderer';
 
 const deriveLabel = (
   controlElement: ControlElement,
@@ -81,3 +100,69 @@ const labelDescription = (text: string, show: boolean): LabelDescription => ({
   text: text,
   show: show,
 });
+
+/**
+ * Compute the child label title for array based controls
+ * @param data the data of the control
+ * @param childPath the child path
+ * @param childLabelProp the dotted path to the value used as child label
+ * @param {JsonSchema} schema the json schema for this control
+ * @param {JsonSchema} rootSchema the root json schema
+ * @param {Translator} translateFct the translator fonction
+ * @param {UISchemaElement} uiSchema the uiSchema of the control
+ */
+export const computeChildLabel = (
+  data: any,
+  childPath: string,
+  childLabelProp: string,
+  schema: JsonSchema,
+  rootSchema: JsonSchema,
+  translateFct: Translator,
+  uiSchema: UISchemaElement
+): any => {
+  const childData = Resolve.data(data, childPath);
+
+  if (!childLabelProp) childLabelProp = getFirstPrimitiveProp(schema);
+
+  const currentValue = get(childData, childLabelProp, '');
+
+  if (!childLabelProp) return currentValue;
+
+  const childSchema = Resolve.schema(
+    schema,
+    '#' + getPropPath(childLabelProp),
+    rootSchema
+  );
+
+  let enumOption: EnumOption = undefined;
+  if (isEnumSchema(childSchema)) {
+    enumOption = enumToEnumOptionMapper(
+      currentValue,
+      translateFct,
+      getI18nKeyPrefix(
+        childSchema,
+        findUiControl(uiSchema, childLabelProp),
+        childPath + '.' + childLabelProp
+      )
+    );
+  } else if (isOneOfEnumSchema(childSchema)) {
+    const oneOfArray = childSchema.oneOf as JsonSchema[];
+    const oneOfSchema = oneOfArray.find(
+      (e: JsonSchema) => e.const === currentValue
+    );
+
+    if (oneOfSchema) {
+      enumOption = oneOfToEnumOptionMapper(
+        oneOfSchema,
+        translateFct,
+        getI18nKeyPrefix(
+          oneOfSchema,
+          undefined,
+          childPath + '.' + childLabelProp
+        )
+      );
+    }
+  }
+
+  return enumOption ? enumOption.label : currentValue;
+};

packages/core/src/util/schema.ts

@@ -48,3 +48,11 @@ export const isOneOfEnumSchema = (schema: JsonSchema) =>
   Object.prototype.hasOwnProperty.call(schema, 'oneOf') &&
   schema.oneOf &&
   (schema.oneOf as JsonSchema[]).every((s) => s.const !== undefined);
+
+/**
+ * Tests whether the schema has an enum.
+ */
+export const isEnumSchema = (schema: JsonSchema) =>
+  !!schema &&
+  ((Object.prototype.hasOwnProperty.call(schema, 'enum') && schema.enum) ||
+    (Object.prototype.hasOwnProperty.call(schema, 'const') && schema.const));

packages/core/src/util/uischema.ts

@@ -24,7 +24,13 @@
 */
 
 import isEmpty from 'lodash/isEmpty';
-import { isLayout, UISchemaElement } from '../models';
+import {
+  isControlElement,
+  isLayout,
+  isScoped,
+  UISchemaElement,
+} from '../models';
+import { encode } from './path';
 
 export type IterateCallback = (uischema: UISchemaElement) => void;
 
@@ -55,3 +61,43 @@ export const iterateSchema = (
   }
   toApply(uischema);
 };
+
+/**
+ * Transform a dotted path to a uiSchema properties path
+ * @param path a dotted prop path to a schema value (i.e. articles.comment.author)
+ * @return the uiSchema properties path (i.e. /properties/articles/properties/comment/properties/author)
+ */
+export const getPropPath = (path: string): string => {
+  return `/properties/${path
+    .split('.')
+    .map((p) => encode(p))
+    .join('/properties/')}`;
+};
+
+/**
+ * Find a control in a uiSchema, based on the dotted path of the schema value
+ * @param {UISchemaElement} uiSchema the uiSchema to search from
+ * @param path a dotted prop path to a schema value (i.e. articles.comment.author)
+ * @return {UISchemaElement} or undefined if not found
+ */
+export const findUiControl = (
+  uiSchema: UISchemaElement,
+  path: string
+): UISchemaElement | undefined => {
+  if (isControlElement(uiSchema)) {
+    if (isScoped(uiSchema) && uiSchema.scope.endsWith(getPropPath(path))) {
+      return uiSchema;
+    } else if (uiSchema.options?.detail) {
+      return findUiControl(uiSchema.options.detail, path);
+    }
+  }
+
+  if (isLayout(uiSchema)) {
+    for (const elem of uiSchema.elements) {
+      const result = findUiControl(elem, path);
+      if (result !== undefined) return result;
+    }
+  }
+
+  return undefined;
+};