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 = () => (
+ : null}>
+ {label}
+
+ );
+
return (
<>
-
- : null}>
- {label}
-
-
+ {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');
+ });
});