SONAR-21455 Fix software quality impact measures in branch overview page

7 files changed, 131 insertions, 103 deletions

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<SoftwareImpactBreakdow
     : null;
 
   return (
-    <StyledCard className="sw-w-1/3 sw-rounded-2 sw-p-4 sw-flex-col">
+    <LightGreyCard className="sw-w-1/3 sw-rounded-2 sw-p-4 sw-flex-col">
       <TextBold name={intl.formatMessage({ id: `software_quality.${softwareQuality}` })} />
-      <CardSeparator className="sw--mx-4" />
+      <BasicSeparator className="sw--mx-4" />
       <div className="sw-flex sw-flex-col sw-gap-3">
         <div className="sw-flex sw-gap-1 sw-items-end">
           <NakedLink
@@ -127,12 +126,8 @@ export function SoftwareImpactMeasureCard(props: Readonly<SoftwareImpactBreakdow
           ))}
         </div>
       </div>
-    </StyledCard>
+    </LightGreyCard>
   );
 }
 
-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<SoftwareImpactMeasur
 
   const rating = formatRating(value);
 
-  function ratingToWorseSeverity(rating: string): SoftwareImpactSeverity {
-    switch (rating) {
-      case 'B':
-        return SoftwareImpactSeverity.Low;
-      case 'C':
-        return SoftwareImpactSeverity.Medium;
-      case 'D':
-      case 'E':
-        return SoftwareImpactSeverity.High;
-      default:
-        return SoftwareImpactSeverity.Low;
-    }
-  }
-
-  function getTooltipContent() {
-    if (!rating || rating === 'A') {
-      return null;
-    }
-
-    const softwareQualityLabel = intl.formatMessage({
-      id: `software_quality.${softwareQuality}`,
-    });
-    const severityLabel = intl.formatMessage({
-      id: `overview.measures.software_impact.severity.${ratingToWorseSeverity(
-        rating,
-      )}.improve_tooltip`,
-    });
-
-    return (
-      <div className="sw-flex sw-flex-col sw-gap-1">
-        <span className="sw-font-semibold">
-          {intl.formatMessage({
-            id: 'overview.measures.software_impact.improve_rating_tooltip.title',
-          })}
-        </span>
-
-        <span>
-          {intl.formatMessage(
-            {
-              id: 'overview.measures.software_impact.improve_rating_tooltip.content.1',
-            },
-            {
-              softwareQuality: softwareQualityLabel,
-              ratingLabel: rating,
-              severity: severityLabel,
-            },
-          )}
-        </span>
-
-        <span className="sw-mt-4">
-          {intl.formatMessage({
-            id: 'overview.measures.software_impact.improve_rating_tooltip.content.2',
-          })}
-        </span>
-      </div>
-    );
-  }
-
   return (
-    <Tooltip overlay={getTooltipContent()}>
+    <Tooltip
+      overlay={SoftwareImpactRatingTooltip({
+        rating,
+        softwareQuality,
+      })}
+    >
       <MetricsRatingBadge
         size="lg"
         className="sw-text-sm"
@@ -111,8 +58,4 @@ export function SoftwareImpactMeasureRating(props: Readonly<SoftwareImpactMeasur
   );
 }
 
-export const StyledSeparator = styled(BasicSeparator)`
-  background-color: ${themeColor('projectCardBorder')};
-`;
-
 export default SoftwareImpactMeasureRating;
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactRatingTooltip.tsx b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactRatingTooltip.tsx
new file mode 100644
index 00000000000..17d63ec5712
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/overview/branches/SoftwareImpactRatingTooltip.tsx
@@ -0,0 +1,88 @@
+/*
+ * 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 * as React from 'react';
+import { useIntl } from 'react-intl';
+import { SoftwareImpactSeverity, SoftwareQuality } from '../../../types/clean-code-taxonomy';
+
+export interface SoftwareImpactRatingTooltipProps {
+  rating?: string;
+  softwareQuality: SoftwareQuality;
+}
+
+export function SoftwareImpactRatingTooltip(props: Readonly<SoftwareImpactRatingTooltipProps>) {
+  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 (
+    <div className="sw-flex sw-flex-col sw-gap-1">
+      <span className="sw-font-semibold">
+        {intl.formatMessage({
+          id: 'overview.measures.software_impact.improve_rating_tooltip.title',
+        })}
+      </span>
+
+      <span>
+        {intl.formatMessage(
+          {
+            id: 'overview.measures.software_impact.improve_rating_tooltip.content.1',
+          },
+          {
+            softwareQuality: softwareQualityLabel,
+            ratingLabel: rating,
+            severity: severityLabel,
+          },
+        )}
+      </span>
+
+      <span className="sw-mt-4">
+        {intl.formatMessage({
+          id: 'overview.measures.software_impact.improve_rating_tooltip.content.2',
+        })}
+      </span>
+    </div>
+  );
+}
+
+export default SoftwareImpactRatingTooltip;