From bf601fc9889334e57c49ee8947dfc709cb6adce6 Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Tue, 23 Feb 2021 19:15:16 -0500
Subject: [PATCH] Do not show tooltip with empty content

Do not show tooltip with empty content.

See: https://github.com/ansible/awx/issues/9323
---
 .../src/components/StatusLabel/StatusLabel.jsx | 18 +++++++++++++-----
 .../StatusLabel/StatusLabel.test.jsx           | 13 +++++++++++++
 2 files changed, 26 insertions(+), 5 deletions(-)

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 = () => (
+    <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()
+      )}
     </>
   );
 }
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(
+      <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');
+  });
 });