SONAR-11653 Update New Code Period display for manual baselines

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;
     }

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;
     }

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 || '');

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -2458,6 +2458,7 @@ overview.period.previous_analysis=since previous analysis
 overview.period.days=last {0} days
 overview.period.version=since {0}
 overview.period.date=after {0}
+overview.period.manual_baseline=after {0}
 
 overview.gate.ERROR=Failed
 overview.gate.WARN=Warning