fix: use no-data translation in React Material array layout

eclipsesource · Feb 20, 2024 · 1d73eb7 · 1d73eb7
1 parent e3bddec
commit 1d73eb7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
@@ -112,7 +112,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
             );
           })
         ) : (
-          <p>No data</p>
+          <p>{translations.noDataMessage}</p>
         )}
       </div>
     </div>

diff --git a/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx
@@ -50,6 +50,8 @@ const data = [
     message2: 'Yolo 2',
   },
 ];
+
+const emptyData: any[] = [];
 const schema: JsonSchema7 = {
   type: 'array',
   items: {
@@ -610,4 +612,21 @@ describe('Material array layout', () => {
       wrapper.find('.MuiToolbar-root .MuiFormHelperText-root').exists()
     ).toBeFalsy();
   });
+
+  it('should have a translation for no data', () => {
+    const translate = () => 'Translated';
+    const core = initCore(schema, uischema, emptyData);
+    wrapper = mount(
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core, i18n: { translate } }}
+      >
+        <MaterialArrayLayout
+          schema={schema}
+          uischema={uischemaOptions.inline}
+        />
+      </JsonFormsStateProvider>
+    );
+    const noDataLabel = wrapper.find('div>div>p').text();
+    expect(noDataLabel.includes('Translated')).toBeTruthy();
+  });
 });