From 512c7e859f9279bab0dba9331919546cf20846de Mon Sep 17 00:00:00 2001 From: 7PH Date: Thu, 25 Jan 2024 10:44:08 +0100 Subject: [PATCH] SONAR-21455 Fix software quality impact measures in branch overview page --- .../design-system/src/components/Card.tsx | 4 + .../design-system/src/components/Link.tsx | 6 ++ .../design-system/src/theme/light.ts | 3 +- server/sonar-web/src/main/js/api/measures.ts | 45 ++++------ .../branches/SoftwareImpactMeasureCard.tsx | 13 +-- .../branches/SoftwareImpactMeasureRating.tsx | 75 ++-------------- .../branches/SoftwareImpactRatingTooltip.tsx | 88 +++++++++++++++++++ 7 files changed, 131 insertions(+), 103 deletions(-) create mode 100644 server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactRatingTooltip.tsx diff --git a/server/sonar-web/design-system/src/components/Card.tsx b/server/sonar-web/design-system/src/components/Card.tsx index 43ef238a2e3..3093905fa9f 100644 --- a/server/sonar-web/design-system/src/components/Card.tsx +++ b/server/sonar-web/design-system/src/components/Card.tsx @@ -56,6 +56,10 @@ const CardStyled = styled.div` ${tw`sw-rounded-1`}; `; +const LightGreyCardStyled = styled(CardStyled)` + border: ${themeBorder('default')}; +`; + const GreyCardStyled = styled(CardStyled)` border: ${themeBorder('default', 'almCardBorder')}; `; diff --git a/server/sonar-web/design-system/src/components/Link.tsx b/server/sonar-web/design-system/src/components/Link.tsx index 38ad2a351ab..edd9f192a40 100644 --- a/server/sonar-web/design-system/src/components/Link.tsx +++ b/server/sonar-web/design-system/src/components/Link.tsx @@ -154,6 +154,12 @@ export const NakedLink = styled(BaseLink)` border-bottom: none; font-weight: 600; color: ${themeColor('linkNaked')}; + + &:hover, + &:focus, + &:active { + color: ${themeColor('linkActive')}; + } `; export const DrilldownLink = styled(StyledBaseLink)` diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts index 79a6cab6ea9..e20f3b914cf 100644 --- a/server/sonar-web/design-system/src/theme/light.ts +++ b/server/sonar-web/design-system/src/theme/light.ts @@ -522,6 +522,7 @@ export const lightTheme = { // project projectCardBackground: COLORS.white, projectCardBorder: COLORS.blueGrey[100], + projectLightGreyCardBorder: COLORS.grey[50], // overview overviewCardDefaultIcon: secondary.light, @@ -531,7 +532,7 @@ export const lightTheme = { overviewCardSuccessIcon: COLORS.green[200], // overview software impact breakdown - overviewSoftwareImpactSeverityNeutral: COLORS.blueGrey[50], + overviewSoftwareImpactSeverityNeutral: [247, 249, 252], overviewSoftwareImpactSeverityHigh: COLORS.red[100], overviewSoftwareImpactSeverityMedium: COLORS.yellow[100], overviewSoftwareImpactSeverityLow: COLORS.blue[100], diff --git a/server/sonar-web/src/main/js/api/measures.ts b/server/sonar-web/src/main/js/api/measures.ts index b701d1cbe65..68c784baabe 100644 --- a/server/sonar-web/src/main/js/api/measures.ts +++ b/server/sonar-web/src/main/js/api/measures.ts @@ -96,15 +96,12 @@ export async function getMeasuresWithPeriodAndMetrics( }); result.component.measures?.push({ metric: MetricKey.maintainability_issues, - period: { - index: 0, - value: JSON.stringify({ - total: 3, - high: 1, - medium: 1, - low: 1, - }), - }, + value: JSON.stringify({ + total: 3, + high: 1, + medium: 1, + low: 1, + }), }); } if (metrics.includes(MetricKey.reliability_issues)) { @@ -121,15 +118,12 @@ export async function getMeasuresWithPeriodAndMetrics( }); result.component.measures?.push({ metric: MetricKey.reliability_issues, - period: { - index: 0, - value: JSON.stringify({ - total: 2, - high: 0, - medium: 1, - low: 1, - }), - }, + value: JSON.stringify({ + total: 2, + high: 0, + medium: 1, + low: 1, + }), }); } if (metrics.includes(MetricKey.security_issues)) { @@ -146,15 +140,12 @@ export async function getMeasuresWithPeriodAndMetrics( }); result.component.measures?.push({ metric: MetricKey.security_issues, - period: { - index: 0, - value: JSON.stringify({ - total: 1, - high: 0, - medium: 0, - low: 1, - }), - }, + value: JSON.stringify({ + total: 1, + high: 0, + medium: 0, + low: 1, + }), }); } return result; diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx index c7a5de8085c..e9a19944674 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureCard.tsx @@ -17,8 +17,7 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import styled from '@emotion/styled'; -import { Card, CardSeparator, NakedLink, TextBold, TextSubdued, themeBorder } from 'design-system'; +import { BasicSeparator, LightGreyCard, NakedLink, TextBold, TextSubdued } from 'design-system'; import * as React from 'react'; import { useIntl } from 'react-intl'; import { DEFAULT_ISSUES_QUERY } from '../../../components/shared/utils'; @@ -78,9 +77,9 @@ export function SoftwareImpactMeasureCard(props: Readonly + - +
- + ); } -const StyledCard = styled(Card)` - border: ${themeBorder('default')}; -`; - export default SoftwareImpactMeasureCard; diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureRating.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureRating.tsx index 7099e26e030..f1e436b702e 100644 --- a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureRating.tsx +++ b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactMeasureRating.tsx @@ -17,12 +17,12 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import styled from '@emotion/styled'; -import { BasicSeparator, MetricsRatingBadge, Tooltip, themeColor } from 'design-system'; +import { MetricsRatingBadge, Tooltip } from 'design-system'; import * as React from 'react'; import { useIntl } from 'react-intl'; import { formatRating } from '../../../helpers/measures'; -import { SoftwareImpactSeverity, SoftwareQuality } from '../../../types/clean-code-taxonomy'; +import { SoftwareQuality } from '../../../types/clean-code-taxonomy'; +import SoftwareImpactRatingTooltip from './SoftwareImpactRatingTooltip'; export interface SoftwareImpactMeasureRatingProps { softwareQuality: SoftwareQuality; @@ -36,66 +36,13 @@ export function SoftwareImpactMeasureRating(props: Readonly - - {intl.formatMessage({ - id: 'overview.measures.software_impact.improve_rating_tooltip.title', - })} - - - - {intl.formatMessage( - { - id: 'overview.measures.software_impact.improve_rating_tooltip.content.1', - }, - { - softwareQuality: softwareQualityLabel, - ratingLabel: rating, - severity: severityLabel, - }, - )} - - - - {intl.formatMessage({ - id: 'overview.measures.software_impact.improve_rating_tooltip.content.2', - })} - -
- ); - } - return ( - + ) { + const { rating, softwareQuality } = props; + + const intl = useIntl(); + + if (!rating || rating === 'A') { + return null; + } + + function ratingToWorseSeverity(rating: string): SoftwareImpactSeverity { + return ( + { + B: SoftwareImpactSeverity.Low, + C: SoftwareImpactSeverity.Medium, + D: SoftwareImpactSeverity.High, + E: SoftwareImpactSeverity.High, + }[rating] ?? SoftwareImpactSeverity.Low + ); + } + + const softwareQualityLabel = intl.formatMessage({ + id: `software_quality.${softwareQuality}`, + }); + const severityLabel = intl.formatMessage({ + id: `overview.measures.software_impact.severity.${ratingToWorseSeverity( + rating, + )}.improve_tooltip`, + }); + + return ( +
+ + {intl.formatMessage({ + id: 'overview.measures.software_impact.improve_rating_tooltip.title', + })} + + + + {intl.formatMessage( + { + id: 'overview.measures.software_impact.improve_rating_tooltip.content.1', + }, + { + softwareQuality: softwareQualityLabel, + ratingLabel: rating, + severity: severityLabel, + }, + )} + + + + {intl.formatMessage({ + id: 'overview.measures.software_impact.improve_rating_tooltip.content.2', + })} + +
+ ); +} + +export default SoftwareImpactRatingTooltip; -- 2.39.5