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 color = colors[status] || 'grey';
const Icon = icons[status]; const Icon = icons[status];
const renderLabel = () => (
<Label variant="outline" color={color} icon={Icon ? <Icon /> : null}>
{label}
</Label>
);
return ( return (
<> <>
<Tooltip content={tooltipContent} position="top"> {tooltipContent ? (
<Label variant="outline" color={color} icon={Icon ? <Icon /> : null}> <Tooltip content={tooltipContent} position="top">
{label} {renderLabel()}
</Label> </Tooltip>
</Tooltip> ) : (
renderLabel()
)}
</> </>
); );
} }

View File

@@ -9,6 +9,7 @@ describe('StatusLabel', () => {
expect(wrapper.find('CheckCircleIcon')).toHaveLength(1); expect(wrapper.find('CheckCircleIcon')).toHaveLength(1);
expect(wrapper.find('Label').prop('color')).toEqual('green'); expect(wrapper.find('Label').prop('color')).toEqual('green');
expect(wrapper.text()).toEqual('Success'); expect(wrapper.text()).toEqual('Success');
expect(wrapper.find('Tooltip')).toHaveLength(0);
}); });
test('should render failed', () => { test('should render failed', () => {
@@ -58,4 +59,16 @@ describe('StatusLabel', () => {
expect(wrapper.find('Label').prop('color')).toEqual('orange'); expect(wrapper.find('Label').prop('color')).toEqual('orange');
expect(wrapper.text()).toEqual('Canceled'); 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');
});
}); });