SONAR-9553 Update onboarding headline

3 files changed, 48 insertions, 7 deletions

diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/Onboarding.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/Onboarding.js
index f14988a2ddb..a9065a16b0a 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/Onboarding.js
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/Onboarding.js
@@ -27,7 +27,7 @@ import OrganizationStep from './OrganizationStep';
 import AnalysisStep from './AnalysisStep';
 import ProjectWatcher from './ProjectWatcher';
 import { skipOnboarding } from '../../../api/users';
-import { translate } from '../../../helpers/l10n';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { getProjectUrl } from '../../../helpers/urls';
 import handleRequiredAuthentication from '../../../app/utils/handleRequiredAuthentication';
 import './styles.css';
@@ -168,8 +168,14 @@ export default class Onboarding extends React.PureComponent {
                   {translate('tutorials.skip')}
                 </a>
               )}
+              <p className="note">{translate('tutorials.find_it_back_in_help')}</p>
+            </div>
+            <div className="page-description">
+              {translateWithParameters(
+                'onboarding.header.description_x',
+                organizationsEnabled ? 3 : 2
+              )}
             </div>
-            <div className="page-description">{translate('onboarding.header.description')}</div>
           </header>
 
           {organizationsEnabled && (
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/Onboarding-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/Onboarding-test.js.snap
index 74b2721d7b0..f8234801320 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/Onboarding-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/Onboarding-test.js.snap
@@ -30,11 +30,16 @@ exports[`guides for on-premise 1`] = `
         >
           tutorials.skip
         </a>
+        <p
+          className="note"
+        >
+          tutorials.find_it_back_in_help
+        </p>
       </div>
       <div
         className="page-description"
       >
-        onboarding.header.description
+        onboarding.header.description_x.2
       </div>
     </header>
     <TokenStep
@@ -85,11 +90,16 @@ exports[`guides for on-premise 2`] = `
         >
           tutorials.skip
         </a>
+        <p
+          className="note"
+        >
+          tutorials.find_it_back_in_help
+        </p>
       </div>
       <div
         className="page-description"
       >
-        onboarding.header.description
+        onboarding.header.description_x.2
       </div>
     </header>
     <TokenStep
@@ -141,11 +151,16 @@ exports[`guides for sonarcloud 1`] = `
         >
           tutorials.skip
         </a>
+        <p
+          className="note"
+        >
+          tutorials.find_it_back_in_help
+        </p>
       </div>
       <div
         className="page-description"
       >
-        onboarding.header.description
+        onboarding.header.description_x.3
       </div>
     </header>
     <OrganizationStep
@@ -209,11 +224,16 @@ exports[`guides for sonarcloud 2`] = `
         >
           tutorials.skip
         </a>
+        <p
+          className="note"
+        >
+          tutorials.find_it_back_in_help
+        </p>
       </div>
       <div
         className="page-description"
       >
-        onboarding.header.description
+        onboarding.header.description_x.3
       </div>
     </header>
     <OrganizationStep
@@ -278,11 +298,16 @@ exports[`guides for sonarcloud 3`] = `
         >
           tutorials.skip
         </a>
+        <p
+          className="note"
+        >
+          tutorials.find_it_back_in_help
+        </p>
       </div>
       <div
         className="page-description"
       >
-        onboarding.header.description
+        onboarding.header.description_x.3
       </div>
     </header>
     <OrganizationStep
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/styles.css b/server/sonar-web/src/main/js/apps/tutorials/onboarding/styles.css
index 81266990209..26f7f464cd2 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/styles.css
+++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/styles.css
@@ -70,3 +70,13 @@
   background-color: #fff;
   color: #404040;
 }
+
+.onboarding .page-actions {
+  text-align: right;
+  margin-bottom: 0;
+}
+
+.onboarding .page-actions p {
+  line-height: 16px;
+  margin-top: 6px;
+}