SONAR-23555 Improve SonarWay Quality Gate CaYC onboarding tour

3 files changed, 24 insertions, 39 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/components/ZeroNewIssuesSimplificationGuide.tsx b/server/sonar-web/src/main/js/apps/overview/components/ZeroNewIssuesSimplificationGuide.tsx
index 388585a6273..e17c92ca59a 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/ZeroNewIssuesSimplificationGuide.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/ZeroNewIssuesSimplificationGuide.tsx
@@ -18,13 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import { Link } from '@sonarsource/echoes-react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { SpotlightTour, SpotlightTourStep } from '~design-system';
 import { dismissNotice } from '../../../api/users';
 import { CurrentUserContext } from '../../../app/components/current-user/CurrentUserContext';
-import Link from '../../../components/common/Link';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { translate } from '../../../helpers/l10n';
 import { QualityGate } from '../../../types/types';
 import { NoticeType } from '../../../types/users';
 
@@ -43,29 +43,16 @@ export default function ZeroNewIssuesSimplificationGuide({ qualityGate }: Readon
     {
       target: `[data-guiding-id="overviewZeroNewIssuesSimplification"]`,
       content: (
-        <>
-          <p className="sw-mb-4">
-            <FormattedMessage
-              id="overview.quality_gates.conditions.condition_simplification_tour.content1"
-              defaultMessage={translate(
-                'overview.quality_gates.conditions.condition_simplification_tour.content1',
-              )}
-              values={{
-                link: (
-                  <Link to={`/quality_gates/show/${qualityGate.name}`}>
-                    {translateWithParameters(
-                      'overview.quality_gates.conditions.condition_simplification_tour.content1.link',
-                      qualityGate.name,
-                    )}
-                  </Link>
-                ),
-              }}
-            />
-          </p>
-          <p>
-            {translate('overview.quality_gates.conditions.condition_simplification_tour.content2')}
-          </p>
-        </>
+        <div className="sw-mb-4 sw-flex sw-flex-col sw-gap-2">
+          <FormattedMessage
+            id="overview.quality_gates.conditions.condition_simplification_tour.content"
+            values={{
+              p: (text) => <p>{text}</p>,
+              link: (text) => <Link to={`/quality_gates/show/${qualityGate.name}`}>{text}</Link>,
+              qualityGateName: qualityGate.name,
+            }}
+          />
+        </div>
       ),
       title: translate('overview.quality_gates.conditions.condition_simplification_tour.title'),
       placement: 'right',
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 38989cb2da5..5e184a9e5a9 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
@@ -19,6 +19,7 @@
  */
 
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { SpotlightTour, SpotlightTourStep } from '~design-system';
 import { dismissNotice } from '../../../api/users';
 import { CurrentUserContext } from '../../../app/components/current-user/CurrentUserContext';
@@ -50,12 +51,12 @@ export default function CaYCConditionsSimplificationGuide({ qualityGate }: Props
     {
       target: '[data-guiding-id="caycConditionsSimplification"]',
       content: (
-        <>
-          <p className="sw-mb-4">
-            {translate('quality_gates.cayc.condition_simplification_tour.page_2.content1')}
-          </p>
-          <p>{translate('quality_gates.cayc.condition_simplification_tour.page_2.content2')}</p>
-        </>
+        <FormattedMessage
+          id="quality_gates.cayc.condition_simplification_tour.page_2.content"
+          values={{ p: (text) => <p>{text}</p> }}
+        >
+          {(text) => <div className="sw-gap-2 sw-flex sw-flex-col">{text}</div>}
+        </FormattedMessage>
       ),
       title: translate('quality_gates.cayc.condition_simplification_tour.page_2.title'),
       placement: 'right',
@@ -67,7 +68,7 @@ export default function CaYCConditionsSimplificationGuide({ qualityGate }: Props
           <p className="sw-mb-4">
             {translate('quality_gates.cayc.condition_simplification_tour.page_3.content1')}
           </p>
-          <DocumentationLink to={DocLink.IssueResolutions}>
+          <DocumentationLink to={DocLink.IssueStatuses}>
             {translate('quality_gates.cayc.condition_simplification_tour.page_3.content2')}
           </DocumentationLink>
         </>
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 38b0f0c030d..77db33e8c0d 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -2539,11 +2539,10 @@ quality_gates.cayc.condition_simplification_list=List of conditions to ensure th
 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
-quality_gates.cayc.condition_simplification_tour.page_2.content1=One single condition ensures that new code has no issues.
-quality_gates.cayc.condition_simplification_tour.page_2.content2=This condition replaces the three conditions on Security rating, Reliability rating and Maintainability rating.
+quality_gates.cayc.condition_simplification_tour.page_2.content=<p>One single condition ensures that new code has no issues.</p> <p>This condition replaced the three conditions on Security rating, Reliability rating and Maintainability rating.</p>
 quality_gates.cayc.condition_simplification_tour.page_3.title=Resolve pending issues
-quality_gates.cayc.condition_simplification_tour.page_3.content1=Starting now, every issue in new code must be resolved for a project to pass this quality gate.
-quality_gates.cayc.condition_simplification_tour.page_3.content2=Learn more: Issue resolutions
+quality_gates.cayc.condition_simplification_tour.page_3.content1=Every issue in new code must be resolved for a project to pass this quality gate.
+quality_gates.cayc.condition_simplification_tour.page_3.content2=Learn more: Issue life cycle
 quality_gates.cayc.new_maintainability_rating.A=Technical debt ratio is less than {0}
 quality_gates.cayc.new_maintainability_rating=Technical debt ratio is greater than {1}
 quality_gates.cayc.new_reliability_rating.A=No bugs
@@ -4350,9 +4349,7 @@ overview.quality_gate.conditions.cayc.details_with_link=The {link} used by this
 overview.quality_gate.conditions.non_cayc.warning.link=quality gate
 overview.quality_gate.conditions.cayc.link=Learn more
 overview.quality_gates.conditions.condition_simplification_tour.title=One condition, zero issues
-overview.quality_gates.conditions.condition_simplification_tour.content1=A new condition was introduced in {link} to ensure that new code has no issues.
-overview.quality_gates.conditions.condition_simplification_tour.content1.link={0} quality gate
-overview.quality_gates.conditions.condition_simplification_tour.content2=Starting now, every issue in new code must be resolved for a project to pass this quality gate.
+overview.quality_gates.conditions.condition_simplification_tour.content=<p>One single condition in <link>{qualityGateName} quality gate</link> ensures that new code has no issues.</p><p>Every issue in new code must be resolved for a project to pass this quality gate.</p>
 overview.quality_gate.show_project_conditions_x=Show failed conditions for project {0}
 overview.quality_gate.hide_project_conditions_x=Hide failed conditions for project {0}
 overview.quality_gate.coverage=Coverage