]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-20742 Adjust text colors and condition rating text
authorstanislavh <stanislav.honcharov@sonarsource.com>
Tue, 24 Oct 2023 17:24:15 +0000 (19:24 +0200)
committersonartech <sonartech@sonarsource.com>
Wed, 25 Oct 2023 20:02:59 +0000 (20:02 +0000)
server/sonar-web/design-system/src/components/Link.tsx
server/sonar-web/design-system/src/theme/light.ts
server/sonar-web/src/main/js/apps/overview/branches/MeasuresCard.tsx
server/sonar-web/src/main/js/apps/overview/components/BranchQualityGateConditions.tsx
server/sonar-web/src/main/js/apps/overview/components/__tests__/BranchQualityGate-it.tsx
sonar-core/src/main/resources/org/sonar/l10n/core.properties

index 5d38190d3cf7eca0ab78bad4eeba379d12760ec1..07d743a85aa6ebfab8a87472e724b415306b4bc2 100644 (file)
@@ -205,7 +205,7 @@ export const DiscreetLink = styled(HoverLink)`
 DiscreetLink.displayName = 'DiscreetLink';
 
 export const ContentLink = styled(HoverLink)`
-  --color: ${themeColor('pageContent')};
+  --color: ${themeColor('pageTitle')};
   --border: ${themeBorder('default', 'contentLinkBorder')};
 `;
 ContentLink.displayName = 'ContentLink';
index eed6bd73e7483754fbcd7da17b00b3ceedf36cd5..2c14207689d491e0ac972141f17ce06ca8f03de4 100644 (file)
@@ -434,7 +434,6 @@ export const lightTheme = {
     // quality gate texts colors
     qgConditionNotCayc: COLORS.red[600],
     qgConditionCayc: COLORS.green[600],
-    qgCardTitle: COLORS.blueGrey[700],
 
     // main bar
     mainBar: COLORS.white,
index 7f1f825306aa530b78e65bcc25bece9075d1a7c1..7539c92037a1961aeedaed352db0716473cfa6e8 100644 (file)
@@ -51,7 +51,7 @@ export default function MeasuresCard(
       {...rest}
     >
       <PageContentFontWrapper className="sw-flex sw-flex-col sw-gap-1 sw-justify-between">
-        <StyledTitleContainer className="sw-flex sw-items-center sw-gap-2 sw-font-semibold">
+        <div className="sw-flex sw-items-center sw-gap-2 sw-font-semibold">
           {value ? (
             <ContentLink
               aria-label={translateWithParameters(
@@ -65,10 +65,10 @@ export default function MeasuresCard(
               {value}
             </ContentLink>
           ) : (
-            <span> — </span>
+            <StyledNoValue> — </StyledNoValue>
           )}
           {translate(label)}
-        </StyledTitleContainer>
+        </div>
         {children && <div className="sw-flex sw-flex-col">{children}</div>}
       </PageContentFontWrapper>
 
@@ -77,12 +77,12 @@ export default function MeasuresCard(
   );
 }
 
+const StyledNoValue = styled.span`
+  color: ${themeColor('pageTitle')};
+`;
+
 export const StyledCard = styled(Card)`
   &.failed {
     border-color: ${themeColor('qgCardFailed')};
   }
 `;
-
-const StyledTitleContainer = styled.div`
-  color: ${themeColor('qgCardTitle')};
-`;
index 16484c8af3a0ea2c5b5057145360f378c9783dc8..0477b1952829d2f4458545f4ca1783651b905ec4 100644 (file)
@@ -102,6 +102,7 @@ export function FailedMetric(props: Readonly<FailedMetricProps>) {
 function FailedRatingMetric({ condition }: Readonly<FailedMetricProps>) {
   const {
     error,
+    actual,
     measure: {
       metric: { type, domain },
     },
@@ -111,11 +112,12 @@ function FailedRatingMetric({ condition }: Readonly<FailedMetricProps>) {
   return (
     <>
       {intl.formatMessage(
-        { id: 'overview.failed_condition.x_required' },
+        { id: 'overview.failed_condition.x_rating_required' },
         {
-          metric: `${intl.formatMessage({
+          rating: `${intl.formatMessage({
             id: `metric_domain.${domain}`,
           })} ${intl.formatMessage({ id: 'metric.type.RATING' }).toLowerCase()}`,
+          value: formatMeasure(actual, type),
           threshold: (
             <strong className="sw-body-sm-highlight sw-ml-1">{formatMeasure(error, type)}</strong>
           ),
index 4f42879ccb551786142edaf4ae1789973f73a048..48a2dd7930598025d5483e1afade73ae03fd9820 100644 (file)
@@ -34,7 +34,7 @@ it('renders failed QG', () => {
 
   // Maintainability rating condition
   const maintainabilityRatingLink = byRole('link', {
-    name: 'overview.failed_condition.x_requiredmetric_domain.Maintainability metric.type.rating A',
+    name: 'overview.failed_condition.x_rating_requiredmetric_domain.Maintainability metric.type.ratingE A',
   }).get();
   expect(maintainabilityRatingLink).toBeInTheDocument();
   expect(maintainabilityRatingLink).toHaveAttribute(
@@ -44,7 +44,7 @@ it('renders failed QG', () => {
 
   // Security Hotspots rating condition
   const securityHotspotsRatingLink = byRole('link', {
-    name: 'overview.failed_condition.x_requiredmetric_domain.Security Review metric.type.rating A',
+    name: 'overview.failed_condition.x_rating_requiredmetric_domain.Security Review metric.type.ratingE A',
   }).get();
   expect(securityHotspotsRatingLink).toBeInTheDocument();
   expect(securityHotspotsRatingLink).toHaveAttribute(
index 560ddb3d37ed6b912b9d37798c73644bb33716ad..e57f045073479361d66192cbacb1d9b36e54fe27 100644 (file)
@@ -3746,6 +3746,7 @@ system.version_is_availble={version} is available
 #------------------------------------------------------------------------------
 overview.1_condition_failed=1 failed condition
 overview.X_conditions_failed={0} failed conditions
+overview.failed_condition.x_rating_required={rating} is {value} required {threshold}
 overview.failed_condition.x_required={metric} required {threshold}
 overview.fix_failed_conditions_with_sonarlint=Fix issues before they fail your Quality Gate with {link} in your IDE. Power up with connected mode!
 overview.quality_gate.status=Quality Gate Status