From: Pascal Mugnier <pascal.mugnier@sonarsource.com>
Date: Tue, 27 Mar 2018 12:58:40 +0000 (+0200)
Subject: SONAR-9578 Prevent "freezing effect" when hovering the tooltip on graph (#44)
X-Git-Tag: 7.5~1467
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=4834030c0da412abe33342f52f189b3d9ba9d812;p=sonarqube.git

SONAR-9578 Prevent "freezing effect" when hovering the tooltip on graph (#44)
---

diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltips.js b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltips.js
index 98c8c2db81c..cf17cc3b037 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltips.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsTooltips.js
@@ -19,6 +19,7 @@
  */
 // @flow
 import React from 'react';
+import classNames from 'classnames';
 import GraphsTooltipsContent from './GraphsTooltipsContent';
 import GraphsTooltipsContentEvents from './GraphsTooltipsContentEvents';
 import GraphsTooltipsContentCoverage from './GraphsTooltipsContentCoverage';
@@ -95,7 +96,9 @@ export default class GraphsTooltips extends React.PureComponent {
     const tooltipContent = this.renderContent().filter(Boolean);
     const addSeparator = tooltipContent.length > 0;
     return (
-      <BubblePopup customClass={customClass} position={{ top, left, width: TOOLTIP_WIDTH }}>
+      <BubblePopup
+        customClass={classNames(customClass, 'disabled-pointer-events')}
+        position={{ top, left, width: TOOLTIP_WIDTH }}>
         <div className="project-activity-graph-tooltip">
           <div className="project-activity-graph-tooltip-title spacer-bottom">
             <DateTimeFormatter date={this.props.selectedDate} />
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltips-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltips-test.js.snap
index 96758777f80..c2723826cfe 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltips-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsTooltips-test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`should not add separators if not needed 1`] = `
 <BubblePopup
-  customClass="bubble-popup-right"
+  customClass="bubble-popup-right disabled-pointer-events"
   position={
     Object {
       "left": 476,
@@ -37,7 +37,7 @@ exports[`should not add separators if not needed 1`] = `
 
 exports[`should render correctly for issues graphs 1`] = `
 <BubblePopup
-  customClass="bubble-popup-right"
+  customClass="bubble-popup-right disabled-pointer-events"
   position={
     Object {
       "left": 476,
@@ -95,7 +95,7 @@ exports[`should render correctly for issues graphs 1`] = `
 
 exports[`should render correctly for random graphs 1`] = `
 <BubblePopup
-  customClass="bubble-popup-right"
+  customClass="bubble-popup-right disabled-pointer-events"
   position={
     Object {
       "left": 476,
diff --git a/server/sonar-web/src/main/js/components/preview-graph/PreviewGraphTooltips.js b/server/sonar-web/src/main/js/components/preview-graph/PreviewGraphTooltips.js
index 7d67d56c8d8..ccb6c4d99ad 100644
--- a/server/sonar-web/src/main/js/components/preview-graph/PreviewGraphTooltips.js
+++ b/server/sonar-web/src/main/js/components/preview-graph/PreviewGraphTooltips.js
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import classNames from 'classnames';
 import PreviewGraphTooltipsContent from './PreviewGraphTooltipsContent';
 import BubblePopup from '../common/BubblePopup';
 import DateFormatter from '../intl/DateFormatter';
@@ -53,7 +54,9 @@ export default class PreviewGraphTooltips extends React.PureComponent {
     }
 
     return (
-      <BubblePopup customClass={customClass} position={{ top, left, width: TOOLTIP_WIDTH }}>
+      <BubblePopup
+        customClass={classNames(customClass, 'disabled-pointer-events')}
+        position={{ top, left, width: TOOLTIP_WIDTH }}>
         <div className="overview-analysis-graph-tooltip">
           <div className="overview-analysis-graph-tooltip-title">
             <DateFormatter date={this.props.selectedDate} long={true} />
diff --git a/server/sonar-web/src/main/js/components/preview-graph/__tests__/__snapshots__/PreviewGraphTooltips-test.js.snap b/server/sonar-web/src/main/js/components/preview-graph/__tests__/__snapshots__/PreviewGraphTooltips-test.js.snap
index bd558730f26..95ba6e24426 100644
--- a/server/sonar-web/src/main/js/components/preview-graph/__tests__/__snapshots__/PreviewGraphTooltips-test.js.snap
+++ b/server/sonar-web/src/main/js/components/preview-graph/__tests__/__snapshots__/PreviewGraphTooltips-test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`should render correctly 1`] = `
 <BubblePopup
-  customClass="bubble-popup-right"
+  customClass="bubble-popup-right disabled-pointer-events"
   position={
     Object {
       "left": -135,