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

Author: Maxouwell

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>

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();
+  });
 });