SONAR-22168 Align measure component

server/sonar-web/src/main/js/apps/code/components/ComponentMeasure.tsx

@@ -26,10 +26,10 @@ import {
   RatingEnum,
 } from 'design-system';
 import * as React from 'react';
+import Measure from '~sonar-aligned/components/measure/Measure';
 import { formatMeasure } from '~sonar-aligned/helpers/measures';
 import { Status } from '~sonar-aligned/types/common';
 import { MetricKey, MetricType } from '~sonar-aligned/types/metrics';
-import Measure from '../../../components/measure/Measure';
 import { getLeakValue } from '../../../components/measure/utils';
 import {
   CCT_SOFTWARE_QUALITY_METRICS,

server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx

@@ -19,15 +19,13 @@
  */
 import { LinkStandalone } from '@sonarsource/echoes-react';
 import classNames from 'classnames';
-import { MetricsRatingBadge, RatingLabel } from 'design-system';
 import * as React from 'react';
-import { formatMeasure } from '~sonar-aligned/helpers/measures';
+import Measure from '~sonar-aligned/components/measure/Measure';
 import { ComponentQualifier } from '~sonar-aligned/types/component';
-import { MetricKey, MetricType } from '~sonar-aligned/types/metrics';
+import { MetricKey } from '~sonar-aligned/types/metrics';
 import LanguageDistribution from '../../../components/charts/LanguageDistribution';
 import Tooltip from '../../../components/controls/Tooltip';
-import Measure from '../../../components/measure/Measure';
-import { getLocalizedMetricName, translate, translateWithParameters } from '../../../helpers/l10n';
+import { getLocalizedMetricName, translate } from '../../../helpers/l10n';
 import { isDiffMetric } from '../../../helpers/measures';
 import { getMeasureHistoryUrl } from '../../../helpers/urls';
 import { BranchLike } from '../../../types/branch-like';
@@ -69,19 +67,7 @@ export default function MeasureHeader(props: Readonly<Props>) {
               metricKey={metric.key}
               metricType={metric.type}
               value={measureValue}
-              ratingComponent={
-                <MetricsRatingBadge
-                  label={
-                    measureValue
-                      ? translateWithParameters(
-                          'metric.has_rating_X',
-                          formatMeasure(measureValue, MetricType.Rating),
-                        )
-                      : translate('metric.no_rating')
-                  }
-                  rating={formatMeasure(measureValue, MetricType.Rating) as RatingLabel}
-                />
-              }
+              badgeSize="sm"
             />
           </div>
 

server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx

@@ -17,12 +17,9 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { MetricsRatingBadge, NumericalCell, RatingLabel } from 'design-system';
+import { NumericalCell } from 'design-system';
 import * as React from 'react';
-import { formatMeasure } from '~sonar-aligned/helpers/measures';
-import { MetricType } from '~sonar-aligned/types/metrics';
-import Measure from '../../../components/measure/Measure';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
+import Measure from '~sonar-aligned/components/measure/Measure';
 import { getCCTMeasureValue, isDiffMetric } from '../../../helpers/measures';
 import { ComponentMeasureEnhanced, MeasureEnhanced, Metric } from '../../../types/types';
 
@@ -32,7 +29,7 @@ interface Props {
   metric: Metric;
 }
 
-export default function MeasureCell({ component, measure, metric }: Props) {
+export default function MeasureCell({ component, measure, metric }: Readonly<Props>) {
   const getValue = (item: { leak?: string; value?: string }) =>
     isDiffMetric(metric.key) ? item.leak : item.value;
 
@@ -41,25 +38,7 @@ export default function MeasureCell({ component, measure, metric }: Props) {
 
   return (
     <NumericalCell className="sw-py-3">
-      <Measure
-        metricKey={metric.key}
-        metricType={metric.type}
-        value={value}
-        small
-        ratingComponent={
-          <MetricsRatingBadge
-            label={
-              value
-                ? translateWithParameters(
-                    'metric.has_rating_X',
-                    formatMeasure(value, MetricType.Rating),
-                  )
-                : translate('metric.no_rating')
-            }
-            rating={formatMeasure(value, MetricType.Rating) as RatingLabel}
-          />
-        }
-      />
+      <Measure metricKey={metric.key} metricType={metric.type} value={value} small />
     </NumericalCell>
   );
 }

server/sonar-web/src/main/js/apps/component-measures/sidebar/SubnavigationMeasureValue.tsx

@@ -17,12 +17,9 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { MetricsRatingBadge, Note, RatingLabel } from 'design-system';
+import { Note } from 'design-system';
 import React from 'react';
-import { formatMeasure } from '~sonar-aligned/helpers/measures';
-import { MetricType } from '~sonar-aligned/types/metrics';
-import Measure from '../../../components/measure/Measure';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
+import Measure from '~sonar-aligned/components/measure/Measure';
 import { isDiffMetric } from '../../../helpers/measures';
 import { MeasureEnhanced } from '../../../types/types';
 
@@ -33,7 +30,6 @@ interface Props {
 export default function SubnavigationMeasureValue({ measure }: Readonly<Props>) {
   const isDiff = isDiffMetric(measure.metric.key);
   const value = isDiff ? measure.leak : measure.value;
-  const formatted = formatMeasure(value, MetricType.Rating);
 
   return (
     <Note
@@ -41,17 +37,7 @@ export default function SubnavigationMeasureValue({ measure }: Readonly<Props>)
       id={`measure-${measure.metric.key}-${isDiff ? 'leak' : 'value'}`}
     >
       <Measure
-        ratingComponent={
-          <MetricsRatingBadge
-            size="xs"
-            label={
-              value
-                ? translateWithParameters('metric.has_rating_X', formatted)
-                : translate('metric.no_rating')
-            }
-            rating={formatted as RatingLabel}
-          />
-        }
+        badgeSize="xs"
         metricKey={measure.metric.key}
         metricType={measure.metric.type}
         small

server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx

@@ -37,6 +37,7 @@ import {
 import { isEmpty } from 'lodash';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import Measure from '~sonar-aligned/components/measure/Measure';
 import { formatMeasure } from '~sonar-aligned/helpers/measures';
 import { Status } from '~sonar-aligned/types/common';
 import { ComponentQualifier } from '~sonar-aligned/types/component';
@@ -45,7 +46,6 @@ import Favorite from '../../../../components/controls/Favorite';
 import Tooltip from '../../../../components/controls/Tooltip';
 import DateFromNow from '../../../../components/intl/DateFromNow';
 import DateTimeFormatter from '../../../../components/intl/DateTimeFormatter';
-import Measure from '../../../../components/measure/Measure';
 import { translate, translateWithParameters } from '../../../../helpers/l10n';
 import { isDefined } from '../../../../helpers/types';
 import { getProjectUrl } from '../../../../helpers/urls';

server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx

@@ -26,9 +26,9 @@ import {
   RatingLabel,
 } from 'design-system';
 import * as React from 'react';
+import Measure from '~sonar-aligned/components/measure/Measure';
 import { ComponentQualifier } from '~sonar-aligned/types/component';
 import { MetricKey, MetricType } from '~sonar-aligned/types/metrics';
-import Measure from '../../../../components/measure/Measure';
 import { duplicationRatingConverter } from '../../../../components/measure/utils';
 import { translate } from '../../../../helpers/l10n';
 import { formatRating } from '../../../../helpers/measures';

server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx

@@ -32,12 +32,12 @@ import {
 } from 'design-system';
 import * as React from 'react';
 import HelpTooltip from '~sonar-aligned/components/controls/HelpTooltip';
+import Measure from '~sonar-aligned/components/measure/Measure';
 import { isBranch } from '~sonar-aligned/helpers/branch-like';
 import { MetricKey, MetricType } from '~sonar-aligned/types/metrics';
 import withComponentContext from '../../../app/components/componentContext/withComponentContext';
 import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext';
 import Tooltip from '../../../components/controls/Tooltip';
-import Measure from '../../../components/measure/Measure';
 import { PopupPlacement } from '../../../components/ui/popups';
 import { translate } from '../../../helpers/l10n';
 import { BranchLike } from '../../../types/branch-like';

server/sonar-web/src/main/js/components/measure/MeasureIndicator.tsx

@@ -17,16 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import {
-  CoverageIndicator,
-  DuplicationsIndicator,
-  MetricsRatingBadge,
-  RatingEnum,
-} from 'design-system';
+import { CoverageIndicator, DuplicationsIndicator } from 'design-system';
 import * as React from 'react';
-import { formatMeasure } from '~sonar-aligned/helpers/measures';
+import Measure from '~sonar-aligned/components/measure/Measure';
 import { MetricKey, MetricType } from '~sonar-aligned/types/metrics';
-import Measure from './Measure';
 import { duplicationRatingConverter } from './utils';
 
 interface Props {
@@ -61,10 +55,5 @@ export default function MeasureIndicator(props: Props) {
     );
   }
 
-  const ratingFormatted = formatMeasure(value, MetricType.Rating);
-  const ratingComponent = (
-    <MetricsRatingBadge rating={ratingFormatted as RatingEnum} label={ratingFormatted} />
-  );
-
-  return <Measure {...props} ratingComponent={ratingComponent} />;
+  return <Measure {...props} badgeSize="sm" />;
 }

server/sonar-web/src/main/js/components/measure/Measure.tsx → server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx

@@ -17,41 +17,55 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { MetricsRatingBadge, QualityGateIndicator, RatingLabel } from 'design-system';
-import * as React from 'react';
+import classNames from 'classnames';
+import { MetricsRatingBadge, QualityGateIndicator, RatingLabel, Tooltip } from 'design-system';
+import React from 'react';
+import { useIntl } from 'react-intl';
 import { formatMeasure } from '~sonar-aligned/helpers/measures';
 import { Status } from '~sonar-aligned/types/common';
 import { MetricType } from '~sonar-aligned/types/metrics';
-import Tooltip from '../../components/controls/Tooltip';
-import { translate, translateWithParameters } from '../../helpers/l10n';
-import RatingTooltipContent from './RatingTooltipContent';
+import RatingTooltipContent from '../../../components/measure/RatingTooltipContent';
 
 interface Props {
   className?: string;
+  badgeSize?: 'xs' | 'sm' | 'md';
   decimals?: number;
+  fontClassName?: `sw-body-${string}` | `sw-heading-lg`;
   metricKey: string;
   metricType: string;
   small?: boolean;
   value: string | number | undefined;
-  ratingComponent?: JSX.Element;
 }
 
 export default function Measure({
   className,
+  badgeSize,
   decimals,
+  fontClassName,
   metricKey,
   metricType,
   small,
   value,
-  ratingComponent,
-}: Props) {
+}: Readonly<Props>) {
+  const intl = useIntl();
+  const classNameWithFont = classNames(className, fontClassName);
+
   if (value === undefined) {
-    return <span className={className}>—</span>;
+    return (
+      <span
+        className={classNameWithFont}
+        aria-label={
+          metricType === MetricType.Rating ? intl.formatMessage({ id: 'metric.no_rating' }) : ''
+        }
+      >
+        —
+      </span>
+    );
   }
 
   if (metricType === MetricType.Level) {
     const formatted = formatMeasure(value, MetricType.Level);
-    const ariaLabel = translateWithParameters('overview.quality_gate_x', formatted);
+    const ariaLabel = intl.formatMessage({ id: 'overview.quality_gate_x' }, { '0': formatted });
 
     return (
       <>
@@ -71,17 +85,20 @@ export default function Measure({
       decimals,
       omitExtraDecimalZeros: metricType === MetricType.Percent,
     });
-    return <span className={className}>{formattedValue ?? '—'}</span>;
+    return <span className={classNameWithFont}>{formattedValue ?? '—'}</span>;
   }
 
   const tooltip = <RatingTooltipContent metricKey={metricKey} value={value} />;
-  const rating = ratingComponent ?? (
+  const rating = (
     <MetricsRatingBadge
-      size={small ? 'sm' : 'md'}
+      size={badgeSize ?? small ? 'sm' : 'md'}
       label={
         value
-          ? translateWithParameters('metric.has_rating_X', formatMeasure(value, MetricType.Rating))
-          : translate('metric.no_rating')
+          ? intl.formatMessage(
+              { id: 'metric.has_rating_X' },
+              { '0': formatMeasure(value, MetricType.Rating) },
+            )
+          : intl.formatMessage({ id: 'metric.no_rating' })
       }
       rating={formatMeasure(value, MetricType.Rating) as RatingLabel}
     />