SONAR-8372 Improve the leak period header on a project dashboard (#1651)

3 files changed, 156 insertions, 20 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 113568e1212..f2f88dc0f09 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
@@ -17,30 +17,65 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+// @flow
 import React from 'react';
 import moment from 'moment';
 import { getPeriodDate, getPeriodLabel } from '../../../helpers/periods';
 import { translateWithParameters } from '../../../helpers/l10n';
 
-const LeakPeriodLegend = ({ period }) => {
-  const leakPeriodLabel = getPeriodLabel(period);
-  const leakPeriodDate = getPeriodDate(period);
-
-  const momentDate = moment(leakPeriodDate);
-  const fromNow = momentDate.fromNow();
-  const tooltip = 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">
-          {translateWithParameters('overview.started_x', fromNow)}
-        </span>
-      </div>
-  );
+type DaysPeriod = {
+  date: string,
+  mode: 'days',
+  parameter: string
 };
 
-export default LeakPeriodLegend;
+type DatePeriod = {
+  date: string,
+  mode: 'date',
+  parameter: string
+};
+
+type VersionPeriod = {
+  date: string,
+  mode: 'version',
+  parameter: string
+};
+
+type PreviousAnalysisPeriod = {
+  date: string,
+  mode: 'previous_analysis'
+};
+
+type PreviousVersionPeriod = {
+  date: string,
+  mode: 'previous_version'
+};
+
+type Period = DaysPeriod | DatePeriod | VersionPeriod | PreviousAnalysisPeriod | PreviousVersionPeriod;
+
+export default class LeakPeriodLegend extends React.Component {
+  props: { period: Period };
+
+  render () {
+    const { period } = this.props;
+    const leakPeriodLabel = getPeriodLabel(period);
+    const leakPeriodDate = getPeriodDate(period);
+
+    const momentDate = moment(leakPeriodDate);
+    const fromNow = momentDate.fromNow();
+    const note = ['date', 'days'].includes(period.mode) ?
+        translateWithParameters('overview.last_analysis_x', fromNow) :
+        translateWithParameters('overview.started_x', fromNow);
+    const tooltip = ['date', 'days'].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>
+    );
+  }
+}
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
new file mode 100644
index 00000000000..124ce7224b1
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/LeakPeriodLegend-test.js
@@ -0,0 +1,67 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import LeakPeriodLegend from '../LeakPeriodLegend';
+
+describe('check note', () => {
+  it('10 days', () => {
+    const period = {
+      date: '2013-09-22T00:00:00+0200',
+      mode: 'days',
+      parameter: '10'
+    };
+    expect(shallow(<LeakPeriodLegend period={period}/>).find('.note')).toMatchSnapshot();
+  });
+
+  it('date', () => {
+    const period = {
+      date: '2013-09-22T00:00:00+0200',
+      mode: 'date',
+      parameter: '2013-01-01'
+    };
+    expect(shallow(<LeakPeriodLegend period={period}/>).find('.note')).toMatchSnapshot();
+  });
+
+  it('version', () => {
+    const period = {
+      date: '2013-09-22T00:00:00+0200',
+      mode: 'version',
+      parameter: '0.1'
+    };
+    expect(shallow(<LeakPeriodLegend period={period}/>).find('.note')).toMatchSnapshot();
+  });
+
+  it('previous_version', () => {
+    const period = {
+      date: '2013-09-22T00:00:00+0200',
+      mode: 'previous_version'
+    };
+    expect(shallow(<LeakPeriodLegend period={period}/>).find('.note')).toMatchSnapshot();
+  });
+
+  it('previous_analysis', () => {
+    const period = {
+      date: '2013-09-22T00:00:00+0200',
+      mode: 'previous_analysis'
+    };
+    expect(shallow(<LeakPeriodLegend period={period}/>).find('.note')).toMatchSnapshot();
+  });
+});
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
new file mode 100644
index 00000000000..120a40ce1b9
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/LeakPeriodLegend-test.js.snap
@@ -0,0 +1,34 @@
+exports[`check note 10 days 1`] = `
+<span
+  className="note">
+  overview.last_analysis_x.3 years ago
+</span>
+`;
+
+exports[`check note date 1`] = `
+<span
+  className="note">
+  overview.last_analysis_x.3 years ago
+</span>
+`;
+
+exports[`check note previous_analysis 1`] = `
+<span
+  className="note">
+  overview.started_x.3 years ago
+</span>
+`;
+
+exports[`check note previous_version 1`] = `
+<span
+  className="note">
+  overview.started_x.3 years ago
+</span>
+`;
+
+exports[`check note version 1`] = `
+<span
+  className="note">
+  overview.started_x.3 years ago
+</span>
+`;