diff --git a/awx/ui_next/src/components/StatusLabel/StatusLabel.jsx b/awx/ui_next/src/components/StatusLabel/StatusLabel.jsx index 9074deda1a..7d994c78e2 100644 --- a/awx/ui_next/src/components/StatusLabel/StatusLabel.jsx +++ b/awx/ui_next/src/components/StatusLabel/StatusLabel.jsx @@ -53,13 +53,21 @@ export default function StatusLabel({ status, tooltipContent = '' }) { const color = colors[status] || 'grey'; const Icon = icons[status]; + const renderLabel = () => ( + + ); + return ( <> - - - + {tooltipContent ? ( + + {renderLabel()} + + ) : ( + renderLabel() + )} ); } diff --git a/awx/ui_next/src/components/StatusLabel/StatusLabel.test.jsx b/awx/ui_next/src/components/StatusLabel/StatusLabel.test.jsx index 58fb6c1a28..9b1997dcb3 100644 --- a/awx/ui_next/src/components/StatusLabel/StatusLabel.test.jsx +++ b/awx/ui_next/src/components/StatusLabel/StatusLabel.test.jsx @@ -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( + + ); + 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'); + }); });