Array translations for react vanilla, angular-material, vue (#2129)

Replace existing hard-coded labels with translation-options for array-control elements for the vanilla, angular-material and vue renderers.
eclipsesource · Apr 14, 2023 · 8b6c9d2 · 8b6c9d2
1 parent 06bbb4b
commit 8b6c9d2
Show file tree

Hide file tree

Showing 20 changed files with 105 additions and 88 deletions.
diff --git a/packages/angular-material/src/layouts/array-layout.renderer.ts b/packages/angular-material/src/layouts/array-layout.renderer.ts
@@ -31,6 +31,7 @@ import {
 import { JsonFormsAngularService, JsonFormsAbstractControl } from '@jsonforms/angular';
 import {
   ArrayLayoutProps,
+  ArrayTranslations,
   createDefaultValue,
   findUISchema,
   isObjectArrayWithNesting,
@@ -68,15 +69,15 @@ import {
         <span fxFlex></span>
         <button
           mat-button
-          matTooltip="{{ this.addTooltip }}"
+          matTooltip="{{ translations.addTooltip }}"
           [disabled]="!isEnabled()"
           (click)="add()"
-          attr.aria-label="{{ this.addAriaLabel }}"
+          attr.aria-label="{{ translations.addAriaLabel }}"
         >
           <mat-icon>add</mat-icon>
         </button>
       </div>
-      <p *ngIf="noData">{{ this.noDataMessage }}</p>
+      <p *ngIf="noData">{{ translations.noDataMessage }}</p>
       <div
         *ngFor="
           let item of [].constructor(data);
@@ -97,8 +98,8 @@ import {
               mat-button
               [disabled]="first"
               (click)="up(idx)"
-              attr.aria-label="{{ this.upAriaLabel }}"
-              matTooltip="{{ this.upTooltip }}"
+              attr.aria-label="{{ translations.upAriaLabel }}"
+              matTooltip="{{ translations.up }}"
               matTooltipPosition="right"
             >
               <mat-icon>arrow_upward</mat-icon>
@@ -109,8 +110,8 @@ import {
               mat-button
               [disabled]="last"
               (click)="down(idx)"
-              attr.aria-label="{{ this.downAriaLabel }}"
-              matTooltip="{{ this.downTooltip }}"
+              attr.aria-label="{{ translations.downAriaLabel }}"
+              matTooltip="{{ translations.down }}"
               matTooltipPosition="right"
             >
               <mat-icon>arrow_downward</mat-icon>
@@ -119,8 +120,8 @@ import {
               mat-button
               color="warn"
               (click)="remove(idx)"
-              attr.aria-label="{{ this.removeAriaLabel }}"
-              matTooltip="{{ this.removeTooltip }}"
+              attr.aria-label="{{ translations.removeAriaLabel }}"
+              matTooltip="{{ translations.removeTooltip }}"
               matTooltipPosition="right"
             >
               <mat-icon>delete</mat-icon>
@@ -148,16 +149,8 @@ import {
 export class ArrayLayoutRenderer
   extends JsonFormsAbstractControl<StatePropsOfArrayLayout>
   implements OnInit, OnDestroy {
-  addTooltip: string;
-  addAriaLabel: string;
-  noDataMessage: string;
-  removeTooltip: string;
-  removeAriaLabel: string;
-  upTooltip: string;
-  upAriaLabel: string;
-  downTooltip: string;
-  downAriaLabel:string;
   noData: boolean;
+  translations: ArrayTranslations;
   addItem: (path: string, value: any) => () => void;
   moveItemUp: (path: string, index: number) => () => void;
   moveItemDown: (path: string, index: number) => () => void;
@@ -196,15 +189,9 @@ export class ArrayLayoutRenderer
     this.removeItems = removeItems;
   }
   mapAdditionalProps(props: ArrayLayoutProps) {
+    this.translations = props.translations;
     this.noData = !props.data || props.data === 0;
     this.uischemas = props.uischemas;
-    this.addTooltip = `Add to ${this.label}`;
-    this.addAriaLabel = `Add to ${this.label} button`;
-    this.upAriaLabel = `Move ${this.label} up`;
-    this.downAriaLabel = `Move ${this.label} down`;
-    this.removeTooltip = `Delete`;
-    this.removeAriaLabel = `Delete button`;
-    this.noDataMessage = `No data`;
   }
   getProps(index: number): OwnPropsOfRenderer {
     const uischema = findUISchema(

diff --git a/packages/angular-material/src/other/master-detail/master.ts b/packages/angular-material/src/other/master-detail/master.ts
@@ -31,6 +31,7 @@ import {
 } from '@jsonforms/angular';
 import {
   ArrayControlProps,
+  ArrayTranslations,
   ControlElement,
   createDefaultValue,
   decode,
@@ -64,7 +65,7 @@ export const removeSchemaKeywords = (path: string) => {
       <mat-sidenav mode="side" opened>
         <mat-nav-list>
           <mat-list-item *ngIf="masterItems.length === 0"
-            >No items</mat-list-item
+            >{{ translations.noDataMessage }}</mat-list-item
           >
           <mat-list-item
             *ngFor="
@@ -96,7 +97,7 @@ export const removeSchemaKeywords = (path: string) => {
           (click)="onAddClick()"
           *ngIf="isEnabled()"
         >
-          <mat-icon aria-label="Add item to list">add</mat-icon>
+          <mat-icon [attr.aria-label]="translations.addAriaLabel">add</mat-icon>
         </button>
       </mat-sidenav>
       <mat-sidenav-content class="content">
@@ -149,6 +150,7 @@ export class MasterListComponent extends JsonFormsArrayControl {
   removeItems: (path: string, toDelete: number[]) => () => void;
   propsPath: string;
   highlightedIdx: number;
+  translations: ArrayTranslations;
 
   constructor(jsonformsService: JsonFormsAngularService, private changeDetectorRef: ChangeDetectorRef) {
     super(jsonformsService);
@@ -188,6 +190,8 @@ export class MasterListComponent extends JsonFormsArrayControl {
       setReadonly(detailUISchema);
     }
 
+    this.translations=props.translations;
+
     const masterItems = (data || []).map((d: any, index: number) => {
       const labelRefInstancePath = controlElement.options?.labelRef && removeSchemaKeywords(
         controlElement.options.labelRef

diff --git a/packages/angular-material/src/other/table.renderer.ts b/packages/angular-material/src/other/table.renderer.ts
@@ -30,6 +30,7 @@ import {
 } from '@jsonforms/angular';
 import {
   ArrayControlProps,
+  ArrayTranslations,
   ControlElement, createDefaultValue,
   deriveTypes,
   encode,
@@ -57,7 +58,7 @@ import {
       <ng-container matColumnDef="action">
         <tr>
           <th mat-header-cell *matHeaderCellDef>
-            <button mat-button color="primary" (click)="add()" [disabled]="!isEnabled()" matTooltip="Add"><mat-icon>add</mat-icon></button>
+            <button mat-button color="primary" (click)="add()" [disabled]="!isEnabled()" [matTooltip]="translations.addTooltip"><mat-icon>add</mat-icon></button>
           </th>
         </tr>
         <tr>
@@ -68,7 +69,7 @@ import {
               mat-button
               [disabled]="first"
               (click)="up(i)"
-              matTooltip="Move item up"
+              [matTooltip]="translations.upAriaLabel"
               matTooltipPosition="right"
               >
               <mat-icon>arrow_upward</mat-icon>
@@ -79,7 +80,7 @@ import {
               mat-button
               [disabled]="last"
               (click)="down(i)"
-              matTooltip="Move item down"
+              [matTooltip]="translations.downAriaLabel"
               matTooltipPosition="right"
             >
               <mat-icon>arrow_downward</mat-icon>
@@ -90,7 +91,7 @@ import {
                 (click)="remove(i)"
                 [disabled]="!isEnabled()"
                 matTooltipPosition="right"
-                matTooltip="Delete"
+                [matTooltip]="translations.removeTooltip"
             >
               <mat-icon>delete</mat-icon>
             </button>
@@ -126,6 +127,7 @@ export class TableRenderer extends JsonFormsArrayControl {
   moveItemUp: (path: string, index: number) => () => void;
   moveItemDown: (path: string, index: number) => () => void;
   removeItems: (path: string, toDelete: number[]) => () => void;
+  translations: ArrayTranslations;
 
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
@@ -139,6 +141,7 @@ export class TableRenderer extends JsonFormsArrayControl {
     if (this.isEnabled()) {
       this.displayedColumns.push('action');
     }
+    this.translations = props.translations;
   }
   getProps(index: number, props: OwnPropsOfRenderer): OwnPropsOfRenderer {
     const rowPath = Paths.compose(props.path, `${index}`);

diff --git a/packages/angular-material/test/master-detail.spec.ts b/packages/angular-material/test/master-detail.spec.ts
@@ -41,6 +41,7 @@ import { MasterListComponent } from '../src/other/master-detail/master';
 import { JsonFormsDetailComponent } from '../src/other/master-detail/detail';
 import { getJsonFormsService, setupMockStore } from '@jsonforms/angular-test';
 import { Actions } from '@jsonforms/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 describe('Master detail', () => {
   let fixture: ComponentFixture<MasterListComponent>;
@@ -114,7 +115,8 @@ describe('Master detail', () => {
         MatIconModule,
         MatButtonModule,
         FlexLayoutModule,
-        NoopAnimationsModule
+        NoopAnimationsModule,
+        MatTooltipModule
       ],
       providers: [JsonFormsAngularService]
     })

diff --git a/packages/angular-material/test/table-control.spec.ts b/packages/angular-material/test/table-control.spec.ts
@@ -42,6 +42,7 @@ import {
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { setupMockStore } from '@jsonforms/angular-test';
 import { createTesterContext } from './util';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 const uischema1: ControlElement = { type: 'Control', scope: '#' };
 const uischema2: ControlElement = {
@@ -127,7 +128,8 @@ describe('Table', () => {
         MatInputModule,
         ReactiveFormsModule,
         FlexLayoutModule,
-        MatTableModule
+        MatTableModule,
+        MatTooltipModule,
       ],
       providers: [JsonFormsAngularService]
     })

diff --git a/packages/core/src/i18n/arrayTranslations.ts b/packages/core/src/i18n/arrayTranslations.ts
@@ -15,7 +15,9 @@ export enum ArrayTranslationEnum{
     deleteDialogTitle = 'deleteDialogTitle',
     deleteDialogMessage = 'deleteDialogMessage',
     deleteDialogAccept = 'deleteDialogAccept',
-    deleteDialogDecline = 'deleteDialogDecline'
+    deleteDialogDecline = 'deleteDialogDecline',
+    up = 'up',
+    down = 'down'
 }
 
 export type ArrayTranslations = {
@@ -24,13 +26,15 @@ export type ArrayTranslations = {
 
 export const arrayDefaultTranslations: ArrayDefaultTranslation[] = [
     {key: ArrayTranslationEnum.addTooltip, default: (input) => input?`Add to ${input}`:'Add'},
-    {key: ArrayTranslationEnum.addAriaLabel, default: (input) => input?`Add to ${input}`:'Add'},
+    {key: ArrayTranslationEnum.addAriaLabel, default: (input) => input?`Add to ${input} button`:'Add button'},
     {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.upAriaLabel, default: () => `Move item up`},
+    {key: ArrayTranslationEnum.up, default: () => 'Up'},
+    {key: ArrayTranslationEnum.down, default: () => 'Down'},
+    {key: ArrayTranslationEnum.downAriaLabel, default: () => `Move item down`},
+    {key: ArrayTranslationEnum.noDataMessage, default: () => 'No data'},
+    {key: ArrayTranslationEnum.noSelection, default: () => 'No selection'},
     {key: ArrayTranslationEnum.deleteDialogTitle, default: () => 'Confirm Deletion'},
     {key: ArrayTranslationEnum.deleteDialogMessage, default: () => 'Are you sure you want to delete the selected entry?'},
     {key: ArrayTranslationEnum.deleteDialogAccept, default: () => 'Yes'},

diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts
@@ -652,6 +652,7 @@ export interface OwnPropsOfMasterListItem {
   schema: JsonSchema;
   handleSelect(index: number): () => void;
   removeItem(path: string, value: number): () => void;
+  translations: ArrayTranslations;
 }
 
 export interface StatePropsOfMasterItem extends OwnPropsOfMasterListItem {
@@ -686,6 +687,7 @@ export interface ControlWithDetailProps
  */
 export interface StatePropsOfArrayControl
   extends StatePropsOfControlWithDetail {
+  translations: ArrayTranslations;
   childErrors?: ErrorObject[];
 }
 
@@ -700,23 +702,25 @@ export const mapStateToArrayControlProps = (
   state: JsonFormsState,
   ownProps: OwnPropsOfControl
 ): StatePropsOfArrayControl => {
-  const { path, schema, uischema, ...props } = mapStateToControlWithDetailProps(
+  const { path, schema, uischema, i18nKeyPrefix, label, ...props } = mapStateToControlWithDetailProps(
     state,
     ownProps
   );
 
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
   const childErrors = getSubErrorsAt(path, resolvedSchema)(state);
-
+  const t = getTranslator()(state);
 
   return {
     ...props,
+    label,
     path,
     uischema,
     schema: resolvedSchema,
     childErrors,
     renderers: ownProps.renderers || getRenderers(state),
     cells: ownProps.cells || getCells(state),
+    translations: getArrayTranslations(t,arrayDefaultTranslations,i18nKeyPrefix, label)
   };
 };
 

diff --git a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
@@ -35,7 +35,7 @@ import {
 import DeleteIcon from '@mui/icons-material/Delete';
 import React from 'react';
 
-const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, removeItem, path }: StatePropsOfMasterItem) => {
+const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, removeItem, path, translations }: StatePropsOfMasterItem) => {
     return (
         <ListItem
             button
@@ -47,7 +47,7 @@ const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, r
             </ListItemAvatar>
             <ListItemText primary={childLabel} />
             <ListItemSecondaryAction>
-                <IconButton aria-label='Delete' onClick={removeItem(path, index)} size='large'>
+                <IconButton aria-label={translations.removeAriaLabel} onClick={removeItem(path, index)} size='large'>
                     <DeleteIcon />
                 </IconButton>
             </ListItemSecondaryAction>

diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
@@ -130,6 +130,7 @@ export const MaterialListWithDetailRenderer = ({
                   removeItem={handleRemoveItem}
                   selected={selectedIndex === index}
                   key={index}
+                  translations={translations}
                 />
               ))
             ) : (

diff --git a/packages/material-renderers/src/complex/MaterialTableControl.tsx b/packages/material-renderers/src/complex/MaterialTableControl.tsx
@@ -260,9 +260,10 @@ interface NonEmptyRowProps {
   enabled: boolean;
   cells?: JsonFormsCellRendererRegistryEntry[];
   path: string;
+  translations: ArrayTranslations
 }
 
-const NonEmptyRowComponent = 
+const NonEmptyRowComponent =
   ({
     childPath,
     schema,
@@ -275,7 +276,8 @@ const NonEmptyRowComponent =
     showSortButtons,
     enabled,
     cells,
-    path
+    path,
+    translations
   }: NonEmptyRowProps & WithDeleteDialogSupport) => {
     const moveUp = useMemo(() => moveUpCreator(path, rowIndex),[moveUpCreator, path, rowIndex]);
     const moveDown = useMemo(() => moveDownCreator(path, rowIndex),[moveDownCreator, path, rowIndex]);
@@ -295,13 +297,13 @@ const NonEmptyRowComponent =
               {showSortButtons ? (
                 <Fragment>
                   <Grid item>
-                    <IconButton aria-label={`Move up`} onClick={moveUp} disabled={!enableUp} size='large'>
+                    <IconButton aria-label={translations.upAriaLabel} onClick={moveUp} disabled={!enableUp} size='large'>
                       <ArrowUpward />
                     </IconButton>
                   </Grid>
                   <Grid item>
                     <IconButton
-                      aria-label={`Move down`}
+                      aria-label={translations.downAriaLabel}
                       onClick={moveDown}
                       disabled={!enableDown}
                       size='large'>
@@ -312,7 +314,7 @@ const NonEmptyRowComponent =
               ) : null}
               <Grid item>
                 <IconButton
-                  aria-label={`Delete`}
+                  aria-label={translations.removeAriaLabel}
                   onClick={() => openDeleteDialog(childPath, rowIndex)}
                   size='large'>
                   <DeleteIcon />
@@ -378,6 +380,7 @@ const TableRows = ({
             enabled={enabled}
             cells={cells}
             path={path}
+            translations={translations}
           />
         );
       })}

diff --git a/packages/material-renderers/src/complex/TableToolbar.tsx b/packages/material-renderers/src/complex/TableToolbar.tsx
@@ -99,7 +99,7 @@ const TableToolbar = React.memo(
             placement='bottom'
           >
             <IconButton
-              aria-label={translations.addTooltip}
+              aria-label={translations.addAriaLabel}
               onClick={addItem(path, createDefaultValue(schema))}
               size='large'>
               <AddIcon />