SONAR-9061 Fix leak period header for days period

5 files changed, 43 insertions, 31 deletions

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.js b/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.js
index c437c474e93..de46b957a1d 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.js
@@ -19,25 +19,23 @@
  */
 import React from 'react';
 import moment from 'moment';
-import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
+import Tooltip from '../../../components/controls/Tooltip';
 import { getPeriodLabel, getPeriodDate } from '../../../helpers/periods';
 import { translateWithParameters } from '../../../helpers/l10n';
 
-const LeakPeriodLegend = ({ period }) => {
+export default function LeakPeriodLegend({ period }) {
+  const label = (
+    <div className="measures-domains-leak-header">
+      {translateWithParameters('overview.leak_period_x', getPeriodLabel(period))}
+    </div>
+  );
+
+  if (period.mode === 'days') {
+    return label;
+  }
+
   const date = getPeriodDate(period);
-  const label = getPeriodLabel(period);
   const fromNow = moment(date).fromNow();
   const tooltip = fromNow + ', ' + moment(date).format('LL');
-
-  return (
-    <TooltipsContainer>
-      <div className="measures-domains-leak-header">
-        <div title={tooltip} data-toggle="tooltip">
-          {translateWithParameters('overview.leak_period_x', label)}
-        </div>
-      </div>
-    </TooltipsContainer>
-  );
-};
-
-export default LeakPeriodLegend;
+  return <Tooltip placement="bottom" overlay={tooltip}>{label}</Tooltip>;
+}
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 5f71c846631..4f3f98a9e5d 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
@@ -20,6 +20,7 @@
 // @flow
 import React from 'react';
 import moment from 'moment';
+import Tooltip from '../../../components/controls/Tooltip';
 import { getPeriodDate, getPeriodLabel } from '../../../helpers/periods';
 import { translateWithParameters } from '../../../helpers/l10n';
 
@@ -58,25 +59,34 @@ type Period =
   | PreviousAnalysisPeriod
   | PreviousVersionPeriod;
 
-export default function LeakPeriodLegend(props: { period: Period }) {
-  const { period } = props;
+export default function LeakPeriodLegend({ period }: { period: Period }) {
   const leakPeriodLabel = getPeriodLabel(period);
-  const leakPeriodDate = getPeriodDate(period);
 
+  if (period.mode === 'days') {
+    return (
+      <div className="overview-legend overview-legend-spaced-line">
+        {translateWithParameters('overview.leak_period_x', leakPeriodLabel)}
+      </div>
+    );
+  }
+
+  const leakPeriodDate = getPeriodDate(period);
   const momentDate = moment(leakPeriodDate);
   const fromNow = momentDate.fromNow();
-  const note = ['date', 'days'].includes(period.mode)
+  const note = ['date'].includes(period.mode)
     ? translateWithParameters('overview.last_analysis_x', fromNow)
     : translateWithParameters('overview.started_x', fromNow);
-  const tooltip = ['date', 'days'].includes(period.mode)
+  const tooltip = ['date'].includes(period.mode)
     ? translateWithParameters('overview.last_analysis_on_x', momentDate.format('LL'))
     : translateWithParameters('overview.started_on_x', momentDate.format('LL'));
 
   return (
-    <div className="overview-legend" title={tooltip} data-toggle="tooltip">
-      {translateWithParameters('overview.leak_period_x', leakPeriodLabel)}
-      <br />
-      <span className="note">{note}</span>
-    </div>
+    <Tooltip overlay={tooltip} placement="bottom">
+      <div className="overview-legend">
+        {translateWithParameters('overview.leak_period_x', leakPeriodLabel)}
+        <br />
+        <span className="note">{note}</span>
+      </div>
+    </Tooltip>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/LeakPeriodLegend-test.js b/server/sonar-web/src/main/js/apps/overview/components/__tests__/LeakPeriodLegend-test.js
index 9d5a585c783..251e20594bc 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/__tests__/LeakPeriodLegend-test.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/LeakPeriodLegend-test.js
@@ -28,7 +28,7 @@ describe('check note', () => {
       mode: 'days',
       parameter: '10'
     };
-    expect(shallow(<LeakPeriodLegend period={period} />).find('.note')).toMatchSnapshot();
+    expect(shallow(<LeakPeriodLegend period={period} />)).toMatchSnapshot();
   });
 
   it('date', () => {
diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/LeakPeriodLegend-test.js.snap b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/LeakPeriodLegend-test.js.snap
index 3a4dbbd9111..397016097b3 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/LeakPeriodLegend-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/LeakPeriodLegend-test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`check note 10 days 1`] = `
-<span
-  className="note"
+<div
+  className="overview-legend overview-legend-spaced-line"
 >
-  overview.last_analysis_x.4 years ago
-</span>
+  overview.leak_period_x.overview.period.days.10
+</div>
 `;
 
 exports[`check note date 1`] = `
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index 2db27b12117..39ca1605585 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -366,6 +366,10 @@
   transform: translateY(-4px);
 }
 
+.overview-legend-spaced-line {
+  padding: 14px 0 10px;
+}
+
 .overview-key {
   width: 100%;
   background-color: transparent !important;