From 4c9d0c71dfdd6fcb9521152b4d14e1f8c3a9d85c Mon Sep 17 00:00:00 2001
From: =?utf8?q?Gr=C3=A9goire=20Aubert?= <gregoire.aubert@sonarsource.com>
Date: Tue, 22 May 2018 17:01:56 +0200
Subject: [PATCH] Do not render empty tooltips

---
 .../src/main/js/components/controls/Tooltip.tsx | 11 ++++++++---
 .../controls/__tests__/Tooltip-test.tsx         | 17 +++++++++++++++++
 .../__snapshots__/Tooltip-test.tsx.snap         | 12 ++++++++++++
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
index 14dfa11da66..17a017881b7 100644
--- a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
@@ -55,9 +55,14 @@ function isMeasured(state: State): state is OwnState & Measurements {
 }
 
 export default function Tooltip(props: Props) {
-  // allows to pass `undefined` to `overlay` to avoid rendering a tooltip
-  // can useful in some cases to render the tooltip conditionally
-  return props.overlay !== undefined ? <TooltipInner {...props} /> : props.children;
+  // overlay is a ReactNode, so it can be `undefined` or `null`
+  // this allows to easily render a tooltip conditionally
+  // more generaly we avoid rendering empty tooltips
+  return props.overlay != null && props.overlay !== '' ? (
+    <TooltipInner {...props} />
+  ) : (
+    props.children
+  );
 }
 
 export class TooltipInner extends React.Component<Props, State> {
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx
index f0b1f65f860..139a4c7b1be 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/Tooltip-test.tsx
@@ -70,3 +70,20 @@ it('should not render tooltip without overlay', () => {
   );
   expect(wrapper.type()).toBe('div');
 });
+
+it('should not render empty tooltips', () => {
+  expect(
+    shallow(
+      <Tooltip overlay={undefined} visible={true}>
+        <div id="tooltip" />
+      </Tooltip>
+    )
+  ).toMatchSnapshot();
+  expect(
+    shallow(
+      <Tooltip overlay="" visible={true}>
+        <div id="tooltip" />
+      </Tooltip>
+    )
+  ).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap
index 4127f6e586e..6c0f293b850 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap
@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should not render empty tooltips 1`] = `
+<div
+  id="tooltip"
+/>
+`;
+
+exports[`should not render empty tooltips 2`] = `
+<div
+  id="tooltip"
+/>
+`;
+
 exports[`should open & close 1`] = `
 <React.Fragment>
   <div
-- 
2.39.5