From de390c4a3cf6a30f11a22bb99726900a42137477 Mon Sep 17 00:00:00 2001
From: Pascal Mugnier <pascal.mugnier@sonarsource.com>
Date: Wed, 11 Apr 2018 09:06:38 +0200
Subject: [PATCH] GOV-265 Application leak header should reflect oldest leak
 start

---
 .../ApplicationLeakPeriodLegend.tsx           | 32 +++++++++++++++----
 .../ApplicationLeakPeriodLegend-test.tsx      |  1 -
 .../ApplicationLeakPeriodLegend-test.tsx.snap | 27 ++++++++++++----
 .../resources/org/sonar/l10n/core.properties  |  1 +
 4 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/overview/components/ApplicationLeakPeriodLegend.tsx b/server/sonar-web/src/main/js/apps/overview/components/ApplicationLeakPeriodLegend.tsx
index 4ff9c39f670..eb230682fcb 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/ApplicationLeakPeriodLegend.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/ApplicationLeakPeriodLegend.tsx
@@ -18,10 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as classNames from 'classnames';
+import { sortBy } from 'lodash';
 import Tooltip from '../../../components/controls/Tooltip';
 import DateTooltipFormatter from '../../../components/intl/DateTooltipFormatter';
 import { getApplicationLeak } from '../../../api/application';
-import { translate } from '../../../helpers/l10n';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
+import DateFromNow from '../../../components/intl/DateFromNow';
 
 interface Props {
   component: string;
@@ -37,6 +40,7 @@ export default class ApplicationLeakPeriodLegend extends React.Component<Props,
 
   componentDidMount() {
     this.mounted = true;
+    this.fetchLeaks();
   }
 
   componentWillReceiveProps(nextProps: Props) {
@@ -54,12 +58,16 @@ export default class ApplicationLeakPeriodLegend extends React.Component<Props,
       getApplicationLeak(this.props.component).then(
         leaks => {
           if (this.mounted) {
-            this.setState({ leaks });
+            this.setState({
+              leaks: sortBy(leaks, value => {
+                return new Date(value.date);
+              })
+            });
           }
         },
         () => {
           if (this.mounted) {
-            this.setState({ leaks: [] });
+            this.setState({ leaks: undefined });
           }
         }
       );
@@ -80,10 +88,22 @@ export default class ApplicationLeakPeriodLegend extends React.Component<Props,
     );
 
   render() {
+    const leak = this.state.leaks && this.state.leaks.length > 0 ? this.state.leaks[0] : undefined;
     return (
-      <Tooltip onShow={this.fetchLeaks} overlay={this.renderOverlay()}>
-        <div className="overview-legend  overview-legend-spaced-line">
-          {translate('issues.leak_period')}
+      <Tooltip overlay={this.renderOverlay()}>
+        <div className={classNames('overview-legend', { 'overview-legend-spaced-line': !leak })}>
+          {translate('issues.max_leak_period')}:{' '}
+          {leak && (
+            <>
+              <DateFromNow date={leak.date}>
+                {fromNow => <span>{translateWithParameters('overview.started_x', fromNow)}</span>}
+              </DateFromNow>
+              <br />
+              <span className="note">
+                {translate('from')}:{leak.projectName}
+              </span>
+            </>
+          )}
         </div>
       </Tooltip>
     );
diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/ApplicationLeakPeriodLegend-test.tsx b/server/sonar-web/src/main/js/apps/overview/components/__tests__/ApplicationLeakPeriodLegend-test.tsx
index f9c36d4c81c..27a71ac1851 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/__tests__/ApplicationLeakPeriodLegend-test.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/ApplicationLeakPeriodLegend-test.tsx
@@ -35,7 +35,6 @@ it('renders', async () => {
   const wrapper = shallow(<ApplicationLeakPeriodLegend component="foo" />);
   expect(wrapper).toMatchSnapshot();
 
-  wrapper.find('Tooltip').prop<Function>('onShow')();
   await waitAndUpdate(wrapper);
   expect(wrapper).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/ApplicationLeakPeriodLegend-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/ApplicationLeakPeriodLegend-test.tsx.snap
index f873abb317d..6a5804570eb 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/ApplicationLeakPeriodLegend-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/ApplicationLeakPeriodLegend-test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`renders 1`] = `
 <Tooltip
-  onShow={[Function]}
   overlay={
     <i
       className="spinner spinner-margin"
@@ -10,16 +9,17 @@ exports[`renders 1`] = `
   }
 >
   <div
-    className="overview-legend  overview-legend-spaced-line"
+    className="overview-legend overview-legend-spaced-line"
   >
-    issues.leak_period
+    issues.max_leak_period
+    :
+     
   </div>
 </Tooltip>
 `;
 
 exports[`renders 2`] = `
 <Tooltip
-  onShow={[Function]}
   overlay={
     <ul
       className="text-left"
@@ -42,9 +42,24 @@ exports[`renders 2`] = `
   }
 >
   <div
-    className="overview-legend  overview-legend-spaced-line"
+    className="overview-legend"
   >
-    issues.leak_period
+    issues.max_leak_period
+    :
+     
+    <React.Fragment>
+      <DateFromNow
+        date="2017-01-01T11:39:03+0100"
+      />
+      <br />
+      <span
+        className="note"
+      >
+        from
+        :
+        Foo
+      </span>
+    </React.Fragment>
   </div>
 </Tooltip>
 `;
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index c27b6630b33..70ac03a8978 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -618,6 +618,7 @@ issues.to_navigate=to navigate
 issues.to_navigate_issue_locations=to navigate issue locations
 issues.to_switch_flows=to switch flows
 issues.leak_period=Leak Period
+issues.max_leak_period=Max Leak Period
 issues.my_issues=My Issues
 issues.no_my_issues=There are no issues assigned to you.
 issues.no_issues=No Issues. Hooray!
-- 
2.39.5