Allow the translation of enum value used for elementLabelProp in ExpandPanelRenderer

packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx

@@ -31,6 +31,13 @@ import {
   createId,
   removeId,
   ArrayTranslations,
+  encode,
+  enumToEnumOptionMapper,
+  oneOfToEnumOptionMapper,
+  getI18nKeyPrefix,
+  Translator,
+  UISchemaElement,
+  EnumOption,
 } from '@jsonforms/core';
 import {
   Accordion,
@@ -311,18 +318,56 @@ export const ctxDispatchToExpandPanelProps: (
  */
 export const withContextToExpandPanelProps = (
   Component: ComponentType<ExpandPanelProps>
-): ComponentType<OwnPropsOfExpandPanel> =>
-  function WithContextToExpandPanelProps({
+): ComponentType<{
+  ctx: JsonFormsStateContext;
+  props: OwnPropsOfExpandPanel;
+}> => {
+  return function WithContextToExpandPanelProps({
     ctx,
     props,
-  }: JsonFormsStateContext & ExpandPanelProps) {
+  }: {
+    ctx: JsonFormsStateContext;
+    props: ExpandPanelProps;
+  }) {
     const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
-    const { childLabelProp, schema, path, index, uischemas } = props;
+    const {
+      // eslint is unable to detect that these props are "checked" via Typescript already
+      // eslint-disable-next-line react/prop-types
+      childLabelProp,
+      // eslint-disable-next-line react/prop-types
+      schema,
+      // eslint-disable-next-line react/prop-types
+      uischema,
+      // eslint-disable-next-line react/prop-types
+      rootSchema,
+      // eslint-disable-next-line react/prop-types
+      path,
+      // eslint-disable-next-line react/prop-types
+      index,
+      // eslint-disable-next-line react/prop-types
+      uischemas,
+    } = props;
     const childPath = composePaths(path, `${index}`);
-    const childData = Resolve.data(ctx.core.data, childPath);
-    const childLabel = childLabelProp
-      ? get(childData, childLabelProp, '')
-      : get(childData, getFirstPrimitiveProp(schema), '');
+
+    const childLabel = useMemo(() => {
+      return computeChildLabel(
+        ctx.core.data,
+        childPath,
+        childLabelProp,
+        schema,
+        rootSchema,
+        ctx.i18n.translate,
+        uischema
+      );
+    }, [
+      ctx.core.data,
+      childPath,
+      childLabelProp,
+      schema,
+      rootSchema,
+      ctx.i18n.translate,
+      uischema,
+    ]);
 
     return (
       <Component
@@ -334,6 +379,69 @@ export const withContextToExpandPanelProps = (
       />
     );
   };
+};
+
+const hasEnumField = (schema: JsonSchema) => {
+  return schema && (schema.enum !== undefined || schema.const !== undefined);
+};
+
+const hasOneOfField = (schema: JsonSchema) => {
+  return schema && schema.oneOf !== undefined;
+};
+
+const computeChildLabel = (
+  data: any,
+  childPath: string,
+  childLabelProp: string,
+  schema: JsonSchema,
+  rootSchema: JsonSchema,
+  translateFct: Translator,
+  uiSchema: UISchemaElement
+) => {
+  const childData = Resolve.data(data, childPath);
+
+  if (!childLabelProp) return get(childData, getFirstPrimitiveProp(schema), '');
+
+  const currentValue = get(childData, childLabelProp, '');
+
+  const childSchema = Resolve.schema(
+    schema,
+    `#/properties/${childLabelProp
+      .split('.')
+      .map((p) => encode(p))
+      .join('/properties/')}`,
+    rootSchema
+  );
+
+  const fallbackI18nKey =
+    getI18nKeyPrefix(schema, uiSchema, childPath) +
+    '.' +
+    getI18nKeyPrefix(schema, uiSchema, childLabelProp);
+
+  let enumOption: EnumOption = undefined;
+  if (hasEnumField(childSchema)) {
+    enumOption = enumToEnumOptionMapper(
+      currentValue,
+      translateFct,
+      fallbackI18nKey
+    );
+  } else if (hasOneOfField(childSchema)) {
+    const oneOfArray = childSchema.oneOf as JsonSchema[];
+    const oneOfSchema = oneOfArray.find(
+      (e: JsonSchema) => e.const === currentValue
+    );
+
+    if (oneOfSchema) {
+      enumOption = oneOfToEnumOptionMapper(
+        oneOfSchema,
+        translateFct,
+        fallbackI18nKey
+      );
+    }
+  }
+
+  return enumOption ? enumOption.label : currentValue;
+};
 
 export const withJsonFormsExpandPanelProps = (
   Component: ComponentType<ExpandPanelProps>