SONAR-21076 Fix missing creation date facet tooltip formatting

2 files changed, 12 insertions, 15 deletions

diff --git a/server/sonar-web/design-system/src/components/BarChart.tsx b/server/sonar-web/design-system/src/components/BarChart.tsx
index 91a01174c97..135ae7359ef 100644
--- a/server/sonar-web/design-system/src/components/BarChart.tsx
+++ b/server/sonar-web/design-system/src/components/BarChart.tsx
@@ -24,7 +24,7 @@ import { themeColor } from '../helpers';
 
 interface DataPoint {
   description: string;
-  tooltip?: string | JSX.Element;
+  tooltip?: string;
   x: number;
   y: number;
 }
@@ -81,7 +81,7 @@ function Xvalues<T>(
   props: {
     xScale: ScaleBand<number>;
     yScale: ScaleLinear<number, number>;
-  } & Pick<Props<T>, 'data' | 'xValues' | 'onBarClick'>
+  } & Pick<Props<T>, 'data' | 'xValues' | 'onBarClick'>,
 ) {
   const { data, xValues = [], xScale, yScale } = props;
 
@@ -118,7 +118,7 @@ function Bars<T>(
   props: {
     xScale: ScaleBand<number>;
     yScale: ScaleLinear<number, number>;
-  } & Pick<Props<T>, 'data' | 'barsWidth' | 'onBarClick'>
+  } & Pick<Props<T>, 'data' | 'barsWidth' | 'onBarClick'>,
 ) {
   const { barsWidth, data, xScale, yScale } = props;
 
diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
index 5d564d98cdd..89e387ee145 100644
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/CreationDateFacet.tsx
@@ -123,29 +123,26 @@ export class CreationDateFacetClass extends React.PureComponent<Props & WrappedC
         endDate = createdBefore ? parseDate(createdBefore) : undefined;
       }
 
-      const tooltipEndDate = endDate || new Date();
-      const tooltip = (
-        // eslint-disable-next-line react/jsx-fragments
-        <React.Fragment>
-          {formatMeasure(stats[start], MetricType.ShortInteger)}
-          <br />
-          {formatDate(startDate, longFormatterOption)}
-          {!isSameDay(tooltipEndDate, startDate) &&
-            ` - ${formatDate(tooltipEndDate, longFormatterOption)}`}
-        </React.Fragment>
-      );
+      const tooltipEndDate = endDate ?? new Date();
       const description = translateWithParameters(
         'issues.facet.createdAt.bar_description',
         formatMeasure(stats[start], MetricType.ShortInteger),
         formatDate(startDate, longFormatterOption),
         formatDate(tooltipEndDate, longFormatterOption),
       );
+      let tooltip = `${formatMeasure(stats[start], MetricType.ShortInteger)} ${formatDate(
+        startDate,
+        longFormatterOption,
+      )}`;
+      if (!isSameDay(tooltipEndDate, startDate)) {
+        tooltip += ` - ${formatDate(tooltipEndDate, longFormatterOption)}`;
+      }
 
       return {
         createdAfter: startDate,
         createdBefore: endDate,
-        tooltip,
         description,
+        tooltip,
         x: index,
         y: stats[start],
       };