SONAR-14639 Remove unnecessary step in GitLab tutorial

12 files changed, 211 insertions, 1349 deletions

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 e95a9f9e865..779f066ac57 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
@@ -204,7 +204,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
       onOpen={props.onOpen}
       open={open}
       renderForm={renderForm}
-      stepNumber={2}
+      stepNumber={1}
       stepTitle={translate('onboarding.tutorial.with.gitlab_ci.env_variables.title')}
     />
   );
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx
index 300f08ad933..27fd8574f56 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/GitLabCITutorial.tsx
@@ -23,13 +23,10 @@ import { AlmKeys } from '../../../types/alm-settings';
 import { Component } from '../../../types/types';
 import { LoggedInUser } from '../../../types/users';
 import AllSetStep from '../components/AllSetStep';
-import { BuildTools } from '../types';
 import EnvironmentVariablesStep from './EnvironmentVariablesStep';
-import ProjectKeyStep from './ProjectKeyStep';
 import YmlFileStep from './YmlFileStep';
 
 export enum Steps {
-  PROJECT_KEY,
   ENV_VARIABLES,
   YML,
   ALL_SET,
@@ -46,8 +43,7 @@ export interface GitLabCITutorialProps {
 export default function GitLabCITutorial(props: GitLabCITutorialProps) {
   const { baseUrl, component, currentUser, willRefreshAutomatically, mainBranchName } = props;
 
-  const [step, setStep] = React.useState(Steps.PROJECT_KEY);
-  const [buildTool, setBuildTool] = React.useState<BuildTools>();
+  const [step, setStep] = React.useState(Steps.ENV_VARIABLES);
 
   return (
     <>
@@ -55,16 +51,6 @@ export default function GitLabCITutorial(props: GitLabCITutorialProps) {
         <h2 className="page-title">{translate('onboarding.tutorial.with.gitlab_ci.title')}</h2>
       </div>
 
-      <ProjectKeyStep
-        buildTool={buildTool}
-        component={component}
-        finished={step > Steps.PROJECT_KEY}
-        onDone={() => setStep(Steps.ENV_VARIABLES)}
-        onOpen={() => setStep(Steps.PROJECT_KEY)}
-        open={step === Steps.PROJECT_KEY}
-        setBuildTool={setBuildTool}
-      />
-
       <EnvironmentVariablesStep
         baseUrl={baseUrl}
         component={component}
@@ -76,8 +62,8 @@ export default function GitLabCITutorial(props: GitLabCITutorialProps) {
       />
 
       <YmlFileStep
-        buildTool={buildTool}
         finished={step > Steps.YML}
+        component={component}
         mainBranchName={mainBranchName}
         onDone={() => setStep(Steps.ALL_SET)}
         onOpen={() => setStep(Steps.YML)}
@@ -88,7 +74,7 @@ export default function GitLabCITutorial(props: GitLabCITutorialProps) {
       <AllSetStep
         alm={AlmKeys.GitLab}
         open={step === Steps.ALL_SET}
-        stepNumber={4}
+        stepNumber={3}
         willRefreshAutomatically={willRefreshAutomatically}
       />
     </>
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/ProjectKeyStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/ProjectKeyStep.tsx
deleted file mode 100644
index b1306846490..00000000000
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/ProjectKeyStep.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2023 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Button } from '../../../components/controls/buttons';
-import { ClipboardIconButton } from '../../../components/controls/clipboard';
-import { GRADLE_SCANNER_VERSION } from '../../../helpers/constants';
-import { translate } from '../../../helpers/l10n';
-import { Component } from '../../../types/types';
-import CodeSnippet from '../../common/CodeSnippet';
-import { withCLanguageFeature } from '../../hoc/withCLanguageFeature';
-import RenderOptions from '../components/RenderOptions';
-import Step from '../components/Step';
-import { BuildTools } from '../types';
-
-export interface ProjectKeyStepProps {
-  buildTool?: BuildTools;
-  component: Component;
-  finished: boolean;
-  hasCLanguageFeature: boolean;
-  onDone: () => void;
-  onOpen: () => void;
-  open: boolean;
-  setBuildTool: (tool: BuildTools) => void;
-}
-
-const mavenSnippet = () => `<properties>
-  <sonar.qualitygate.wait>true</sonar.qualitygate.wait>
-</properties>`;
-
-const gradleSnippet = (key: string) => `plugins {
-  id "org.sonarqube" version "${GRADLE_SCANNER_VERSION}"
-}
-
-sonar {
-  properties {
-    property "sonar.projectKey", "${key}"
-    property "sonar.qualitygate.wait", true 
-  }
-}`;
-
-const otherSnippet = (key: string) => `sonar.projectKey=${key}
-sonar.qualitygate.wait=true
-`;
-
-const snippetForBuildTool = {
-  [BuildTools.Maven]: mavenSnippet,
-  [BuildTools.Gradle]: gradleSnippet,
-  [BuildTools.CFamily]: otherSnippet,
-  [BuildTools.Other]: otherSnippet,
-};
-
-const filenameForBuildTool = {
-  [BuildTools.Maven]: 'pom.xml',
-  [BuildTools.Gradle]: 'build.gradle',
-  [BuildTools.CFamily]: 'sonar-project.properties',
-  [BuildTools.Other]: 'sonar-project.properties',
-};
-
-export function ProjectKeyStep(props: ProjectKeyStepProps) {
-  const { buildTool, component, finished, hasCLanguageFeature, open } = props;
-
-  const buildToolSelect = (value: BuildTools) => {
-    props.setBuildTool(value);
-    if (value === BuildTools.DotNet) {
-      props.onDone();
-    }
-  };
-
-  const buildTools = [BuildTools.Maven, BuildTools.Gradle, BuildTools.DotNet];
-  if (hasCLanguageFeature) {
-    buildTools.push(BuildTools.CFamily);
-  }
-  buildTools.push(BuildTools.Other);
-
-  const renderForm = () => (
-    <div className="boxed-group-inner">
-      <ol className="list-styled">
-        <li>
-          {translate('onboarding.build')}
-          <RenderOptions
-            label={translate('onboarding.build')}
-            checked={buildTool}
-            onCheck={buildToolSelect}
-            optionLabelKey="onboarding.build"
-            options={buildTools}
-          />
-        </li>
-        {buildTool !== undefined && buildTool !== BuildTools.DotNet && (
-          <li className="abs-width-600">
-            <FormattedMessage
-              defaultMessage={translate(
-                `onboarding.tutorial.with.gitlab_ci.project_key.${buildTool}.step2`
-              )}
-              id={`onboarding.tutorial.with.gitlab_ci.project_key.${buildTool}.step2`}
-              values={{
-                file: (
-                  <>
-                    <code className="rule">{filenameForBuildTool[buildTool]}</code>
-                    <ClipboardIconButton
-                      className="little-spacer-left"
-                      copyValue={filenameForBuildTool[buildTool]}
-                    />
-                  </>
-                ),
-              }}
-            />
-            <CodeSnippet snippet={snippetForBuildTool[buildTool](component.key)} />
-          </li>
-        )}
-      </ol>
-      {buildTool !== undefined && <Button onClick={props.onDone}>{translate('continue')}</Button>}
-    </div>
-  );
-
-  return (
-    <Step
-      finished={finished}
-      onOpen={props.onOpen}
-      open={open}
-      renderForm={renderForm}
-      stepNumber={1}
-      stepTitle={translate('onboarding.tutorial.with.gitlab_ci.project_key.title')}
-    />
-  );
-}
-
-export default withCLanguageFeature(ProjectKeyStep);
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 c3a20612c21..7c3a5ad5ec2 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
@@ -23,17 +23,23 @@ import withAvailableFeatures, {
   WithAvailableFeaturesProps,
 } from '../../../app/components/available-features/withAvailableFeatures';
 import { ClipboardIconButton } from '../../../components/controls/clipboard';
+import { GRADLE_SCANNER_VERSION } from '../../../helpers/constants';
 import { translate } from '../../../helpers/l10n';
 import { Feature } from '../../../types/features';
+import { Component } from '../../../types/types';
+import CodeSnippet from '../../common/CodeSnippet';
+import { withCLanguageFeature } from '../../hoc/withCLanguageFeature';
 import FinishButton from '../components/FinishButton';
 import GithubCFamilyExampleRepositories from '../components/GithubCFamilyExampleRepositories';
+import RenderOptions from '../components/RenderOptions';
 import Step from '../components/Step';
 import { BuildTools, TutorialModes } from '../types';
 import PipeCommand from './commands/PipeCommand';
 
 export interface YmlFileStepProps extends WithAvailableFeaturesProps {
-  buildTool?: BuildTools;
   finished: boolean;
+  component: Component;
+  hasCLanguageFeature: boolean;
   onDone: () => void;
   onOpen: () => void;
   open: boolean;
@@ -41,60 +47,131 @@ export interface YmlFileStepProps extends WithAvailableFeaturesProps {
   mainBranchName: string;
 }
 
+const mavenSnippet = () => `<properties>
+  <sonar.qualitygate.wait>true</sonar.qualitygate.wait>
+</properties>`;
+
+const gradleSnippet = (key: string) => `plugins {
+  id "org.sonarqube" version "${GRADLE_SCANNER_VERSION}"
+}
+
+sonar {
+  properties {
+    property "sonar.projectKey", "${key}"
+    property "sonar.qualitygate.wait", true 
+  }
+}`;
+
+const otherSnippet = (key: string) => `sonar.projectKey=${key}
+sonar.qualitygate.wait=true
+`;
+
+const snippetForBuildTool = {
+  [BuildTools.Maven]: mavenSnippet,
+  [BuildTools.Gradle]: gradleSnippet,
+  [BuildTools.CFamily]: otherSnippet,
+  [BuildTools.Other]: otherSnippet,
+};
+
+const filenameForBuildTool = {
+  [BuildTools.Maven]: 'pom.xml',
+  [BuildTools.Gradle]: 'build.gradle',
+  [BuildTools.CFamily]: 'sonar-project.properties',
+  [BuildTools.Other]: 'sonar-project.properties',
+};
+
 export function YmlFileStep(props: YmlFileStepProps) {
-  const { buildTool, open, finished, projectKey, mainBranchName } = props;
+  const { open, finished, projectKey, mainBranchName, hasCLanguageFeature, component } = props;
   const branchSupportEnabled = props.hasFeature(Feature.BranchSupport);
 
+  const [buildTool, setBuildTool] = React.useState<BuildTools>();
+
+  const buildTools = [BuildTools.Maven, BuildTools.Gradle, BuildTools.DotNet];
+  if (hasCLanguageFeature) {
+    buildTools.push(BuildTools.CFamily);
+  }
+  buildTools.push(BuildTools.Other);
+
   const renderForm = () => (
     <div className="boxed-group-inner">
-      <div className="flex-columns">
-        <div className="flex-column-full">
-          {buildTool && (
-            <>
-              {buildTool === BuildTools.CFamily && (
-                <GithubCFamilyExampleRepositories
-                  className="big-spacer-bottom abs-width-600"
-                  ci={TutorialModes.GitLabCI}
-                />
-              )}
-              <div className="big-spacer-bottom">
-                <FormattedMessage
-                  defaultMessage={translate('onboarding.tutorial.with.gitlab_ci.yml.description')}
-                  id="onboarding.tutorial.with.gitlab_ci.yml.description"
-                  values={{
-                    filename: (
-                      <>
-                        <code className="rule">
-                          {translate('onboarding.tutorial.with.gitlab_ci.yml.filename')}
-                        </code>
-                        <ClipboardIconButton
-                          className="little-spacer-left"
-                          copyValue={translate('onboarding.tutorial.with.gitlab_ci.yml.filename')}
-                        />
-                      </>
-                    ),
-                  }}
-                />
-              </div>
-              <div className="big-spacer-bottom abs-width-600">
-                <PipeCommand
-                  buildTool={buildTool}
-                  branchesEnabled={branchSupportEnabled}
-                  mainBranchName={mainBranchName}
-                  projectKey={projectKey}
-                />
-              </div>
-              <p className="little-spacer-bottom">
-                {branchSupportEnabled
-                  ? translate('onboarding.tutorial.with.gitlab_ci.yml.baseconfig')
-                  : translate('onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches')}
-              </p>
-              <p>{translate('onboarding.tutorial.with.gitlab_ci.yml.existing')}</p>
-            </>
+      <ol className="list-styled">
+        <li>
+          {translate('onboarding.build')}
+          <RenderOptions
+            label={translate('onboarding.build')}
+            checked={buildTool}
+            onCheck={setBuildTool as (key: string) => void}
+            optionLabelKey="onboarding.build"
+            options={buildTools}
+          />
+          {buildTool === BuildTools.CFamily && (
+            <GithubCFamilyExampleRepositories
+              className="big-spacer-bottom big-spacer-top abs-width-600"
+              ci={TutorialModes.GitLabCI}
+            />
           )}
-        </div>
-      </div>
-      <FinishButton onClick={props.onDone} />
+        </li>
+        {buildTool !== undefined && buildTool !== BuildTools.DotNet && (
+          <li className="abs-width-600">
+            <FormattedMessage
+              defaultMessage={translate(
+                `onboarding.tutorial.with.gitlab_ci.project_key.${buildTool}.step2`
+              )}
+              id={`onboarding.tutorial.with.gitlab_ci.project_key.${buildTool}.step2`}
+              values={{
+                file: (
+                  <>
+                    <code className="rule">{filenameForBuildTool[buildTool]}</code>
+                    <ClipboardIconButton
+                      className="little-spacer-left"
+                      copyValue={filenameForBuildTool[buildTool]}
+                    />
+                  </>
+                ),
+              }}
+            />
+            <CodeSnippet snippet={snippetForBuildTool[buildTool](component.key)} />
+          </li>
+        )}
+        {buildTool && (
+          <li className="abs-width-600">
+            <div className="big-spacer-bottom">
+              <FormattedMessage
+                defaultMessage={translate('onboarding.tutorial.with.gitlab_ci.yml.description')}
+                id="onboarding.tutorial.with.gitlab_ci.yml.description"
+                values={{
+                  filename: (
+                    <>
+                      <code className="rule">
+                        {translate('onboarding.tutorial.with.gitlab_ci.yml.filename')}
+                      </code>
+                      <ClipboardIconButton
+                        className="little-spacer-left"
+                        copyValue={translate('onboarding.tutorial.with.gitlab_ci.yml.filename')}
+                      />
+                    </>
+                  ),
+                }}
+              />
+            </div>
+            <div className="big-spacer-bottom abs-width-600">
+              <PipeCommand
+                buildTool={buildTool}
+                branchesEnabled={branchSupportEnabled}
+                mainBranchName={mainBranchName}
+                projectKey={projectKey}
+              />
+            </div>
+            <p className="little-spacer-bottom">
+              {branchSupportEnabled
+                ? translate('onboarding.tutorial.with.gitlab_ci.yml.baseconfig')
+                : translate('onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches')}
+            </p>
+            <p>{translate('onboarding.tutorial.with.gitlab_ci.yml.existing')}</p>
+            <FinishButton onClick={props.onDone} />
+          </li>
+        )}
+      </ol>
     </div>
   );
 
@@ -104,10 +181,10 @@ export function YmlFileStep(props: YmlFileStepProps) {
       onOpen={props.onOpen}
       open={open}
       renderForm={renderForm}
-      stepNumber={3}
+      stepNumber={2}
       stepTitle={translate('onboarding.tutorial.with.gitlab_ci.yml.title')}
     />
   );
 }
 
-export default withAvailableFeatures(YmlFileStep);
+export default withCLanguageFeature(withAvailableFeatures(YmlFileStep));
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
deleted file mode 100644
index fd0a84bdab8..00000000000
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/ProjectKeyStep-test.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2023 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { shallow, ShallowWrapper } from 'enzyme';
-import * as React from 'react';
-import { mockComponent } from '../../../../helpers/mocks/component';
-import RenderOptions from '../../components/RenderOptions';
-import { renderStepContent } from '../../test-utils';
-import { BuildTools } from '../../types';
-import { ProjectKeyStep, ProjectKeyStepProps } from '../ProjectKeyStep';
-
-it('should render correctly', () => {
-  const wrapper = shallowRender();
-  expect(wrapper).toMatchSnapshot('Step wrapper');
-  expect(renderStepContent(wrapper)).toMatchSnapshot('initial content');
-});
-
-it('should render correctly if C is not available', () => {
-  const wrapper = shallowRender({ hasCLanguageFeature: false });
-  expect(renderStepContent(wrapper)).toMatchSnapshot();
-});
-
-it.each([
-  [BuildTools.Maven],
-  [BuildTools.Gradle],
-  [BuildTools.DotNet],
-  [BuildTools.CFamily],
-  [BuildTools.Other],
-])('should render correctly for build tool %s', (buildTool) => {
-  expect(renderStepContent(shallowRender({ buildTool }))).toMatchSnapshot();
-});
-
-it('should correctly callback with selected build tool', () => {
-  const setBuildTool = jest.fn();
-  const wrapper = shallowRender({ setBuildTool });
-  selectBuildTool(wrapper, BuildTools.Maven);
-
-  expect(setBuildTool).toHaveBeenCalledWith(BuildTools.Maven);
-});
-
-function selectBuildTool(wrapper: ShallowWrapper<ProjectKeyStepProps>, tool: BuildTools) {
-  const content = new ShallowWrapper(renderStepContent(wrapper) as JSX.Element);
-  content.find(RenderOptions).props().onCheck(tool);
-}
-
-function shallowRender(props: Partial<ProjectKeyStepProps> = {}) {
-  return shallow<ProjectKeyStepProps>(
-    <ProjectKeyStep
-      component={mockComponent()}
-      finished={false}
-      hasCLanguageFeature={true}
-      onDone={jest.fn()}
-      onOpen={jest.fn()}
-      open={true}
-      setBuildTool={jest.fn()}
-      {...props}
-    />
-  );
-}
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 e2e5e663d3f..27f622a5614 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
@@ -19,8 +19,8 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { mockComponent } from '../../../../helpers/mocks/component';
 import { renderStepContent } from '../../test-utils';
-import { BuildTools } from '../../types';
 import { YmlFileStep, YmlFileStepProps } from '../YmlFileStep';
 
 it('should render correctly', () => {
@@ -29,22 +29,11 @@ it('should render correctly', () => {
   expect(renderStepContent(wrapper)).toMatchSnapshot('initial content');
 });
 
-it.each([
-  [BuildTools.Maven],
-  [BuildTools.Gradle],
-  [BuildTools.DotNet],
-  [BuildTools.CFamily],
-  [BuildTools.Other],
-])('should render correctly for build tool %s', (buildTool) => {
-  expect(renderStepContent(shallowRender({ buildTool }))).toMatchSnapshot('with branch support');
-  expect(renderStepContent(shallowRender({ hasFeature: () => false, buildTool }))).toMatchSnapshot(
-    'without branch support'
-  );
-});
-
 function shallowRender(props: Partial<YmlFileStepProps> = {}) {
   return shallow<YmlFileStepProps>(
     <YmlFileStep
+      hasCLanguageFeature={true}
+      component={mockComponent()}
       hasFeature={jest.fn().mockReturnValue(true)}
       open={true}
       projectKey="test"
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 0dd21d49b05..0840eb18349 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
@@ -6,7 +6,7 @@ exports[`should render correctly: Step wrapper 1`] = `
   onOpen={[MockFunction]}
   open={true}
   renderForm={[Function]}
-  stepNumber={2}
+  stepNumber={1}
   stepTitle="onboarding.tutorial.with.gitlab_ci.env_variables.title"
 />
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap
index 791121124ca..43c6bf6c5bd 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/GitLabCITutorial-test.tsx.snap
@@ -11,7 +11,8 @@ exports[`should render correctly 1`] = `
       onboarding.tutorial.with.gitlab_ci.title
     </h2>
   </div>
-  <withCLanguageFeature(ProjectKeyStep)
+  <EnvironmentVariablesStep
+    baseUrl="http://localhost:9000"
     component={
       {
         "breadcrumbs": [],
@@ -34,14 +35,24 @@ exports[`should render correctly 1`] = `
         "tags": [],
       }
     }
+    currentUser={
+      {
+        "dismissedNotices": {
+          "educationPrinciples": false,
+        },
+        "groups": [],
+        "isLoggedIn": true,
+        "login": "luke",
+        "name": "Skywalker",
+        "scmAccounts": [],
+      }
+    }
     finished={false}
     onDone={[Function]}
     onOpen={[Function]}
     open={true}
-    setBuildTool={[Function]}
   />
-  <EnvironmentVariablesStep
-    baseUrl="http://localhost:9000"
+  <withCLanguageFeature(withAvailableFeaturesContext(YmlFileStep))
     component={
       {
         "breadcrumbs": [],
@@ -64,24 +75,6 @@ exports[`should render correctly 1`] = `
         "tags": [],
       }
     }
-    currentUser={
-      {
-        "dismissedNotices": {
-          "educationPrinciples": false,
-        },
-        "groups": [],
-        "isLoggedIn": true,
-        "login": "luke",
-        "name": "Skywalker",
-        "scmAccounts": [],
-      }
-    }
-    finished={false}
-    onDone={[Function]}
-    onOpen={[Function]}
-    open={false}
-  />
-  <withAvailableFeaturesContext(YmlFileStep)
     finished={false}
     mainBranchName="main"
     onDone={[Function]}
@@ -92,7 +85,7 @@ exports[`should render correctly 1`] = `
   <AllSetStep
     alm="gitlab"
     open={false}
-    stepNumber={4}
+    stepNumber={3}
     willRefreshAutomatically={true}
   />
 </Fragment>
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/ProjectKeyStep-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/ProjectKeyStep-test.tsx.snap
deleted file mode 100644
index 08afce936b2..00000000000
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/ProjectKeyStep-test.tsx.snap
+++ /dev/null
@@ -1,356 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly for build tool cfamily 1`] = `
-<div
-  className="boxed-group-inner"
->
-  <ol
-    className="list-styled"
-  >
-    <li>
-      onboarding.build
-      <RenderOptions
-        checked="cfamily"
-        label="onboarding.build"
-        onCheck={[Function]}
-        optionLabelKey="onboarding.build"
-        options={
-          [
-            "maven",
-            "gradle",
-            "dotnet",
-            "cfamily",
-            "other",
-          ]
-        }
-      />
-    </li>
-    <li
-      className="abs-width-600"
-    >
-      <FormattedMessage
-        defaultMessage="onboarding.tutorial.with.gitlab_ci.project_key.cfamily.step2"
-        id="onboarding.tutorial.with.gitlab_ci.project_key.cfamily.step2"
-        values={
-          {
-            "file": <React.Fragment>
-              <code
-                className="rule"
-              >
-                sonar-project.properties
-              </code>
-              <ClipboardIconButton
-                className="little-spacer-left"
-                copyValue="sonar-project.properties"
-              />
-            </React.Fragment>,
-          }
-        }
-      />
-      <CodeSnippet
-        snippet="sonar.projectKey=my-project
-sonar.qualitygate.wait=true
-"
-      />
-    </li>
-  </ol>
-  <Button
-    onClick={[MockFunction]}
-  >
-    continue
-  </Button>
-</div>
-`;
-
-exports[`should render correctly for build tool dotnet 1`] = `
-<div
-  className="boxed-group-inner"
->
-  <ol
-    className="list-styled"
-  >
-    <li>
-      onboarding.build
-      <RenderOptions
-        checked="dotnet"
-        label="onboarding.build"
-        onCheck={[Function]}
-        optionLabelKey="onboarding.build"
-        options={
-          [
-            "maven",
-            "gradle",
-            "dotnet",
-            "cfamily",
-            "other",
-          ]
-        }
-      />
-    </li>
-  </ol>
-  <Button
-    onClick={[MockFunction]}
-  >
-    continue
-  </Button>
-</div>
-`;
-
-exports[`should render correctly for build tool gradle 1`] = `
-<div
-  className="boxed-group-inner"
->
-  <ol
-    className="list-styled"
-  >
-    <li>
-      onboarding.build
-      <RenderOptions
-        checked="gradle"
-        label="onboarding.build"
-        onCheck={[Function]}
-        optionLabelKey="onboarding.build"
-        options={
-          [
-            "maven",
-            "gradle",
-            "dotnet",
-            "cfamily",
-            "other",
-          ]
-        }
-      />
-    </li>
-    <li
-      className="abs-width-600"
-    >
-      <FormattedMessage
-        defaultMessage="onboarding.tutorial.with.gitlab_ci.project_key.gradle.step2"
-        id="onboarding.tutorial.with.gitlab_ci.project_key.gradle.step2"
-        values={
-          {
-            "file": <React.Fragment>
-              <code
-                className="rule"
-              >
-                build.gradle
-              </code>
-              <ClipboardIconButton
-                className="little-spacer-left"
-                copyValue="build.gradle"
-              />
-            </React.Fragment>,
-          }
-        }
-      />
-      <CodeSnippet
-        snippet="plugins {
-  id "org.sonarqube" version "3.5.0.2730"
-}
-
-sonar {
-  properties {
-    property "sonar.projectKey", "my-project"
-    property "sonar.qualitygate.wait", true 
-  }
-}"
-      />
-    </li>
-  </ol>
-  <Button
-    onClick={[MockFunction]}
-  >
-    continue
-  </Button>
-</div>
-`;
-
-exports[`should render correctly for build tool maven 1`] = `
-<div
-  className="boxed-group-inner"
->
-  <ol
-    className="list-styled"
-  >
-    <li>
-      onboarding.build
-      <RenderOptions
-        checked="maven"
-        label="onboarding.build"
-        onCheck={[Function]}
-        optionLabelKey="onboarding.build"
-        options={
-          [
-            "maven",
-            "gradle",
-            "dotnet",
-            "cfamily",
-            "other",
-          ]
-        }
-      />
-    </li>
-    <li
-      className="abs-width-600"
-    >
-      <FormattedMessage
-        defaultMessage="onboarding.tutorial.with.gitlab_ci.project_key.maven.step2"
-        id="onboarding.tutorial.with.gitlab_ci.project_key.maven.step2"
-        values={
-          {
-            "file": <React.Fragment>
-              <code
-                className="rule"
-              >
-                pom.xml
-              </code>
-              <ClipboardIconButton
-                className="little-spacer-left"
-                copyValue="pom.xml"
-              />
-            </React.Fragment>,
-          }
-        }
-      />
-      <CodeSnippet
-        snippet="<properties>
-  <sonar.qualitygate.wait>true</sonar.qualitygate.wait>
-</properties>"
-      />
-    </li>
-  </ol>
-  <Button
-    onClick={[MockFunction]}
-  >
-    continue
-  </Button>
-</div>
-`;
-
-exports[`should render correctly for build tool other 1`] = `
-<div
-  className="boxed-group-inner"
->
-  <ol
-    className="list-styled"
-  >
-    <li>
-      onboarding.build
-      <RenderOptions
-        checked="other"
-        label="onboarding.build"
-        onCheck={[Function]}
-        optionLabelKey="onboarding.build"
-        options={
-          [
-            "maven",
-            "gradle",
-            "dotnet",
-            "cfamily",
-            "other",
-          ]
-        }
-      />
-    </li>
-    <li
-      className="abs-width-600"
-    >
-      <FormattedMessage
-        defaultMessage="onboarding.tutorial.with.gitlab_ci.project_key.other.step2"
-        id="onboarding.tutorial.with.gitlab_ci.project_key.other.step2"
-        values={
-          {
-            "file": <React.Fragment>
-              <code
-                className="rule"
-              >
-                sonar-project.properties
-              </code>
-              <ClipboardIconButton
-                className="little-spacer-left"
-                copyValue="sonar-project.properties"
-              />
-            </React.Fragment>,
-          }
-        }
-      />
-      <CodeSnippet
-        snippet="sonar.projectKey=my-project
-sonar.qualitygate.wait=true
-"
-      />
-    </li>
-  </ol>
-  <Button
-    onClick={[MockFunction]}
-  >
-    continue
-  </Button>
-</div>
-`;
-
-exports[`should render correctly if C is not available 1`] = `
-<div
-  className="boxed-group-inner"
->
-  <ol
-    className="list-styled"
-  >
-    <li>
-      onboarding.build
-      <RenderOptions
-        label="onboarding.build"
-        onCheck={[Function]}
-        optionLabelKey="onboarding.build"
-        options={
-          [
-            "maven",
-            "gradle",
-            "dotnet",
-            "other",
-          ]
-        }
-      />
-    </li>
-  </ol>
-</div>
-`;
-
-exports[`should render correctly: Step wrapper 1`] = `
-<Step
-  finished={false}
-  onOpen={[MockFunction]}
-  open={true}
-  renderForm={[Function]}
-  stepNumber={1}
-  stepTitle="onboarding.tutorial.with.gitlab_ci.project_key.title"
-/>
-`;
-
-exports[`should render correctly: initial content 1`] = `
-<div
-  className="boxed-group-inner"
->
-  <ol
-    className="list-styled"
-  >
-    <li>
-      onboarding.build
-      <RenderOptions
-        label="onboarding.build"
-        onCheck={[Function]}
-        optionLabelKey="onboarding.build"
-        options={
-          [
-            "maven",
-            "gradle",
-            "dotnet",
-            "cfamily",
-            "other",
-          ]
-        }
-      />
-    </li>
-  </ol>
-</div>
-`;
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 5285b14187e..b8da45dea71 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,630 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render correctly for build tool cfamily: with branch support 1`] = `
-<div
-  className="boxed-group-inner"
->
-  <div
-    className="flex-columns"
-  >
-    <div
-      className="flex-column-full"
-    >
-      <React.Fragment>
-        <GithubCFamilyExampleRepositories
-          ci="gitlab-ci"
-          className="big-spacer-bottom abs-width-600"
-        />
-        <div
-          className="big-spacer-bottom"
-        >
-          <FormattedMessage
-            defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.description"
-            id="onboarding.tutorial.with.gitlab_ci.yml.description"
-            values={
-              {
-                "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 abs-width-600"
-        >
-          <PipeCommand
-            branchesEnabled={true}
-            buildTool="cfamily"
-            mainBranchName="main"
-            projectKey="test"
-          />
-        </div>
-        <p
-          className="little-spacer-bottom"
-        >
-          onboarding.tutorial.with.gitlab_ci.yml.baseconfig
-        </p>
-        <p>
-          onboarding.tutorial.with.gitlab_ci.yml.existing
-        </p>
-      </React.Fragment>
-    </div>
-  </div>
-  <FinishButton
-    onClick={[MockFunction]}
-  />
-</div>
-`;
-
-exports[`should render correctly for build tool cfamily: without branch support 1`] = `
-<div
-  className="boxed-group-inner"
->
-  <div
-    className="flex-columns"
-  >
-    <div
-      className="flex-column-full"
-    >
-      <React.Fragment>
-        <GithubCFamilyExampleRepositories
-          ci="gitlab-ci"
-          className="big-spacer-bottom abs-width-600"
-        />
-        <div
-          className="big-spacer-bottom"
-        >
-          <FormattedMessage
-            defaultMessage="onboarding.tutorial.with.gitlab_ci.yml.description"
-            id="onboarding.tutorial.with.gitlab_ci.yml.description"
-            values={
-              {
-                "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 abs-width-600"
-        >
-          <PipeCommand
-            branchesEnabled={false}
-            buildTool="cfamily"
-            mainBranchName="main"
-            projectKey="test"
-          />
-        </div>
-        <p
-          className="little-spacer-bottom"
-        >
-          onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches
-        </p>
-        <p>
-          onboarding.tutorial.with.gitlab_ci.yml.existing
-        </p>
-      </React.Fragment>
-    </div>
-  </div>
-  <FinishButton
-    onClick={[MockFunction]}
-  />
-</div>
-`;
-
-exports[`should render correctly for build tool dotnet: with 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={
-              {
-                "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 abs-width-600"
-        >
-          <PipeCommand
-            branchesEnabled={true}
-            buildTool="dotnet"
-            mainBranchName="main"
-            projectKey="test"
-          />
-        </div>
-        <p
-          className="little-spacer-bottom"
-        >
-          onboarding.tutorial.with.gitlab_ci.yml.baseconfig
-        </p>
-        <p>
-          onboarding.tutorial.with.gitlab_ci.yml.existing
-        </p>
-      </React.Fragment>
-    </div>
-  </div>
-  <FinishButton
-    onClick={[MockFunction]}
-  />
-</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={
-              {
-                "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 abs-width-600"
-        >
-          <PipeCommand
-            branchesEnabled={false}
-            buildTool="dotnet"
-            mainBranchName="main"
-            projectKey="test"
-          />
-        </div>
-        <p
-          className="little-spacer-bottom"
-        >
-          onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches
-        </p>
-        <p>
-          onboarding.tutorial.with.gitlab_ci.yml.existing
-        </p>
-      </React.Fragment>
-    </div>
-  </div>
-  <FinishButton
-    onClick={[MockFunction]}
-  />
-</div>
-`;
-
-exports[`should render correctly for build tool gradle: with 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={
-              {
-                "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 abs-width-600"
-        >
-          <PipeCommand
-            branchesEnabled={true}
-            buildTool="gradle"
-            mainBranchName="main"
-            projectKey="test"
-          />
-        </div>
-        <p
-          className="little-spacer-bottom"
-        >
-          onboarding.tutorial.with.gitlab_ci.yml.baseconfig
-        </p>
-        <p>
-          onboarding.tutorial.with.gitlab_ci.yml.existing
-        </p>
-      </React.Fragment>
-    </div>
-  </div>
-  <FinishButton
-    onClick={[MockFunction]}
-  />
-</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={
-              {
-                "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 abs-width-600"
-        >
-          <PipeCommand
-            branchesEnabled={false}
-            buildTool="gradle"
-            mainBranchName="main"
-            projectKey="test"
-          />
-        </div>
-        <p
-          className="little-spacer-bottom"
-        >
-          onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches
-        </p>
-        <p>
-          onboarding.tutorial.with.gitlab_ci.yml.existing
-        </p>
-      </React.Fragment>
-    </div>
-  </div>
-  <FinishButton
-    onClick={[MockFunction]}
-  />
-</div>
-`;
-
-exports[`should render correctly for build tool maven: with 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={
-              {
-                "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 abs-width-600"
-        >
-          <PipeCommand
-            branchesEnabled={true}
-            buildTool="maven"
-            mainBranchName="main"
-            projectKey="test"
-          />
-        </div>
-        <p
-          className="little-spacer-bottom"
-        >
-          onboarding.tutorial.with.gitlab_ci.yml.baseconfig
-        </p>
-        <p>
-          onboarding.tutorial.with.gitlab_ci.yml.existing
-        </p>
-      </React.Fragment>
-    </div>
-  </div>
-  <FinishButton
-    onClick={[MockFunction]}
-  />
-</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={
-              {
-                "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 abs-width-600"
-        >
-          <PipeCommand
-            branchesEnabled={false}
-            buildTool="maven"
-            mainBranchName="main"
-            projectKey="test"
-          />
-        </div>
-        <p
-          className="little-spacer-bottom"
-        >
-          onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches
-        </p>
-        <p>
-          onboarding.tutorial.with.gitlab_ci.yml.existing
-        </p>
-      </React.Fragment>
-    </div>
-  </div>
-  <FinishButton
-    onClick={[MockFunction]}
-  />
-</div>
-`;
-
-exports[`should render correctly for build tool other: with 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={
-              {
-                "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 abs-width-600"
-        >
-          <PipeCommand
-            branchesEnabled={true}
-            buildTool="other"
-            mainBranchName="main"
-            projectKey="test"
-          />
-        </div>
-        <p
-          className="little-spacer-bottom"
-        >
-          onboarding.tutorial.with.gitlab_ci.yml.baseconfig
-        </p>
-        <p>
-          onboarding.tutorial.with.gitlab_ci.yml.existing
-        </p>
-      </React.Fragment>
-    </div>
-  </div>
-  <FinishButton
-    onClick={[MockFunction]}
-  />
-</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={
-              {
-                "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 abs-width-600"
-        >
-          <PipeCommand
-            branchesEnabled={false}
-            buildTool="other"
-            mainBranchName="main"
-            projectKey="test"
-          />
-        </div>
-        <p
-          className="little-spacer-bottom"
-        >
-          onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches
-        </p>
-        <p>
-          onboarding.tutorial.with.gitlab_ci.yml.existing
-        </p>
-      </React.Fragment>
-    </div>
-  </div>
-  <FinishButton
-    onClick={[MockFunction]}
-  />
-</div>
-`;
-
 exports[`should render correctly: Step wrapper 1`] = `
 <Step
   finished={true}
   onOpen={[MockFunction]}
   open={true}
   renderForm={[Function]}
-  stepNumber={3}
+  stepNumber={2}
   stepTitle="onboarding.tutorial.with.gitlab_ci.yml.title"
 />
 `;
@@ -633,15 +15,26 @@ exports[`should render correctly: initial content 1`] = `
 <div
   className="boxed-group-inner"
 >
-  <div
-    className="flex-columns"
-  >
-    <div
-      className="flex-column-full"
-    />
-  </div>
-  <FinishButton
-    onClick={[MockFunction]}
-  />
+  <ol
+    className="list-styled"
+  >
+    <li>
+      onboarding.build
+      <RenderOptions
+        label="onboarding.build"
+        onCheck={[Function]}
+        optionLabelKey="onboarding.build"
+        options={
+          [
+            "maven",
+            "gradle",
+            "dotnet",
+            "cfamily",
+            "other",
+          ]
+        }
+      />
+    </li>
+  </ol>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx
index c2cce5804be..4b2d787d7ad 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx
@@ -92,10 +92,10 @@ sonarqube-check:
   allow_failure: true`;
   } else {
     const onlyBlock = branchesEnabled
-      ? `- merge_requests
-    - ${mainBranchName}
-    - develop`
-      : `- ${mainBranchName}`;
+      ? `- if: $CI_PIPELINE_SOURCE == 'merge_request_event'
+    - if: $CI_COMMIT_BRANCH == '${mainBranchName}'
+    - if: $CI_COMMIT_BRANCH == 'develop'`
+      : `- if: $CI_COMMIT_BRANCH == '${mainBranchName}'`;
 
     const { image, script } = BUILD_TOOL_SPECIFIC[buildTool];
 
@@ -110,7 +110,7 @@ sonarqube-check:
       - .sonar/cache
   script: ${script(projectKey)}
   allow_failure: true
-  only:
+  rules:
     ${onlyBlock}
 `;
   }
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/__snapshots__/PipeCommand-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/__snapshots__/PipeCommand-test.tsx.snap
index daa8d3f8535..607b06e2437 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/__snapshots__/PipeCommand-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/__snapshots__/PipeCommand-test.tsx.snap
@@ -97,10 +97,10 @@ exports[`should render correctly for dotnet: branches enabled 1`] = `
       - "dotnet build"
       - "dotnet sonarscanner end /d:sonar.login=\\"$SONAR_TOKEN\\""
   allow_failure: true
-  only:
-    - merge_requests
-    - main
-    - develop
+  rules:
+    - if: $CI_PIPELINE_SOURCE == 'merge_request_event'
+    - if: $CI_COMMIT_BRANCH == 'main'
+    - if: $CI_COMMIT_BRANCH == 'develop'
 "
   />
 </Fragment>
@@ -127,10 +127,10 @@ exports[`should render correctly for dotnet: branches not enabled 1`] = `
       - "dotnet build"
       - "dotnet sonarscanner end /d:sonar.login=\\"$SONAR_TOKEN\\""
   allow_failure: true
-  only:
-    - merge_requests
-    - main
-    - develop
+  rules:
+    - if: $CI_PIPELINE_SOURCE == 'merge_request_event'
+    - if: $CI_COMMIT_BRANCH == 'main'
+    - if: $CI_COMMIT_BRANCH == 'develop'
 "
   />
 </Fragment>
@@ -150,10 +150,10 @@ exports[`should render correctly for gradle: branches enabled 1`] = `
       - .sonar/cache
   script: gradle sonar
   allow_failure: true
-  only:
-    - merge_requests
-    - main
-    - develop
+  rules:
+    - if: $CI_PIPELINE_SOURCE == 'merge_request_event'
+    - if: $CI_COMMIT_BRANCH == 'main'
+    - if: $CI_COMMIT_BRANCH == 'develop'
 "
   />
 </Fragment>
@@ -173,10 +173,10 @@ exports[`should render correctly for gradle: branches not enabled 1`] = `
       - .sonar/cache
   script: gradle sonar
   allow_failure: true
-  only:
-    - merge_requests
-    - main
-    - develop
+  rules:
+    - if: $CI_PIPELINE_SOURCE == 'merge_request_event'
+    - if: $CI_COMMIT_BRANCH == 'main'
+    - if: $CI_COMMIT_BRANCH == 'develop'
 "
   />
 </Fragment>
@@ -197,10 +197,10 @@ exports[`should render correctly for maven: branches enabled 1`] = `
   script: 
     - mvn verify sonar:sonar -Dsonar.projectKey=test
   allow_failure: true
-  only:
-    - merge_requests
-    - main
-    - develop
+  rules:
+    - if: $CI_PIPELINE_SOURCE == 'merge_request_event'
+    - if: $CI_COMMIT_BRANCH == 'main'
+    - if: $CI_COMMIT_BRANCH == 'develop'
 "
   />
 </Fragment>
@@ -221,10 +221,10 @@ exports[`should render correctly for maven: branches not enabled 1`] = `
   script: 
     - mvn verify sonar:sonar -Dsonar.projectKey=test
   allow_failure: true
-  only:
-    - merge_requests
-    - main
-    - develop
+  rules:
+    - if: $CI_PIPELINE_SOURCE == 'merge_request_event'
+    - if: $CI_COMMIT_BRANCH == 'main'
+    - if: $CI_COMMIT_BRANCH == 'develop'
 "
   />
 </Fragment>
@@ -247,10 +247,10 @@ exports[`should render correctly for other: branches enabled 1`] = `
   script: 
     - sonar-scanner
   allow_failure: true
-  only:
-    - merge_requests
-    - main
-    - develop
+  rules:
+    - if: $CI_PIPELINE_SOURCE == 'merge_request_event'
+    - if: $CI_COMMIT_BRANCH == 'main'
+    - if: $CI_COMMIT_BRANCH == 'develop'
 "
   />
 </Fragment>
@@ -273,10 +273,10 @@ exports[`should render correctly for other: branches not enabled 1`] = `
   script: 
     - sonar-scanner
   allow_failure: true
-  only:
-    - merge_requests
-    - main
-    - develop
+  rules:
+    - if: $CI_PIPELINE_SOURCE == 'merge_request_event'
+    - if: $CI_COMMIT_BRANCH == 'main'
+    - if: $CI_COMMIT_BRANCH == 'develop'
 "
   />
 </Fragment>