From 2eb082fde9e033741d2bd284247fdd3b6479d59d Mon Sep 17 00:00:00 2001 From: Mathieu Suen Date: Mon, 4 Dec 2023 16:56:31 +0100 Subject: [PATCH] SONAR-21115 Improve the spotlight tour on Quality Gate page --- .../CaYCConditionsSimplificationGuide.tsx | 2 +- .../components/CaycCondition.tsx | 51 ++++++++++++------- .../components/CaycConditionsTable.tsx | 49 ------------------ .../quality-gates/components/Conditions.tsx | 18 ++++++- .../components/__tests__/QualityGate-it.tsx | 4 +- .../src/main/js/apps/quality-gates/styles.css | 5 ++ .../resources/org/sonar/l10n/core.properties | 1 + 7 files changed, 58 insertions(+), 72 deletions(-) delete mode 100644 server/sonar-web/src/main/js/apps/quality-gates/components/CaycConditionsTable.tsx diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CaYCConditionsSimplificationGuide.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CaYCConditionsSimplificationGuide.tsx index bfd84a3db0f..0a8cb6b2fa6 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CaYCConditionsSimplificationGuide.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CaYCConditionsSimplificationGuide.tsx @@ -34,7 +34,7 @@ export default function CaYCConditionsSimplificationGuide() { const steps: SpotlightTourStep[] = [ { - target: '#cayc-hihlight', + target: '#cayc-highlight', content: (

{translate('quality_gates.cayc.condition_simplification_tour.page_1.content1')}

), diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCondition.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCondition.tsx index 08895159b6b..da156990475 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCondition.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycCondition.tsx @@ -18,7 +18,7 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import { ContentCell, HelperHintIcon, Highlight, TableRow } from 'design-system'; +import { HelperHintIcon, Highlight } from 'design-system'; import React from 'react'; import { FormattedMessage } from 'react-intl'; import withMetricsContext from '../../../app/components/metrics/withMetricsContext'; @@ -44,17 +44,18 @@ function CaycCondition({ condition, metric, metrics }: Readonly) { }; return ( - - + + {translate(`metric.${metric.key}.description.positive`)} - + - - {shouldRenderOperator && ( + {shouldRenderOperator && ( + + ( <> ) { - )} - - + ) + + )} + ); } -const StyledTableRow = styled(TableRow)` - &:first-child > td { - border-top: 0; +const StyledItem = styled.li` + display: flex; + justify-content: space-between; + padding: 1rem; + flex-wrap: wrap; + + &:not(:last-child) { + padding-bottom: 0; } - &:last-child > td { - border-bottom: 0; + + &:not(:last-child):after { + content: ''; + border-bottom: 1px solid rgb(235, 235, 235); + display: flex; + height: 10px; + width: 100%; + padding-top: 1rem; } `; -const StyledContentCell = styled(ContentCell)` +const StyledContentCell = styled.div` white-space: nowrap; & > div { diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycConditionsTable.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/CaycConditionsTable.tsx deleted file mode 100644 index a5bbb2596d8..00000000000 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/CaycConditionsTable.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2023 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 { HighlightedSection, Table } from 'design-system'; -import * as React from 'react'; -import { Condition as ConditionType, Dict, Metric } from '../../../types/types'; -import CaycCondition from './CaycCondition'; - -interface Props { - metrics: Dict; - conditions: ConditionType[]; -} - -export default function CaycConditionsTable({ metrics, conditions }: Readonly) { - return ( - - - {conditions.map((condition) => ( - - ))} -
- - ); -} diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx index 32782668497..b814be6f7c2 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/Conditions.tsx @@ -23,6 +23,7 @@ import { FlagMessage, HeadingDark, HelperHintIcon, + HighlightedSection, LightPrimary, Link, Note, @@ -43,7 +44,7 @@ import { CaycStatus, Condition as ConditionType, QualityGate } from '../../../ty import { groupAndSortByPriorityConditions, isQualityGateOptimized } from '../utils'; import CaYCConditionsSimplificationGuide from './CaYCConditionsSimplificationGuide'; import CaycCompliantBanner from './CaycCompliantBanner'; -import CaycConditionsTable from './CaycConditionsTable'; +import CaycCondition from './CaycCondition'; import CaycFixOptimizeBanner from './CaycFixOptimizeBanner'; import ConditionModal from './ConditionModal'; import CaycReviewUpdateConditionsModal from './ConditionReviewAndUpdateModal'; @@ -215,7 +216,20 @@ export default function Conditions({ qualityGate }: Readonly) { - + +
    + {caycConditions.map((condition) => ( + + ))} +
+ {hasFeature(Feature.BranchSupport) && ( diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx index 90602910f36..c45eb677779 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx +++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx @@ -483,7 +483,9 @@ it('should render CaYC conditions on a separate table if Sonar way', async () => await user.click(await screen.findByText('Sonar way')); expect(screen.queryByText('quality_gates.cayc.banner.title')).not.toBeInTheDocument(); - expect(await screen.findByTestId('quality-gates__conditions-cayc')).toBeInTheDocument(); + expect( + await screen.findByRole('list', { name: 'quality_gates.cayc.condition_simplification_list' }), + ).toBeInTheDocument(); }); it('should display CaYC condition simplification tour for users who didnt dismissed it', async () => { diff --git a/server/sonar-web/src/main/js/apps/quality-gates/styles.css b/server/sonar-web/src/main/js/apps/quality-gates/styles.css index 966eec709dc..718c024d839 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/styles.css +++ b/server/sonar-web/src/main/js/apps/quality-gates/styles.css @@ -88,3 +88,8 @@ .strike-through { text-decoration: line-through; } + +#cayc-highlight.active, +[data-guiding-id='caycConditionsSimplification'].active { + box-shadow: 0px 0px 4px 0px #5d6cd0; +} diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties index c68ef607cc0..a03c68331d3 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -2245,6 +2245,7 @@ quality_gates.cayc_condition.review_optimize=Review and Optimize Quality Gate quality_gates.cayc.review_optimize_modal.header=Optimize "{0}" for Clean as You Code quality_gates.cayc.review_optimize_modal.confirm_text=Optimize Quality Gate quality_gates.cayc.review_optimize_modal.description1=This quality gate will be optimized for {cayc_link}. Please review the changes below. +quality_gates.cayc.condition_simplification_list=List of conditions to ensure that any code added or changed is clean. quality_gates.cayc.condition_simplification_tour.page_1.title='Clean as You Code' ready! quality_gates.cayc.condition_simplification_tour.page_1.content1=The conditions in this quality gate have been updated to ensure that any code added or changed is clean. quality_gates.cayc.condition_simplification_tour.page_2.title=One condition, zero issues -- 2.39.5