translate array controls in material renderers

LukasBoll · LukasBoll · commit d0f5c2922255 · 2023-02-21T08:38:30.000+01:00
#1826
diff --git a/packages/core/src/i18n/arrayTranslations.ts b/packages/core/src/i18n/arrayTranslations.ts
@@ -0,0 +1,40 @@
+export interface DefaultTranslation {
+    key: ArrayTranslationEnum,
+    default: (variable?: string) => string
+}
+
+export enum ArrayTranslationEnum{
+    addTooltip = 'addTooltip',
+    addAriaLabel = 'addAriaLabel',
+    removeTooltip = 'removeTooltip',
+    upAriaLabel = 'upAriaLabel',
+    downAriaLabel = 'downAriaLabel',
+    noSelection = 'noSelection',
+    removeAriaLabel = 'removeAriaLabel',
+    noDataMessage = 'noDataMessage',
+    deleteDialogHeader = 'deleteDialogHeader',
+    deleteDialogMsg = 'deleteDialogMsg',
+    deleteDialogAccept = 'deleteDialogAccept',
+    deleteDialogDecline = 'deleteDialogDecline'
+}
+
+export type ArrayTranslations = {
+    [key in ArrayTranslationEnum]?: string
+}
+
+export const arrayDefaultTranslations: DefaultTranslation[] = [
+    {key: ArrayTranslationEnum.addTooltip, default: (input) => input?`Add to ${input}`:'Add'},
+    {key: ArrayTranslationEnum.addAriaLabel, default: (input) => input?`Add to ${input}`:'Add'},
+    {key: ArrayTranslationEnum.removeTooltip, default: () => 'Delete'},
+    {key: ArrayTranslationEnum.upAriaLabel, default: (input) => `Move ${input} up`},
+    {key: ArrayTranslationEnum.downAriaLabel, default: (input) => `Move ${input} down`},
+    {key: ArrayTranslationEnum.removeAriaLabel, default: () => 'Delete button'},
+    {key: ArrayTranslationEnum.noDataMessage, default: () => 'No Data'},
+    {key: ArrayTranslationEnum.noSelection, default: () => 'No Selection'},
+    {key: ArrayTranslationEnum.deleteDialogHeader, default: () => 'Confirm Deletion'},
+    {key: ArrayTranslationEnum.deleteDialogMsg, default: () => 'Are you sure you want to delete the selected entry?'},
+    {key: ArrayTranslationEnum.deleteDialogAccept, default: () => 'YES'},
+    {key: ArrayTranslationEnum.deleteDialogDecline, default: () => 'NO'}
+]
+
+export const arrayTranslations: DefaultTranslation[] = Object.values(arrayDefaultTranslations).map(value=>value);
diff --git a/packages/core/src/i18n/i18nUtil.ts b/packages/core/src/i18n/i18nUtil.ts
@@ -3,6 +3,7 @@ import { isInternationalized, Labelable, UISchemaElement } from '../models';
 import { getControlPath } from '../reducers';
 import { formatErrorMessage } from '../util';
 import type { i18nJsonSchema, ErrorTranslator, Translator } from './i18nTypes';
+import { DefaultTranslation, ArrayTranslations } from './arrayTranslations'
 
 export const getI18nKeyPrefixBySchema = (
   schema: i18nJsonSchema | undefined,
@@ -47,6 +48,13 @@ export const getI18nKey = (
   return `${getI18nKeyPrefix(schema, uischema, path)}.${key}`;
 };
 
+export const addI18nKeyToPrefix = (
+  I18nKeyPrefix: string,
+  key: string
+): string => {
+  return `${I18nKeyPrefix}.${key}`;
+};
+
 export const defaultTranslator: Translator = (_id: string, defaultMessage: string | undefined) => defaultMessage;
 
 export const defaultErrorTranslator: ErrorTranslator = (error, t, uischema) => {
@@ -123,3 +131,19 @@ export const deriveLabelForUISchemaElement = (uischema: Labelable<boolean>, t: T
   const i18nKey = typeof i18nKeyPrefix === 'string' ? `${i18nKeyPrefix}.label` : stringifiedLabel;
   return t(i18nKey, stringifiedLabel, { uischema: uischema });
 }
+
+export const translateElements = (
+  t: Translator,
+  controlElements: DefaultTranslation [],
+  i18nKeyPrefix: string,
+  label: string
+): ArrayTranslations => {
+  const translations:ArrayTranslations = {};
+  console.log("translating...");
+  controlElements.forEach((controlElement)=>{
+    const key = addI18nKeyToPrefix(i18nKeyPrefix, controlElement.key);
+    translations[controlElement.key]=t(key, controlElement.default(label));
+    console.log("translations: ", translations);
+  })
+  return translations;
+}
diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts
@@ -56,7 +56,8 @@ import { composePaths, composeWithUi } from './path';
 import { CoreActions, update } from '../actions';
 import type { ErrorObject } from 'ajv';
 import type { JsonFormsState } from '../store';
-import { deriveLabelForUISchemaElement, getCombinedErrorMessage, getI18nKey, getI18nKeyPrefix, getI18nKeyPrefixBySchema, Translator } from '../i18n';
+import { deriveLabelForUISchemaElement, getCombinedErrorMessage, getI18nKey, getI18nKeyPrefix, getI18nKeyPrefixBySchema, translateElements, Translator } from '../i18n';
+import { arrayDefaultTranslations, ArrayTranslations } from '../i18n/arrayTranslations';
 
 const isRequired = (
   schema: JsonSchema,
@@ -370,6 +371,8 @@ export interface StatePropsOfControl extends StatePropsOfScopedRenderer {
    */
   required?: boolean;
 
+  i18nKeyPrefix?: string;
+
   // TODO: renderers?
 }
 
@@ -469,6 +472,7 @@ export const mapStateToControlProps = (
   const schema = resolvedSchema ?? rootSchema;
   const t = getTranslator()(state);
   const te = getErrorTranslator()(state);
+  const i18nKeyPrefix = getI18nKeyPrefix(schema, uischema, path);
   const i18nLabel = t(getI18nKey(schema, uischema, path, 'label'), label, {schema, uischema, path, errors} );
   const i18nDescription = t(getI18nKey(schema, uischema, path, 'description'), description, {schema, uischema, path, errors});
   const i18nErrorMessage = getCombinedErrorMessage(errors, te, t, schema, uischema, path);
@@ -487,7 +491,8 @@ export const mapStateToControlProps = (
     schema,
     config: getConfig(state),
     cells: ownProps.cells || state.jsonforms.cells,
-    rootSchema
+    rootSchema,
+    i18nKeyPrefix
   };
 };
 
@@ -703,14 +708,15 @@ export const mapStateToArrayControlProps = (
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
   const childErrors = getSubErrorsAt(path, resolvedSchema)(state);
 
+
   return {
     ...props,
     path,
     uischema,
     schema: resolvedSchema,
     childErrors,
     renderers: ownProps.renderers || getRenderers(state),
-    cells: ownProps.cells || getCells(state)
+    cells: ownProps.cells || getCells(state),
   };
 };
 
@@ -771,7 +777,7 @@ export const mapDispatchToArrayControlProps = (
         return array;
       })
     );
-  }
+  },
 });
 
 export interface DispatchPropsOfMultiEnumControl {
@@ -1012,6 +1018,7 @@ export const mapStateToOneOfProps = (
 export interface StatePropsOfArrayLayout extends StatePropsOfControlWithDetail {
   data: number;
   minItems?: number;
+  translations?: ArrayTranslations;
 }
 /**
  * Map state to table props
@@ -1029,16 +1036,19 @@ export const mapStateToArrayLayoutProps = (
     schema,
     uischema,
     errors,
+    i18nKeyPrefix,
+    label,
     ...props
   } = mapStateToControlWithDetailProps(state, ownProps);
 
+  
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
-
+  const t = getTranslator()(state);
   // TODO Does not consider 'i18n' keys which are specified in the ui schemas of the sub errors
   const childErrors = getCombinedErrorMessage(
     getSubErrorsAt(path, resolvedSchema)(state),
     getErrorTranslator()(state),
-    getTranslator()(state),
+    t,
     undefined,
     undefined,
     undefined
@@ -1050,12 +1060,14 @@ export const mapStateToArrayLayoutProps = (
     childErrors;
   return {
     ...props,
+    label,
     path,
     uischema,
     schema: resolvedSchema,
     data: props.data ? props.data.length : 0,
     errors: allErrors,
-    minItems: schema.minItems
+    minItems: schema.minItems,
+    translations: translateElements(t,arrayDefaultTranslations,i18nKeyPrefix, label)
   };
 };
 
diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
@@ -61,7 +61,8 @@ export const MaterialListWithDetailRenderer = ({
   renderers,
   cells,
   config,
-  rootSchema
+  rootSchema,
+  translations
 }: ArrayLayoutProps) => {
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const handleRemoveItem = useCallback(
@@ -92,7 +93,7 @@ export const MaterialListWithDetailRenderer = ({
         path,
         undefined,
         uischema,
-        rootSchema
+        rootSchema,
       ),
     [uischemas, schema, uischema.scope, path, uischema, rootSchema]
   );
@@ -105,6 +106,7 @@ export const MaterialListWithDetailRenderer = ({
   return (
     <Hidden xsUp={!visible}>
       <ArrayLayoutToolbar
+        translations={translations}
         label={computeLabel(
           label,
           required,
@@ -146,7 +148,7 @@ export const MaterialListWithDetailRenderer = ({
               path={composePaths(path, `${selectedIndex}`)}
             />
           ) : (
-            <Typography variant='h6'>No Selection</Typography>
+            <Typography variant='h6'>{translations.noSelection}</Typography>
           )}
         </Grid>
       </Grid>
diff --git a/packages/material-renderers/src/complex/DeleteDialog.tsx b/packages/material-renderers/src/complex/DeleteDialog.tsx
@@ -37,13 +37,17 @@ export interface DeleteDialogProps {
     onClose(): void;
     onConfirm(): void;
     onCancel(): void;
+    headerText: string,
+    msg: string,
+    acceptText: string,
+    declineText: string
 }
 
 export interface WithDeleteDialogSupport {
   openDeleteDialog(path: string, data: number): void;
 }
 
-export const DeleteDialog = React.memo(({ open, onClose, onConfirm, onCancel }: DeleteDialogProps) => {
+export const DeleteDialog = React.memo(({ open, onClose, onConfirm, onCancel, headerText: header, msg, acceptText: accept, declineText: decline  }: DeleteDialogProps) => {
     return (
         <Dialog
             open={open}
@@ -53,19 +57,19 @@ export const DeleteDialog = React.memo(({ open, onClose, onConfirm, onCancel }:
             aria-describedby='alert-dialog-confirmdelete-description'
         >
             <DialogTitle id='alert-dialog-confirmdelete-title'>
-                {'Confirm Deletion'}
+                {header}
             </DialogTitle>
             <DialogContent>
                 <DialogContentText id='alert-dialog-confirmdelete-description'>
-                    Are you sure you want to delete the selected entry?
+                    {msg}
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
                 <Button onClick={onCancel} color='primary'>
-                    No
+                    {decline}
                 </Button>
                 <Button onClick={onConfirm} color='primary'>
-                    Yes
+                    {accept}
                 </Button>
             </DialogActions>
         </Dialog>
diff --git a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx b/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
@@ -59,6 +59,10 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
         onCancel={deleteCancel}
         onConfirm={deleteConfirm}
         onClose={deleteClose}
+        acceptText={props.translations.deleteDialogAccept}
+        declineText={props.translations.deleteDialogDecline}
+        headerText={props.translations.deleteDialogHeader}
+        msg={props.translations.deleteDialogMsg}
       />
     </Hidden>
   );
diff --git a/packages/material-renderers/src/complex/MaterialTableControl.tsx b/packages/material-renderers/src/complex/MaterialTableControl.tsx
@@ -65,6 +65,7 @@ import NoBorderTableCell from './NoBorderTableCell';
 import TableToolbar from './TableToolbar';
 import { ErrorObject } from 'ajv';
 import merge from 'lodash/merge';
+import { ArrayTranslations } from '@jsonforms/core/lib/i18n/arrayTranslations';
 
 // we want a cell that doesn't automatically span
 const styles = {
@@ -129,12 +130,13 @@ const getValidColumnProps = (scopedSchema: JsonSchema) => {
 
 export interface EmptyTableProps {
   numColumns: number;
+  translations: ArrayTranslations;
 }
 
-const EmptyTable = ({ numColumns }: EmptyTableProps) => (
+const EmptyTable = ({ numColumns, translations }: EmptyTableProps) => (
   <TableRow>
     <NoBorderTableCell colSpan={numColumns}>
-      <Typography align='center'>No data</Typography>
+      <Typography align='center'>{translations.noDataMessage}</Typography>
     </NoBorderTableCell>
   </TableRow>
 );
@@ -333,6 +335,7 @@ interface TableRowsProp {
   cells?: JsonFormsCellRendererRegistryEntry[];
   moveUp?(path: string, toMove: number): () => void;
   moveDown?(path: string, toMove: number): () => void;
+  translations: ArrayTranslations;
 }
 const TableRows = ({
   data,
@@ -344,12 +347,13 @@ const TableRows = ({
   uischema,
   config,
   enabled,
-  cells
+  cells,
+  translations
 }: TableRowsProp & WithDeleteDialogSupport) => {
   const isEmptyTable = data === 0;
 
   if (isEmptyTable) {
-    return <EmptyTable numColumns={getValidColumnProps(schema).length + 1} />;
+    return <EmptyTable numColumns={getValidColumnProps(schema).length + 1} translations={translations}/>;
   }
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -397,7 +401,8 @@ export class MaterialTableControl extends React.Component<
       openDeleteDialog,
       visible,
       enabled,
-      cells
+      cells,
+      translations
     } = this.props;
 
     const controlElement = uischema as ControlElement;
@@ -420,6 +425,7 @@ export class MaterialTableControl extends React.Component<
               schema={schema}
               rootSchema={rootSchema}
               enabled={enabled}
+              translations={translations}
             />
             {isObjectSchema && (
               <TableRow>
@@ -429,7 +435,7 @@ export class MaterialTableControl extends React.Component<
             )}
           </TableHead>
           <TableBody>
-            <TableRows openDeleteDialog={openDeleteDialog} {...this.props} />
+            <TableRows openDeleteDialog={openDeleteDialog} translations={translations} {...this.props} />
           </TableBody>
         </Table>
       </Hidden>
diff --git a/packages/material-renderers/src/complex/TableToolbar.tsx b/packages/material-renderers/src/complex/TableToolbar.tsx
@@ -37,6 +37,7 @@ import { Grid, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import ValidationIcon from './ValidationIcon';
 import NoBorderTableCell from './NoBorderTableCell';
+import { ArrayTranslations } from '@jsonforms/core/lib/i18n/arrayTranslations';
 
 export interface MaterialTableToolbarProps {
   numColumns: number;
@@ -47,6 +48,7 @@ export interface MaterialTableToolbarProps {
   schema: JsonSchema;
   rootSchema: JsonSchema;
   enabled: boolean;
+  translations: ArrayTranslations;
   addItem(path: string, value: any): () => void;
 }
 
@@ -63,7 +65,8 @@ const TableToolbar = React.memo(
     path,
     addItem,
     schema,
-    enabled
+    enabled,
+    translations
   }: MaterialTableToolbarProps) => (
     <TableRow>
       <NoBorderTableCell colSpan={numColumns}>
@@ -92,11 +95,11 @@ const TableToolbar = React.memo(
         <NoBorderTableCell align='right' style={ fixedCellSmall }>
           <Tooltip
             id='tooltip-add'
-            title={`Add to ${label}`}
+            title={translations.addTooltip}
             placement='bottom'
           >
             <IconButton
-              aria-label={`Add to ${label}`}
+              aria-label={translations.addTooltip}
               onClick={addItem(path, createDefaultValue(schema))}
               size='large'>
               <AddIcon />
diff --git a/packages/material-renderers/src/layouts/ArrayToolbar.tsx b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
