diff --git a/packages/material-renderers/src/complex/MaterialTableControl.tsx b/packages/material-renderers/src/complex/MaterialTableControl.tsx
index a85b4182f..7bbcece32 100644
--- a/packages/material-renderers/src/complex/MaterialTableControl.tsx
+++ b/packages/material-renderers/src/complex/MaterialTableControl.tsx
@@ -42,6 +42,7 @@ import {
TableCell,
TableHead,
TableRow,
+ Tooltip,
Typography,
} from '@mui/material';
import {
@@ -319,35 +320,55 @@ const NonEmptyRowComponent = ({
{showSortButtons ? (
-
-
-
+
+
+
+
-
-
-
+
+
+
+
) : null}
- openDeleteDialog(childPath, rowIndex)}
- size='large'
+
-
-
+ openDeleteDialog(childPath, rowIndex)}
+ size='large'
+ >
+
+
+
diff --git a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
index f6ad22d71..7df2561eb 100644
--- a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
+++ b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
@@ -39,6 +39,7 @@ import {
Avatar,
Grid,
IconButton,
+ Tooltip,
} from '@mui/material';
import {
ExpandMore as ExpandMoreIcon,
@@ -169,26 +170,40 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
{showSortButtons && enabled ? (
-
-
-
+
+
+
+
-
-
-
+
+
+
+
) : (
@@ -196,14 +211,20 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
)}
{enabled && (
-
-
-
+
+
+
+
)}
diff --git a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx
index 56bb4b99e..b3752d234 100644
--- a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx
@@ -23,7 +23,12 @@
THE SOFTWARE.
*/
import './MatchMediaMock';
-import { ControlElement, DispatchCellProps, JsonSchema } from '@jsonforms/core';
+import {
+ ArrayTranslationEnum,
+ ControlElement,
+ DispatchCellProps,
+ JsonSchema,
+} from '@jsonforms/core';
import * as React from 'react';
import MaterialArrayControlRenderer from '../../src/complex/MaterialArrayControlRenderer';
@@ -32,6 +37,7 @@ import Enzyme, { mount, ReactWrapper } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import { JsonFormsStateProvider, StatelessRenderer } from '@jsonforms/react';
import { initCore, TestEmitter } from './util';
+import { checkTooltip, checkTooltipTranslation } from './tooltipChecker';
Enzyme.configure({ adapter: new Adapter() });
@@ -699,4 +705,108 @@ describe('Material array control', () => {
.find({ 'aria-label': 'Move item down' });
expect(downButton.is('[disabled]')).toBe(true);
});
+
+ it('should have a tooltip for add button', () => {
+ wrapper = checkTooltip(
+ fixture.schema,
+ fixture.uischema,
+ wrapper,
+ (wrapper) => wrapper.find('tr').at(0),
+ ArrayTranslationEnum.addTooltip,
+ {
+ id: 'tooltip-add',
+ },
+ fixture.data
+ );
+ });
+ it('should have a translatable tooltip for add button', () => {
+ wrapper = checkTooltipTranslation(
+ fixture.schema,
+ fixture.uischema,
+ wrapper,
+ (wrapper) => wrapper.find('tr').at(0),
+ {
+ id: 'tooltip-add',
+ },
+ fixture.data
+ );
+ });
+
+ it('should have a tooltip for delete button', () => {
+ wrapper = checkTooltip(
+ fixture2.schema,
+ fixture2.uischema,
+ wrapper,
+ (wrapper) => wrapper.find('tr').at(1),
+ ArrayTranslationEnum.removeTooltip,
+ {
+ id: 'tooltip-remove',
+ },
+ fixture2.data
+ );
+ });
+ it('should have a translatable tooltip for delete button', () => {
+ wrapper = checkTooltipTranslation(
+ fixture2.schema,
+ fixture2.uischema,
+ wrapper,
+ (wrapper) => wrapper.find('tr').at(1),
+ {
+ id: 'tooltip-remove',
+ },
+ fixture2.data
+ );
+ });
+
+ it('should have a tooltip for up button', () => {
+ wrapper = checkTooltip(
+ fixture2.schema,
+ fixture2.uischema,
+ wrapper,
+ (wrapper) => wrapper.find('tr').at(1),
+ ArrayTranslationEnum.up,
+ {
+ id: 'tooltip-up',
+ },
+ fixture2.data
+ );
+ });
+ it('should have a translatable tooltip for up button', () => {
+ wrapper = checkTooltipTranslation(
+ fixture2.schema,
+ fixture2.uischema,
+ wrapper,
+ (wrapper) => wrapper.find('tr').at(1),
+ {
+ id: 'tooltip-up',
+ },
+ fixture2.data
+ );
+ });
+
+ it('should have a tooltip for down button', () => {
+ wrapper = checkTooltip(
+ fixture2.schema,
+ fixture2.uischema,
+ wrapper,
+ (wrapper) => wrapper.find('tr').at(1),
+ ArrayTranslationEnum.down,
+ {
+ id: 'tooltip-down',
+ },
+ fixture2.data
+ );
+ });
+ it('should have a translatable tooltip for down button', () => {
+ wrapper = checkTooltipTranslation(
+ fixture2.schema,
+ fixture2.uischema,
+ wrapper,
+ (wrapper) => wrapper.find('tr').at(1),
+ {
+ id: 'tooltip-down',
+ },
+ fixture2.data
+ );
+ });
});
diff --git a/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx
index ae1bc86cf..5114b15d3 100644
--- a/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx
@@ -23,10 +23,14 @@
THE SOFTWARE.
*/
import './MatchMediaMock';
-import { ControlElement, JsonSchema7 } from '@jsonforms/core';
+import {
+ ArrayTranslationEnum,
+ ControlElement,
+ JsonSchema7,
+} from '@jsonforms/core';
import * as React from 'react';
-import { materialRenderers } from '../../src';
+import { ArrayLayoutToolbar, materialRenderers } from '../../src';
import {
MaterialArrayLayout,
materialArrayLayoutTester,
@@ -36,6 +40,7 @@ import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';
import { Accordion } from '@mui/material';
import { createTesterContext, initCore } from './util';
+import { checkTooltip, checkTooltipTranslation } from './tooltipChecker';
Enzyme.configure({ adapter: new Adapter() });
@@ -629,4 +634,108 @@ describe('Material array layout', () => {
const noDataLabel = wrapper.find('div>div>p').text();
expect(noDataLabel.includes('Translated')).toBeTruthy();
});
+
+ it('should have a tooltip for add button', () => {
+ wrapper = checkTooltip(
+ nestedSchema,
+ uischemaWithSortOption,
+ wrapper,
+ (wrapper) => wrapper.find(ArrayLayoutToolbar),
+ ArrayTranslationEnum.addTooltip,
+ {
+ id: 'tooltip-add',
+ },
+ data
+ );
+ });
+ it('should have a translatable tooltip for add button', () => {
+ wrapper = checkTooltipTranslation(
+ nestedSchema,
+ uischemaWithSortOption,
+ wrapper,
+ (wrapper) => wrapper.find(ArrayLayoutToolbar),
+ {
+ id: 'tooltip-add',
+ },
+ data
+ );
+ });
+
+ it('should have a tooltip for delete button', () => {
+ wrapper = checkTooltip(
+ nestedSchema,
+ uischemaWithSortOption,
+ wrapper,
+ (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
+ ArrayTranslationEnum.removeTooltip,
+ {
+ id: 'tooltip-remove',
+ },
+ data
+ );
+ });
+ it('should have a translatable tooltip for delete button', () => {
+ wrapper = checkTooltipTranslation(
+ nestedSchema,
+ uischemaWithSortOption,
+ wrapper,
+ (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
+ {
+ id: 'tooltip-remove',
+ },
+ data
+ );
+ });
+
+ it('should have a tooltip for up button', () => {
+ wrapper = checkTooltip(
+ nestedSchema,
+ uischemaWithSortOption,
+ wrapper,
+ (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
+ ArrayTranslationEnum.up,
+ {
+ id: 'tooltip-up',
+ },
+ data
+ );
+ });
+ it('should have a translatable tooltip for up button', () => {
+ wrapper = checkTooltipTranslation(
+ nestedSchema,
+ uischemaWithSortOption,
+ wrapper,
+ (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
+ {
+ id: 'tooltip-up',
+ },
+ data
+ );
+ });
+
+ it('should have a tooltip for down button', () => {
+ wrapper = checkTooltip(
+ nestedSchema,
+ uischemaWithSortOption,
+ wrapper,
+ (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
+ ArrayTranslationEnum.down,
+ {
+ id: 'tooltip-down',
+ },
+ data
+ );
+ });
+ it('should have a translatable tooltip for down button', () => {
+ wrapper = checkTooltipTranslation(
+ nestedSchema,
+ uischemaWithSortOption,
+ wrapper,
+ (wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
+ {
+ id: 'tooltip-down',
+ },
+ data
+ );
+ });
});
diff --git a/packages/material-renderers/test/renderers/tooltipChecker.tsx b/packages/material-renderers/test/renderers/tooltipChecker.tsx
new file mode 100644
index 000000000..7754133d7
--- /dev/null
+++ b/packages/material-renderers/test/renderers/tooltipChecker.tsx
@@ -0,0 +1,70 @@
+import { EnzymePropSelector, mount, ReactWrapper } from 'enzyme';
+import {
+ arrayDefaultTranslations,
+ ArrayTranslationEnum,
+ ControlElement,
+ JsonSchema,
+} from '@jsonforms/core';
+import { JsonForms } from '@jsonforms/react';
+import { materialRenderers } from '../../src';
+import { Tooltip } from '@mui/material';
+import * as React from 'react';
+
+export const checkTooltip = (
+ schema: JsonSchema,
+ uiSchema: ControlElement,
+ wrapper: ReactWrapper,
+ findTooltipWrapper: (
+ wrapper: ReactWrapper
+ ) => ReactWrapper,
+ tooltipEnum: ArrayTranslationEnum,
+ tooltipFilter: EnzymePropSelector | string,
+ data?: any
+): ReactWrapper => {
+ wrapper = mount(
+
+ );
+
+ expect(
+ findTooltipWrapper(wrapper).find(Tooltip).filter(tooltipFilter).props()[
+ 'title'
+ ]
+ ).toBe(
+ arrayDefaultTranslations.find((ar) => ar.key == tooltipEnum).default()
+ );
+ return wrapper;
+};
+
+export const checkTooltipTranslation = (
+ schema: JsonSchema,
+ uiSchema: ControlElement,
+ wrapper: ReactWrapper,
+ findTooltipWrapper: (
+ wrapper: ReactWrapper
+ ) => ReactWrapper,
+ tooltipFilter: EnzymePropSelector | string,
+ data?: any
+): ReactWrapper => {
+ const translate = () => 'Translated';
+ wrapper = mount(
+
+ );
+
+ expect(
+ findTooltipWrapper(wrapper).find(Tooltip).filter(tooltipFilter).props()[
+ 'title'
+ ]
+ ).toBe('Translated');
+ return wrapper;
+};