SONAR-17815 CAYC Wording changes for QG page

6 files changed, 25 insertions, 44 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/branches/CleanAsYouCodeWarning.tsx b/server/sonar-web/src/main/js/apps/overview/branches/CleanAsYouCodeWarning.tsx
index f41c9c11d42..7dd4dc118c2 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/CleanAsYouCodeWarning.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/CleanAsYouCodeWarning.tsx
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
 import Link from '../../../components/common/Link';
 import { Alert } from '../../../components/ui/Alert';
 import { translate } from '../../../helpers/l10n';
@@ -32,28 +31,7 @@ interface Props {
 export default function CleanAsYouCodeWarning({ component }: Props) {
   return (
     <>
-      <Alert variant="warning">
-        {component.qualityGate ? (
-          <FormattedMessage
-            id="overview.quality_gate.conditions.cayc.warning"
-            defaultMessage={translate('overview.quality_gate.conditions.cayc.warning')}
-            values={{
-              link: (
-                <div
-                  className="overview-quality-gate-alert-inline-link"
-                  title={component.qualityGate.name}
-                >
-                  <Link to={getQualityGateUrl(component.qualityGate.key)}>
-                    {component.qualityGate.name}
-                  </Link>
-                </div>
-              ),
-            }}
-          />
-        ) : (
-          translate('overview.quality_gate.conditions.cayc.warning.no_link')
-        )}
-      </Alert>
+      <Alert variant="warning">{translate('overview.quality_gate.conditions.cayc.warning')}</Alert>
 
       <p className="big-spacer-top big-spacer-bottom">
         {translate('overview.quality_gate.conditions.cayc.details')}
diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index dbe0751d8ec..d06f711df32 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -159,15 +159,6 @@
   font-size: var(--bigFontSize);
 }
 
-.overview-quality-gate-alert-inline-link {
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-bottom: 1px;
-  margin-bottom: -5px;
-}
-
 /*
  * Animations
  */
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx
index d587a5a298f..328ad0dffc2 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionReviewAndUpdateModal.tsx
@@ -19,7 +19,9 @@
  */
 import { sortBy } from 'lodash';
 import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { createCondition, deleteCondition, updateCondition } from '../../../api/quality-gates';
+import DocLink from '../../../components/common/DocLink';
 import ConfirmModal from '../../../components/controls/ConfirmModal';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Condition, Dict, Metric, QualityGate } from '../../../types/types';
@@ -110,8 +112,21 @@ export default class CaycReviewUpdateConditionsModal extends React.PureComponent
         size="medium"
       >
         <div className="quality-gate-section huge-spacer-bottom">
-          <p className="big-spacer-bottom">
-            {translate('quality_gates.cayc.review_update_modal.description')}
+          <p>
+            <FormattedMessage
+              id="quality_gates.cayc.review_update_modal.description1"
+              defaultMessage={translate('quality_gates.cayc.review_update_modal.description1')}
+              values={{
+                cayc_link: (
+                  <DocLink to="/user-guide/clean-as-you-code/">
+                    {translate('quality_gates.cayc')}
+                  </DocLink>
+                ),
+              }}
+            />
+          </p>
+          <p className="big-spacer-top big-spacer-bottom">
+            {translate('quality_gates.cayc.review_update_modal.description2')}
           </p>
           <h3 className="medium text-normal spacer-top spacer-bottom">
             {translate('quality_gates.conditions.new_code', 'long')}
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 f0615f4406b..707387f074d 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
@@ -315,9 +315,8 @@ export class Conditions extends React.PureComponent<Props, State> {
         )}
 
         {qualityGate.isCaycCompliant && !unlockEditing && canEdit && (
-          <div className="huge-spacer-top big-spacer-bottom qg-unfollow-cayc big-padded">
-            <h4 className="spacer-bottom">{translate('quality_gates.cayc_unfollow.title')}</h4>
-            <div className="cayc-warning-description">
+          <div className="big-spacer-top big-spacer-bottom cayc-warning-description it__qg-unfollow-cayc">
+            <p>
               <FormattedMessage
                 id="quality_gates.cayc_unfollow.description"
                 defaultMessage={translate('quality_gates.cayc_unfollow.description')}
@@ -329,7 +328,7 @@ export class Conditions extends React.PureComponent<Props, State> {
                   ),
                 }}
               />
-            </div>
+            </p>
             <Button className="big-spacer-top spacer-bottom" onClick={this.unlockEditing}>
               {translate('quality_gates.cayc.unlock_edit')}
             </Button>
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 b011eed4e71..76a1faf300a 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
@@ -315,7 +315,10 @@ it('should show warning banner when CAYC condition is not properly set and shoul
     })
   ).toBeInTheDocument();
   expect(
-    screen.getByText('quality_gates.cayc.review_update_modal.description')
+    screen.getByText('quality_gates.cayc.review_update_modal.description1')
+  ).toBeInTheDocument();
+  expect(
+    screen.getByText('quality_gates.cayc.review_update_modal.description2')
   ).toBeInTheDocument();
   expect(
     screen.getByRole('button', { name: 'quality_gates.cayc.review_update_modal.confirm_text' })
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 f4703e59887..649182ea7dc 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
@@ -76,8 +76,3 @@
 .cayc-warning-description {
   line-height: 18px;
 }
-
-.qg-unfollow-cayc {
-  border: 1px solid var(--neutral200);
-  background-color: var(--neutral50);
-}