From de54bfec2a60bff2a06606ea02fa4444172e8931 Mon Sep 17 00:00:00 2001 From: Ismail Cherri Date: Mon, 6 May 2024 11:07:57 +0200 Subject: [PATCH] SONAR-22168 Align measure component --- .../apps/code/components/ComponentMeasure.tsx | 2 +- .../components/MeasureHeader.tsx | 22 ++------- .../drilldown/MeasureCell.tsx | 29 ++---------- .../sidebar/SubnavigationMeasureValue.tsx | 20 ++------ .../components/project-card/ProjectCard.tsx | 2 +- .../project-card/ProjectCardMeasures.tsx | 2 +- .../components/HotspotSidebarHeader.tsx | 2 +- .../components/measure/MeasureIndicator.tsx | 17 ++----- .../components/measure/Measure.tsx | 47 +++++++++++++------ 9 files changed, 50 insertions(+), 93 deletions(-) rename server/sonar-web/src/main/js/{ => sonar-aligned}/components/measure/Measure.tsx (65%) diff --git a/server/sonar-web/src/main/js/apps/code/components/ComponentMeasure.tsx b/server/sonar-web/src/main/js/apps/code/components/ComponentMeasure.tsx index 800af9d358f..d9d9b3251f3 100644 --- a/server/sonar-web/src/main/js/apps/code/components/ComponentMeasure.tsx +++ b/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, diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx index c0ee151f811..aaed001569c 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx +++ b/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) { metricKey={metric.key} metricType={metric.type} value={measureValue} - ratingComponent={ - - } + badgeSize="sm" /> diff --git a/server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx b/server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx index 11518a5c490..2768f777df9 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/drilldown/MeasureCell.tsx +++ b/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) { 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 ( - - } - /> + ); } diff --git a/server/sonar-web/src/main/js/apps/component-measures/sidebar/SubnavigationMeasureValue.tsx b/server/sonar-web/src/main/js/apps/component-measures/sidebar/SubnavigationMeasureValue.tsx index f287b316657..9079b998aca 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/sidebar/SubnavigationMeasureValue.tsx +++ b/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) { const isDiff = isDiffMetric(measure.metric.key); const value = isDiff ? measure.leak : measure.value; - const formatted = formatMeasure(value, MetricType.Rating); return ( ) id={`measure-${measure.metric.key}-${isDiff ? 'leak' : 'value'}`} > - } + badgeSize="xs" metricKey={measure.metric.key} metricType={measure.metric.type} small diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx index 86f41cbe602..9a2b27300cb 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx +++ b/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'; diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx index c8f9896b5c3..b34bdd750f6 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardMeasures.tsx +++ b/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'; diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx index eda6457439b..1a587ce308b 100644 --- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx +++ b/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'; diff --git a/server/sonar-web/src/main/js/components/measure/MeasureIndicator.tsx b/server/sonar-web/src/main/js/components/measure/MeasureIndicator.tsx index 19e60b39226..74b8e77154a 100644 --- a/server/sonar-web/src/main/js/components/measure/MeasureIndicator.tsx +++ b/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 = ( - - ); - - return ; + return ; } diff --git a/server/sonar-web/src/main/js/components/measure/Measure.tsx b/server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx similarity index 65% rename from server/sonar-web/src/main/js/components/measure/Measure.tsx rename to server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx index c76051540ff..b36e8009bd5 100644 --- a/server/sonar-web/src/main/js/components/measure/Measure.tsx +++ b/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) { + const intl = useIntl(); + const classNameWithFont = classNames(className, fontClassName); + if (value === undefined) { - return —; + return ( + + — + + ); } 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 {formattedValue ?? '—'}; + return {formattedValue ?? '—'}; } const tooltip = ; - const rating = ratingComponent ?? ( + const rating = ( -- 2.39.5