Display tooltips on measures on top instead of bottom on the dashboard page

9 files changed, 120 insertions, 118 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.js b/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.js
index 4f3f98a9e5d..6d3f53657ef 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.js
@@ -81,11 +81,13 @@ export default function LeakPeriodLegend({ period }: { period: Period }) {
     : translateWithParameters('overview.started_on_x', momentDate.format('LL'));
 
   return (
-    <Tooltip overlay={tooltip} placement="bottom">
+    <Tooltip overlay={tooltip} placement="top">
       <div className="overview-legend">
         {translateWithParameters('overview.leak_period_x', leakPeriodLabel)}
         <br />
-        <span className="note">{note}</span>
+        <span className="note">
+          {note}
+        </span>
       </div>
     </Tooltip>
   );
diff --git a/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js b/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js
index bbde489216a..ad498dbdaf5 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/OverviewApp.js
@@ -32,7 +32,6 @@ import { getMeasuresAndMeta } from '../../../api/measures';
 import { getAllTimeMachineData } from '../../../api/time-machine';
 import { enhanceMeasuresWithMetrics } from '../../../helpers/measures';
 import { getLeakPeriod } from '../../../helpers/periods';
-import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
 import { getCustomGraph, getGraph } from '../../../helpers/storage';
 import { METRICS, HISTORY_METRICS_LIST } from '../utils';
 import { DEFAULT_GRAPH, getDisplayedHistoryMetrics } from '../../projectActivity/utils';
@@ -148,14 +147,12 @@ export default class OverviewApp extends React.PureComponent {
           <div className="overview-main page-main">
             <QualityGate component={component} measures={measures} />
 
-            <TooltipsContainer>
               <div className="overview-domains-list">
                 <BugsAndVulnerabilities {...domainProps} />
                 <CodeSmells {...domainProps} />
                 <Coverage {...domainProps} />
                 <Duplications {...domainProps} />
               </div>
-            </TooltipsContainer>
           </div>
 
           <div className="page-sidebar-fixed">
diff --git a/server/sonar-web/src/main/js/apps/overview/events/Analysis.js b/server/sonar-web/src/main/js/apps/overview/events/Analysis.js
index 592c91de41b..ba7fc7715d1 100644
--- a/server/sonar-web/src/main/js/apps/overview/events/Analysis.js
+++ b/server/sonar-web/src/main/js/apps/overview/events/Analysis.js
@@ -22,7 +22,6 @@ import React from 'react';
 import { sortBy } from 'lodash';
 import Event from './Event';
 import FormattedDate from '../../../components/ui/FormattedDate';
-import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
 import { translate } from '../../../helpers/l10n';
 import type { Analysis as AnalysisType, Event as EventType } from '../../projectActivity/types';
 
@@ -37,20 +36,20 @@ export default function Analysis(props: { analysis: AnalysisType }) {
   );
 
   return (
-    <TooltipsContainer>
-      <li className="overview-analysis">
-        <div className="small little-spacer-bottom">
-          <strong>
-            <FormattedDate date={analysis.date} format="LL" />
-          </strong>
-        </div>
+    <li className="overview-analysis">
+      <div className="small little-spacer-bottom">
+        <strong>
+          <FormattedDate date={analysis.date} format="LL" />
+        </strong>
+      </div>
 
-        {sortedEvents.length > 0
-          ? <div className="project-activity-events">
-              {sortedEvents.map(event => <Event event={event} key={event.key} />)}
-            </div>
-          : <span className="note">{translate('project_activity.project_analyzed')}</span>}
-      </li>
-    </TooltipsContainer>
+      {sortedEvents.length > 0
+        ? <div className="project-activity-events">
+            {sortedEvents.map(event => <Event event={event} key={event.key} />)}
+          </div>
+        : <span className="note">
+            {translate('project_activity.project_analyzed')}
+          </span>}
+    </li>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/overview/events/Event.js b/server/sonar-web/src/main/js/apps/overview/events/Event.js
index 1d377ecd253..13dd7b0d23f 100644
--- a/server/sonar-web/src/main/js/apps/overview/events/Event.js
+++ b/server/sonar-web/src/main/js/apps/overview/events/Event.js
@@ -19,7 +19,7 @@
  */
 // @flow
 import React from 'react';
-import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
+import Tooltip from '../../../components/controls/Tooltip';
 import type { Event as EventType } from '../../projectActivity/types';
 import { translate } from '../../../helpers/l10n';
 
@@ -27,18 +27,21 @@ export default function Event(props: { event: EventType }) {
   const { event } = props;
 
   if (event.category === 'VERSION') {
-    return <span className="overview-analysis-event badge">{props.event.name}</span>;
+    return (
+      <span className="overview-analysis-event badge">
+        {props.event.name}
+      </span>
+    );
   }
 
   return (
     <div className="overview-analysis-event">
-      <TooltipsContainer>
-        <span>
-          <span className="note">{translate('event.category', event.category)}:</span>
-          {' '}
-          <strong title={event.description} data-toggle="tooltip">{event.name}</strong>
-        </span>
-      </TooltipsContainer>
+      <span className="note">{translate('event.category', event.category)}:</span>{' '}
+      <Tooltip overlay={event.description}>
+        <strong>
+          {event.name}
+        </strong>
+      </Tooltip>
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Analysis-test.js.snap b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Analysis-test.js.snap
index d7a40d0bf71..e37d21f47d9 100644
--- a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Analysis-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Analysis-test.js.snap
@@ -1,42 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should sort the events with version first 1`] = `
-<TooltipsContainer>
-  <li
-    className="overview-analysis"
+<li
+  className="overview-analysis"
+>
+  <div
+    className="small little-spacer-bottom"
   >
-    <div
-      className="small little-spacer-bottom"
-    >
-      <strong>
-        <FormattedDate
-          date="2017-06-10T16:10:59+0200"
-          format="LL"
-        />
-      </strong>
-    </div>
-    <div
-      className="project-activity-events"
-    >
-      <Event
-        event={
-          Object {
-            "category": "VERSION",
-            "key": "2",
-            "name": "6.5-SNAPSHOT",
-          }
-        }
+    <strong>
+      <FormattedDate
+        date="2017-06-10T16:10:59+0200"
+        format="LL"
       />
-      <Event
-        event={
-          Object {
-            "category": "OTHER",
-            "key": "1",
-            "name": "test",
-          }
+    </strong>
+  </div>
+  <div
+    className="project-activity-events"
+  >
+    <Event
+      event={
+        Object {
+          "category": "VERSION",
+          "key": "2",
+          "name": "6.5-SNAPSHOT",
         }
-      />
-    </div>
-  </li>
-</TooltipsContainer>
+      }
+    />
+    <Event
+      event={
+        Object {
+          "category": "OTHER",
+          "key": "1",
+          "name": "test",
+        }
+      }
+    />
+  </div>
+</li>
 `;
diff --git a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap
index b04b1393fc8..6ff6f67c30d 100644
--- a/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/overview/events/__tests__/__snapshots__/Event-test.js.snap
@@ -12,21 +12,19 @@ exports[`should render an event correctly 1`] = `
 <div
   className="overview-analysis-event"
 >
-  <TooltipsContainer>
-    <span>
-      <span
-        className="note"
-      >
-        event.category.OTHER
-        :
-      </span>
-       
-      <strong
-        data-toggle="tooltip"
-      >
-        test
-      </strong>
-    </span>
-  </TooltipsContainer>
+  <span
+    className="note"
+  >
+    event.category.OTHER
+    :
+  </span>
+   
+  <Tooltip
+    placement="bottom"
+  >
+    <strong>
+      test
+    </strong>
+  </Tooltip>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
index 6ae5012f443..2c5a5e9289c 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
@@ -20,6 +20,7 @@
 import moment from 'moment';
 import React from 'react';
 import { Link } from 'react-router';
+import Tooltip from '../../../components/controls/Tooltip';
 import enhance from './enhance';
 import { getMetricName } from '../helpers/metrics';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
@@ -46,11 +47,11 @@ class CodeSmells extends React.PureComponent {
     const tooltip = translateWithParameters('widget.as_calculated_on_x', formattedAnalysisDate);
 
     return (
-      <Link to={getComponentIssuesUrl(component.key, params)}>
-        <span title={tooltip} data-toggle="tooltip">
+      <Tooltip overlay={tooltip} placement="top">
+        <Link to={getComponentIssuesUrl(component.key, params)}>
           {formatMeasure(value, 'SHORT_WORK_DUR')}
-        </span>
-      </Link>
+        </Link>
+      </Tooltip>
     );
   }
 
@@ -114,7 +115,6 @@ class CodeSmells extends React.PureComponent {
     return (
       <div className="overview-domain-nutshell">
         <div className="overview-domain-measures">
-
           <div className="overview-domain-measure">
             <div className="display-inline-block text-middle" style={{ paddingLeft: 56 }}>
               <div className="overview-domain-measure-value">
@@ -123,7 +123,7 @@ class CodeSmells extends React.PureComponent {
               </div>
               <div className="overview-domain-measure-label">
                 {getMetricName('effort')}
-                {this.props.renderHistoryLink('sqale_rating')}
+                {this.props.renderHistoryLink('sqale_index')}
               </div>
             </div>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/main/enhance.js b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
index 2bd0e72530b..7c465b46c27 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/enhance.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
@@ -24,6 +24,7 @@ import { DrilldownLink } from '../../../components/shared/drilldown-link';
 import HistoryIcon from '../../../components/icons-components/HistoryIcon';
 import Rating from './../../../components/ui/Rating';
 import Timeline from '../components/Timeline';
+import Tooltip from '../../../components/controls/Tooltip';
 import {
   formatMeasure,
   formatMeasureVariation,
@@ -62,7 +63,9 @@ export default function enhance(ComposedComponent) {
       return (
         <div className="overview-card-header">
           <div className="overview-title">
-            <Link to={domainUrl}>{label}</Link>
+            <Link to={domainUrl}>
+              {label}
+            </Link>
           </div>
         </div>
       );
@@ -99,9 +102,10 @@ export default function enhance(ComposedComponent) {
       const { measures, leakPeriod } = this.props;
       const measure = measures.find(measure => measure.metric.key === metricKey);
       const periodValue = getPeriodValue(measure, leakPeriod.index);
-      const formatted = periodValue != null
-        ? formatMeasureVariation(periodValue, getShortType(measure.metric.type))
-        : NO_VALUE;
+      const formatted =
+        periodValue != null
+          ? formatMeasureVariation(periodValue, getShortType(measure.metric.type))
+          : NO_VALUE;
       return (
         <div className="overview-domain-measure">
           <div className="overview-domain-measure-value">
@@ -123,11 +127,16 @@ export default function enhance(ComposedComponent) {
       const value = this.getValue(measure);
       const title = getRatingTooltip(metricKey, value);
       return (
-        <div className="overview-domain-measure-sup" title={title} data-toggle="tooltip">
-          <DrilldownLink className="link-no-underline" component={component.key} metric={metricKey}>
-            <Rating value={value} />
-          </DrilldownLink>
-        </div>
+        <Tooltip overlay={title} placement="top">
+          <div className="overview-domain-measure-sup">
+            <DrilldownLink
+              className="link-no-underline"
+              component={component.key}
+              metric={metricKey}>
+              <Rating value={value} />
+            </DrilldownLink>
+          </div>
+        </Tooltip>
       );
     };
     renderIssues = (metric, type) => {
@@ -144,11 +153,11 @@ export default function enhance(ComposedComponent) {
       const formattedAnalysisDate = moment(component.analysisDate).format('LLL');
       const tooltip = translateWithParameters('widget.as_calculated_on_x', formattedAnalysisDate);
       return (
-        <Link to={getComponentIssuesUrl(component.key, params)}>
-          <span title={tooltip} data-toggle="tooltip">
+        <Tooltip overlay={tooltip} placement="top">
+          <Link to={getComponentIssuesUrl(component.key, params)}>
             {formatMeasure(value, 'SHORT_INT')}
-          </span>
-        </Link>
+          </Link>
+        </Tooltip>
       );
     };
     renderHistoryLink = metricKey => {
diff --git a/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js b/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js
index a6e95459670..d5762751007 100644
--- a/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js
+++ b/server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js
@@ -21,7 +21,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
-import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
+import Tooltip from '../../../components/controls/Tooltip';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { getQualityProfileUrl } from '../../../helpers/urls';
 import { searchRules } from '../../../api/rules';
@@ -105,13 +105,11 @@ class MetaQualityProfiles extends React.PureComponent {
     if (count > 0) {
       const tooltip = translateWithParameters('overview.deprecated_profile', count);
       return (
-        <li
-          key={profile.key}
-          className="overview-deprecated-rules"
-          title={tooltip}
-          data-toggle="tooltip">
-          {inner}
-        </li>
+        <Tooltip key={profile.key} overlay={tooltip}>
+          <li className="overview-deprecated-rules">
+            {inner}
+          </li>
+        </Tooltip>
       );
     }
 
@@ -126,17 +124,15 @@ class MetaQualityProfiles extends React.PureComponent {
     const { profiles } = this.props;
 
     return (
-      <TooltipsContainer>
-        <div className="overview-meta-card">
-          <h4 className="overview-meta-header">
-            {translate('overview.quality_profiles')}
-          </h4>
-
-          <ul className="overview-meta-list">
-            {profiles.map(profile => this.renderProfile(profile))}
-          </ul>
-        </div>
-      </TooltipsContainer>
+      <div className="overview-meta-card">
+        <h4 className="overview-meta-header">
+          {translate('overview.quality_profiles')}
+        </h4>
+
+        <ul className="overview-meta-list">
+          {profiles.map(profile => this.renderProfile(profile))}
+        </ul>
+      </div>
     );
   }
 }