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 98c8c2db81c23f9cdaa02490ae7c6d31aee752b3..cf17cc3b037269fa00322498ba63de5346737847 100644 (file)
--- 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 96758777f80b1dc884c3f6db831fff2b0640b450..c2723826cfe4893aa6878d80627e7e3ebd96d050 100644 (file)
--- 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 7d67d56c8d8519f354450bfd86f18c4554efdf69..ccb6c4d99adffd1823932932867a26a2ab1644dc 100644 (file)
--- 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 bd558730f2671b51879662eeb5ff39f262d4531a..95ba6e244266a4f880b9705d19125bb9ae390e82 100644 (file)
--- 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,