SONAR-21115 Improve the spotlight tour on Quality Gate page

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: (
         <p>{translate('quality_gates.cayc.condition_simplification_tour.page_1.content1')}</p>
       ),

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<Props>) {
   };
 
   return (
-    <StyledTableRow>
-      <ContentCell
-        data-guiding-id={
-          condition.metric === MetricKey.new_violations ? 'caycConditionsSimplification' : undefined
-        }
-      >
+    <StyledItem
+      data-guiding-id={
+        condition.metric === MetricKey.new_violations ? 'caycConditionsSimplification' : undefined
+      }
+    >
+      <span>
         <Highlight>{translate(`metric.${metric.key}.description.positive`)}</Highlight>
-      </ContentCell>
+      </span>
 
-      <StyledContentCell>
-        {shouldRenderOperator && (
+      {shouldRenderOperator && (
+        <StyledContentCell>
+          (
           <>
             <FormattedMessage
               id="quality_gates.conditions.cayc.metric"
@@ -72,22 +73,34 @@ function CaycCondition({ condition, metric, metrics }: Readonly<Props>) {
               <HelperHintIcon />
             </DocumentationTooltip>
           </>
-        )}
-      </StyledContentCell>
-    </StyledTableRow>
+          )
+        </StyledContentCell>
+      )}
+    </StyledItem>
   );
 }
 
-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 {

server/sonar-web/src/main/js/apps/quality-gates/components/CaycConditionsTable.tsx

@@ -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<Metric>;
-  conditions: ConditionType[];
-}
-
-export default function CaycConditionsTable({ metrics, conditions }: Readonly<Props>) {
-  return (
-    <HighlightedSection className="sw-px-4 sw-py-0 sw-my-2" id="cayc-hihlight">
-      <Table
-        columnCount={2}
-        columnWidths={['auto', '1fr']}
-        className="sw-my-2"
-        data-testid="quality-gates__conditions-cayc"
-      >
-        {conditions.map((condition) => (
-          <CaycCondition
-            key={condition.id}
-            condition={condition}
-            metric={metrics[condition.metric]}
-          />
-        ))}
-      </Table>
-    </HighlightedSection>
-  );
-}

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<Props>) {
               </DocumentationTooltip>
             </div>
 
-            <CaycConditionsTable metrics={metrics} conditions={caycConditions} />
+            <HighlightedSection className="sw-p-0 sw-my-2 sw-w-3/4" id="cayc-highlight">
+              <ul
+                className="sw-my-2"
+                aria-label={translate('quality_gates.cayc.condition_simplification_list')}
+              >
+                {caycConditions.map((condition) => (
+                  <CaycCondition
+                    key={condition.id}
+                    condition={condition}
+                    metric={metrics[condition.metric]}
+                  />
+                ))}
+              </ul>
+            </HighlightedSection>
 
             {hasFeature(Feature.BranchSupport) && (
               <Note className="sw-mb-2 sw-body-sm">

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 () => {

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;
+}

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