SONAR-14553 Add lists consistency in tutorial

18 files changed, 695 insertions, 572 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>
 `;