Skip to content

Commit

Permalink
Add tooltip for remove, up and down button on MaterialArrayLayout
Browse files Browse the repository at this point in the history
  • Loading branch information
@Maxouwell
Maxouwell committed Feb 26, 2024
1 parent 1d73eb7 commit 74d46a0
Show file tree
Hide file tree
Showing 2 changed files with 190 additions and 27 deletions.
67 changes: 44 additions & 23 deletions packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import {
Avatar,
Grid,
IconButton,
Tooltip,
} from '@mui/material';
import {
ExpandMore as ExpandMoreIcon,
Expand Down Expand Up @@ -169,41 +170,61 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
{showSortButtons && enabled ? (
<Fragment>
<Grid item>
<IconButton
onClick={moveUp(path, index)}
style={iconStyle}
disabled={!enableMoveUp}
aria-label={translations.upAriaLabel}
size='large'
<Tooltip
id='tooltip-up'
title={translations.up}
placement='bottom'
open={enableMoveUp ? undefined : false}
>
<ArrowUpward />
</IconButton>
<IconButton
onClick={moveUp(path, index)}
style={iconStyle}
disabled={!enableMoveUp}
aria-label={translations.upAriaLabel}
size='large'
>
<ArrowUpward />
</IconButton>
</Tooltip>
</Grid>
<Grid item>
<IconButton
onClick={moveDown(path, index)}
style={iconStyle}
disabled={!enableMoveDown}
aria-label={translations.downAriaLabel}
size='large'
<Tooltip
id='tooltip-down'
title={translations.down}
placement='bottom'
open={enableMoveDown ? undefined : false}
>
<ArrowDownward />
</IconButton>
<IconButton
onClick={moveDown(path, index)}
style={iconStyle}
disabled={!enableMoveDown}
aria-label={translations.downAriaLabel}
size='large'
>
<ArrowDownward />
</IconButton>
</Tooltip>
</Grid>
</Fragment>
) : (
''
)}
{enabled && (
<Grid item>
<IconButton
onClick={removeItems(path, [index])}
style={iconStyle}
aria-label={translations.removeAriaLabel}
size='large'
<Tooltip
id='tooltip-remove'
title={translations.removeTooltip}
placement='bottom'
>
<DeleteIcon />
</IconButton>
<IconButton
onClick={removeItems(path, [index])}
style={iconStyle}
aria-label={translations.removeAriaLabel}
size='large'
>
<DeleteIcon />
</IconButton>
</Tooltip>
</Grid>
)}
</Grid>
Expand Down
150 changes: 146 additions & 4 deletions packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,23 @@
THE SOFTWARE.
*/
import './MatchMediaMock';
import { ControlElement, JsonSchema7 } from '@jsonforms/core';
import {
arrayDefaultTranslations,
ArrayTranslationEnum,
ControlElement,
JsonSchema7,
} from '@jsonforms/core';
import * as React from 'react';

import { materialRenderers } from '../../src';
import { ArrayLayoutToolbar, materialRenderers } from '../../src';
import {
MaterialArrayLayout,
materialArrayLayoutTester,
} from '../../src/layouts';
import Enzyme, { mount, ReactWrapper } from 'enzyme';
import Enzyme, { EnzymePropSelector, mount, ReactWrapper } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';
import { Accordion } from '@mui/material';
import { Accordion, Tooltip } from '@mui/material';
import { createTesterContext, initCore } from './util';

Enzyme.configure({ adapter: new Adapter() });
Expand Down Expand Up @@ -629,4 +634,141 @@ 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(
wrapper,
(wrapper) => wrapper.find(ArrayLayoutToolbar),
ArrayTranslationEnum.addTooltip,
{
id: 'tooltip-add',
}
);
});
it('should have a translatable tooltip for add button', () => {
wrapper = checkTooltipTranslation(
wrapper,
(wrapper) => wrapper.find(ArrayLayoutToolbar),
{
id: 'tooltip-add',
}
);
});

it('should have a tooltip for delete button', () => {
wrapper = checkTooltip(
wrapper,
(wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
ArrayTranslationEnum.removeTooltip,
{
id: 'tooltip-remove',
}
);
});
it('should have a translatable tooltip for delete button', () => {
wrapper = checkTooltipTranslation(
wrapper,
(wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
{
id: 'tooltip-remove',
}
);
});

it('should have a tooltip for up button', () => {
wrapper = checkTooltip(
wrapper,
(wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
ArrayTranslationEnum.up,
{
id: 'tooltip-up',
}
);
});
it('should have a translatable tooltip for up button', () => {
wrapper = checkTooltipTranslation(
wrapper,
(wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
{
id: 'tooltip-up',
}
);
});

it('should have a tooltip for down button', () => {
wrapper = checkTooltip(
wrapper,
(wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
ArrayTranslationEnum.down,
{
id: 'tooltip-down',
}
);
});
it('should have a translatable tooltip for down button', () => {
wrapper = checkTooltipTranslation(
wrapper,
(wrapper) => wrapper.find('Memo(ExpandPanelRendererComponent)').at(0),
{
id: 'tooltip-down',
}
);
});
});

function checkTooltip(
wrapper: ReactWrapper<any, any>,
wrapperFindFunction: (
wrapper: ReactWrapper<any, any>
) => ReactWrapper<any, any>,
tooltipEnum: ArrayTranslationEnum,
tooltipFilter: EnzymePropSelector | string
) {
wrapper = mount(
<JsonForms
data={data}
schema={nestedSchema}
uischema={uischemaWithSortOption}
renderers={materialRenderers}
/>
);
expect(wrapper.find(MaterialArrayLayout).length).toBeTruthy();
expect(
wrapperFindFunction(wrapper).find(Tooltip).filter(tooltipFilter).props()[
'title'
]
).toBe(
arrayDefaultTranslations.find((ar) => ar.key == tooltipEnum).default()
);
return wrapper;
}

function checkTooltipTranslation(
wrapper: ReactWrapper<any, any>,
wrapperFindFunction: (
wrapper: ReactWrapper<any, any>
) => ReactWrapper<any, any>,
tooltipFilter: EnzymePropSelector | string
) {
const translate = () => 'Translated';
const core = initCore(nestedSchema, uischemaWithSortOption, data);
wrapper = mount(
<JsonFormsStateProvider
initState={{ renderers: materialRenderers, core, i18n: { translate } }}
>
<MaterialArrayLayout
schema={nestedSchema}
uischema={uischemaWithSortOption}
/>
</JsonFormsStateProvider>
);
expect(wrapper.find(MaterialArrayLayout).length).toBeTruthy();

// add button tooltip
expect(
wrapperFindFunction(wrapper).find(Tooltip).filter(tooltipFilter).props()[
'title'
]
).toBe('Translated');
return wrapper;
}

0 comments on commit 74d46a0

Please sign in to comment.