From f62e01e48e4ccbc8fe7039c2658275ef35acd8bf Mon Sep 17 00:00:00 2001
From: stanislavh <stanislav.honcharov@sonarsource.com>
Date: Tue, 27 Dec 2022 16:04:35 +0100
Subject: [PATCH] SONAR-14553 Add lists consistency in tutorial

---
 .../azure-pipelines/JavaToolInstallation.tsx  |   2 +-
 .../azure-pipelines/commands/ClangGCC.tsx     |  53 +--
 .../azure-pipelines/commands/DotNet.tsx       |  10 +-
 .../azure-pipelines/commands/JavaGradle.tsx   |  26 +-
 .../azure-pipelines/commands/JavaMaven.tsx    |  26 +-
 .../azure-pipelines/commands/Other.tsx        |  10 +-
 .../commands/PrepareAnalysisCommand.tsx       |   2 +-
 .../components/tutorials/components/Step.css  |  43 +-
 .../gitlabci/EnvironmentVariablesStep.tsx     | 216 ++++++----
 .../EnvironmentVariablesStep-test.tsx.snap    | 352 ++++++++-------
 .../jenkins/MultiBranchPipelineStep.tsx       | 407 +++++++++---------
 .../jenkins/WebhookStepBitbucket.tsx          |   6 +-
 .../MultiBranchPipelineStep-test.tsx.snap     |  70 +--
 .../WebhookStepBitbucket-test.tsx.snap        |  24 +-
 .../buildtool-steps/DotNetPrereqsMSBuild.tsx  |   4 +-
 .../buildtool-steps/DotNetPrereqsScanner.tsx  |   4 +-
 .../DotNetPrereqsMSBuild-test.tsx.snap        |   6 +-
 .../DotNetPrereqsScanner-test.tsx.snap        |   6 +-
 .../resources/org/sonar/l10n/core.properties  |  66 +--
 19 files changed, 729 insertions(+), 604 deletions(-)

diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx
index 7c114f094ce..162866379f8 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx
@@ -44,7 +44,7 @@ export default function JavaToolInstallation() {
   return (
     <li>
       {translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.title')}
-      <ul className="list-styled">
+      <ul className="list-styled list-alpha">
         <li>
           {renderSentenceWithFieldAndValue({
             field: translate(
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx
index 3a1eb89aaa2..2796120d285 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx
@@ -115,45 +115,48 @@ unzip build-wrapper.zip`,
                 highlightPrefixKeys="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
                 highlightKeys={['pipeline']}
               />
+              <ul className="list-styled list-alpha spacer-top">
+                <li>
+                  <SentenceWithHighlights
+                    translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp.script"
+                    highlightPrefixKeys={codeSnippetDownload[os].highlightScriptKey}
+                    highlightKeys={['task', 'inline']}
+                  />
+                  <CodeSnippet snippet={codeSnippetDownload[os].script} />
+                </li>
+              </ul>
             </li>
-            <ul className="list-styled">
-              <li>
-                <SentenceWithHighlights
-                  translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp.script"
-                  highlightPrefixKeys={codeSnippetDownload[os].highlightScriptKey}
-                  highlightKeys={['task', 'inline']}
-                />
-                <CodeSnippet snippet={codeSnippetDownload[os].script} />
-              </li>
-            </ul>
+
             <li>
               <SentenceWithHighlights
                 translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.ccpp"
                 highlightPrefixKeys="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
                 highlightKeys={['task', 'before']}
               />
+              <PrepareAnalysisCommand
+                buildTool={BuildTools.CFamily}
+                kind={PrepareType.StandAlone}
+                projectKey={projectKey}
+              />
             </li>
-            <PrepareAnalysisCommand
-              buildTool={BuildTools.CFamily}
-              kind={PrepareType.StandAlone}
-              projectKey={projectKey}
-            />
+
             <li>
               <SentenceWithHighlights
                 translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build.ccpp"
                 highlightKeys={['task']}
               />
+              <ul className="list-styled list-alpha spacer-top">
+                <li>
+                  <SentenceWithHighlights
+                    translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_script.ccpp"
+                    highlightKeys={['build_wrapper']}
+                  />
+                  <CodeSnippet snippet={codeSnippetDownload[os].scriptBuild} />
+                  <CompilationInfo />
+                </li>
+              </ul>
             </li>
-            <ul className="list-styled">
-              <li>
-                <SentenceWithHighlights
-                  translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_script.ccpp"
-                  highlightKeys={['build_wrapper']}
-                />
-                <CodeSnippet snippet={codeSnippetDownload[os].scriptBuild} />
-                <CompilationInfo />
-              </li>
-            </ul>
+
             <li>
               <SentenceWithHighlights
                 translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.ccpp"
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/DotNet.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/DotNet.tsx
index 3c5e5374b56..0b66059a3cf 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/DotNet.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/DotNet.tsx
@@ -39,12 +39,12 @@ export default function DotNet(props: DotNetProps): JSX.Element {
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
             highlightKeys={['pipeline', 'task', 'before']}
           />
+          <PrepareAnalysisCommand
+            buildTool={BuildTools.DotNet}
+            kind={PrepareType.MSBuild}
+            projectKey={projectKey}
+          />
         </li>
-        <PrepareAnalysisCommand
-          buildTool={BuildTools.DotNet}
-          kind={PrepareType.MSBuild}
-          projectKey={projectKey}
-        />
         <li>
           <SentenceWithHighlights
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run"
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx
index 7e647acfdb0..4ad6263d34e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx
@@ -42,12 +42,12 @@ export default function JavaGradle(props: JavaGradleProps) {
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
             highlightKeys={['pipeline', 'task', 'before']}
           />
+          <PrepareAnalysisCommand
+            buildTool={BuildTools.Gradle}
+            kind={PrepareType.JavaMavenGradle}
+            projectKey={projectKey}
+          />
         </li>
-        <PrepareAnalysisCommand
-          buildTool={BuildTools.Gradle}
-          kind={PrepareType.JavaMavenGradle}
-          projectKey={projectKey}
-        />
 
         <JavaToolInstallation />
 
@@ -56,15 +56,15 @@ export default function JavaGradle(props: JavaGradleProps) {
             'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java',
             translate('onboarding.build', BuildTools.Gradle)
           )}
+          <ul className="list-styled list-alpha big-spacer-bottom">
+            <li>
+              <SentenceWithHighlights
+                translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java.settings"
+                highlightKeys={['section', 'option']}
+              />
+            </li>
+          </ul>
         </li>
-        <ul className="list-styled big-spacer-bottom">
-          <li>
-            <SentenceWithHighlights
-              translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java.settings"
-              highlightKeys={['section', 'option']}
-            />
-          </li>
-        </ul>
 
         <PublishSteps />
       </ol>
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx
index eb5db352cd6..3ef4d3847a0 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx
@@ -41,12 +41,12 @@ export default function JavaMaven(props: JavaMavenProps) {
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
             highlightKeys={['pipeline', 'task', 'before']}
           />
+          <PrepareAnalysisCommand
+            buildTool={BuildTools.Gradle}
+            kind={PrepareType.JavaMavenGradle}
+            projectKey={projectKey}
+          />
         </li>
-        <PrepareAnalysisCommand
-          buildTool={BuildTools.Gradle}
-          kind={PrepareType.JavaMavenGradle}
-          projectKey={projectKey}
-        />
 
         <JavaToolInstallation />
 
@@ -55,15 +55,15 @@ export default function JavaMaven(props: JavaMavenProps) {
             'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java',
             translate('onboarding.build', BuildTools.Maven)
           )}
+          <ul className="list-styled list-alpha big-spacer-bottom">
+            <li>
+              <SentenceWithHighlights
+                translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java.settings"
+                highlightKeys={['section', 'option']}
+              />
+            </li>
+          </ul>
         </li>
-        <ul className="list-styled big-spacer-bottom">
-          <li>
-            <SentenceWithHighlights
-              translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java.settings"
-              highlightKeys={['section', 'option']}
-            />
-          </li>
-        </ul>
 
         <PublishSteps />
       </ol>
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/Other.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/Other.tsx
index f1091927313..e1612a94be3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/Other.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/Other.tsx
@@ -39,12 +39,12 @@ export default function Other(props: OtherProps) {
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
             highlightKeys={['pipeline', 'task', 'before']}
           />
+          <PrepareAnalysisCommand
+            buildTool={BuildTools.Other}
+            kind={PrepareType.StandAlone}
+            projectKey={projectKey}
+          />
         </li>
-        <PrepareAnalysisCommand
-          buildTool={BuildTools.Other}
-          kind={PrepareType.StandAlone}
-          projectKey={projectKey}
-        />
 
         <li>
           <SentenceWithHighlights
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx
index 8d3ad962693..cc7f878b1d1 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx
@@ -48,7 +48,7 @@ export default function PrepareAnalysisCommand(props: PrepareAnalysisCommandProp
 sonar.projectKey=${projectKey}`;
 
   return (
-    <ul className="list-styled">
+    <ul className="list-styled list-alpha spacer-top">
       <li>
         <SentenceWithHighlights
           translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.endpoint"
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/Step.css b/server/sonar-web/src/main/js/components/tutorials/components/Step.css
index 0081a01626d..2ba533944b8 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/Step.css
+++ b/server/sonar-web/src/main/js/components/tutorials/components/Step.css
@@ -37,7 +37,7 @@
 }
 
 .onboarding-step hr {
-  margin-left: -54px;
+  margin-left: -72px;
 }
 
 .onboarding-step-number {
@@ -63,16 +63,15 @@
   outline: none;
 }
 
-.onboarding-step ol.list-styled {
-  list-style: none;
-  padding-left: 0;
-  counter-reset: step-counter;
-}
-
 .onboarding-step .markdown {
   line-height: inherit;
 }
 
+.onboarding-step ol.list-styled,
+.onboarding-step ul.list-styled {
+  padding-left: 18px;
+}
+
 .onboarding-step ul.list-styled li {
   margin-top: var(--gridSize);
   margin-bottom: var(--gridSize);
@@ -84,16 +83,22 @@
   margin-bottom: calc(2 * var(--gridSize));
 }
 
-.onboarding-step ol.list-styled > li::before {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  color: #fff;
-  font-size: 12px;
-  line-height: 16px;
-  text-align: center;
-  background-color: #4b9fd5;
-  border-radius: 50%;
-  content: counter(li);
+.onboarding-step ol.list-roman {
+  list-style: lower-roman;
+}
+.onboarding-step ol.list-roman > li::marker {
+  font-weight: 400;
+}
+
+.onboarding-step ul.list-alpha {
+  list-style: lower-alpha;
+}
+.onboarding-step ol.list-styled:not(.list-roman) > li::marker,
+.onboarding-step ul.list-alpha > li::marker {
+  font-weight: 500;
+}
+
+.onboarding-step ul.list-alpha > li,
+.onboarding-step ol.list-roman > li {
+  margin-bottom: var(--gridSize);
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
index 929630de575..e95a9f9e865 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
@@ -48,101 +48,153 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
 
   const renderForm = () => (
     <div className="boxed-group-inner">
-      <h2 className="spacer-bottom spacer-top">
-        {translate('onboarding.tutorial.with.gitlab_ci.env_variables.section.title')}
-      </h2>
+      <ol className="list-styled">
+        <li>
+          <p className="big-spacer-bottom">
+            {translate('onboarding.tutorial.with.gitlab_ci.env_variables.section.title')}
+          </p>
 
-      <FormattedMessage
-        defaultMessage={translate(
-          'onboarding.tutorial.with.gitlab_ci.env_variables.section.description'
-        )}
-        id="onboarding.tutorial.with.gitlab_ci.env_variables.section.description"
-        values={{
-          /* This link will be added when the backend provides the project URL */
-          link: <strong>{pipelineDescriptionLinkLabel}</strong>,
-        }}
-      />
-
-      <ol className="list-styled big-spacer-top">
-        <li className="big-spacer-bottom">
           <FormattedMessage
-            defaultMessage={fieldValueTranslation}
-            id="onboarding.tutorial.with.gitlab_ci.env_variables.step1"
+            defaultMessage={translate(
+              'onboarding.tutorial.with.gitlab_ci.env_variables.section.description'
+            )}
+            id="onboarding.tutorial.with.gitlab_ci.env_variables.section.description"
             values={{
-              extra: <ClipboardIconButton copyValue="SONAR_TOKEN" />,
-              field: (
-                <strong>
-                  {translate('onboarding.tutorial.with.gitlab_ci.env_variables.step1')}
-                </strong>
-              ),
-              value: <code className="rule">SONAR_TOKEN</code>,
+              /* This link will be added when the backend provides the project URL */
+              link: <strong>{pipelineDescriptionLinkLabel}</strong>,
             }}
           />
-        </li>
-        <TokenStepGenerator component={component} currentUser={currentUser} />
-        <li className="big-spacer-bottom">
-          {translate('onboarding.tutorial.with.gitlab_ci.env_variables.step3')}
-        </li>
-        <li className="big-spacer-bottom">
-          {translate('onboarding.tutorial.with.gitlab_ci.env_variables.section.step4')}
-        </li>
-      </ol>
 
-      <hr className="no-horizontal-margins" />
-
-      <h2 className="spacer-bottom big-spacer-top">
-        {translate('onboarding.tutorial.with.gitlab_ci.env_variables.section2.title')}
-      </h2>
-
-      <FormattedMessage
-        defaultMessage={translate(
-          'onboarding.tutorial.with.gitlab_ci.env_variables.section2.description'
-        )}
-        id="onboarding.tutorial.with.gitlab_ci.env_variables.section2.description"
-        values={{
-          /* This link will be added when the backend provides the project URL */
-          link: <strong>{pipelineDescriptionLinkLabel}</strong>,
-        }}
-      />
-
-      <ol className="list-styled big-spacer-top big-spacer-bottom">
-        <li className="big-spacer-bottom">
-          <FormattedMessage
-            defaultMessage={fieldValueTranslation}
-            id="onboarding.tutorial.with.gitlab_ci.env_variables.step1"
-            values={{
-              extra: <ClipboardIconButton copyValue="SONAR_HOST_URL" />,
-              field: (
-                <strong>
-                  {translate('onboarding.tutorial.with.gitlab_ci.env_variables.step1')}
-                </strong>
-              ),
-              value: <code className="rule">SONAR_HOST_URL</code>,
-            }}
-          />
+          <ul className="list-styled list-alpha big-spacer-top">
+            <li className="big-spacer-bottom">
+              <FormattedMessage
+                defaultMessage={fieldValueTranslation}
+                id="onboarding.tutorial.with.gitlab_ci.env_variables.step1"
+                values={{
+                  extra: <ClipboardIconButton copyValue="SONAR_TOKEN" />,
+                  field: (
+                    <strong>
+                      {translate('onboarding.tutorial.with.gitlab_ci.env_variables.step1')}
+                    </strong>
+                  ),
+                  value: <code className="rule">SONAR_TOKEN</code>,
+                }}
+              />
+            </li>
+            <TokenStepGenerator component={component} currentUser={currentUser} />
+            <li className="big-spacer-bottom">
+              <FormattedMessage
+                defaultMessage={translate('onboarding.tutorial.with.gitlab_ci.env_variables.step3')}
+                id="onboarding.tutorial.with.gitlab_ci.env_variables.step3"
+                values={{
+                  value: (
+                    <strong>
+                      {translate('onboarding.tutorial.with.gitlab_ci.env_variables.step3.value')}
+                    </strong>
+                  ),
+                }}
+              />
+            </li>
+            <li className="big-spacer-bottom">
+              <FormattedMessage
+                defaultMessage={translate(
+                  'onboarding.tutorial.with.gitlab_ci.env_variables.section.step4'
+                )}
+                id="onboarding.tutorial.with.gitlab_ci.env_variables.section.step4"
+                values={{
+                  value: (
+                    <strong>
+                      {translate(
+                        'onboarding.tutorial.with.gitlab_ci.env_variables.section.step4.value'
+                      )}
+                    </strong>
+                  ),
+                }}
+              />
+            </li>
+          </ul>
+          <hr className="no-horizontal-margins" />
         </li>
-        <li className="big-spacer-bottom">
+        <li>
+          <p className="big-spacer-bottom big-spacer-top">
+            {translate('onboarding.tutorial.with.gitlab_ci.env_variables.section2.title')}
+          </p>
+
           <FormattedMessage
-            defaultMessage={fieldValueTranslation}
-            id="onboarding.tutorial.with.gitlab_ci.env_variables.step2"
+            defaultMessage={translate(
+              'onboarding.tutorial.with.gitlab_ci.env_variables.section2.description'
+            )}
+            id="onboarding.tutorial.with.gitlab_ci.env_variables.section2.description"
             values={{
-              extra: <ClipboardIconButton copyValue={baseUrl} />,
-              field: <strong>{translate('onboarding.tutorial.env_variables.field')}</strong>,
-              value: <code className="rule">{baseUrl}</code>,
+              /* This link will be added when the backend provides the project URL */
+              link: <strong>{pipelineDescriptionLinkLabel}</strong>,
             }}
           />
-        </li>
-        <li className="big-spacer-bottom">
-          {translate('onboarding.tutorial.with.gitlab_ci.env_variables.step3')}
-        </li>
-        <li className="big-spacer-bottom">
-          {translate('onboarding.tutorial.with.gitlab_ci.env_variables.section2.step4')}
+
+          <ul className="list-styled list-alpha big-spacer-top big-spacer-bottom">
+            <li className="big-spacer-bottom">
+              <FormattedMessage
+                defaultMessage={fieldValueTranslation}
+                id="onboarding.tutorial.with.gitlab_ci.env_variables.step1"
+                values={{
+                  extra: <ClipboardIconButton copyValue="SONAR_HOST_URL" />,
+                  field: (
+                    <strong>
+                      {translate('onboarding.tutorial.with.gitlab_ci.env_variables.step1')}
+                    </strong>
+                  ),
+                  value: <code className="rule">SONAR_HOST_URL</code>,
+                }}
+              />
+            </li>
+            <li className="big-spacer-bottom">
+              <FormattedMessage
+                defaultMessage={fieldValueTranslation}
+                id="onboarding.tutorial.with.gitlab_ci.env_variables.step2"
+                values={{
+                  extra: <ClipboardIconButton copyValue={baseUrl} />,
+                  field: <strong>{translate('onboarding.tutorial.env_variables.field')}</strong>,
+                  value: <code className="rule">{baseUrl}</code>,
+                }}
+              />
+            </li>
+            <li className="big-spacer-bottom">
+              <FormattedMessage
+                defaultMessage={translate('onboarding.tutorial.with.gitlab_ci.env_variables.step3')}
+                id="onboarding.tutorial.with.gitlab_ci.env_variables.step3"
+                values={{
+                  value: (
+                    <strong>
+                      {translate('onboarding.tutorial.with.gitlab_ci.env_variables.step3.value')}
+                    </strong>
+                  ),
+                }}
+              />
+            </li>
+            <li className="big-spacer-bottom">
+              <FormattedMessage
+                defaultMessage={translate(
+                  'onboarding.tutorial.with.gitlab_ci.env_variables.section2.step4'
+                )}
+                id="onboarding.tutorial.with.gitlab_ci.env_variables.section2.step4"
+                values={{
+                  value: (
+                    <strong>
+                      {translate(
+                        'onboarding.tutorial.with.gitlab_ci.env_variables.section.step4.value'
+                      )}
+                    </strong>
+                  ),
+                }}
+              />
+            </li>
+          </ul>
+
+          <Button className="big-spacer-bottom" onClick={props.onDone}>
+            {translate('continue')}
+          </Button>
         </li>
       </ol>
-
-      <Button className="big-spacer-bottom" onClick={props.onDone}>
-        {translate('continue')}
-      </Button>
     </div>
   );
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/EnvironmentVariablesStep-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/EnvironmentVariablesStep-test.tsx.snap
index 0c1b0a28f48..0dd21d49b05 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/EnvironmentVariablesStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/EnvironmentVariablesStep-test.tsx.snap
@@ -15,179 +15,227 @@ exports[`should render correctly: initial content 1`] = `
 <div
   className="boxed-group-inner"
 >
-  <h2
-    className="spacer-bottom spacer-top"
-  >
-    onboarding.tutorial.with.gitlab_ci.env_variables.section.title
-  </h2>
-  <FormattedMessage
-    defaultMessage="onboarding.tutorial.with.gitlab_ci.env_variables.section.description"
-    id="onboarding.tutorial.with.gitlab_ci.env_variables.section.description"
-    values={
-      {
-        "link": <strong>
-          onboarding.tutorial.with.gitlab_ci.env_variables.description.link
-        </strong>,
-      }
-    }
-  />
   <ol
-    className="list-styled big-spacer-top"
+    className="list-styled"
   >
-    <li
-      className="big-spacer-bottom"
-    >
+    <li>
+      <p
+        className="big-spacer-bottom"
+      >
+        onboarding.tutorial.with.gitlab_ci.env_variables.section.title
+      </p>
       <FormattedMessage
-        defaultMessage="onboarding.tutorial.env_variables"
-        id="onboarding.tutorial.with.gitlab_ci.env_variables.step1"
+        defaultMessage="onboarding.tutorial.with.gitlab_ci.env_variables.section.description"
+        id="onboarding.tutorial.with.gitlab_ci.env_variables.section.description"
         values={
           {
-            "extra": <ClipboardIconButton
-              copyValue="SONAR_TOKEN"
-            />,
-            "field": <strong>
-              onboarding.tutorial.with.gitlab_ci.env_variables.step1
+            "link": <strong>
+              onboarding.tutorial.with.gitlab_ci.env_variables.description.link
             </strong>,
-            "value": <code
-              className="rule"
-            >
-              SONAR_TOKEN
-            </code>,
           }
         }
       />
-    </li>
-    <TokenStepGenerator
-      component={
-        {
-          "breadcrumbs": [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": [
+      <ul
+        className="list-styled list-alpha big-spacer-top"
+      >
+        <li
+          className="big-spacer-bottom"
+        >
+          <FormattedMessage
+            defaultMessage="onboarding.tutorial.env_variables"
+            id="onboarding.tutorial.with.gitlab_ci.env_variables.step1"
+            values={
+              {
+                "extra": <ClipboardIconButton
+                  copyValue="SONAR_TOKEN"
+                />,
+                "field": <strong>
+                  onboarding.tutorial.with.gitlab_ci.env_variables.step1
+                </strong>,
+                "value": <code
+                  className="rule"
+                >
+                  SONAR_TOKEN
+                </code>,
+              }
+            }
+          />
+        </li>
+        <TokenStepGenerator
+          component={
             {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": [],
-        }
-      }
-      currentUser={
-        {
-          "dismissedNotices": {
-            "educationPrinciples": false,
-          },
-          "groups": [],
-          "isLoggedIn": true,
-          "login": "luke",
-          "name": "Skywalker",
-          "scmAccounts": [],
-        }
-      }
-    />
-    <li
-      className="big-spacer-bottom"
-    >
-      onboarding.tutorial.with.gitlab_ci.env_variables.step3
-    </li>
-    <li
-      className="big-spacer-bottom"
-    >
-      onboarding.tutorial.with.gitlab_ci.env_variables.section.step4
-    </li>
-  </ol>
-  <hr
-    className="no-horizontal-margins"
-  />
-  <h2
-    className="spacer-bottom big-spacer-top"
-  >
-    onboarding.tutorial.with.gitlab_ci.env_variables.section2.title
-  </h2>
-  <FormattedMessage
-    defaultMessage="onboarding.tutorial.with.gitlab_ci.env_variables.section2.description"
-    id="onboarding.tutorial.with.gitlab_ci.env_variables.section2.description"
-    values={
-      {
-        "link": <strong>
-          onboarding.tutorial.with.gitlab_ci.env_variables.description.link
-        </strong>,
-      }
-    }
-  />
-  <ol
-    className="list-styled big-spacer-top big-spacer-bottom"
-  >
-    <li
-      className="big-spacer-bottom"
-    >
-      <FormattedMessage
-        defaultMessage="onboarding.tutorial.env_variables"
-        id="onboarding.tutorial.with.gitlab_ci.env_variables.step1"
-        values={
-          {
-            "extra": <ClipboardIconButton
-              copyValue="SONAR_HOST_URL"
-            />,
-            "field": <strong>
-              onboarding.tutorial.with.gitlab_ci.env_variables.step1
-            </strong>,
-            "value": <code
-              className="rule"
-            >
-              SONAR_HOST_URL
-            </code>,
+              "breadcrumbs": [],
+              "key": "my-project",
+              "name": "MyProject",
+              "qualifier": "TRK",
+              "qualityGate": {
+                "isDefault": true,
+                "key": "30",
+                "name": "Sonar way",
+              },
+              "qualityProfiles": [
+                {
+                  "deleted": false,
+                  "key": "my-qp",
+                  "language": "ts",
+                  "name": "Sonar way",
+                },
+              ],
+              "tags": [],
+            }
           }
-        }
+          currentUser={
+            {
+              "dismissedNotices": {
+                "educationPrinciples": false,
+              },
+              "groups": [],
+              "isLoggedIn": true,
+              "login": "luke",
+              "name": "Skywalker",
+              "scmAccounts": [],
+            }
+          }
+        />
+        <li
+          className="big-spacer-bottom"
+        >
+          <FormattedMessage
+            defaultMessage="onboarding.tutorial.with.gitlab_ci.env_variables.step3"
+            id="onboarding.tutorial.with.gitlab_ci.env_variables.step3"
+            values={
+              {
+                "value": <strong>
+                  onboarding.tutorial.with.gitlab_ci.env_variables.step3.value
+                </strong>,
+              }
+            }
+          />
+        </li>
+        <li
+          className="big-spacer-bottom"
+        >
+          <FormattedMessage
+            defaultMessage="onboarding.tutorial.with.gitlab_ci.env_variables.section.step4"
+            id="onboarding.tutorial.with.gitlab_ci.env_variables.section.step4"
+            values={
+              {
+                "value": <strong>
+                  onboarding.tutorial.with.gitlab_ci.env_variables.section.step4.value
+                </strong>,
+              }
+            }
+          />
+        </li>
+      </ul>
+      <hr
+        className="no-horizontal-margins"
       />
     </li>
-    <li
-      className="big-spacer-bottom"
-    >
+    <li>
+      <p
+        className="big-spacer-bottom big-spacer-top"
+      >
+        onboarding.tutorial.with.gitlab_ci.env_variables.section2.title
+      </p>
       <FormattedMessage
-        defaultMessage="onboarding.tutorial.env_variables"
-        id="onboarding.tutorial.with.gitlab_ci.env_variables.step2"
+        defaultMessage="onboarding.tutorial.with.gitlab_ci.env_variables.section2.description"
+        id="onboarding.tutorial.with.gitlab_ci.env_variables.section2.description"
         values={
           {
-            "extra": <ClipboardIconButton
-              copyValue="http://localhost:9000"
-            />,
-            "field": <strong>
-              onboarding.tutorial.env_variables.field
+            "link": <strong>
+              onboarding.tutorial.with.gitlab_ci.env_variables.description.link
             </strong>,
-            "value": <code
-              className="rule"
-            >
-              http://localhost:9000
-            </code>,
           }
         }
       />
-    </li>
-    <li
-      className="big-spacer-bottom"
-    >
-      onboarding.tutorial.with.gitlab_ci.env_variables.step3
-    </li>
-    <li
-      className="big-spacer-bottom"
-    >
-      onboarding.tutorial.with.gitlab_ci.env_variables.section2.step4
+      <ul
+        className="list-styled list-alpha big-spacer-top big-spacer-bottom"
+      >
+        <li
+          className="big-spacer-bottom"
+        >
+          <FormattedMessage
+            defaultMessage="onboarding.tutorial.env_variables"
+            id="onboarding.tutorial.with.gitlab_ci.env_variables.step1"
+            values={
+              {
+                "extra": <ClipboardIconButton
+                  copyValue="SONAR_HOST_URL"
+                />,
+                "field": <strong>
+                  onboarding.tutorial.with.gitlab_ci.env_variables.step1
+                </strong>,
+                "value": <code
+                  className="rule"
+                >
+                  SONAR_HOST_URL
+                </code>,
+              }
+            }
+          />
+        </li>
+        <li
+          className="big-spacer-bottom"
+        >
+          <FormattedMessage
+            defaultMessage="onboarding.tutorial.env_variables"
+            id="onboarding.tutorial.with.gitlab_ci.env_variables.step2"
+            values={
+              {
+                "extra": <ClipboardIconButton
+                  copyValue="http://localhost:9000"
+                />,
+                "field": <strong>
+                  onboarding.tutorial.env_variables.field
+                </strong>,
+                "value": <code
+                  className="rule"
+                >
+                  http://localhost:9000
+                </code>,
+              }
+            }
+          />
+        </li>
+        <li
+          className="big-spacer-bottom"
+        >
+          <FormattedMessage
+            defaultMessage="onboarding.tutorial.with.gitlab_ci.env_variables.step3"
+            id="onboarding.tutorial.with.gitlab_ci.env_variables.step3"
+            values={
+              {
+                "value": <strong>
+                  onboarding.tutorial.with.gitlab_ci.env_variables.step3.value
+                </strong>,
+              }
+            }
+          />
+        </li>
+        <li
+          className="big-spacer-bottom"
+        >
+          <FormattedMessage
+            defaultMessage="onboarding.tutorial.with.gitlab_ci.env_variables.section2.step4"
+            id="onboarding.tutorial.with.gitlab_ci.env_variables.section2.step4"
+            values={
+              {
+                "value": <strong>
+                  onboarding.tutorial.with.gitlab_ci.env_variables.section.step4.value
+                </strong>,
+              }
+            }
+          />
+        </li>
+      </ul>
+      <Button
+        className="big-spacer-bottom"
+        onClick={[MockFunction]}
+      >
+        continue
+      </Button>
     </li>
   </ol>
-  <Button
-    className="big-spacer-bottom"
-    onClick={[MockFunction]}
-  >
-    continue
-  </Button>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx
index 660f25c7604..6461f9a9251 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx
@@ -64,207 +64,222 @@ export default function MultiBranchPipelineStep(props: MultiBranchPipelineStepPr
   const isBitbucketCloud = alm === AlmKeys.BitbucketCloud;
   const isGitHub = alm === AlmKeys.GitHub;
 
+  const renderForm = React.useCallback(
+    () => (
+      <div className="boxed-group-inner">
+        <p className="big-spacer-bottom">
+          {translate('onboarding.tutorial.with.jenkins.multi_branch_pipeline.intro')}
+        </p>
+        <ol className="list-styled">
+          <li>
+            <SentenceWithHighlights
+              highlightKeys={['new_item', 'type']}
+              translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step1"
+            />
+          </li>
+          <li>
+            <SentenceWithHighlights
+              highlightKeys={['tab', 'source']}
+              translationKey={`onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.${alm}`}
+            />
+            <ul className="list-styled list-alpha">
+              {isBitbucketServer && (
+                <>
+                  <li>
+                    <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.server" />
+                  </li>
+                  <li>
+                    <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.creds" />
+                  </li>
+                  <li>
+                    {projectBinding?.repository ? (
+                      <LabelValuePair
+                        translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.owner"
+                        value={projectBinding.repository}
+                      />
+                    ) : (
+                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.owner" />
+                    )}
+                  </li>
+                  <li>
+                    {projectBinding?.slug ? (
+                      <LabelValuePair
+                        translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.repo"
+                        value={projectBinding.slug}
+                      />
+                    ) : (
+                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.repo" />
+                    )}
+                  </li>
+                </>
+              )}
+              {isBitbucketCloud && (
+                <>
+                  <li>
+                    <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.server" />
+                  </li>
+                  <li>
+                    <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.creds" />
+                  </li>
+                  <li>
+                    {workspaceId ? (
+                      <LabelValuePair
+                        translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.owner"
+                        value={workspaceId}
+                      />
+                    ) : (
+                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.owner" />
+                    )}
+                  </li>
+                  <li>
+                    {projectBinding?.repository ? (
+                      <LabelValuePair
+                        translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.repo"
+                        value={projectBinding.repository}
+                      />
+                    ) : (
+                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.repo" />
+                    )}
+                  </li>
+                </>
+              )}
+              {isGitHub && (
+                <>
+                  <li>
+                    <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.github.creds" />
+                  </li>
+                  <li>
+                    {almBinding !== undefined &&
+                    projectBinding !== undefined &&
+                    buildGithubLink(almBinding, projectBinding) !== null ? (
+                      <LabelValuePair
+                        translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.github.repo_url"
+                        value={buildGithubLink(almBinding, projectBinding) as string}
+                      />
+                    ) : (
+                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.github.repo_url" />
+                    )}
+                  </li>
+                </>
+              )}
+              {isGitLab && (
+                <>
+                  <li>
+                    <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.gitlab.creds" />
+                  </li>
+                  <li>
+                    <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.gitlab.owner" />
+                  </li>
+                  <li>
+                    <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.gitlab.repo" />
+                  </li>
+                </>
+              )}
+              <li>
+                <strong>
+                  {translate(
+                    'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label'
+                  )}
+                  :
+                </strong>
+                <ol className="list-styled list-roman little-spacer-top abs-width-600">
+                  <li>
+                    <LabelActionPair
+                      translationKey={`onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.${
+                        isGitLab ? 'branches_mrs' : 'branches_prs'
+                      }`}
+                    />
+                  </li>
+                  <li>
+                    <LabelActionPair
+                      translationKey={`onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.${
+                        isGitLab ? 'discover_mrs' : 'discover_prs'
+                      }`}
+                    />
+                  </li>
+                  <li>
+                    <strong>
+                      {translate(
+                        'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.label'
+                      )}
+                      :
+                    </strong>
+                    <ul className="list-styled little-spacer-top">
+                      <li>
+                        <SentenceWithHighlights
+                          highlightKeys={['add', 'ref_spec']}
+                          translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.add_behaviour"
+                        />
+                      </li>
+                      <li>
+                        <SentenceWithHighlights
+                          highlightKeys={['ref_spec']}
+                          translationKey={`onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.${
+                            isGitLab ? 'set_mr_ref_specs' : 'set_pr_ref_specs'
+                          }`}
+                        />
+                        <CodeSnippet
+                          isOneLine={true}
+                          snippet="+refs/heads/*:refs/remotes/@{remote}/*"
+                        />
+                      </li>
+                    </ul>
+                  </li>
+                </ol>
+              </li>
+            </ul>
+            <p className="big-spacer-left padder-left">
+              {translate(
+                'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.leave_defaults'
+              )}
+            </p>
+          </li>
+          <li>
+            <SentenceWithHighlights
+              highlightKeys={['tab']}
+              translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3"
+            />
+            <ul className="list-styled list-alpha">
+              <li>
+                <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3.mode" />
+              </li>
+              <li>
+                <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3.script_path" />
+              </li>
+            </ul>
+          </li>
+          <li>
+            <SentenceWithHighlights
+              highlightKeys={['save']}
+              translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step4"
+            />
+          </li>
+        </ol>
+        <Button className="big-spacer-top" onClick={props.onDone}>
+          {translate('continue')}
+          <ChevronRightIcon size={rawSizes.baseFontSizeRaw} />
+        </Button>
+      </div>
+    ),
+    [
+      isBitbucketCloud,
+      isBitbucketServer,
+      isGitHub,
+      isGitLab,
+      workspaceId,
+      alm,
+      projectBinding,
+      almBinding,
+      props.onDone,
+    ]
+  );
+
   return (
     <Step
       finished={finished}
       onOpen={props.onOpen}
       open={open}
-      renderForm={() => (
-        <div className="boxed-group-inner">
-          <p className="big-spacer-bottom">
-            {translate('onboarding.tutorial.with.jenkins.multi_branch_pipeline.intro')}
-          </p>
-          <ol className="list-styled">
-            <li>
-              <SentenceWithHighlights
-                highlightKeys={['new_item', 'type']}
-                translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step1"
-              />
-            </li>
-            <li>
-              <SentenceWithHighlights
-                highlightKeys={['tab', 'source']}
-                translationKey={`onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.${alm}`}
-              />
-              <ul className="list-styled">
-                {isBitbucketServer && (
-                  <>
-                    <li>
-                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.server" />
-                    </li>
-                    <li>
-                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.creds" />
-                    </li>
-                    <li>
-                      {projectBinding?.repository ? (
-                        <LabelValuePair
-                          translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.owner"
-                          value={projectBinding.repository}
-                        />
-                      ) : (
-                        <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.owner" />
-                      )}
-                    </li>
-                    <li>
-                      {projectBinding?.slug ? (
-                        <LabelValuePair
-                          translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.repo"
-                          value={projectBinding.slug}
-                        />
-                      ) : (
-                        <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket.repo" />
-                      )}
-                    </li>
-                  </>
-                )}
-                {isBitbucketCloud && (
-                  <>
-                    <li>
-                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.server" />
-                    </li>
-                    <li>
-                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.creds" />
-                    </li>
-                    <li>
-                      {workspaceId ? (
-                        <LabelValuePair
-                          translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.owner"
-                          value={workspaceId}
-                        />
-                      ) : (
-                        <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.owner" />
-                      )}
-                    </li>
-                    <li>
-                      {projectBinding?.repository ? (
-                        <LabelValuePair
-                          translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.repo"
-                          value={projectBinding.repository}
-                        />
-                      ) : (
-                        <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.repo" />
-                      )}
-                    </li>
-                  </>
-                )}
-                {isGitHub && (
-                  <>
-                    <li>
-                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.github.creds" />
-                    </li>
-                    <li>
-                      {almBinding !== undefined &&
-                      projectBinding !== undefined &&
-                      buildGithubLink(almBinding, projectBinding) !== null ? (
-                        <LabelValuePair
-                          translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.github.repo_url"
-                          value={buildGithubLink(almBinding, projectBinding) as string}
-                        />
-                      ) : (
-                        <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.github.repo_url" />
-                      )}
-                    </li>
-                  </>
-                )}
-                {isGitLab && (
-                  <>
-                    <li>
-                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.gitlab.creds" />
-                    </li>
-                    <li>
-                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.gitlab.owner" />
-                    </li>
-                    <li>
-                      <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.gitlab.repo" />
-                    </li>
-                  </>
-                )}
-                <li>
-                  <strong>
-                    {translate(
-                      'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label'
-                    )}
-                    :
-                  </strong>
-                  <ul className="list-styled little-spacer-top abs-width-600">
-                    <li>
-                      <LabelActionPair
-                        translationKey={`onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.${
-                          isGitLab ? 'branches_mrs' : 'branches_prs'
-                        }`}
-                      />
-                    </li>
-                    <li>
-                      <LabelActionPair
-                        translationKey={`onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.${
-                          isGitLab ? 'discover_mrs' : 'discover_prs'
-                        }`}
-                      />
-                    </li>
-                    <li>
-                      <strong>
-                        {translate(
-                          'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.label'
-                        )}
-                        :
-                      </strong>
-                      <ul className="list-styled little-spacer-top">
-                        <li>
-                          <SentenceWithHighlights
-                            highlightKeys={['add', 'ref_spec']}
-                            translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.add_behaviour"
-                          />
-                        </li>
-                        <li>
-                          <SentenceWithHighlights
-                            highlightKeys={['ref_spec']}
-                            translationKey={`onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.${
-                              isGitLab ? 'set_mr_ref_specs' : 'set_pr_ref_specs'
-                            }`}
-                          />
-                          <CodeSnippet
-                            isOneLine={true}
-                            snippet="+refs/heads/*:refs/remotes/@{remote}/*"
-                          />
-                        </li>
-                      </ul>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <p className="big-spacer-left padder-left">
-                {translate(
-                  'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.leave_defaults'
-                )}
-              </p>
-            </li>
-            <li>
-              <SentenceWithHighlights
-                highlightKeys={['tab']}
-                translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3"
-              />
-              <ul className="list-styled">
-                <li>
-                  <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3.mode" />
-                </li>
-                <li>
-                  <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3.script_path" />
-                </li>
-              </ul>
-            </li>
-            <li>
-              <SentenceWithHighlights
-                highlightKeys={['save']}
-                translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step4"
-              />
-            </li>
-          </ol>
-          <Button className="big-spacer-top" onClick={props.onDone}>
-            {translate('continue')}
-            <ChevronRightIcon size={rawSizes.baseFontSizeRaw} />
-          </Button>
-        </div>
-      )}
+      renderForm={renderForm}
       stepNumber={1}
       stepTitle={translate('onboarding.tutorial.with.jenkins.multi_branch_pipeline.title')}
     />
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
index ac6e4a524d8..7824dbbfffd 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
@@ -90,7 +90,7 @@ export default function WebhookStepBitbucket(props: WebhookStepBitbucketProps) {
             ),
           }}
         />
-        <ul className="list-styled">
+        <ul className="list-styled list-alpha">
           <li>
             <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.step1.name" />
           </li>
@@ -120,7 +120,7 @@ export default function WebhookStepBitbucket(props: WebhookStepBitbucketProps) {
             highlightKeys={['triggers', 'option']}
             translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucketcloud.step2"
           />
-          <ul className="list-styled">
+          <ul className="list-styled list-alpha">
             <li>
               <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucketcloud.step2.repo" />
             </li>
@@ -137,7 +137,7 @@ export default function WebhookStepBitbucket(props: WebhookStepBitbucketProps) {
             highlightKeys={['events']}
             translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucket.step2"
           />
-          <ul className="list-styled">
+          <ul className="list-styled list-alpha">
             <li>
               <LabelActionPair translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucket.step2.repo" />
             </li>
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/MultiBranchPipelineStep-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/MultiBranchPipelineStep-test.tsx.snap
index 41c13135736..233913fe993 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/MultiBranchPipelineStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/MultiBranchPipelineStep-test.tsx.snap
@@ -45,7 +45,7 @@ exports[`should render correctly: content for bitbucket 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <React.Fragment>
           <li>
@@ -76,8 +76,8 @@ exports[`should render correctly: content for bitbucket 1`] = `
             onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label
             :
           </strong>
-          <ul
-            className="list-styled little-spacer-top abs-width-600"
+          <ol
+            className="list-styled list-roman little-spacer-top abs-width-600"
           >
             <li>
               <LabelActionPair
@@ -124,7 +124,7 @@ exports[`should render correctly: content for bitbucket 1`] = `
                 </li>
               </ul>
             </li>
-          </ul>
+          </ol>
         </li>
       </ul>
       <p
@@ -143,7 +143,7 @@ exports[`should render correctly: content for bitbucket 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <li>
           <LabelActionPair
@@ -214,7 +214,7 @@ exports[`should render correctly: content for bitbucket cloud 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <React.Fragment>
           <li>
@@ -245,8 +245,8 @@ exports[`should render correctly: content for bitbucket cloud 1`] = `
             onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label
             :
           </strong>
-          <ul
-            className="list-styled little-spacer-top abs-width-600"
+          <ol
+            className="list-styled list-roman little-spacer-top abs-width-600"
           >
             <li>
               <LabelActionPair
@@ -293,7 +293,7 @@ exports[`should render correctly: content for bitbucket cloud 1`] = `
                 </li>
               </ul>
             </li>
-          </ul>
+          </ol>
         </li>
       </ul>
       <p
@@ -312,7 +312,7 @@ exports[`should render correctly: content for bitbucket cloud 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <li>
           <LabelActionPair
@@ -383,7 +383,7 @@ exports[`should render correctly: content for bitbucket cloud, no binding 1`] =
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <React.Fragment>
           <li>
@@ -412,8 +412,8 @@ exports[`should render correctly: content for bitbucket cloud, no binding 1`] =
             onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label
             :
           </strong>
-          <ul
-            className="list-styled little-spacer-top abs-width-600"
+          <ol
+            className="list-styled list-roman little-spacer-top abs-width-600"
           >
             <li>
               <LabelActionPair
@@ -460,7 +460,7 @@ exports[`should render correctly: content for bitbucket cloud, no binding 1`] =
                 </li>
               </ul>
             </li>
-          </ul>
+          </ol>
         </li>
       </ul>
       <p
@@ -479,7 +479,7 @@ exports[`should render correctly: content for bitbucket cloud, no binding 1`] =
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <li>
           <LabelActionPair
@@ -550,7 +550,7 @@ exports[`should render correctly: content for bitbucket, no binding 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucket"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <React.Fragment>
           <li>
@@ -579,8 +579,8 @@ exports[`should render correctly: content for bitbucket, no binding 1`] = `
             onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label
             :
           </strong>
-          <ul
-            className="list-styled little-spacer-top abs-width-600"
+          <ol
+            className="list-styled list-roman little-spacer-top abs-width-600"
           >
             <li>
               <LabelActionPair
@@ -627,7 +627,7 @@ exports[`should render correctly: content for bitbucket, no binding 1`] = `
                 </li>
               </ul>
             </li>
-          </ul>
+          </ol>
         </li>
       </ul>
       <p
@@ -646,7 +646,7 @@ exports[`should render correctly: content for bitbucket, no binding 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <li>
           <LabelActionPair
@@ -717,7 +717,7 @@ exports[`should render correctly: content for github 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.github"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <React.Fragment>
           <li>
@@ -737,8 +737,8 @@ exports[`should render correctly: content for github 1`] = `
             onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label
             :
           </strong>
-          <ul
-            className="list-styled little-spacer-top abs-width-600"
+          <ol
+            className="list-styled list-roman little-spacer-top abs-width-600"
           >
             <li>
               <LabelActionPair
@@ -785,7 +785,7 @@ exports[`should render correctly: content for github 1`] = `
                 </li>
               </ul>
             </li>
-          </ul>
+          </ol>
         </li>
       </ul>
       <p
@@ -804,7 +804,7 @@ exports[`should render correctly: content for github 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <li>
           <LabelActionPair
@@ -875,7 +875,7 @@ exports[`should render correctly: content for github, no binding 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.github"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <React.Fragment>
           <li>
@@ -894,8 +894,8 @@ exports[`should render correctly: content for github, no binding 1`] = `
             onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label
             :
           </strong>
-          <ul
-            className="list-styled little-spacer-top abs-width-600"
+          <ol
+            className="list-styled list-roman little-spacer-top abs-width-600"
           >
             <li>
               <LabelActionPair
@@ -942,7 +942,7 @@ exports[`should render correctly: content for github, no binding 1`] = `
                 </li>
               </ul>
             </li>
-          </ul>
+          </ol>
         </li>
       </ul>
       <p
@@ -961,7 +961,7 @@ exports[`should render correctly: content for github, no binding 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <li>
           <LabelActionPair
@@ -1032,7 +1032,7 @@ exports[`should render correctly: content for gitlab 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.gitlab"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <React.Fragment>
           <li>
@@ -1056,8 +1056,8 @@ exports[`should render correctly: content for gitlab 1`] = `
             onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label
             :
           </strong>
-          <ul
-            className="list-styled little-spacer-top abs-width-600"
+          <ol
+            className="list-styled list-roman little-spacer-top abs-width-600"
           >
             <li>
               <LabelActionPair
@@ -1104,7 +1104,7 @@ exports[`should render correctly: content for gitlab 1`] = `
                 </li>
               </ul>
             </li>
-          </ul>
+          </ol>
         </li>
       </ul>
       <p
@@ -1123,7 +1123,7 @@ exports[`should render correctly: content for gitlab 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.multi_branch_pipeline.step3"
       />
       <ul
-        className="list-styled"
+        className="list-styled list-alpha"
       >
         <li>
           <LabelActionPair
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/WebhookStepBitbucket-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/WebhookStepBitbucket-test.tsx.snap
index 7b3ef260405..b33311f1931 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/WebhookStepBitbucket-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/WebhookStepBitbucket-test.tsx.snap
@@ -18,7 +18,7 @@ exports[`should render correctly for bitbucket 1`] = `
       }
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
@@ -55,7 +55,7 @@ exports[`should render correctly for bitbucket 1`] = `
       translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucket.step2"
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
@@ -100,7 +100,7 @@ exports[`should render correctly for bitbucket: with branches disabled 1`] = `
       }
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
@@ -132,7 +132,7 @@ exports[`should render correctly for bitbucket: with branches disabled 1`] = `
       translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucket.step2"
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
@@ -169,7 +169,7 @@ exports[`should render correctly for bitbucket: with no alm binding 1`] = `
       }
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
@@ -206,7 +206,7 @@ exports[`should render correctly for bitbucket: with no alm binding 1`] = `
       translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucket.step2"
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
@@ -251,7 +251,7 @@ exports[`should render correctly for bitbucketcloud 1`] = `
       }
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
@@ -284,7 +284,7 @@ exports[`should render correctly for bitbucketcloud 1`] = `
       translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucketcloud.step2"
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
@@ -329,7 +329,7 @@ exports[`should render correctly for bitbucketcloud: with branches disabled 1`]
       }
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
@@ -362,7 +362,7 @@ exports[`should render correctly for bitbucketcloud: with branches disabled 1`]
       translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucketcloud.step2"
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
@@ -399,7 +399,7 @@ exports[`should render correctly for bitbucketcloud: with no alm binding 1`] = `
       }
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
@@ -432,7 +432,7 @@ exports[`should render correctly for bitbucketcloud: with no alm binding 1`] = `
       translationKey="onboarding.tutorial.with.jenkins.webhook.bitbucketcloud.step2"
     />
     <ul
-      className="list-styled"
+      className="list-styled list-alpha"
     >
       <li>
         <LabelActionPair
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsMSBuild.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsMSBuild.tsx
index acaae684e50..bb5a13be596 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsMSBuild.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsMSBuild.tsx
@@ -33,7 +33,7 @@ export default function DotNetPrereqsMSBuild() {
       <Alert className="spacer-top" variant="info">
         {translate('onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.info')}
       </Alert>
-      <ul className="list-styled">
+      <ol className="list-styled list-roman">
         <li>
           <SentenceWithHighlights
             highlightKeys={['msbuild']}
@@ -54,7 +54,7 @@ export default function DotNetPrereqsMSBuild() {
           <code className="rule">Default MSBuild</code>
           <ClipboardIconButton copyValue="Default MSBuild" />
         </li>
-      </ul>
+      </ol>
     </li>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsScanner.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsScanner.tsx
index f1242f14fdf..2e9780f1e04 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsScanner.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsScanner.tsx
@@ -33,7 +33,7 @@ export default function DotNetPrereqsScanner() {
       <Alert className="spacer-top" variant="info">
         {translate('onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.info')}
       </Alert>
-      <ul className="list-styled">
+      <ol className="list-styled list-roman">
         <li>
           <SentenceWithHighlights
             highlightKeys={['path']}
@@ -60,7 +60,7 @@ export default function DotNetPrereqsScanner() {
             translationKey="onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.step5"
           />
         </li>
-      </ul>
+      </ol>
     </li>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/DotNetPrereqsMSBuild-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/DotNetPrereqsMSBuild-test.tsx.snap
index 53b0ff9ab88..d1290fac87f 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/DotNetPrereqsMSBuild-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/DotNetPrereqsMSBuild-test.tsx.snap
@@ -18,8 +18,8 @@ exports[`should render correctly 1`] = `
   >
     onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.info
   </Alert>
-  <ul
-    className="list-styled"
+  <ol
+    className="list-styled list-roman"
   >
     <li>
       <SentenceWithHighlights
@@ -62,6 +62,6 @@ exports[`should render correctly 1`] = `
         copyValue="Default MSBuild"
       />
     </li>
-  </ul>
+  </ol>
 </li>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/DotNetPrereqsScanner-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/DotNetPrereqsScanner-test.tsx.snap
index 22ee4c94191..50ac585d6f4 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/DotNetPrereqsScanner-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/DotNetPrereqsScanner-test.tsx.snap
@@ -18,8 +18,8 @@ exports[`should render correctly 1`] = `
   >
     onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.info
   </Alert>
-  <ul
-    className="list-styled"
+  <ol
+    className="list-styled list-roman"
   >
     <li>
       <SentenceWithHighlights
@@ -70,6 +70,6 @@ exports[`should render correctly 1`] = `
         translationKey="onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.step5"
       />
     </li>
-  </ul>
+  </ol>
 </li>
 `;
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 f42e670123d..95ff97d115e 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3759,9 +3759,9 @@ onboarding.tutorial.with.bitbucket_pipelines.variables.intro=In your Bitbucket r
 onboarding.tutorial.with.bitbucket_pipelines.variables.intro.link=Repository settings > Repository variables
 onboarding.tutorial.with.bitbucket_pipelines.variables.name.sentence=In the {name} field, enter
 onboarding.tutorial.with.bitbucket_pipelines.variables.name.sentence.name=Name
-onboarding.tutorial.with.bitbucket_pipelines.variables.add.sentence=Click on {add}
+onboarding.tutorial.with.bitbucket_pipelines.variables.add.sentence=Click on {add}.
 onboarding.tutorial.with.bitbucket_pipelines.variables.add.sentence.add=Add
-onboarding.tutorial.with.bitbucket_pipelines.variables.secured.sentence=Make sure {secured} is check
+onboarding.tutorial.with.bitbucket_pipelines.variables.secured.sentence=Make sure {secured} is check.
 onboarding.tutorial.with.bitbucket_pipelines.variables.secured.sentence.secured=Secured
 
 onboarding.tutorial.with.github_action.create_secret.title=Create GitHub Secrets
@@ -3769,9 +3769,9 @@ onboarding.tutorial.with.github_action.secret.intro=In your GitHub repository, g
 onboarding.tutorial.with.github_action.secret.intro.link=Settings > Secrets
 onboarding.tutorial.with.github_action.secret.name.sentence=In the {name} field, enter
 onboarding.tutorial.with.github_action.secret.name.sentence.name=Name
-onboarding.tutorial.with.github_action.secret.new.sentence=Click on {new_secret}
+onboarding.tutorial.with.github_action.secret.new.sentence=Click on {new_secret}.
 onboarding.tutorial.with.github_action.secret.new.sentence.new_secret=New repository secret
-onboarding.tutorial.with.github_action.secret.add.sentence=Click on {add_secret}
+onboarding.tutorial.with.github_action.secret.add.sentence=Click on {add_secret}.
 onboarding.tutorial.with.github_action.secret.add.sentence.add_secret=Add secret
 onboarding.tutorial.with.github_action.yaml.title=Create Workflow YAML File
 onboarding.tutorial.with.github_action.yaml.create_yml=Create or update your {file} YAML file with the following content:
@@ -3786,16 +3786,18 @@ onboarding.tutorial.with.gitlab_ci.project_key.cfamily.step2=Create a {file} fil
 
 onboarding.tutorial.with.gitlab_ci.env_variables.title=Add environment variables
 onboarding.tutorial.with.gitlab_ci.env_variables.description.link=Settings > CI/CD > Variables
-onboarding.tutorial.with.gitlab_ci.env_variables.section.title=a. Define the SonarQube Token environment variable
+onboarding.tutorial.with.gitlab_ci.env_variables.section.title=Define the SonarQube Token environment variable.
 onboarding.tutorial.with.gitlab_ci.env_variables.section.description=In GitLab, go to {link} to add the following variable and make sure it is available for your project:
 onboarding.tutorial.with.gitlab_ci.env_variables.edit.token.tooltip=Use an existing token or generate a new one.
 onboarding.tutorial.with.gitlab_ci.env_variables.step1=Key
 
-onboarding.tutorial.with.gitlab_ci.env_variables.step3=Uncheck the "Protect Variable" checkbox
-onboarding.tutorial.with.gitlab_ci.env_variables.section.step4=Check the "Mask Variable" checkbox
-onboarding.tutorial.with.gitlab_ci.env_variables.section2.title=b. Define the SonarQube URL environment variable
+onboarding.tutorial.with.gitlab_ci.env_variables.step3=Uncheck the {value} checkbox.
+onboarding.tutorial.with.gitlab_ci.env_variables.step3.value=Protect Variable
+onboarding.tutorial.with.gitlab_ci.env_variables.section.step4=Check the {value} checkbox.
+onboarding.tutorial.with.gitlab_ci.env_variables.section.step4.value=Mask Variable
+onboarding.tutorial.with.gitlab_ci.env_variables.section2.title=Define the SonarQube URL environment variable.
 onboarding.tutorial.with.gitlab_ci.env_variables.section2.description=Still in {link} add a new variable and make sure it is available for your project:
-onboarding.tutorial.with.gitlab_ci.env_variables.section2.step4=Leave the "Mask variable" checkbox unchecked
+onboarding.tutorial.with.gitlab_ci.env_variables.section2.step4=Leave the {value} checkbox unchecked.
 onboarding.tutorial.with.gitlab_ci.yml.title=Create or update the configuration file
 onboarding.tutorial.with.gitlab_ci.yml.description=Create or update your {filename} file with the following content.
 onboarding.tutorial.with.gitlab_ci.yml.filename=.gitlab-ci.yml
@@ -3845,7 +3847,7 @@ onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.serv
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.creds.label=Credentials
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.creds.action=select the Bitbucket Cloud credentials.
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.owner.label=Owner
-onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.owner.action=enter your workspace ID
+onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.owner.action=enter your workspace ID.
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.repo.label=Repository
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.bitbucketcloud.repo.action=select the repository you want to analyze.
 
@@ -3869,20 +3871,20 @@ onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.gitlab.repo.action=
 
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label=Behaviors
 
-onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.branches_prs.action=Exclude branches that are also filed as PRs
+onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.branches_prs.action=Exclude branches that are also filed as PRs.
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.branches_prs.label=Discover branches
-onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.branches_mrs.action=Exclude branches that are also filed as MRs
+onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.branches_mrs.action=Exclude branches that are also filed as MRs.
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.branches_mrs.label=Discover branches
 
-onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.discover_prs.action=The current pull request revision
+onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.discover_prs.action=The current pull request revision.
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.discover_prs.label=Discover pull requests from origin
-onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.discover_mrs.action=The current merge request revision
+onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.discover_mrs.action=The current merge request revision.
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.discover_mrs.label=Discover merge requests from origin
 
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.label=Specify ref specs
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.add_behaviour.sentence=By default, this behavior is not active. If you do not see it, click on {add} to see the list of available behaviors, and select {ref_spec}.
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.add_behaviour.sentence.add=Add
-onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.add_behaviour.sentence.ref_spec=Specify ref specs 
+onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.add_behaviour.sentence.ref_spec=Specify ref specs
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.set_pr_ref_specs.sentence=In order to correctly compute new code for Pull Requests, the scanner will need the refs of the target branch. Make sure the {ref_spec} value will include any target branches (the default value should be enough). Example:
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.set_pr_ref_specs.sentence.ref_spec=Ref Spec
 onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.set_mr_ref_specs.sentence=In order to correctly compute new code for Merge Requests, the scanner will need the refs of the target branch. Make sure the {ref_spec} value will include any target branches (the default value should be enough). Example:
@@ -4003,7 +4005,7 @@ onboarding.tutorial.with.jenkins.jenkinsfile.maven.step3.help2.sentence.name=Nam
 onboarding.tutorial.with.jenkins.jenkinsfile.gradle.step2.sentence=Add the following to your {file} file:
 onboarding.tutorial.with.jenkins.jenkinsfile.dotnet.build_agent=Choose your build agent.
 
-onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.title.sentence=Prerequisite: Add a {default_msbuild} tool
+onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.title.sentence=Prerequisite: Add a {default_msbuild} tool.
 onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.title.sentence.default_msbuild=MSBuild
 onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.info=This step need to be done only once per jenkins instance.
 onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.step1.sentence=In Jenkins, make sure to have the {msbuild} installed.
@@ -4017,12 +4019,12 @@ onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.step3.sentence.add_msbui
 onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.step3.sentence.name=Name
 
 
-onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.title.sentence=Prerequisite: Add a {default_scanner} tool
+onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.title.sentence=Prerequisite: Add a {default_scanner} tool.
 onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.title.sentence.default_scanner=SonarScanner for MSBuild
 onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.info=This step needs to be done only once per jenkins instance or if you need different scanner versions.
 onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.step1.sentence=In Jenkins, navigate to {path}.
 onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.step1.sentence.path=Manage Jenkins > Global Tool Configuration
-onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.step2.sentence=Under {default_scanner} click on {add_scanner_for_msbuild}
+onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.step2.sentence=Under {default_scanner} click on {add_scanner_for_msbuild}.
 onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.step2.sentence.default_scanner=SonarScanner for MSBuild
 onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.step2.sentence.add_scanner_for_msbuild=Add SonarScanner for MSBuild
 onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.step3.sentence=Choose a {name} that will be used in the last step: 
@@ -4051,14 +4053,14 @@ onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.sentence=From you
 onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.sentence.link=SonarQube extension
 onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.sentence.button=Get it free
 onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.title=Add a new SonarQube Service Endpoint in your project
-onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step1.sentence=In Azure DevOps, go to {menu}
+onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step1.sentence=In Azure DevOps, go to {menu}.
 onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step1.sentence.menu=Project settings > Service connections
-onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step2.sentence=Add a new service connection of type {type}
+onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step2.sentence=Add a new service connection of type {type}.
 onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step2.sentence.type=SonarQube
 onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step3.sentence=Enter your SonarQube server url: {url} {button}
 onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step4.sentence=Enter an existing token, or a newly generated one
-onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step5.sentence=Enter a memorable connection name
-onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step6.sentence=Create the service connection
+onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step5.sentence=Enter a memorable connection name.
+onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step6.sentence=Create the service connection.
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.title=Configure analysis
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info=The following steps assume you are using the Azure Pipelines classic editor. Check out our {doc_link} for the YAML counterpart.
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info.doc_link=Azure DevOps integration page
@@ -4069,7 +4071,7 @@ onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp.win.s
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp.nix.sentence.task=Bash script
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp.win.sentence.inline=inline
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp.nix.sentence.inline=inline
-onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.ccpp.sentence=Add a new {task} task {before} your build task
+onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.ccpp.sentence=Add a new {task} task {before} your build task.
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp=In {additional} in the {advanced} section, add a new property to set the output directory to which the Build Wrapper should write its results: {property} {button}
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp.additional=Additional Properties
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp.advanced=Advanced
@@ -4078,22 +4080,22 @@ onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build.ccpp.sentence.task
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_script.ccpp.sentence=Run {build_wrapper} executable. Pass in as the arguments (1) the output directory configured in the previous task and (2) the command that runs a clean build of your project (not an incremental build). Example:
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_script.ccpp.sentence.build_wrapper=Build Wrapper
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.ccpp.sentence=Add a new {task} task {after} your build task. Consider running this task right after the previous one as the build environment should not be significantly altered before running the analysis.
-onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.sentence=In Azure DevOps, create or edit a build {pipeline} and add a new {task} task {before} your build task
+onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.sentence=In Azure DevOps, create or edit a build {pipeline} and add a new {task} task {before} your build task:
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.sentence.pipeline=Pipeline
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.sentence.task=Prepare Analysis Configuration
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.sentence.before=before
-onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.endpoint.sentence=Select the {endpoint} you created in Step 2
+onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.endpoint.sentence=Select the {endpoint} you created in Step 2.
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.endpoint.sentence.endpoint=SonarQube server endpoint
-onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis=Under {section}, select {run_analysis_value}
+onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis=Under {section}, select {run_analysis_value}.
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis.section=Choose the way to run the analysis
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis.values.dotnet=Integrate with MSBuild
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis.values.maven=Integrate with Maven or Gradle
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis.values.gradle=Integrate with Maven or Gradle
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis.values.cfamily=Use standalone scanner
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis.values.other=Use standalone scanner
-onboarding.tutorial.with.azure_pipelines.BranchAnalysis.manual.sentence=Select the {mode} mode
+onboarding.tutorial.with.azure_pipelines.BranchAnalysis.manual.sentence=Select the {mode} mode.
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.manual.sentence.mode=Manually provide configuration
-onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.sentence=Add a new {task} task {after} your build task
+onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.sentence=Add a new {task} task {after} your build task.
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.sentence.task=Run Code Analysis
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.sentence.after=after
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence=In the {project_key} field, enter {key} {button}
@@ -4101,21 +4103,21 @@ onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence.project
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.advanced_properties.sentence=Expand the {section} and replace the {properties} with the following snippet
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.advanced_properties.sentence.section=Advanced section
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.advanced_properties.sentence.properties=Additional Properties
-onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.title=Add a new Java tool installer task
+onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.title=Add a new Java tool installer task:
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.sentence=Under {field}, select {value}
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_version=JDK version
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.or_higher=(or higher)
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_architecture=JDK architecture
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_source=JDK source
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.pre-installed=Pre-installed
-onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java=Edit or add a new {0} task
+onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java=Edit or add a new {0} task:
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java.settings.sentence=Under {section}, check {option}
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java.settings.sentence.section=Code Analysis
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java.settings.sentence.option=Run SonarQube or SonarCloud Analysis
-onboarding.tutorial.with.azure_pipelines.BranchAnalysis.publish_qg.sentence=Add a new {task} task to publish SonarQube's Quality Gate results on your build pipeline summary
+onboarding.tutorial.with.azure_pipelines.BranchAnalysis.publish_qg.sentence=Add a new {task} task to publish SonarQube's Quality Gate results on your build pipeline summary.
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.publish_qg.info.sentence1=This task may increase your build time as your pipeline will have to wait for SonarQube to process the analysis report. It is highly recommended but optional.
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.publish_qg.sentence.task=Publish Quality Gate Result
-onboarding.tutorial.with.azure_pipelines.BranchAnalysis.continous_integration.sentence=Under the {tab} tab of your pipeline, check {continuous_integration} and select all the branches for which you want the SonarQube analysis to run automatically
+onboarding.tutorial.with.azure_pipelines.BranchAnalysis.continous_integration.sentence=Under the {tab} tab of your pipeline, check {continuous_integration} and select all the branches for which you want the SonarQube analysis to run automatically.
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.continous_integration.sentence.tab=Triggers
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.continous_integration.sentence.continuous_integration=Enable continuous integration
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.continous_integration.no_branches.sentence=Under the {tab} tab of your pipeline, check {continuous_integration} and select the main branch
-- 
2.39.5