Do not show tooltip with empty content

Do not show tooltip with empty content.

See: https://github.com/ansible/awx/issues/9323
This commit is contained in:
nixocio 2021-02-23 19:15:16 -05:00
parent 615cc11d0d
commit bf601fc988
2 changed files with 26 additions and 5 deletions

View File

@ -53,13 +53,21 @@ export default function StatusLabel({ status, tooltipContent = '' }) {
const color = colors[status] || 'grey';
const Icon = icons[status];
const renderLabel = () => (
<Label variant="outline" color={color} icon={Icon ? <Icon /> : null}>
{label}
</Label>
);
return (
<>
<Tooltip content={tooltipContent} position="top">
<Label variant="outline" color={color} icon={Icon ? <Icon /> : null}>
{label}
</Label>
</Tooltip>
{tooltipContent ? (
<Tooltip content={tooltipContent} position="top">
{renderLabel()}
</Tooltip>
) : (
renderLabel()
)}
</>
);
}

View File

@ -9,6 +9,7 @@ describe('StatusLabel', () => {
expect(wrapper.find('CheckCircleIcon')).toHaveLength(1);
expect(wrapper.find('Label').prop('color')).toEqual('green');
expect(wrapper.text()).toEqual('Success');
expect(wrapper.find('Tooltip')).toHaveLength(0);
});
test('should render failed', () => {
@ -58,4 +59,16 @@ describe('StatusLabel', () => {
expect(wrapper.find('Label').prop('color')).toEqual('orange');
expect(wrapper.text()).toEqual('Canceled');
});
test('should render tooltip', () => {
const wrapper = mount(
<StatusLabel tooltipContent="Foo" status="success" />
);
expect(wrapper).toHaveLength(1);
expect(wrapper.find('CheckCircleIcon')).toHaveLength(1);
expect(wrapper.find('Label').prop('color')).toEqual('green');
expect(wrapper.text()).toEqual('Success');
expect(wrapper.find('Tooltip')).toHaveLength(1);
expect(wrapper.find('Tooltip').prop('content')).toEqual('Foo');
});
});