From: Ismail Cherri Date: Mon, 6 May 2024 09:07:57 +0000 (+0200) Subject: SONAR-22168 Align measure component X-Git-Tag: 10.6.0.92116~136 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=de54bfec2a60bff2a06606ea02fa4444172e8931;p=sonarqube.git SONAR-22168 Align measure component --- 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/Measure.tsx b/server/sonar-web/src/main/js/components/measure/Measure.tsx deleted file mode 100644 index c76051540ff..00000000000 --- a/server/sonar-web/src/main/js/components/measure/Measure.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * 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 { 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'; - -interface Props { - className?: string; - decimals?: number; - metricKey: string; - metricType: string; - small?: boolean; - value: string | number | undefined; - ratingComponent?: JSX.Element; -} - -export default function Measure({ - className, - decimals, - metricKey, - metricType, - small, - value, - ratingComponent, -}: Props) { - if (value === undefined) { - return —; - } - - if (metricType === MetricType.Level) { - const formatted = formatMeasure(value, MetricType.Level); - const ariaLabel = translateWithParameters('overview.quality_gate_x', formatted); - - return ( - <> - - {formatted} - - ); - } - - if (metricType !== MetricType.Rating) { - const formattedValue = formatMeasure(value, metricType, { - decimals, - omitExtraDecimalZeros: metricType === MetricType.Percent, - }); - return {formattedValue ?? '—'}; - } - - const tooltip = ; - const rating = ratingComponent ?? ( - - ); - - return ( - - {rating} - - ); -} 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/sonar-aligned/components/measure/Measure.tsx b/server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx new file mode 100644 index 00000000000..b36e8009bd5 --- /dev/null +++ b/server/sonar-web/src/main/js/sonar-aligned/components/measure/Measure.tsx @@ -0,0 +1,112 @@ +/* + * SonarQube + * Copyright (C) 2009-2024 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +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 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; +} + +export default function Measure({ + className, + badgeSize, + decimals, + fontClassName, + metricKey, + metricType, + small, + value, +}: Readonly) { + const intl = useIntl(); + const classNameWithFont = classNames(className, fontClassName); + + if (value === undefined) { + return ( + + — + + ); + } + + if (metricType === MetricType.Level) { + const formatted = formatMeasure(value, MetricType.Level); + const ariaLabel = intl.formatMessage({ id: 'overview.quality_gate_x' }, { '0': formatted }); + + return ( + <> + + {formatted} + + ); + } + + if (metricType !== MetricType.Rating) { + const formattedValue = formatMeasure(value, metricType, { + decimals, + omitExtraDecimalZeros: metricType === MetricType.Percent, + }); + return {formattedValue ?? '—'}; + } + + const tooltip = ; + const rating = ( + + ); + + return ( + + {rating} + + ); +}