From 5e76afb9f1c1954105c89ae9ebc98b7e5920bd02 Mon Sep 17 00:00:00 2001
From: Wouter Admiraal
 <45544358+wouter-admiraal-sonarsource@users.noreply.github.com>
Date: Fri, 18 Jun 2021 09:49:38 +0200
Subject: [PATCH] SONAR-14939 Mention in all tutorials that Pull Request
 Decoration will be automatically set up

---
 .../tutorials/TutorialSelectionRenderer.tsx   |   7 +-
 .../TutorialSelectionRenderer-test.tsx.snap   |   1 +
 .../AzurePipelinesTutorial.tsx                |   6 +-
 .../azure-pipelines/SaveAndRunStepContent.tsx |  27 +-
 .../__tests__/SaveAndRunStepContent-test.tsx  |  16 +-
 .../AzurePipelinesTutorial-test.tsx.snap      |   2 +-
 .../SaveAndRunStepContent-test.tsx.snap       |  58 ++-
 .../BitbucketPipelinesTutorial.tsx            |   8 +-
 .../BitbucketPipelinesTutorial-test.tsx       |  41 +-
 .../BitbucketPipelinesTutorial-test.tsx.snap  |  78 +++-
 .../tutorials/components/AllSet.tsx           |   5 +-
 .../tutorials/components/YamlFileStep.tsx     |   6 +-
 .../components/__tests__/AllSet-test.tsx      |   5 +-
 .../__tests__/YamlFileStep-test.tsx           |   3 +-
 .../__snapshots__/AllSet-test.tsx.snap        |   2 +-
 .../github-action/GitHubActionTutorial.tsx    |   8 +-
 .../__tests__/GitHubActionTutorial-test.tsx   |  41 +-
 .../GitHubActionTutorial-test.tsx.snap        |  78 +++-
 .../tutorials/gitlabci/YmlFileStep.tsx        |  17 +-
 .../EnvironmentVariablesStep-test.tsx         |   2 +-
 .../__tests__/ProjectKeyStep-test.tsx         |   2 +-
 .../gitlabci/__tests__/YmlFileStep-test.tsx   |   9 +-
 .../__snapshots__/YmlFileStep-test.tsx.snap   | 428 +++++++++++++++++-
 .../tutorials/jenkins/JenkinsTutorial.tsx     |   2 +-
 .../tutorials/jenkins/JenkinsfileStep.tsx     |   6 +-
 .../__tests__/JenkinsfileStep-test.tsx        |  10 +-
 .../MultiBranchPipelineStep-test.tsx          |   2 +-
 .../jenkins/__tests__/PipelineStep-test.tsx   |   2 +-
 .../__tests__/PreRequisitesStep-test.tsx      |   2 +-
 .../jenkins/__tests__/WebhookStep-test.tsx    |   2 +-
 .../JenkinsTutorial-test.tsx.snap             |   2 +
 .../JenkinsfileStep-test.tsx.snap             |  16 +-
 .../tutorials/{jenkins => }/test-utils.ts     |   5 +-
 .../resources/org/sonar/l10n/core.properties  |  15 +-
 34 files changed, 788 insertions(+), 126 deletions(-)
 rename server/sonar-web/src/main/js/components/tutorials/{jenkins => }/test-utils.ts (93%)

diff --git a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
index 5d0847a1b69..acaf2ed20a8 100644
--- a/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/TutorialSelectionRenderer.tsx
@@ -225,7 +225,12 @@ export default function TutorialSelectionRenderer(props: TutorialSelectionRender
       )}
 
       {selectedTutorial === TutorialModes.AzurePipelines && (
-        <AzurePipelinesTutorial baseUrl={baseUrl} component={component} currentUser={currentUser} />
+        <AzurePipelinesTutorial
+          alm={almBinding?.alm}
+          baseUrl={baseUrl}
+          component={component}
+          currentUser={currentUser}
+        />
       )}
     </>
   );
diff --git a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
index 0422dc2c2ae..096b3d93d8a 100644
--- a/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/__tests__/__snapshots__/TutorialSelectionRenderer-test.tsx.snap
@@ -356,6 +356,7 @@ exports[`should render correctly for gitlab 1`] = `
 exports[`should render correctly: azure pipelines tutorial 1`] = `
 <Fragment>
   <AzurePipelinesTutorial
+    alm="github"
     baseUrl="http://localhost:9000"
     component={
       Object {
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
index a13e8a6a2b3..5bda46d5743 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { Button } from 'sonar-ui-common/components/controls/buttons';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { AlmKeys } from '../../../types/alm-settings';
 import Step from '../components/Step';
 import BranchAnalysisStepContent from './BranchAnalysisStepContent';
 import ExtensionInstallationStepContent from './ExtensionInstallationStepContent';
@@ -27,6 +28,7 @@ import SaveAndRunStepContent from './SaveAndRunStepContent';
 import ServiceEndpointStepContent from './ServiceEndpointStepContent';
 
 export interface AzurePipelinesTutorialProps {
+  alm?: AlmKeys;
   baseUrl: string;
   component: T.Component;
   currentUser: T.LoggedInUser;
@@ -46,7 +48,7 @@ interface Step {
 }
 
 export default function AzurePipelinesTutorial(props: AzurePipelinesTutorialProps) {
-  const { baseUrl, component, currentUser } = props;
+  const { alm, baseUrl, component, currentUser } = props;
 
   const [currentStep, setCurrentStep] = React.useState(Steps.ExtensionInstallation);
   const [isCurrentStepValid, setIsCurrentStepValid] = React.useState(false);
@@ -73,7 +75,7 @@ export default function AzurePipelinesTutorial(props: AzurePipelinesTutorialProp
       ),
       checkValidity: true
     },
-    { step: Steps.SaveAndRun, content: <SaveAndRunStepContent /> }
+    { step: Steps.SaveAndRun, content: <SaveAndRunStepContent alm={alm} /> }
   ];
 
   const switchCurrentStep = (step: Steps) => {
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/SaveAndRunStepContent.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/SaveAndRunStepContent.tsx
index ac375897acb..c07e543c61f 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/SaveAndRunStepContent.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/SaveAndRunStepContent.tsx
@@ -18,10 +18,21 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { translate } from 'sonar-ui-common/helpers/l10n';
+import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import { getBaseUrl } from '../../../helpers/system';
+import { AlmKeys } from '../../../types/alm-settings';
+import { withAppState } from '../../hoc/withAppState';
 
-export default function SaveAndRunStepContent() {
+export interface SaveAndRunStepContentProps {
+  alm?: AlmKeys;
+  appState: T.AppState;
+}
+
+export function SaveAndRunStepContent(props: SaveAndRunStepContentProps) {
+  const {
+    alm,
+    appState: { branchesEnabled }
+  } = props;
   return (
     <>
       <div className="display-flex-row big-spacer-bottom">
@@ -39,7 +50,15 @@ export default function SaveAndRunStepContent() {
               {translate('onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit')}
             </strong>
           </p>
-          <p>{translate('onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit.why')}</p>
+          <p>
+            {translate('onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit.why')}{' '}
+            {branchesEnabled &&
+              alm &&
+              translateWithParameters(
+                'onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit.pr_deco',
+                translate('alm', alm)
+              )}
+          </p>
         </div>
       </div>
       <div className="display-flex-row">
@@ -63,3 +82,5 @@ export default function SaveAndRunStepContent() {
     </>
   );
 }
+
+export default withAppState(SaveAndRunStepContent);
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/SaveAndRunStepContent-test.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/SaveAndRunStepContent-test.tsx
index b4986e4b0ca..b58a2aa6a41 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/SaveAndRunStepContent-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/SaveAndRunStepContent-test.tsx
@@ -19,13 +19,19 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import SaveAndRunStepContent from '../SaveAndRunStepContent';
+import { mockAppState } from '../../../../helpers/testMocks';
+import { AlmKeys } from '../../../../types/alm-settings';
+import { SaveAndRunStepContent, SaveAndRunStepContentProps } from '../SaveAndRunStepContent';
 
 it('should render correctly', () => {
-  const wrapper = shallowRender();
-  expect(wrapper).toMatchSnapshot();
+  expect(shallowRender()).toMatchSnapshot('default');
+  expect(
+    shallowRender({ alm: AlmKeys.Azure, appState: mockAppState({ branchesEnabled: true }) })
+  ).toMatchSnapshot('with branches and alm info');
 });
 
-function shallowRender() {
-  return shallow(<SaveAndRunStepContent />);
+function shallowRender(props: Partial<SaveAndRunStepContentProps> = {}) {
+  return shallow<SaveAndRunStepContentProps>(
+    <SaveAndRunStepContent appState={mockAppState()} {...props} />
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-test.tsx.snap
index b6eb93760ea..694610a19c5 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-test.tsx.snap
@@ -112,7 +112,7 @@ exports[`should render correctly: last-step-wrapper 1`] = `
       className="boxed-group-inner"
     >
       <div>
-        <SaveAndRunStepContent />
+        <Connect(withAppState(SaveAndRunStepContent)) />
       </div>
     </div>
   </div>
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/SaveAndRunStepContent-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/SaveAndRunStepContent-test.tsx.snap
index 9f4dd3417bd..0a15051c265 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/SaveAndRunStepContent-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/SaveAndRunStepContent-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render correctly 1`] = `
+exports[`should render correctly: default 1`] = `
 <Fragment>
   <div
     className="display-flex-row big-spacer-bottom"
@@ -23,6 +23,62 @@ exports[`should render correctly 1`] = `
       </p>
       <p>
         onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit.why
+         
+      </p>
+    </div>
+  </div>
+  <div
+    className="display-flex-row"
+  >
+    <div>
+      <img
+        alt=""
+        className="big-spacer-right"
+        src="/images/tutorials/refresh.svg"
+        width={30}
+      />
+    </div>
+    <div>
+      <p
+        className="little-spacer-bottom"
+      >
+        <strong>
+          onboarding.tutorial.with.azure_pipelines.SaveAndRun.refresh
+        </strong>
+      </p>
+      <p>
+        onboarding.tutorial.with.azure_pipelines.SaveAndRun.refresh.why
+      </p>
+    </div>
+  </div>
+</Fragment>
+`;
+
+exports[`should render correctly: with branches and alm info 1`] = `
+<Fragment>
+  <div
+    className="display-flex-row big-spacer-bottom"
+  >
+    <div>
+      <img
+        alt=""
+        className="big-spacer-right"
+        src="/images/tutorials/commit.svg"
+        width={30}
+      />
+    </div>
+    <div>
+      <p
+        className="little-spacer-bottom"
+      >
+        <strong>
+          onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit
+        </strong>
+      </p>
+      <p>
+        onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit.why
+         
+        onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit.pr_deco.alm.azure
       </p>
     </div>
   </div>
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
index e318f5bccac..982c7cc4b6a 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
@@ -19,7 +19,11 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import { AlmSettingsInstance, ProjectAlmBindingResponse } from '../../../types/alm-settings';
+import {
+  AlmKeys,
+  AlmSettingsInstance,
+  ProjectAlmBindingResponse
+} from '../../../types/alm-settings';
 import Step from '../components/Step';
 import YamlFileStep from '../components/YamlFileStep';
 import AnalysisCommand from './AnalysisCommand';
@@ -65,7 +69,7 @@ export default function BitbucketPipelinesTutorial(props: BitbucketPipelinesTuto
         onOpen={() => setStep(Steps.YAML)}
         open={step === Steps.YAML}
         renderForm={() => (
-          <YamlFileStep>
+          <YamlFileStep alm={AlmKeys.BitbucketCloud}>
             {buildTool => <AnalysisCommand buildTool={buildTool} component={component} />}
           </YamlFileStep>
         )}
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx
index 655744180b6..1bad0d829df 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx
@@ -25,16 +25,49 @@ import {
 } from '../../../../helpers/mocks/alm-settings';
 import { mockComponent, mockLoggedInUser } from '../../../../helpers/testMocks';
 import Step from '../../components/Step';
+import { renderStepContent } from '../../test-utils';
 import BitbucketPipelinesTutorial, {
   BitbucketPipelinesTutorialProps
 } from '../BitbucketPipelinesTutorial';
 
 it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot('default');
+  expect(renderStepContent(shallowRender())).toMatchSnapshot('repo variable step content');
+  expect(renderStepContent(shallowRender(), 1)).toMatchSnapshot('yaml file step content');
+});
+
+it('should correctly navigate through the steps', () => {
   const wrapper = shallowRender();
-  expect(wrapper).toMatchSnapshot('For variable steps');
-  const stepYaml = wrapper.find(Step).at(1);
-  stepYaml.simulate('open');
-  expect(wrapper).toMatchSnapshot('For yaml steps');
+
+  expect(
+    wrapper
+      .find(Step)
+      .at(0)
+      .props().open
+  ).toBe(true);
+  expect(
+    wrapper
+      .find(Step)
+      .at(1)
+      .props().open
+  ).toBe(false);
+
+  wrapper
+    .find(Step)
+    .at(1)
+    .simulate('open');
+  expect(
+    wrapper
+      .find(Step)
+      .at(0)
+      .props().open
+  ).toBe(false);
+  expect(
+    wrapper
+      .find(Step)
+      .at(1)
+      .props().open
+  ).toBe(true);
 });
 
 function shallowRender(props: Partial<BitbucketPipelinesTutorialProps> = {}) {
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/__snapshots__/BitbucketPipelinesTutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/__snapshots__/BitbucketPipelinesTutorial-test.tsx.snap
index 0e33b556ff6..d3e72b5eb64 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/__snapshots__/BitbucketPipelinesTutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/__snapshots__/BitbucketPipelinesTutorial-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render correctly: For variable steps 1`] = `
+exports[`should render correctly: default 1`] = `
 <Fragment>
   <Step
     finished={false}
@@ -20,22 +20,62 @@ exports[`should render correctly: For variable steps 1`] = `
 </Fragment>
 `;
 
-exports[`should render correctly: For yaml steps 1`] = `
-<Fragment>
-  <Step
-    finished={true}
-    onOpen={[Function]}
-    open={false}
-    renderForm={[Function]}
-    stepNumber={1}
-    stepTitle="onboarding.tutorial.with.bitbucket_pipelines.create_secret.title"
-  />
-  <Step
-    onOpen={[Function]}
-    open={true}
-    renderForm={[Function]}
-    stepNumber={2}
-    stepTitle="onboarding.tutorial.with.bitbucket_pipelines.yaml.title"
-  />
-</Fragment>
+exports[`should render correctly: repo variable step content 1`] = `
+<RepositoryVariables
+  almBinding={
+    Object {
+      "alm": "github",
+      "key": "key",
+    }
+  }
+  baseUrl="test"
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "TRK",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
+        },
+      ],
+      "tags": Array [],
+    }
+  }
+  currentUser={
+    Object {
+      "groups": Array [],
+      "isLoggedIn": true,
+      "login": "luke",
+      "name": "Skywalker",
+      "scmAccounts": Array [],
+    }
+  }
+  onDone={[Function]}
+  projectBinding={
+    Object {
+      "alm": "bitbucketcloud",
+      "key": "foo",
+      "monorepo": true,
+      "repository": "repo-slug",
+    }
+  }
+/>
+`;
+
+exports[`should render correctly: yaml file step content 1`] = `
+<YamlFileStep
+  alm="bitbucketcloud"
+>
+  [Function]
+</YamlFileStep>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx b/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
index 74dd138b77b..2e0c1e3d818 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
@@ -20,15 +20,18 @@
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
+import { AlmKeys } from '../../../types/alm-settings';
 import { withAppState } from '../../hoc/withAppState';
 import SentenceWithHighlights from './SentenceWithHighlights';
 
 export interface AllSetProps {
+  alm: AlmKeys;
   appState: T.AppState;
 }
 
 export function AllSet(props: AllSetProps) {
   const {
+    alm,
     appState: { branchesEnabled }
   } = props;
 
@@ -55,7 +58,7 @@ export function AllSet(props: AllSetProps) {
           </p>
           <p>
             {branchesEnabled
-              ? translate('onboarding.tutorial.ci_outro.commit.why')
+              ? translate('onboarding.tutorial.ci_outro.commit.why', alm)
               : translate('onboarding.tutorial.ci_outro.commit.why.no_branches')}
           </p>
         </div>
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx b/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx
index 007c9a8a975..88026e76c98 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx
@@ -19,11 +19,13 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { AlmKeys } from '../../../types/alm-settings';
 import RenderOptions from '../components/RenderOptions';
 import { BuildTools } from '../types';
 import AllSet from './AllSet';
 
 export interface YamlFileStepProps {
+  alm: AlmKeys;
   children?: (buildTool?: BuildTools) => React.ReactElement<{}>;
 }
 
@@ -34,7 +36,7 @@ export interface AnalysisCommandProps {
 }
 
 export default function YamlFileStep(props: YamlFileStepProps) {
-  const { children } = props;
+  const { alm, children } = props;
   const buildTools = [BuildTools.Maven, BuildTools.Gradle, BuildTools.DotNet, BuildTools.Other];
   const [buildToolSelected, setBuildToolSelected] = React.useState<BuildTools>();
 
@@ -57,7 +59,7 @@ export default function YamlFileStep(props: YamlFileStepProps) {
       {buildToolSelected !== undefined && (
         <>
           <hr className="huge-spacer-top huge-spacer-bottom" />
-          <AllSet />
+          <AllSet alm={alm} />
         </>
       )}
     </>
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/AllSet-test.tsx b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/AllSet-test.tsx
index 1616135a49a..ad59543f79b 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/AllSet-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/AllSet-test.tsx
@@ -20,6 +20,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { mockAppState } from '../../../../helpers/testMocks';
+import { AlmKeys } from '../../../../types/alm-settings';
 import { AllSet, AllSetProps } from '../AllSet';
 
 it('should render correctly', () => {
@@ -30,5 +31,7 @@ it('should render correctly', () => {
 });
 
 function shallowRender(props: Partial<AllSetProps> = {}) {
-  return shallow<AllSetProps>(<AllSet appState={mockAppState()} {...props} />);
+  return shallow<AllSetProps>(
+    <AllSet alm={AlmKeys.GitHub} appState={mockAppState({ branchesEnabled: true })} {...props} />
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/YamlFileStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/YamlFileStep-test.tsx
index 9b70ee7c486..94bb3e9c714 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/YamlFileStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/YamlFileStep-test.tsx
@@ -19,6 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { AlmKeys } from '../../../../types/alm-settings';
 import YamlFileStep, { YamlFileStepProps } from '../YamlFileStep';
 
 it('should render correctly', () => {
@@ -26,5 +27,5 @@ it('should render correctly', () => {
 });
 
 function shallowRender(props: Partial<YamlFileStepProps> = {}) {
-  return shallow<YamlFileStepProps>(<YamlFileStep {...props} />);
+  return shallow<YamlFileStepProps>(<YamlFileStep alm={AlmKeys.GitHub} {...props} />);
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/AllSet-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/AllSet-test.tsx.snap
index 6afe9cd744c..977d4d7c679 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/AllSet-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/AllSet-test.tsx.snap
@@ -36,7 +36,7 @@ exports[`should render correctly 1`] = `
         </strong>
       </p>
       <p>
-        onboarding.tutorial.ci_outro.commit.why.no_branches
+        onboarding.tutorial.ci_outro.commit.why.github
       </p>
     </div>
   </div>
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx
index a353f97695e..88bdaf9e897 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx
@@ -19,7 +19,11 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import { AlmSettingsInstance, ProjectAlmBindingResponse } from '../../../types/alm-settings';
+import {
+  AlmKeys,
+  AlmSettingsInstance,
+  ProjectAlmBindingResponse
+} from '../../../types/alm-settings';
 import Step from '../components/Step';
 import YamlFileStep from '../components/YamlFileStep';
 import AnalysisCommand from './AnalysisCommand';
@@ -65,7 +69,7 @@ export default function GitHubActionTutorial(props: GitHubActionTutorialProps) {
         onOpen={() => setStep(Steps.YAML)}
         open={step === Steps.YAML}
         renderForm={() => (
-          <YamlFileStep>
+          <YamlFileStep alm={AlmKeys.GitHub}>
             {buildTool => <AnalysisCommand buildTool={buildTool} component={component} />}
           </YamlFileStep>
         )}
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx
index ad77015e156..d0fb0ccadce 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx
@@ -25,14 +25,47 @@ import {
 } from '../../../../helpers/mocks/alm-settings';
 import { mockComponent, mockLoggedInUser } from '../../../../helpers/testMocks';
 import Step from '../../components/Step';
+import { renderStepContent } from '../../test-utils';
 import GitHubActionTutorial, { GitHubActionTutorialProps } from '../GitHubActionTutorial';
 
 it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot('default');
+  expect(renderStepContent(shallowRender())).toMatchSnapshot('secrets step content');
+  expect(renderStepContent(shallowRender(), 1)).toMatchSnapshot('yaml file step content');
+});
+
+it('should correctly navigate through the steps', () => {
   const wrapper = shallowRender();
-  expect(wrapper).toMatchSnapshot('For secret steps');
-  const stepYaml = wrapper.find(Step).at(1);
-  stepYaml.simulate('open');
-  expect(wrapper).toMatchSnapshot('For yaml steps');
+
+  expect(
+    wrapper
+      .find(Step)
+      .at(0)
+      .props().open
+  ).toBe(true);
+  expect(
+    wrapper
+      .find(Step)
+      .at(1)
+      .props().open
+  ).toBe(false);
+
+  wrapper
+    .find(Step)
+    .at(1)
+    .simulate('open');
+  expect(
+    wrapper
+      .find(Step)
+      .at(0)
+      .props().open
+  ).toBe(false);
+  expect(
+    wrapper
+      .find(Step)
+      .at(1)
+      .props().open
+  ).toBe(true);
 });
 
 function shallowRender(props: Partial<GitHubActionTutorialProps> = {}) {
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/GitHubActionTutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/GitHubActionTutorial-test.tsx.snap
index caec4a2f43f..253a32dc6a6 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/GitHubActionTutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/GitHubActionTutorial-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render correctly: For secret steps 1`] = `
+exports[`should render correctly: default 1`] = `
 <Fragment>
   <Step
     finished={false}
@@ -20,22 +20,62 @@ exports[`should render correctly: For secret steps 1`] = `
 </Fragment>
 `;
 
-exports[`should render correctly: For yaml steps 1`] = `
-<Fragment>
-  <Step
-    finished={true}
-    onOpen={[Function]}
-    open={false}
-    renderForm={[Function]}
-    stepNumber={1}
-    stepTitle="onboarding.tutorial.with.github_action.create_secret.title"
-  />
-  <Step
-    onOpen={[Function]}
-    open={true}
-    renderForm={[Function]}
-    stepNumber={2}
-    stepTitle="onboarding.tutorial.with.github_action.yaml.title"
-  />
-</Fragment>
+exports[`should render correctly: secrets step content 1`] = `
+<SecretStep
+  almBinding={
+    Object {
+      "alm": "github",
+      "key": "key",
+    }
+  }
+  baseUrl="test"
+  component={
+    Object {
+      "breadcrumbs": Array [],
+      "key": "my-project",
+      "name": "MyProject",
+      "qualifier": "TRK",
+      "qualityGate": Object {
+        "isDefault": true,
+        "key": "30",
+        "name": "Sonar way",
+      },
+      "qualityProfiles": Array [
+        Object {
+          "deleted": false,
+          "key": "my-qp",
+          "language": "ts",
+          "name": "Sonar way",
+        },
+      ],
+      "tags": Array [],
+    }
+  }
+  currentUser={
+    Object {
+      "groups": Array [],
+      "isLoggedIn": true,
+      "login": "luke",
+      "name": "Skywalker",
+      "scmAccounts": Array [],
+    }
+  }
+  onDone={[Function]}
+  projectBinding={
+    Object {
+      "alm": "github",
+      "key": "foo",
+      "monorepo": true,
+      "repository": "PROJECT_KEY",
+    }
+  }
+/>
+`;
+
+exports[`should render correctly: yaml file step content 1`] = `
+<YamlFileStep
+  alm="github"
+>
+  [Function]
+</YamlFileStep>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx
index e745c7b9bb2..516e1aea31e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx
@@ -87,19 +87,10 @@ export function YmlFileStep({
               <hr className="no-horizontal-margins" />
               <div>
                 <p className="big-spacer-bottom">
-                  <strong>{translate('onboarding.tutorial.with.gitlab_ci.yml.done')} </strong>{' '}
-                  <FormattedMessage
-                    defaultMessage={translate(
-                      'onboarding.tutorial.with.gitlab_ci.yml.done.description'
-                    )}
-                    id="onboarding.tutorial.with.gitlab_ci.yml.done.description"
-                    values={{
-                      /* This link will be added when the backend provides the project URL */
-                      link: translate(
-                        'onboarding.tutorial.with.gitlab_ci.yml.done.description.link'
-                      )
-                    }}
-                  />
+                  <strong>{translate('onboarding.tutorial.with.gitlab_ci.yml.done')}</strong>{' '}
+                  {translate('onboarding.tutorial.with.gitlab_ci.yml.done.description')}{' '}
+                  {branchesEnabled &&
+                    translate('onboarding.tutorial.with.gitlab_ci.yml.done.mr_deco_automatic')}
                 </p>
                 <p className="big-spacer-bottom">
                   <strong>
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx
index d01b5e292e9..8d2b3419819 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/EnvironmentVariablesStep-test.tsx
@@ -20,7 +20,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { mockComponent, mockLoggedInUser } from '../../../../helpers/testMocks';
-import { renderStepContent } from '../../jenkins/test-utils';
+import { renderStepContent } from '../../test-utils';
 import EnvironmentVariablesStep, {
   EnvironmentVariablesStepProps
 } from '../EnvironmentVariablesStep';
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/ProjectKeyStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/ProjectKeyStep-test.tsx
index 5518d425202..d175e5d6eb2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/ProjectKeyStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/ProjectKeyStep-test.tsx
@@ -21,7 +21,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import * as React from 'react';
 import { mockComponent } from '../../../../helpers/testMocks';
 import RenderOptions from '../../components/RenderOptions';
-import { renderStepContent } from '../../jenkins/test-utils';
+import { renderStepContent } from '../../test-utils';
 import { BuildTools } from '../../types';
 import ProjectKeyStep, { ProjectKeyStepProps } from '../ProjectKeyStep';
 import { GITLAB_BUILDTOOLS_LIST } from '../types';
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/YmlFileStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/YmlFileStep-test.tsx
index db93a32aabf..c8e8a612cd2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/YmlFileStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/YmlFileStep-test.tsx
@@ -20,7 +20,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { mockAppState } from '../../../../helpers/testMocks';
-import { renderStepContent } from '../../jenkins/test-utils';
+import { renderStepContent } from '../../test-utils';
 import { GITLAB_BUILDTOOLS_LIST } from '../types';
 import { YmlFileStep, YmlFileStepProps } from '../YmlFileStep';
 
@@ -33,7 +33,12 @@ it('should render correctly', () => {
 it.each(GITLAB_BUILDTOOLS_LIST.map(tool => [tool]))(
   'should render correctly for build tool %s',
   buildTool => {
-    expect(renderStepContent(shallowRender({ buildTool }))).toMatchSnapshot();
+    expect(renderStepContent(shallowRender({ buildTool }))).toMatchSnapshot('with branch support');
+    expect(
+      renderStepContent(
+        shallowRender({ appState: mockAppState({ branchesEnabled: false }), buildTool })
+      )
+    ).toMatchSnapshot('without branch support');
   }
 );
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/YmlFileStep-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/YmlFileStep-test.tsx.snap
index 857fc801663..ac538d7f85e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/YmlFileStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/YmlFileStep-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render correctly for build tool dotnet 1`] = `
+exports[`should render correctly for build tool dotnet: with branch support 1`] = `
 <div
   className="boxed-group-inner"
 >
@@ -62,19 +62,116 @@ exports[`should render correctly for build tool dotnet 1`] = `
           >
             <strong>
               onboarding.tutorial.with.gitlab_ci.yml.done
-               
             </strong>
              
+            onboarding.tutorial.with.gitlab_ci.yml.done.description
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.mr_deco_automatic
+          </p>
+          <p
+            className="big-spacer-bottom"
+          >
+            <strong>
+              onboarding.tutorial.with.gitlab_ci.yml.done.then-what
+            </strong>
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.then-what.description
+          </p>
+          <p
+            className="big-spacer-bottom"
+          >
             <FormattedMessage
-              defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.done.description"
-              id="onboarding.tutorial.with.gitlab_ci.yml.done.description"
+              defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.done.links.title"
+              id="onboarding.tutorial.with.gitlab_ci.yml.done.links.title"
               values={
                 Object {
-                  "link": "onboarding.tutorial.with.gitlab_ci.yml.done.description.link",
+                  "links": <Link
+                    onlyActiveOnIndex={false}
+                    rel="noopener noreferrer"
+                    style={Object {}}
+                    target="_blank"
+                    to="/documentation/user-guide/quality-gates/"
+                  >
+                    onboarding.tutorial.with.gitlab_ci.yml.done.links.QG
+                  </Link>,
                 }
               }
             />
           </p>
+        </div>
+      </React.Fragment>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render correctly for build tool dotnet: without branch support 1`] = `
+<div
+  className="boxed-group-inner"
+>
+  <div
+    className="flex-columns"
+  >
+    <div
+      className="flex-column-full"
+    >
+      <React.Fragment>
+        <div
+          className="big-spacer-bottom"
+        >
+          <FormattedMessage
+            defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.description"
+            id="onboarding.tutorial.with.gitlab_ci.yml.description"
+            values={
+              Object {
+                "filename": <React.Fragment>
+                  <code
+                    className="rule"
+                  >
+                    onboarding.tutorial.with.gitlab_ci.yml.filename
+                  </code>
+                  <ClipboardIconButton
+                    className="little-spacer-left"
+                    copyValue="onboarding.tutorial.with.gitlab_ci.yml.filename"
+                  />
+                </React.Fragment>,
+              }
+            }
+          />
+        </div>
+        <div
+          className="big-spacer-bottom"
+        >
+          <PipeCommand
+            branchesEnabled={false}
+            buildTool="dotnet"
+            projectKey="test"
+          />
+        </div>
+        <p
+          className="little-spacer-bottom"
+        >
+          onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches
+        </p>
+        <p
+          className="huge-spacer-bottom"
+        >
+          onboarding.tutorial.with.gitlab_ci.yml.existing
+        </p>
+        <hr
+          className="no-horizontal-margins"
+        />
+        <div>
+          <p
+            className="big-spacer-bottom"
+          >
+            <strong>
+              onboarding.tutorial.with.gitlab_ci.yml.done
+            </strong>
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.description
+             
+          </p>
           <p
             className="big-spacer-bottom"
           >
@@ -112,7 +209,7 @@ exports[`should render correctly for build tool dotnet 1`] = `
 </div>
 `;
 
-exports[`should render correctly for build tool gradle 1`] = `
+exports[`should render correctly for build tool gradle: with branch support 1`] = `
 <div
   className="boxed-group-inner"
 >
@@ -174,19 +271,116 @@ exports[`should render correctly for build tool gradle 1`] = `
           >
             <strong>
               onboarding.tutorial.with.gitlab_ci.yml.done
-               
             </strong>
              
+            onboarding.tutorial.with.gitlab_ci.yml.done.description
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.mr_deco_automatic
+          </p>
+          <p
+            className="big-spacer-bottom"
+          >
+            <strong>
+              onboarding.tutorial.with.gitlab_ci.yml.done.then-what
+            </strong>
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.then-what.description
+          </p>
+          <p
+            className="big-spacer-bottom"
+          >
             <FormattedMessage
-              defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.done.description"
-              id="onboarding.tutorial.with.gitlab_ci.yml.done.description"
+              defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.done.links.title"
+              id="onboarding.tutorial.with.gitlab_ci.yml.done.links.title"
               values={
                 Object {
-                  "link": "onboarding.tutorial.with.gitlab_ci.yml.done.description.link",
+                  "links": <Link
+                    onlyActiveOnIndex={false}
+                    rel="noopener noreferrer"
+                    style={Object {}}
+                    target="_blank"
+                    to="/documentation/user-guide/quality-gates/"
+                  >
+                    onboarding.tutorial.with.gitlab_ci.yml.done.links.QG
+                  </Link>,
                 }
               }
             />
           </p>
+        </div>
+      </React.Fragment>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render correctly for build tool gradle: without branch support 1`] = `
+<div
+  className="boxed-group-inner"
+>
+  <div
+    className="flex-columns"
+  >
+    <div
+      className="flex-column-full"
+    >
+      <React.Fragment>
+        <div
+          className="big-spacer-bottom"
+        >
+          <FormattedMessage
+            defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.description"
+            id="onboarding.tutorial.with.gitlab_ci.yml.description"
+            values={
+              Object {
+                "filename": <React.Fragment>
+                  <code
+                    className="rule"
+                  >
+                    onboarding.tutorial.with.gitlab_ci.yml.filename
+                  </code>
+                  <ClipboardIconButton
+                    className="little-spacer-left"
+                    copyValue="onboarding.tutorial.with.gitlab_ci.yml.filename"
+                  />
+                </React.Fragment>,
+              }
+            }
+          />
+        </div>
+        <div
+          className="big-spacer-bottom"
+        >
+          <PipeCommand
+            branchesEnabled={false}
+            buildTool="gradle"
+            projectKey="test"
+          />
+        </div>
+        <p
+          className="little-spacer-bottom"
+        >
+          onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches
+        </p>
+        <p
+          className="huge-spacer-bottom"
+        >
+          onboarding.tutorial.with.gitlab_ci.yml.existing
+        </p>
+        <hr
+          className="no-horizontal-margins"
+        />
+        <div>
+          <p
+            className="big-spacer-bottom"
+          >
+            <strong>
+              onboarding.tutorial.with.gitlab_ci.yml.done
+            </strong>
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.description
+             
+          </p>
           <p
             className="big-spacer-bottom"
           >
@@ -224,7 +418,7 @@ exports[`should render correctly for build tool gradle 1`] = `
 </div>
 `;
 
-exports[`should render correctly for build tool maven 1`] = `
+exports[`should render correctly for build tool maven: with branch support 1`] = `
 <div
   className="boxed-group-inner"
 >
@@ -286,19 +480,116 @@ exports[`should render correctly for build tool maven 1`] = `
           >
             <strong>
               onboarding.tutorial.with.gitlab_ci.yml.done
-               
             </strong>
              
+            onboarding.tutorial.with.gitlab_ci.yml.done.description
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.mr_deco_automatic
+          </p>
+          <p
+            className="big-spacer-bottom"
+          >
+            <strong>
+              onboarding.tutorial.with.gitlab_ci.yml.done.then-what
+            </strong>
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.then-what.description
+          </p>
+          <p
+            className="big-spacer-bottom"
+          >
             <FormattedMessage
-              defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.done.description"
-              id="onboarding.tutorial.with.gitlab_ci.yml.done.description"
+              defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.done.links.title"
+              id="onboarding.tutorial.with.gitlab_ci.yml.done.links.title"
               values={
                 Object {
-                  "link": "onboarding.tutorial.with.gitlab_ci.yml.done.description.link",
+                  "links": <Link
+                    onlyActiveOnIndex={false}
+                    rel="noopener noreferrer"
+                    style={Object {}}
+                    target="_blank"
+                    to="/documentation/user-guide/quality-gates/"
+                  >
+                    onboarding.tutorial.with.gitlab_ci.yml.done.links.QG
+                  </Link>,
                 }
               }
             />
           </p>
+        </div>
+      </React.Fragment>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render correctly for build tool maven: without branch support 1`] = `
+<div
+  className="boxed-group-inner"
+>
+  <div
+    className="flex-columns"
+  >
+    <div
+      className="flex-column-full"
+    >
+      <React.Fragment>
+        <div
+          className="big-spacer-bottom"
+        >
+          <FormattedMessage
+            defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.description"
+            id="onboarding.tutorial.with.gitlab_ci.yml.description"
+            values={
+              Object {
+                "filename": <React.Fragment>
+                  <code
+                    className="rule"
+                  >
+                    onboarding.tutorial.with.gitlab_ci.yml.filename
+                  </code>
+                  <ClipboardIconButton
+                    className="little-spacer-left"
+                    copyValue="onboarding.tutorial.with.gitlab_ci.yml.filename"
+                  />
+                </React.Fragment>,
+              }
+            }
+          />
+        </div>
+        <div
+          className="big-spacer-bottom"
+        >
+          <PipeCommand
+            branchesEnabled={false}
+            buildTool="maven"
+            projectKey="test"
+          />
+        </div>
+        <p
+          className="little-spacer-bottom"
+        >
+          onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches
+        </p>
+        <p
+          className="huge-spacer-bottom"
+        >
+          onboarding.tutorial.with.gitlab_ci.yml.existing
+        </p>
+        <hr
+          className="no-horizontal-margins"
+        />
+        <div>
+          <p
+            className="big-spacer-bottom"
+          >
+            <strong>
+              onboarding.tutorial.with.gitlab_ci.yml.done
+            </strong>
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.description
+             
+          </p>
           <p
             className="big-spacer-bottom"
           >
@@ -336,7 +627,7 @@ exports[`should render correctly for build tool maven 1`] = `
 </div>
 `;
 
-exports[`should render correctly for build tool other 1`] = `
+exports[`should render correctly for build tool other: with branch support 1`] = `
 <div
   className="boxed-group-inner"
 >
@@ -398,19 +689,116 @@ exports[`should render correctly for build tool other 1`] = `
           >
             <strong>
               onboarding.tutorial.with.gitlab_ci.yml.done
-               
             </strong>
              
+            onboarding.tutorial.with.gitlab_ci.yml.done.description
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.mr_deco_automatic
+          </p>
+          <p
+            className="big-spacer-bottom"
+          >
+            <strong>
+              onboarding.tutorial.with.gitlab_ci.yml.done.then-what
+            </strong>
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.then-what.description
+          </p>
+          <p
+            className="big-spacer-bottom"
+          >
             <FormattedMessage
-              defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.done.description"
-              id="onboarding.tutorial.with.gitlab_ci.yml.done.description"
+              defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.done.links.title"
+              id="onboarding.tutorial.with.gitlab_ci.yml.done.links.title"
               values={
                 Object {
-                  "link": "onboarding.tutorial.with.gitlab_ci.yml.done.description.link",
+                  "links": <Link
+                    onlyActiveOnIndex={false}
+                    rel="noopener noreferrer"
+                    style={Object {}}
+                    target="_blank"
+                    to="/documentation/user-guide/quality-gates/"
+                  >
+                    onboarding.tutorial.with.gitlab_ci.yml.done.links.QG
+                  </Link>,
                 }
               }
             />
           </p>
+        </div>
+      </React.Fragment>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render correctly for build tool other: without branch support 1`] = `
+<div
+  className="boxed-group-inner"
+>
+  <div
+    className="flex-columns"
+  >
+    <div
+      className="flex-column-full"
+    >
+      <React.Fragment>
+        <div
+          className="big-spacer-bottom"
+        >
+          <FormattedMessage
+            defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.description"
+            id="onboarding.tutorial.with.gitlab_ci.yml.description"
+            values={
+              Object {
+                "filename": <React.Fragment>
+                  <code
+                    className="rule"
+                  >
+                    onboarding.tutorial.with.gitlab_ci.yml.filename
+                  </code>
+                  <ClipboardIconButton
+                    className="little-spacer-left"
+                    copyValue="onboarding.tutorial.with.gitlab_ci.yml.filename"
+                  />
+                </React.Fragment>,
+              }
+            }
+          />
+        </div>
+        <div
+          className="big-spacer-bottom"
+        >
+          <PipeCommand
+            branchesEnabled={false}
+            buildTool="other"
+            projectKey="test"
+          />
+        </div>
+        <p
+          className="little-spacer-bottom"
+        >
+          onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches
+        </p>
+        <p
+          className="huge-spacer-bottom"
+        >
+          onboarding.tutorial.with.gitlab_ci.yml.existing
+        </p>
+        <hr
+          className="no-horizontal-margins"
+        />
+        <div>
+          <p
+            className="big-spacer-bottom"
+          >
+            <strong>
+              onboarding.tutorial.with.gitlab_ci.yml.done
+            </strong>
+             
+            onboarding.tutorial.with.gitlab_ci.yml.done.description
+             
+          </p>
           <p
             className="big-spacer-bottom"
           >
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx
index ba07a8a48eb..89c2e1181cf 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsTutorial.tsx
@@ -133,7 +133,7 @@ export function JenkinsTutorial(props: JenkinsTutorialProps) {
             projectBinding={projectBinding}
           />
 
-          <JenkinsfileStep component={component} open={step === Steps.Jenkinsfile} />
+          <JenkinsfileStep alm={alm} component={component} open={step === Steps.Jenkinsfile} />
         </>
       )}
     </>
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx
index 4a2c4e2cf95..c3077e3ebc5 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx
@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { AlmKeys } from '../../../types/alm-settings';
 import AllSet from '../components/AllSet';
 import RenderOptions from '../components/RenderOptions';
 import Step from '../components/Step';
@@ -29,6 +30,7 @@ import Maven from './buildtool-steps/Maven';
 import Other from './buildtool-steps/Other';
 
 export interface JenkinsfileStepProps {
+  alm: AlmKeys;
   component: T.Component;
   open: boolean;
 }
@@ -46,7 +48,7 @@ const BUILDTOOL_COMPONENT_MAP: {
 };
 
 export default function JenkinsfileStep(props: JenkinsfileStepProps) {
-  const { component, open } = props;
+  const { alm, component, open } = props;
   const [buildTool, setBuildTool] = React.useState<BuildToolsWithoutCFamily | undefined>(undefined);
   return (
     <Step
@@ -71,7 +73,7 @@ export default function JenkinsfileStep(props: JenkinsfileStepProps) {
           {buildTool !== undefined && (
             <>
               <hr className="huge-spacer-top huge-spacer-bottom" />
-              <AllSet />
+              <AllSet alm={alm} />
             </>
           )}
         </div>
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsfileStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsfileStep-test.tsx
index d738038d7c5..79057f46dc6 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsfileStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsfileStep-test.tsx
@@ -20,11 +20,12 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import * as React from 'react';
 import { mockComponent } from '../../../../helpers/testMocks';
+import { AlmKeys } from '../../../../types/alm-settings';
 import RenderOptions from '../../components/RenderOptions';
 import Step from '../../components/Step';
+import { renderStepContent } from '../../test-utils';
 import { BuildTools } from '../../types';
 import JenkinsfileStep, { JenkinsfileStepProps } from '../JenkinsfileStep';
-import { renderStepContent } from '../test-utils';
 
 it('should render correctly', () => {
   const wrapper = shallowRender();
@@ -68,6 +69,11 @@ function selectBuildTool(wrapper: ShallowWrapper<JenkinsfileStepProps>, tool: Bu
 
 function shallowRender(props: Partial<JenkinsfileStepProps> = {}) {
   return shallow<JenkinsfileStepProps>(
-    <JenkinsfileStep component={mockComponent()} open={true} {...props} />
+    <JenkinsfileStep
+      alm={AlmKeys.BitbucketCloud}
+      component={mockComponent()}
+      open={true}
+      {...props}
+    />
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/MultiBranchPipelineStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/MultiBranchPipelineStep-test.tsx
index 4a99c8c6e50..c779a97b614 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/MultiBranchPipelineStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/MultiBranchPipelineStep-test.tsx
@@ -27,8 +27,8 @@ import {
   mockProjectGitLabBindingResponse
 } from '../../../../helpers/mocks/alm-settings';
 import { AlmKeys } from '../../../../types/alm-settings';
+import { renderStepContent } from '../../test-utils';
 import MultiBranchPipelineStep, { MultiBranchPipelineStepProps } from '../MultiBranchPipelineStep';
-import { renderStepContent } from '../test-utils';
 
 it('should render correctly', () => {
   const wrapper = shallowRender();
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/PipelineStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/PipelineStep-test.tsx
index 3d4398144f4..312c90448a8 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/PipelineStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/PipelineStep-test.tsx
@@ -20,8 +20,8 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { AlmKeys } from '../../../../types/alm-settings';
+import { renderStepContent } from '../../test-utils';
 import PipelineStep, { PipelineStepProps } from '../PipelineStep';
-import { renderStepContent } from '../test-utils';
 
 it('should render correctly', () => {
   const wrapper = shallowRender();
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/PreRequisitesStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/PreRequisitesStep-test.tsx
index 6b900937e80..6717842b6ba 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/PreRequisitesStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/PreRequisitesStep-test.tsx
@@ -20,8 +20,8 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { AlmKeys } from '../../../../types/alm-settings';
+import { renderStepContent } from '../../test-utils';
 import PreRequisitesStep, { PreRequisitesStepProps } from '../PreRequisitesStep';
-import { renderStepContent } from '../test-utils';
 
 it('should render correctly', () => {
   const wrapper = shallowRender();
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStep-test.tsx
index 0f3a5f0484f..5fbbbbfb343 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/WebhookStep-test.tsx
@@ -27,7 +27,7 @@ import {
   mockProjectGithubBindingResponse
 } from '../../../../helpers/mocks/alm-settings';
 import { AlmKeys } from '../../../../types/alm-settings';
-import { renderStepContent } from '../test-utils';
+import { renderStepContent } from '../../test-utils';
 import WebhookStep, { WebhookStepProps } from '../WebhookStep';
 
 it.each([
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsTutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsTutorial-test.tsx.snap
index 8374000a1b6..7cbcb626874 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsTutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsTutorial-test.tsx.snap
@@ -46,6 +46,7 @@ exports[`should render correctly: branches not enabled 1`] = `
     }
   />
   <JenkinsfileStep
+    alm="bitbucket"
     component={
       Object {
         "breadcrumbs": Array [],
@@ -128,6 +129,7 @@ exports[`should render correctly: default 1`] = `
     }
   />
   <JenkinsfileStep
+    alm="bitbucket"
     component={
       Object {
         "breadcrumbs": Array [],
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsfileStep-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsfileStep-test.tsx.snap
index 909464f7296..83aa3aaa962 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsfileStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsfileStep-test.tsx.snap
@@ -53,7 +53,9 @@ exports[`should render correctly for .NET 1`] = `
     <hr
       className="huge-spacer-top huge-spacer-bottom"
     />
-    <Connect(withAppState(AllSet)) />
+    <Connect(withAppState(AllSet))
+      alm="bitbucketcloud"
+    />
   </React.Fragment>
 </div>
 `;
@@ -111,7 +113,9 @@ exports[`should render correctly for Gradle 1`] = `
     <hr
       className="huge-spacer-top huge-spacer-bottom"
     />
-    <Connect(withAppState(AllSet)) />
+    <Connect(withAppState(AllSet))
+      alm="bitbucketcloud"
+    />
   </React.Fragment>
 </div>
 `;
@@ -169,7 +173,9 @@ exports[`should render correctly for Maven 1`] = `
     <hr
       className="huge-spacer-top huge-spacer-bottom"
     />
-    <Connect(withAppState(AllSet)) />
+    <Connect(withAppState(AllSet))
+      alm="bitbucketcloud"
+    />
   </React.Fragment>
 </div>
 `;
@@ -227,7 +233,9 @@ exports[`should render correctly for Other 1`] = `
     <hr
       className="huge-spacer-top huge-spacer-bottom"
     />
-    <Connect(withAppState(AllSet)) />
+    <Connect(withAppState(AllSet))
+      alm="bitbucketcloud"
+    />
   </React.Fragment>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/test-utils.ts b/server/sonar-web/src/main/js/components/tutorials/test-utils.ts
similarity index 93%
rename from server/sonar-web/src/main/js/components/tutorials/jenkins/test-utils.ts
rename to server/sonar-web/src/main/js/components/tutorials/test-utils.ts
index 49b83e26b2d..4ec25208c72 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/test-utils.ts
+++ b/server/sonar-web/src/main/js/components/tutorials/test-utils.ts
@@ -18,11 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import { ShallowWrapper } from 'enzyme';
-import Step from '../components/Step';
+import Step from './components/Step';
 
-export function renderStepContent(wrapper: ShallowWrapper<React.ReactNode>) {
+export function renderStepContent(wrapper: ShallowWrapper<React.ReactNode>, n = 0) {
   return wrapper
     .find(Step)
+    .at(n)
     .props()
     .renderForm();
 }
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 496f4b491c4..5cfc020d017 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3454,7 +3454,11 @@ onboarding.tutorial.return_to_list=Choose another option
 onboarding.tutorial.ci_outro.all_set.sentence={all_set} and ready to improve the quality and security of your code!
 onboarding.tutorial.ci_outro.all_set.sentence.all_set=You're all set
 onboarding.tutorial.ci_outro.commit=Commit and push your code to start the analysis.
-onboarding.tutorial.ci_outro.commit.why=Each new push you make on your branches or pull requests will trigger a new analysis in SonarQube.
+onboarding.tutorial.ci_outro.commit.why.gitlab=Each new push you make on your branches or merge requests will trigger a new analysis in SonarQube. We will decorate merge requests directly on GitLab for you.
+onboarding.tutorial.ci_outro.commit.why.github=Each new push you make on your branches or pull requests will trigger a new analysis in SonarQube. We will decorate pull requests directly on GitHub for you.
+onboarding.tutorial.ci_outro.commit.why.bitbucket=Each new push you make on your branches or pull requests will trigger a new analysis in SonarQube. We will decorate pull requests directly on Bitbucket for you.
+onboarding.tutorial.ci_outro.commit.why.bitbucketcloud=Each new push you make on your branches or pull requests will trigger a new analysis in SonarQube. We will decorate pull requests directly on Bitbucket for you.
+onboarding.tutorial.ci_outro.commit.why.azure=Each new push you make on your branches or pull requests will trigger a new analysis in SonarQube. We will decorate pull requests directly on Azure for you.
 onboarding.tutorial.ci_outro.commit.why.no_branches=Each new push you make on your main branch will trigger a new analysis in SonarQube.
 onboarding.tutorial.ci_outro.refresh=This page will then refresh with your analysis results.
 onboarding.tutorial.ci_outro.refresh.why=If the page doesn't refresh after a while, please double-check the analysis configuration.
@@ -3525,8 +3529,8 @@ onboarding.tutorial.with.gitlab_ci.yml.baseconfig=Note that this is a minimal ba
 onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches=Note that this is a minimal base configuration to run a SonarQube analysis on your main branch.
 onboarding.tutorial.with.gitlab_ci.yml.existing=If you already have a pipeline configured and running, you might want to add the example from this step to your existing yml file.
 onboarding.tutorial.with.gitlab_ci.yml.done=Is it done?
-onboarding.tutorial.with.gitlab_ci.yml.done.description=You should see the page refresh itself in a few moments with your analysis results if the {link}.
-onboarding.tutorial.with.gitlab_ci.yml.done.description.link=pipeline runs successfully
+onboarding.tutorial.with.gitlab_ci.yml.done.description=You should see the page refresh itself in a few moments with your analysis results if the pipeline runs successfully.
+onboarding.tutorial.with.gitlab_ci.yml.done.mr_deco_automatic=We will decorate Merge Requests directly on GitLab for you.
 onboarding.tutorial.with.gitlab_ci.yml.done.then-what=And then what?
 onboarding.tutorial.with.gitlab_ci.yml.done.then-what.description=Each new push triggers an analysis by SonarQube.
 onboarding.tutorial.with.gitlab_ci.yml.done.links.title=Check this useful link while you wait: {links}
@@ -3835,9 +3839,10 @@ onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection=To mak
 onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection.link=documentation
 onboarding.tutorial.with.azure_pipelines.SaveAndRun.title=Save and run your pipeline
 onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit=Save your pipeline and push your code to start the analysis
-onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit.why=Each new push you make on your branches will trigger a new analysis in SonarQube
+onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit.why=Each new push you make on your branches will trigger a new analysis in SonarQube.
+onboarding.tutorial.with.azure_pipelines.SaveAndRun.commit.pr_deco=We will decorate Pull Requests directly on {0} for you.
 onboarding.tutorial.with.azure_pipelines.SaveAndRun.refresh=This page will then refresh with your analysis results
-onboarding.tutorial.with.azure_pipelines.SaveAndRun.refresh.why=If this page doesn't refresh after a while, please double-check your pipeline configuration
+onboarding.tutorial.with.azure_pipelines.SaveAndRun.refresh.why=If this page doesn't refresh after a while, please double-check your pipeline configuration.
 onboarding.tutorial.with.azure_pipelines.SaveAndRun.then={what} Checkout our {link} to make sure SonarQube analyze and decorate all of your Pull Requests
 onboarding.tutorial.with.azure_pipelines.SaveAndRun.then.what=Then what?
 onboarding.tutorial.with.azure_pipelines.SaveAndRun.then.link=Azure integration documentation
-- 
2.39.5