SONAR-11653 Update New Code Period display for manual baselines

3 files changed, 38 insertions, 4 deletions

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx
index 1693982ee5f..2a428ed28ef 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx
@@ -21,7 +21,10 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import { injectIntl, InjectedIntlProps } from 'react-intl';
 import DateFromNow from '../../../components/intl/DateFromNow';
-import DateFormatter, { longFormatterOption } from '../../../components/intl/DateFormatter';
+import DateFormatter, {
+  formatterOption,
+  longFormatterOption
+} from '../../../components/intl/DateFormatter';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import Tooltip from '../../../components/controls/Tooltip';
 import { getPeriodLabel, getPeriodDate } from '../../../helpers/periods';
@@ -39,6 +42,14 @@ export class LeakPeriodLegend extends React.PureComponent<Props & InjectedIntlPr
     return this.props.intl.formatDate(date, longFormatterOption);
   };
 
+  formatDateTime = (date: string) => {
+    return this.props.intl.formatTime(date, {
+      hour: 'numeric',
+      minute: 'numeric',
+      ...formatterOption
+    });
+  };
+
   render() {
     const { className, component, period } = this.props;
     const leakClass = classNames('domain-measures-header leak-box', className);
@@ -46,7 +57,10 @@ export class LeakPeriodLegend extends React.PureComponent<Props & InjectedIntlPr
       return <div className={leakClass}>{translate('issues.new_code_period')}</div>;
     }
 
-    const leakPeriodLabel = getPeriodLabel(period, this.formatDate);
+    const leakPeriodLabel = getPeriodLabel(
+      period,
+      period.mode === 'manual_baseline' ? this.formatDateTime : this.formatDate
+    );
     if (!leakPeriodLabel) {
       return null;
     }
diff --git a/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.tsx b/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.tsx
index ec6590d6b7b..f3eecba08ee 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/LeakPeriodLegend.tsx
@@ -20,7 +20,10 @@
 import * as React from 'react';
 import { injectIntl, InjectedIntlProps } from 'react-intl';
 import DateFromNow from '../../../components/intl/DateFromNow';
-import DateFormatter, { longFormatterOption } from '../../../components/intl/DateFormatter';
+import DateFormatter, {
+  formatterOption,
+  longFormatterOption
+} from '../../../components/intl/DateFormatter';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import Tooltip from '../../../components/controls/Tooltip';
 import { getPeriodDate, getPeriodLabel } from '../../../helpers/periods';
@@ -36,9 +39,20 @@ export class LeakPeriodLegend extends React.PureComponent<Props & InjectedIntlPr
     return this.props.intl.formatDate(date, longFormatterOption);
   };
 
+  formatDateTime = (date: string) => {
+    return this.props.intl.formatTime(date, {
+      hour: 'numeric',
+      minute: 'numeric',
+      ...formatterOption
+    });
+  };
+
   render() {
     const { period } = this.props;
-    const leakPeriodLabel = getPeriodLabel(period, this.formatDate);
+    const leakPeriodLabel = getPeriodLabel(
+      period,
+      period.mode === 'manual_baseline' ? this.formatDateTime : this.formatDate
+    );
     if (!leakPeriodLabel) {
       return null;
     }
diff --git a/server/sonar-web/src/main/js/helpers/periods.ts b/server/sonar-web/src/main/js/helpers/periods.ts
index 6fd33a9b57a..7ac2aec2245 100644
--- a/server/sonar-web/src/main/js/helpers/periods.ts
+++ b/server/sonar-web/src/main/js/helpers/periods.ts
@@ -46,6 +46,12 @@ export function getPeriodLabel(
 
   if (period.mode === 'date' && parameter) {
     parameter = dateFormatter(parameter);
+  } else if (period.mode === 'manual_baseline') {
+    if (!parameter) {
+      parameter = dateFormatter(period.date);
+    } else {
+      return translateWithParameters('overview.period.previous_version', parameter);
+    }
   }
 
   return translateWithParameters(`overview.period.${period.mode}`, parameter || '');