SONAR-15034 Adding C/C++/Objective C to gitlab tutorial.

12 files changed, 545 insertions, 110 deletions

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 51c73e06110..6d2f7bc6d5a 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
@@ -19,9 +19,9 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import { BuildTools } from '../types';
 import EnvironmentVariablesStep from './EnvironmentVariablesStep';
 import ProjectKeyStep from './ProjectKeyStep';
-import { GitlabBuildTools } from './types';
 import YmlFileStep from './YmlFileStep';
 
 export enum Steps {
@@ -40,7 +40,7 @@ export default function GitLabCITutorial(props: GitLabCITutorialProps) {
   const { baseUrl, component, currentUser } = props;
 
   const [step, setStep] = React.useState(Steps.PROJECT_KEY);
-  const [buildTool, setBuildTool] = React.useState<GitlabBuildTools | undefined>();
+  const [buildTool, setBuildTool] = React.useState<BuildTools>();
 
   return (
     <>
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
index 14614072352..d4f03a0480e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/ProjectKeyStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/ProjectKeyStep.tsx
@@ -23,19 +23,20 @@ import { Button } from 'sonar-ui-common/components/controls/buttons';
 import { ClipboardIconButton } from 'sonar-ui-common/components/controls/clipboard';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import CodeSnippet from '../../common/CodeSnippet';
+import { withCLanguageFeature } from '../../hoc/withCLanguageFeature';
 import RenderOptions from '../components/RenderOptions';
 import Step from '../components/Step';
 import { BuildTools } from '../types';
-import { GitlabBuildTools, GITLAB_BUILDTOOLS_LIST } from './types';
 
 export interface ProjectKeyStepProps {
-  buildTool?: GitlabBuildTools;
+  buildTool?: BuildTools;
   component: T.Component;
   finished: boolean;
+  hasCLanguageFeature: boolean;
   onDone: () => void;
   onOpen: () => void;
   open: boolean;
-  setBuildTool: (tool: GitlabBuildTools) => void;
+  setBuildTool: (tool: BuildTools) => void;
 }
 
 const mavenSnippet = (key: string) => `<properties>
@@ -61,25 +62,33 @@ 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 default function ProjectKeyStep(props: ProjectKeyStepProps) {
-  const { buildTool, component, finished, open } = props;
+export function ProjectKeyStep(props: ProjectKeyStepProps) {
+  const { buildTool, component, finished, hasCLanguageFeature, open } = props;
 
-  const buildToolSelect = (value: GitlabBuildTools) => {
+  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">
@@ -90,7 +99,7 @@ export default function ProjectKeyStep(props: ProjectKeyStepProps) {
             name="buildtool"
             onCheck={buildToolSelect}
             optionLabelKey="onboarding.build"
-            options={GITLAB_BUILDTOOLS_LIST}
+            options={buildTools}
           />
         </li>
         {buildTool !== undefined && buildTool !== BuildTools.DotNet && (
@@ -131,3 +140,5 @@ export default function ProjectKeyStep(props: ProjectKeyStepProps) {
     />
   );
 }
+
+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 516e1aea31e..bb5b9bbbbb3 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
@@ -24,12 +24,12 @@ import { ClipboardIconButton } from 'sonar-ui-common/components/controls/clipboa
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { withAppState } from '../../hoc/withAppState';
 import Step from '../components/Step';
+import { BuildTools } from '../types';
 import PipeCommand from './commands/PipeCommand';
-import { GitlabBuildTools } from './types';
 
 export interface YmlFileStepProps {
   appState: T.AppState;
-  buildTool?: GitlabBuildTools;
+  buildTool?: BuildTools;
   open: boolean;
   projectKey: string;
 }
@@ -66,7 +66,7 @@ export function YmlFileStep({
                 />
               </div>
 
-              <div className="big-spacer-bottom">
+              <div className="big-spacer-bottom abs-width-600">
                 <PipeCommand
                   buildTool={buildTool}
                   branchesEnabled={branchesEnabled}
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 d175e5d6eb2..418bbbfd0ad 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
@@ -23,8 +23,7 @@ import { mockComponent } from '../../../../helpers/testMocks';
 import RenderOptions from '../../components/RenderOptions';
 import { renderStepContent } from '../../test-utils';
 import { BuildTools } from '../../types';
-import ProjectKeyStep, { ProjectKeyStepProps } from '../ProjectKeyStep';
-import { GITLAB_BUILDTOOLS_LIST } from '../types';
+import { ProjectKeyStep, ProjectKeyStepProps } from '../ProjectKeyStep';
 
 it('should render correctly', () => {
   const wrapper = shallowRender();
@@ -32,12 +31,20 @@ it('should render correctly', () => {
   expect(renderStepContent(wrapper)).toMatchSnapshot('initial content');
 });
 
-it.each(GITLAB_BUILDTOOLS_LIST.map(tool => [tool]))(
-  'should render correctly for build tool %s',
-  buildTool => {
-    expect(renderStepContent(shallowRender({ buildTool }))).toMatchSnapshot();
-  }
-);
+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();
@@ -60,6 +67,7 @@ function shallowRender(props: Partial<ProjectKeyStepProps> = {}) {
     <ProjectKeyStep
       component={mockComponent()}
       finished={false}
+      hasCLanguageFeature={true}
       onDone={jest.fn()}
       onOpen={jest.fn()}
       open={true}
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 c8e8a612cd2..34332af4915 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
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import { mockAppState } from '../../../../helpers/testMocks';
 import { renderStepContent } from '../../test-utils';
-import { GITLAB_BUILDTOOLS_LIST } from '../types';
+import { BuildTools } from '../../types';
 import { YmlFileStep, YmlFileStepProps } from '../YmlFileStep';
 
 it('should render correctly', () => {
@@ -30,17 +30,20 @@ it('should render correctly', () => {
   expect(renderStepContent(wrapper)).toMatchSnapshot('initial content');
 });
 
-it.each(GITLAB_BUILDTOOLS_LIST.map(tool => [tool]))(
-  'should render correctly for build tool %s',
-  buildTool => {
-    expect(renderStepContent(shallowRender({ buildTool }))).toMatchSnapshot('with branch support');
-    expect(
-      renderStepContent(
-        shallowRender({ appState: mockAppState({ branchesEnabled: false }), buildTool })
-      )
-    ).toMatchSnapshot('without branch support');
-  }
-);
+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({ appState: mockAppState({ branchesEnabled: false }), buildTool })
+    )
+  ).toMatchSnapshot('without branch support');
+});
 
 function shallowRender(props: Partial<YmlFileStepProps> = {}) {
   return shallow<YmlFileStepProps>(
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 ef558b20a49..773eecd354a 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,7 @@ exports[`should render correctly 1`] = `
       onboarding.tutorial.with.gitlab_ci.title
     </h1>
   </div>
-  <ProjectKeyStep
+  <Connect(withCLanguageFeature(ProjectKeyStep))
     component={
       Object {
         "breadcrumbs": Array [],
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
index df95ce47a2b..522f6bd3d67 100644
--- 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
@@ -1,5 +1,67 @@
 // 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"
+        name="buildtool"
+        onCheck={[Function]}
+        optionLabelKey="onboarding.build"
+        options={
+          Array [
+            "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={
+          Object {
+            "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"
@@ -19,6 +81,7 @@ exports[`should render correctly for build tool dotnet 1`] = `
             "maven",
             "gradle",
             "dotnet",
+            "cfamily",
             "other",
           ]
         }
@@ -52,6 +115,7 @@ exports[`should render correctly for build tool gradle 1`] = `
             "maven",
             "gradle",
             "dotnet",
+            "cfamily",
             "other",
           ]
         }
@@ -120,6 +184,7 @@ exports[`should render correctly for build tool maven 1`] = `
             "maven",
             "gradle",
             "dotnet",
+            "cfamily",
             "other",
           ]
         }
@@ -182,6 +247,7 @@ exports[`should render correctly for build tool other 1`] = `
             "maven",
             "gradle",
             "dotnet",
+            "cfamily",
             "other",
           ]
         }
@@ -224,6 +290,33 @@ sonar.qualitygate.wait=true
 </div>
 `;
 
+exports[`should render correctly if C is not available 1`] = `
+<div
+  className="boxed-group-inner"
+>
+  <ol
+    className="list-styled"
+  >
+    <li>
+      onboarding.build
+      <RenderOptions
+        name="buildtool"
+        onCheck={[Function]}
+        optionLabelKey="onboarding.build"
+        options={
+          Array [
+            "maven",
+            "gradle",
+            "dotnet",
+            "other",
+          ]
+        }
+      />
+    </li>
+  </ol>
+</div>
+`;
+
 exports[`should render correctly: Step wrapper 1`] = `
 <Step
   finished={false}
@@ -253,6 +346,7 @@ exports[`should render correctly: initial content 1`] = `
             "maven",
             "gradle",
             "dotnet",
+            "cfamily",
             "other",
           ]
         }
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 ac538d7f85e..a953153d700 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: with branch support 1`] = `
+exports[`should render correctly for build tool cfamily: with branch support 1`] = `
 <div
   className="boxed-group-inner"
 >
@@ -35,8 +35,217 @@ exports[`should render correctly for build tool dotnet: with branch support 1`]
           />
         </div>
         <div
+          className="big-spacer-bottom abs-width-600"
+        >
+          <PipeCommand
+            branchesEnabled={true}
+            buildTool="cfamily"
+            projectKey="test"
+          />
+        </div>
+        <p
+          className="little-spacer-bottom"
+        >
+          onboarding.tutorial.with.gitlab_ci.yml.baseconfig
+        </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
+             
+            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.links.title"
+              id="onboarding.tutorial.with.gitlab_ci.yml.done.links.title"
+              values={
+                Object {
+                  "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 cfamily: 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 abs-width-600"
+        >
+          <PipeCommand
+            branchesEnabled={false}
+            buildTool="cfamily"
+            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"
+          >
+            <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.links.title"
+              id="onboarding.tutorial.with.gitlab_ci.yml.done.links.title"
+              values={
+                Object {
+                  "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: 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={
+              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 abs-width-600"
+        >
           <PipeCommand
             branchesEnabled={true}
             buildTool="dotnet"
@@ -140,7 +349,7 @@ exports[`should render correctly for build tool dotnet: without branch support 1
           />
         </div>
         <div
-          className="big-spacer-bottom"
+          className="big-spacer-bottom abs-width-600"
         >
           <PipeCommand
             branchesEnabled={false}
@@ -244,7 +453,7 @@ exports[`should render correctly for build tool gradle: with branch support 1`]
           />
         </div>
         <div
-          className="big-spacer-bottom"
+          className="big-spacer-bottom abs-width-600"
         >
           <PipeCommand
             branchesEnabled={true}
@@ -349,7 +558,7 @@ exports[`should render correctly for build tool gradle: without branch support 1
           />
         </div>
         <div
-          className="big-spacer-bottom"
+          className="big-spacer-bottom abs-width-600"
         >
           <PipeCommand
             branchesEnabled={false}
@@ -453,7 +662,7 @@ exports[`should render correctly for build tool maven: with branch support 1`] =
           />
         </div>
         <div
-          className="big-spacer-bottom"
+          className="big-spacer-bottom abs-width-600"
         >
           <PipeCommand
             branchesEnabled={true}
@@ -558,7 +767,7 @@ exports[`should render correctly for build tool maven: without branch support 1`
           />
         </div>
         <div
-          className="big-spacer-bottom"
+          className="big-spacer-bottom abs-width-600"
         >
           <PipeCommand
             branchesEnabled={false}
@@ -662,7 +871,7 @@ exports[`should render correctly for build tool other: with branch support 1`] =
           />
         </div>
         <div
-          className="big-spacer-bottom"
+          className="big-spacer-bottom abs-width-600"
         >
           <PipeCommand
             branchesEnabled={true}
@@ -767,7 +976,7 @@ exports[`should render correctly for build tool other: without branch support 1`
           />
         </div>
         <div
-          className="big-spacer-bottom"
+          className="big-spacer-bottom abs-width-600"
         >
           <PipeCommand
             branchesEnabled={false}
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 1044efaa1ac..1635c12ebc4 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
@@ -19,12 +19,12 @@
  */
 import * as React from 'react';
 import CodeSnippet from '../../../common/CodeSnippet';
+import { CompilationInfo } from '../../components/CompilationInfo';
 import { BuildTools } from '../../types';
-import { GitlabBuildTools } from '../types';
 
 export interface PipeCommandProps {
   branchesEnabled?: boolean;
-  buildTool: GitlabBuildTools;
+  buildTool: BuildTools;
   projectKey: string;
 }
 
@@ -56,15 +56,48 @@ const BUILD_TOOL_SPECIFIC = {
 };
 
 export default function PipeCommand({ projectKey, branchesEnabled, buildTool }: PipeCommandProps) {
-  const onlyBlock = branchesEnabled
-    ? `- merge_requests
+  let command: string;
+  if (buildTool === BuildTools.CFamily) {
+    command = `image: <image ready for your build toolchain>
+
+cache:
+  paths:
+    - .sonar
+
+stages:
+  - download
+  - build
+  - scan
+
+download:
+  stage: download
+  script:
+      - mkdir -p .sonar
+      - curl -sSLo build-wrapper-linux-x86.zip  $SONAR_HOST_URL/static/cpp/build-wrapper-linux-x86.zip
+      - unzip -o build-wrapper-linux-x86.zip -d .sonar
+
+build:
+  stage: build
+  script:
+      - .sonar/build-wrapper-linux-x86/build-wrapper-linux-x86-64 --out-dir .sonar/bw-output <your clean build command>
+
+sonarqube-check:
+  stage: scan
+  script: 
+    - curl -sSLo sonar-scanner.zip https://binaries.sonarsource.com/Distribution/sonar-scanner-cli/sonar-scanner-cli-4.6.2.2472-linux.zip
+    - unzip -o sonar-scanner.zip -d .sonar
+    - .sonar/sonar-scanner-4.6.2.2472-linux/bin/sonar-scanner -Dsonar.cfamily.build-wrapper-output=.sonar/bw-output
+  allow_failure: true`;
+  } else {
+    const onlyBlock = branchesEnabled
+      ? `- merge_requests
     - master
     - develop`
-    : '- master # or the name of your main branch';
+      : '- master # or the name of your main branch';
 
-  const { image, script } = BUILD_TOOL_SPECIFIC[buildTool];
+    const { image, script } = BUILD_TOOL_SPECIFIC[buildTool];
 
-  const command = `sonarqube-check:
+    command = `sonarqube-check:
   image: ${image}
   variables:
     SONAR_USER_HOME: "\${CI_PROJECT_DIR}/.sonar"  # Defines the location of the analysis task cache
@@ -78,6 +111,11 @@ export default function PipeCommand({ projectKey, branchesEnabled, buildTool }:
   only:
     ${onlyBlock}
 `;
-
-  return <CodeSnippet snippet={command} />;
+  }
+  return (
+    <>
+      <CodeSnippet snippet={command} />
+      <CompilationInfo />
+    </>
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/PipeCommand-test.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/PipeCommand-test.tsx
index abc594b60f5..7254d3f6851 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/PipeCommand-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/__tests__/PipeCommand-test.tsx
@@ -19,10 +19,16 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { GITLAB_BUILDTOOLS_LIST } from '../../types';
+import { BuildTools } from '../../../types';
 import PipeCommand from '../PipeCommand';
 
-it.each(GITLAB_BUILDTOOLS_LIST.map(tool => [tool]))('should render correctly for %s', buildTool => {
+it.each([
+  [BuildTools.Maven],
+  [BuildTools.Gradle],
+  [BuildTools.DotNet],
+  [BuildTools.CFamily],
+  [BuildTools.Other]
+])('should render correctly for %s', buildTool => {
   expect(
     shallow(<PipeCommand buildTool={buildTool} branchesEnabled={true} projectKey="test" />)
   ).toMatchSnapshot('branches enabled');
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 c7e7a6cbcc7..674361c114c 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
@@ -1,8 +1,85 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should render correctly for cfamily: branches enabled 1`] = `
+<Fragment>
+  <CodeSnippet
+    snippet="image: <image ready for your build toolchain>
+
+cache:
+  paths:
+    - .sonar
+
+stages:
+  - download
+  - build
+  - scan
+
+download:
+  stage: download
+  script:
+      - mkdir -p .sonar
+      - curl -sSLo build-wrapper-linux-x86.zip  $SONAR_HOST_URL/static/cpp/build-wrapper-linux-x86.zip
+      - unzip -o build-wrapper-linux-x86.zip -d .sonar
+
+build:
+  stage: build
+  script:
+      - .sonar/build-wrapper-linux-x86/build-wrapper-linux-x86-64 --out-dir .sonar/bw-output <your clean build command>
+
+sonarqube-check:
+  stage: scan
+  script: 
+    - curl -sSLo sonar-scanner.zip https://binaries.sonarsource.com/Distribution/sonar-scanner-cli/sonar-scanner-cli-4.6.2.2472-linux.zip
+    - unzip -o sonar-scanner.zip -d .sonar
+    - .sonar/sonar-scanner-4.6.2.2472-linux/bin/sonar-scanner -Dsonar.cfamily.build-wrapper-output=.sonar/bw-output
+  allow_failure: true"
+  />
+  <CompilationInfo />
+</Fragment>
+`;
+
+exports[`should render correctly for cfamily: branches not enabled 1`] = `
+<Fragment>
+  <CodeSnippet
+    snippet="image: <image ready for your build toolchain>
+
+cache:
+  paths:
+    - .sonar
+
+stages:
+  - download
+  - build
+  - scan
+
+download:
+  stage: download
+  script:
+      - mkdir -p .sonar
+      - curl -sSLo build-wrapper-linux-x86.zip  $SONAR_HOST_URL/static/cpp/build-wrapper-linux-x86.zip
+      - unzip -o build-wrapper-linux-x86.zip -d .sonar
+
+build:
+  stage: build
+  script:
+      - .sonar/build-wrapper-linux-x86/build-wrapper-linux-x86-64 --out-dir .sonar/bw-output <your clean build command>
+
+sonarqube-check:
+  stage: scan
+  script: 
+    - curl -sSLo sonar-scanner.zip https://binaries.sonarsource.com/Distribution/sonar-scanner-cli/sonar-scanner-cli-4.6.2.2472-linux.zip
+    - unzip -o sonar-scanner.zip -d .sonar
+    - .sonar/sonar-scanner-4.6.2.2472-linux/bin/sonar-scanner -Dsonar.cfamily.build-wrapper-output=.sonar/bw-output
+  allow_failure: true"
+  />
+  <CompilationInfo />
+</Fragment>
+`;
+
 exports[`should render correctly for dotnet: branches enabled 1`] = `
-<CodeSnippet
-  snippet="sonarqube-check:
+<Fragment>
+  <CodeSnippet
+    snippet="sonarqube-check:
   image: mcr.microsoft.com/dotnet/core/sdk:latest
   variables:
     SONAR_USER_HOME: \\"\${CI_PROJECT_DIR}/.sonar\\"  # Defines the location of the analysis task cache
@@ -25,12 +102,15 @@ exports[`should render correctly for dotnet: branches enabled 1`] = `
     - master
     - develop
 "
-/>
+  />
+  <CompilationInfo />
+</Fragment>
 `;
 
 exports[`should render correctly for dotnet: branches not enabled 1`] = `
-<CodeSnippet
-  snippet="sonarqube-check:
+<Fragment>
+  <CodeSnippet
+    snippet="sonarqube-check:
   image: mcr.microsoft.com/dotnet/core/sdk:latest
   variables:
     SONAR_USER_HOME: \\"\${CI_PROJECT_DIR}/.sonar\\"  # Defines the location of the analysis task cache
@@ -53,12 +133,15 @@ exports[`should render correctly for dotnet: branches not enabled 1`] = `
     - master
     - develop
 "
-/>
+  />
+  <CompilationInfo />
+</Fragment>
 `;
 
 exports[`should render correctly for gradle: branches enabled 1`] = `
-<CodeSnippet
-  snippet="sonarqube-check:
+<Fragment>
+  <CodeSnippet
+    snippet="sonarqube-check:
   image: gradle:jre11-slim
   variables:
     SONAR_USER_HOME: \\"\${CI_PROJECT_DIR}/.sonar\\"  # Defines the location of the analysis task cache
@@ -74,12 +157,15 @@ exports[`should render correctly for gradle: branches enabled 1`] = `
     - master
     - develop
 "
-/>
+  />
+  <CompilationInfo />
+</Fragment>
 `;
 
 exports[`should render correctly for gradle: branches not enabled 1`] = `
-<CodeSnippet
-  snippet="sonarqube-check:
+<Fragment>
+  <CodeSnippet
+    snippet="sonarqube-check:
   image: gradle:jre11-slim
   variables:
     SONAR_USER_HOME: \\"\${CI_PROJECT_DIR}/.sonar\\"  # Defines the location of the analysis task cache
@@ -95,12 +181,15 @@ exports[`should render correctly for gradle: branches not enabled 1`] = `
     - master
     - develop
 "
-/>
+  />
+  <CompilationInfo />
+</Fragment>
 `;
 
 exports[`should render correctly for maven: branches enabled 1`] = `
-<CodeSnippet
-  snippet="sonarqube-check:
+<Fragment>
+  <CodeSnippet
+    snippet="sonarqube-check:
   image: maven:3.6.3-jdk-11
   variables:
     SONAR_USER_HOME: \\"\${CI_PROJECT_DIR}/.sonar\\"  # Defines the location of the analysis task cache
@@ -117,12 +206,15 @@ exports[`should render correctly for maven: branches enabled 1`] = `
     - master
     - develop
 "
-/>
+  />
+  <CompilationInfo />
+</Fragment>
 `;
 
 exports[`should render correctly for maven: branches not enabled 1`] = `
-<CodeSnippet
-  snippet="sonarqube-check:
+<Fragment>
+  <CodeSnippet
+    snippet="sonarqube-check:
   image: maven:3.6.3-jdk-11
   variables:
     SONAR_USER_HOME: \\"\${CI_PROJECT_DIR}/.sonar\\"  # Defines the location of the analysis task cache
@@ -139,12 +231,15 @@ exports[`should render correctly for maven: branches not enabled 1`] = `
     - master
     - develop
 "
-/>
+  />
+  <CompilationInfo />
+</Fragment>
 `;
 
 exports[`should render correctly for other: branches enabled 1`] = `
-<CodeSnippet
-  snippet="sonarqube-check:
+<Fragment>
+  <CodeSnippet
+    snippet="sonarqube-check:
   image: 
     name: sonarsource/sonar-scanner-cli:latest
     entrypoint: [\\"\\"]
@@ -163,12 +258,15 @@ exports[`should render correctly for other: branches enabled 1`] = `
     - master
     - develop
 "
-/>
+  />
+  <CompilationInfo />
+</Fragment>
 `;
 
 exports[`should render correctly for other: branches not enabled 1`] = `
-<CodeSnippet
-  snippet="sonarqube-check:
+<Fragment>
+  <CodeSnippet
+    snippet="sonarqube-check:
   image: 
     name: sonarsource/sonar-scanner-cli:latest
     entrypoint: [\\"\\"]
@@ -187,5 +285,7 @@ exports[`should render correctly for other: branches not enabled 1`] = `
     - master
     - develop
 "
-/>
+  />
+  <CompilationInfo />
+</Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/types.ts b/server/sonar-web/src/main/js/components/tutorials/gitlabci/types.ts
deleted file mode 100644
index 5f67d6386b5..00000000000
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/types.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2021 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 { BuildTools } from '../types';
-
-export type GitlabBuildTools =
-  | BuildTools.Maven
-  | BuildTools.Gradle
-  | BuildTools.DotNet
-  | BuildTools.Other;
-
-export const GITLAB_BUILDTOOLS_LIST: GitlabBuildTools[] = [
-  BuildTools.Maven,
-  BuildTools.Gradle,
-  BuildTools.DotNet,
-  BuildTools.Other
-];