SONAR-23555 Improve SonarWay Quality Gate CaYC onboarding tour

2 files changed, 20 insertions, 32 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>
         </>