SONAR-17816 Better wording

3 files changed, 37 insertions, 12 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 c3dca159e4b..f41c9c11d42 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
@@ -32,25 +32,41 @@ interface Props {
 export default function CleanAsYouCodeWarning({ component }: Props) {
   return (
     <>
-      <Alert variant="warning">{translate('overview.quality_gate.conditions.cayc.warning')}</Alert>
-      <p className="big-spacer-top big-spacer-bottom">
+      <Alert variant="warning">
         {component.qualityGate ? (
           <FormattedMessage
-            id="overview.quality_gate.conditions.cayc.details"
-            defaultMessage={translate('overview.quality_gate.conditions.cayc.details')}
+            id="overview.quality_gate.conditions.cayc.warning"
+            defaultMessage={translate('overview.quality_gate.conditions.cayc.warning')}
             values={{
               link: (
-                <Link to={getQualityGateUrl(component.qualityGate.key)}>
-                  {translate('overview.quality_gate.conditions.cayc.details.link')}
-                </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.details.no_link')
+          translate('overview.quality_gate.conditions.cayc.warning.no_link')
         )}
+      </Alert>
+
+      <p className="big-spacer-top big-spacer-bottom">
+        {translate('overview.quality_gate.conditions.cayc.details')}
       </p>
 
+      {component.qualityGate && (
+        <div className="big-spacer-bottom">
+          <Link className="button" to={getQualityGateUrl(component.qualityGate.key)}>
+            {translate('overview.quality_gate.conditions.cayc.review')}
+          </Link>
+        </div>
+      )}
+
       <Link
         target="_blank"
         to="https://docs.sonarqube.org/latest/user-guide/clean-as-you-code/#quality-gate"
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 d06f711df32..dbe0751d8ec 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -159,6 +159,15 @@
   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/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index b4f051af2a0..eda34a3b660 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3259,10 +3259,10 @@ overview.you_should_define_quality_gate=You should define a quality gate on this
 overview.quality_gate.ignored_conditions=Some Quality Gate conditions on New Code were ignored because of the small number of New Lines
 overview.quality_gate.ignored_conditions.tooltip=At the start of a new code period, if very few lines have been added or modified, it might be difficult to reach the desired level of code coverage or duplications. To prevent Quality Gate failure when there's little that can be done about it, Quality Gate conditions about duplications in new code and coverage on new code are ignored until the number of new lines is at least 20. An administrator can disable this in the general settings.
 overview.quality_gate.conditions_on_new_code=Only conditions on new code that are defined in the Quality Gate are checked. See the {link} associated to the project for details.
-overview.quality_gate.conditions.cayc.warning=This Quality Gate does not comply with Clean as You Code
-overview.quality_gate.conditions.cayc.details.no_link=A Clean as You Code quality gate ensures that only Clean Code passes it.
-overview.quality_gate.conditions.cayc.details=A Clean as You Code quality gate ensures that only Clean Code passes it. {link} to view this project's quality gate.
-overview.quality_gate.conditions.cayc.details.link=Click here 
+overview.quality_gate.conditions.cayc.warning=Quality gate {link} used by this project does not comply with Clean as You Code.
+overview.quality_gate.conditions.cayc.warning.no_link=The quality gate used by this project does not comply with Clean as You Code.
+overview.quality_gate.conditions.cayc.details=Fixing this quality gate will help you achieve a Clean Code state.
+overview.quality_gate.conditions.cayc.review=Review Quality Gate
 overview.quality_gate.conditions.cayc.link=Learn more: Clean as You Code
 overview.quality_gate.application.non_cayc.projects_x={0} project(s) in this application use a Quality Gate that does not comply with Clean as You Code
 overview.quality_gate.show_project_conditions_x=Show failed conditions for project {0}