From: Mathieu Suen <mathieu.suen@sonarsource.com>
Date: Mon, 8 Feb 2021 10:09:44 +0000 (+0100)
Subject: SONAR-14435 Add CFamily tutorial for manual setup
X-Git-Tag: 8.8.0.42792~149
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=c0052017c3fe08d0343efa19e5efcb6e93ff3ecd;p=sonarqube.git

SONAR-14435 Add CFamily tutorial for manual setup
---

diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx
index e81304b0772..f80804519e8 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/JenkinsfileStep.tsx
@@ -36,8 +36,11 @@ export interface JenkinsfileStepProps {
   open: boolean;
 }
 
+// To remove when CFamily is includ in this tutorial
+type BuildToolsWithoutCFamily = Exclude<BuildTools, BuildTools.CFamily>;
+
 const BUILDTOOL_COMPONENT_MAP: {
-  [x in BuildTools]: React.ComponentType<{ component: T.Component }>;
+  [x in BuildToolsWithoutCFamily]: React.ComponentType<{ component: T.Component }>;
 } = {
   [BuildTools.Maven]: Maven,
   [BuildTools.Gradle]: Gradle,
@@ -51,7 +54,7 @@ export function JenkinsfileStep(props: JenkinsfileStepProps) {
     component,
     open
   } = props;
-  const [buildTool, setBuildTool] = React.useState<BuildTools | undefined>(undefined);
+  const [buildTool, setBuildTool] = React.useState<BuildToolsWithoutCFamily | undefined>(undefined);
   return (
     <Step
       finished={false}
@@ -64,7 +67,7 @@ export function JenkinsfileStep(props: JenkinsfileStepProps) {
               <RenderOptions
                 checked={buildTool}
                 name="buildtool"
-                onCheck={value => setBuildTool(value as BuildTools)}
+                onCheck={value => setBuildTool(value as BuildToolsWithoutCFamily)}
                 optionLabelKey="onboarding.build"
                 options={Object.values(BuildTools)}
               />
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsfileStep-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsfileStep-test.tsx.snap
index a4610804993..7f2f1394a90 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsfileStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/__snapshots__/JenkinsfileStep-test.tsx.snap
@@ -18,6 +18,7 @@ exports[`should render correctly for .NET 1`] = `
           Array [
             "maven",
             "gradle",
+            "cfamily",
             "dotnet",
             "other",
           ]
@@ -139,6 +140,7 @@ exports[`should render correctly for Gradle 1`] = `
           Array [
             "maven",
             "gradle",
+            "cfamily",
             "dotnet",
             "other",
           ]
@@ -260,6 +262,7 @@ exports[`should render correctly for Maven 1`] = `
           Array [
             "maven",
             "gradle",
+            "cfamily",
             "dotnet",
             "other",
           ]
@@ -381,6 +384,7 @@ exports[`should render correctly for Other 1`] = `
           Array [
             "maven",
             "gradle",
+            "cfamily",
             "dotnet",
             "other",
           ]
@@ -502,6 +506,7 @@ exports[`should render correctly with no branches 1`] = `
           Array [
             "maven",
             "gradle",
+            "cfamily",
             "dotnet",
             "other",
           ]
@@ -632,6 +637,7 @@ exports[`should render correctly: initial content 1`] = `
           Array [
             "maven",
             "gradle",
+            "cfamily",
             "dotnet",
             "other",
           ]
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/BuildToolForm.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/BuildToolForm.tsx
index ae6acfbdd81..f9bb51a0a97 100644
--- a/server/sonar-web/src/main/js/components/tutorials/manual/BuildToolForm.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/BuildToolForm.tsx
@@ -47,14 +47,23 @@ export default class BuildToolForm extends React.PureComponent<Props, State> {
   };
 
   handleOSChange = (os: OSs) => {
-    this.setState({ config: { buildTool: BuildTools.Other, os } }, () => {
-      this.props.onDone(this.state.config);
-    });
+    this.setState(
+      ({ config }) => ({ config: { buildTool: config.buildTool, os } }),
+      () => {
+        this.props.onDone(this.state.config);
+      }
+    );
   };
 
   render() {
     const { config } = this.state;
-    const buildTools = [BuildTools.Maven, BuildTools.Gradle, BuildTools.DotNet, BuildTools.Other];
+    const buildTools = [
+      BuildTools.Maven,
+      BuildTools.Gradle,
+      BuildTools.DotNet,
+      BuildTools.CFamily,
+      BuildTools.Other
+    ];
 
     return (
       <>
@@ -71,7 +80,7 @@ export default class BuildToolForm extends React.PureComponent<Props, State> {
           />
         </div>
 
-        {config.buildTool === BuildTools.Other && (
+        {(config.buildTool === BuildTools.Other || config.buildTool === BuildTools.CFamily) && (
           <RenderOptions
             checked={config.os}
             name="os"
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/BuildToolForm-test.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/BuildToolForm-test.tsx
index 5329c3632dd..cf789d91a2d 100644
--- a/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/BuildToolForm-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/BuildToolForm-test.tsx
@@ -39,6 +39,7 @@ it('correctly calls the onDone prop', () => {
   wrapper.instance().handleBuildToolChange(BuildTools.Gradle);
   expect(onDone).toBeCalledWith(expect.objectContaining({ buildTool: BuildTools.Gradle }));
 
+  wrapper.setState({ config: { buildTool: BuildTools.Other } });
   wrapper.instance().handleOSChange(OSs.Windows);
   expect(onDone).toBeCalledWith(
     expect.objectContaining({ os: OSs.Windows, buildTool: BuildTools.Other })
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/__snapshots__/BuildToolForm-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/__snapshots__/BuildToolForm-test.tsx.snap
index 756cb8a109c..a478aa8017b 100644
--- a/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/__snapshots__/BuildToolForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/__tests__/__snapshots__/BuildToolForm-test.tsx.snap
@@ -26,6 +26,10 @@ exports[`renders correctly: default 1`] = `
             "label": "onboarding.build.dotnet",
             "value": "dotnet",
           },
+          Object {
+            "label": "onboarding.build.cfamily",
+            "value": "cfamily",
+          },
           Object {
             "label": "onboarding.build.other",
             "value": "other",
@@ -64,6 +68,10 @@ exports[`renders correctly: with "maven" selected 1`] = `
             "label": "onboarding.build.dotnet",
             "value": "dotnet",
           },
+          Object {
+            "label": "onboarding.build.cfamily",
+            "value": "cfamily",
+          },
           Object {
             "label": "onboarding.build.other",
             "value": "other",
@@ -102,6 +110,10 @@ exports[`renders correctly: with "other" selected 1`] = `
             "label": "onboarding.build.dotnet",
             "value": "dotnet",
           },
+          Object {
+            "label": "onboarding.build.cfamily",
+            "value": "cfamily",
+          },
           Object {
             "label": "onboarding.build.other",
             "value": "other",
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/AnalysisCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/AnalysisCommand.tsx
index 321c2391478..e679a08c2fc 100644
--- a/server/sonar-web/src/main/js/components/tutorials/manual/commands/AnalysisCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/AnalysisCommand.tsx
@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { getHostUrl } from 'sonar-ui-common/helpers/urls';
 import { BuildTools, ManualTutorialConfig } from '../../types';
+import ClangGCCCustom from './ClangGCCCommand';
 import DotNet from './DotNet';
 import JavaGradle from './JavaGradle';
 import JavaMaven from './JavaMaven';
@@ -51,6 +52,11 @@ export default function AnalysisCommand(props: AnalysisCommandProps) {
     case BuildTools.DotNet:
       return <DotNet host={host} projectKey={projectKey} token={token} />;
 
+    case BuildTools.CFamily:
+      return languageConfig.os !== undefined ? (
+        <ClangGCCCustom os={languageConfig.os} host={host} projectKey={projectKey} token={token} />
+      ) : null;
+
     case BuildTools.Other:
       return languageConfig.os !== undefined ? (
         <Other host={host} os={languageConfig.os} projectKey={projectKey} token={token} />
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/ClangGCCCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/ClangGCCCommand.tsx
new file mode 100644
index 00000000000..1fc693c4cc0
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/ClangGCCCommand.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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 * as React from 'react';
+import { OSs } from '../../types';
+import DownloadBuildWrapper from './DownloadBuildWrapper';
+import DownloadScanner from './DownloadScanner';
+import ExecBuildWrapper from './ExecBuildWrapper';
+import ExecScanner from './ExecScanner';
+
+export interface ClangGCCCustomProps {
+  host: string;
+  os: OSs;
+  projectKey: string;
+  token: string;
+}
+
+export default function ClangGCCCustom(props: ClangGCCCustomProps) {
+  const { os, host, projectKey, token } = props;
+
+  return (
+    <div>
+      <DownloadBuildWrapper os={os} />
+      <DownloadScanner os={os} />
+      <ExecBuildWrapper os={os} />
+      <ExecScanner host={host} projectKey={projectKey} os={os} token={token} cfamily={true} />
+    </div>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/DownloadBuildWrapper.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/DownloadBuildWrapper.tsx
new file mode 100644
index 00000000000..0e8636b9763
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/DownloadBuildWrapper.tsx
@@ -0,0 +1,62 @@
+/*
+ * 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 * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { getBaseUrl } from 'sonar-ui-common/helpers/urls';
+import { OSs } from '../../types';
+
+export interface DownloadBuildWrapperProps {
+  os: OSs;
+}
+
+const filenames: { [x in OSs]: string } = {
+  win: 'build-wrapper-win-x86.zip',
+  linux: 'build-wrapper-linux-x86.zip',
+  mac: 'build-wrapper-macosx-x86.zip'
+};
+
+export default function DownloadBuildWrapper(props: DownloadBuildWrapperProps) {
+  const { os } = props;
+  return (
+    <div className="spacer-bottom">
+      <h4 className="spacer-bottom">{translate('onboarding.analysis.build_wrapper.header', os)}</h4>
+      <p className="spacer-bottom markdown">
+        <FormattedMessage
+          defaultMessage={translate('onboarding.analysis.build_wrapper.text')}
+          id="onboarding.analysis.build_wrapper.text"
+          values={{
+            env_var: <code>{os === 'win' ? '%PATH%' : 'PATH'}</code>
+          }}
+        />
+      </p>
+      <p>
+        <a
+          className="button"
+          download={filenames[os]}
+          href={`${getBaseUrl()}/static/cpp/${filenames[os]}`}
+          rel="noopener noreferrer"
+          target="_blank">
+          {translate('download_verb')}
+        </a>
+      </p>
+    </div>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/DownloadScanner.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/DownloadScanner.tsx
new file mode 100644
index 00000000000..06bce10a168
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/DownloadScanner.tsx
@@ -0,0 +1,52 @@
+/*
+ * 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 * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { OSs } from '../../types';
+
+interface Props {
+  os: OSs;
+}
+
+export default function SQScanner(props: Props) {
+  const { os } = props;
+  return (
+    <div>
+      <h4 className="spacer-bottom">{translate('onboarding.analysis.sq_scanner.header', os)}</h4>
+      <p className="spacer-bottom markdown">
+        <FormattedMessage
+          defaultMessage={translate('onboarding.analysis.sq_scanner.text')}
+          id="onboarding.analysis.sq_scanner.text"
+          values={{
+            dir: <code>bin</code>,
+            env_var: <code>{os === OSs.Windows ? '%PATH%' : 'PATH'}</code>
+          }}
+        />
+      </p>
+      <p>
+        <Link className="button" to="/documentation/analysis/scan/sonarscanner/" target="_blank">
+          {translate('download_verb')}
+        </Link>
+      </p>
+    </div>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/ExecBuildWrapper.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/ExecBuildWrapper.tsx
new file mode 100644
index 00000000000..677d22f2f77
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/ExecBuildWrapper.tsx
@@ -0,0 +1,68 @@
+/*
+ * 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 * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import CodeSnippet from '../../../common/CodeSnippet';
+import { OSs } from '../../types';
+
+export interface ExecBuildWrapperProps {
+  os: OSs;
+}
+
+const executables: { [x in OSs]: string } = {
+  linux: 'build-wrapper-linux-x86-64',
+  win: 'build-wrapper-win-x86-64.exe',
+  mac: 'build-wrapper-macosx-x86'
+};
+
+export default function ExecBuildWrapper(props: ExecBuildWrapperProps) {
+  const { os } = props;
+
+  return (
+    <>
+      <h4 className="huge-spacer-top spacer-bottom">
+        {translate('onboarding.analysis.build_wrapper.execute')}
+      </h4>
+      <p className="spacer-bottom markdown">
+        {translate('onboarding.analysis.build_wrapper.execute_text')}
+      </p>
+      <CodeSnippet
+        snippet={`${executables[os]} --out-dir bw-output ${translate(
+          'onboarding.analysis.build_wrapper.execute_build_command'
+        )}`}
+      />
+      <p className="big-spacer-top markdown">
+        <FormattedMessage
+          defaultMessage={translate('onboarding.analysis.build_wrapper.docs')}
+          id="onboarding.analysis.build_wrapper.docs"
+          values={{
+            link: (
+              <Link to="/documentation/analysis/languages/cfamily/" target="_blank">
+                {translate('onboarding.analysis.build_wrapper.docs_link')}
+              </Link>
+            )
+          }}
+        />
+      </p>
+    </>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/ExecScanner.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/ExecScanner.tsx
new file mode 100644
index 00000000000..cc595bb0d03
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/ExecScanner.tsx
@@ -0,0 +1,77 @@
+/*
+ * 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 * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import CodeSnippet from '../../../common/CodeSnippet';
+import InstanceMessage from '../../../common/InstanceMessage';
+import { OSs } from '../../types';
+import { quote } from '../../utils';
+
+export interface ExecScannerProps {
+  host: string;
+  os: OSs;
+  projectKey: string;
+  token: string;
+  cfamily?: boolean;
+}
+
+export default function ExecScanner(props: ExecScannerProps) {
+  const { host, os, projectKey, token, cfamily } = props;
+
+  const q = quote(os);
+  const command = [
+    os === OSs.Windows ? 'sonar-scanner.bat' : 'sonar-scanner',
+    '-D' + q(`sonar.projectKey=${projectKey}`),
+    '-D' + q('sonar.sources=.'),
+    cfamily ? '-D' + q('sonar.cfamily.build-wrapper-output=bw-output') : undefined,
+    '-D' + q(`sonar.host.url=${host}`),
+    '-D' + q(`sonar.login=${token}`)
+  ];
+
+  return (
+    <div>
+      <h4 className="huge-spacer-top spacer-bottom">
+        {translate('onboarding.analysis.sq_scanner.execute')}
+      </h4>
+      <InstanceMessage message={translate('onboarding.analysis.sq_scanner.execute.text')}>
+        {transformedMessage => <p className="spacer-bottom markdown">{transformedMessage}</p>}
+      </InstanceMessage>
+      <CodeSnippet isOneLine={os === OSs.Windows} snippet={command} />
+      <p className="big-spacer-top markdown">
+        <FormattedMessage
+          defaultMessage={translate('onboarding.analysis.sq_scanner.docs')}
+          id="onboarding.analysis.sq_scanner.docs"
+          values={{
+            link: (
+              <Link to="/documentation/analysis/scan/sonarscanner/" target="_blank">
+                {translate('onboarding.analysis.sq_scanner.docs_link')}
+              </Link>
+            )
+          }}
+        />
+      </p>
+      <p className="big-spacer-top markdown">
+        {translate('onboarding.analysis.auto_refresh_after_analysis')}
+      </p>
+    </div>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/Other.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/Other.tsx
index 7dd46b06986..7db9c3880bb 100644
--- a/server/sonar-web/src/main/js/components/tutorials/manual/commands/Other.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/Other.tsx
@@ -18,13 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Link } from 'react-router';
-import { translate } from 'sonar-ui-common/helpers/l10n';
-import CodeSnippet from '../../../common/CodeSnippet';
-import InstanceMessage from '../../../common/InstanceMessage';
 import { OSs } from '../../types';
-import { quote } from '../../utils';
+import DownloadScanner from './DownloadScanner';
+import ExecScanner from './ExecScanner';
 
 export interface OtherProps {
   host: string;
@@ -36,56 +32,10 @@ export interface OtherProps {
 export default function Other(props: OtherProps) {
   const { host, os, projectKey, token } = props;
 
-  const q = quote(os);
-  const command = [
-    os === OSs.Windows ? 'sonar-scanner.bat' : 'sonar-scanner',
-    '-D' + q(`sonar.projectKey=${projectKey}`),
-    '-D' + q('sonar.sources=.'),
-    '-D' + q(`sonar.host.url=${host}`),
-    '-D' + q(`sonar.login=${token}`)
-  ];
-
   return (
     <div>
-      <div>
-        <h4 className="spacer-bottom">{translate('onboarding.analysis.sq_scanner.header', os)}</h4>
-        <p className="spacer-bottom markdown">
-          <FormattedMessage
-            defaultMessage={translate('onboarding.analysis.sq_scanner.text')}
-            id="onboarding.analysis.sq_scanner.text"
-            values={{
-              dir: <code>bin</code>,
-              env_var: <code>{os === OSs.Windows ? '%PATH%' : 'PATH'}</code>
-            }}
-          />
-        </p>
-        <p>
-          <Link className="button" to="/documentation/analysis/scan/sonarscanner/" target="_blank">
-            {translate('download_verb')}
-          </Link>
-        </p>
-      </div>
-
-      <h4 className="huge-spacer-top spacer-bottom">
-        {translate('onboarding.analysis.sq_scanner.execute')}
-      </h4>
-      <InstanceMessage message={translate('onboarding.analysis.sq_scanner.execute.text')}>
-        {transformedMessage => <p className="spacer-bottom markdown">{transformedMessage}</p>}
-      </InstanceMessage>
-      <CodeSnippet isOneLine={os === OSs.Windows} snippet={command} />
-      <p className="big-spacer-top markdown">
-        <FormattedMessage
-          defaultMessage={translate('onboarding.analysis.sq_scanner.docs')}
-          id="onboarding.analysis.sq_scanner.docs"
-          values={{
-            link: (
-              <Link to="/documentation/analysis/scan/sonarscanner/" target="_blank">
-                {translate('onboarding.analysis.sq_scanner.docs_link')}
-              </Link>
-            )
-          }}
-        />
-      </p>
+      <DownloadScanner os={os} />
+      <ExecScanner host={host} os={os} projectKey={projectKey} token={token} />
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/CLangGCCCommand-test.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/CLangGCCCommand-test.tsx
new file mode 100644
index 00000000000..d35ea6ba31e
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/CLangGCCCommand-test.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import * as React from 'react';
+import { OSs } from '../../../types';
+import ClangGCCCommand from '../ClangGCCCommand';
+
+it('Shoud renders correctly', () => {
+  expect(
+    shallow(<ClangGCCCommand os={OSs.Linux} host="host" projectKey="projectKey" token="token" />)
+  ).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/DownloadBuildWrapper-test.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/DownloadBuildWrapper-test.tsx
new file mode 100644
index 00000000000..b7698feaf29
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/DownloadBuildWrapper-test.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import * as React from 'react';
+import { OSs } from '../../../types';
+import DownloadBuildWrapper from '../DownloadBuildWrapper';
+
+it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('Shoud renders for %p correctly', os => {
+  expect(shallow(<DownloadBuildWrapper os={os} />)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/DownloadScanner-test.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/DownloadScanner-test.tsx
new file mode 100644
index 00000000000..bc70cc756a0
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/DownloadScanner-test.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import * as React from 'react';
+import { OSs } from '../../../types';
+import DownloadScanner from '../DownloadScanner';
+
+it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('Shoud renders for %p correctly', os => {
+  expect(shallow(<DownloadScanner os={os} />)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/ExecBuildWrapper-test.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/ExecBuildWrapper-test.tsx
new file mode 100644
index 00000000000..80650f85b82
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/ExecBuildWrapper-test.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import * as React from 'react';
+import { OSs } from '../../../types';
+import ExecBuildWrapper from '../ExecBuildWrapper';
+
+it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('Shoud renders for %p correctly', os => {
+  expect(shallow(<ExecBuildWrapper os={os} />)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/ExecScanner-test.tsx b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/ExecScanner-test.tsx
new file mode 100644
index 00000000000..02c3feefe19
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/ExecScanner-test.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import * as React from 'react';
+import { OSs } from '../../../types';
+import ExecScanner, { ExecScannerProps } from '../ExecScanner';
+
+it.each([OSs.Linux, OSs.Windows, OSs.MacOS])('Shoud renders for %p correctly', os => {
+  expect(shallowRender({ os })).toMatchSnapshot();
+});
+
+it('Should render for cfamily', () => {
+  expect(shallowRender({ cfamily: true })).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<ExecScannerProps> = {}) {
+  return shallow<ExecScannerProps>(
+    <ExecScanner host="host" os={OSs.Linux} projectKey="projectKey" token="token" {...props} />
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/CLangGCCCommand-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/CLangGCCCommand-test.tsx.snap
new file mode 100644
index 00000000000..a1bc4455cf1
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/CLangGCCCommand-test.tsx.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shoud renders correctly 1`] = `
+<div>
+  <DownloadBuildWrapper
+    os="linux"
+  />
+  <SQScanner
+    os="linux"
+  />
+  <ExecBuildWrapper
+    os="linux"
+  />
+  <ExecScanner
+    cfamily={true}
+    host="host"
+    os="linux"
+    projectKey="projectKey"
+    token="token"
+  />
+</div>
+`;
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/DownloadBuildWrapper-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/DownloadBuildWrapper-test.tsx.snap
new file mode 100644
index 00000000000..2a444920a62
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/DownloadBuildWrapper-test.tsx.snap
@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shoud renders for "linux" correctly 1`] = `
+<div
+  className="spacer-bottom"
+>
+  <h4
+    className="spacer-bottom"
+  >
+    onboarding.analysis.build_wrapper.header.linux
+  </h4>
+  <p
+    className="spacer-bottom markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.build_wrapper.text"
+      id="onboarding.analysis.build_wrapper.text"
+      values={
+        Object {
+          "env_var": <code>
+            PATH
+          </code>,
+        }
+      }
+    />
+  </p>
+  <p>
+    <a
+      className="button"
+      download="build-wrapper-linux-x86.zip"
+      href="/static/cpp/build-wrapper-linux-x86.zip"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      download_verb
+    </a>
+  </p>
+</div>
+`;
+
+exports[`Shoud renders for "mac" correctly 1`] = `
+<div
+  className="spacer-bottom"
+>
+  <h4
+    className="spacer-bottom"
+  >
+    onboarding.analysis.build_wrapper.header.mac
+  </h4>
+  <p
+    className="spacer-bottom markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.build_wrapper.text"
+      id="onboarding.analysis.build_wrapper.text"
+      values={
+        Object {
+          "env_var": <code>
+            PATH
+          </code>,
+        }
+      }
+    />
+  </p>
+  <p>
+    <a
+      className="button"
+      download="build-wrapper-macosx-x86.zip"
+      href="/static/cpp/build-wrapper-macosx-x86.zip"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      download_verb
+    </a>
+  </p>
+</div>
+`;
+
+exports[`Shoud renders for "win" correctly 1`] = `
+<div
+  className="spacer-bottom"
+>
+  <h4
+    className="spacer-bottom"
+  >
+    onboarding.analysis.build_wrapper.header.win
+  </h4>
+  <p
+    className="spacer-bottom markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.build_wrapper.text"
+      id="onboarding.analysis.build_wrapper.text"
+      values={
+        Object {
+          "env_var": <code>
+            %PATH%
+          </code>,
+        }
+      }
+    />
+  </p>
+  <p>
+    <a
+      className="button"
+      download="build-wrapper-win-x86.zip"
+      href="/static/cpp/build-wrapper-win-x86.zip"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      download_verb
+    </a>
+  </p>
+</div>
+`;
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/DownloadScanner-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/DownloadScanner-test.tsx.snap
new file mode 100644
index 00000000000..5437c936d72
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/DownloadScanner-test.tsx.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shoud renders for "linux" correctly 1`] = `
+<div>
+  <h4
+    className="spacer-bottom"
+  >
+    onboarding.analysis.sq_scanner.header.linux
+  </h4>
+  <p
+    className="spacer-bottom markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.sq_scanner.text"
+      id="onboarding.analysis.sq_scanner.text"
+      values={
+        Object {
+          "dir": <code>
+            bin
+          </code>,
+          "env_var": <code>
+            PATH
+          </code>,
+        }
+      }
+    />
+  </p>
+  <p>
+    <Link
+      className="button"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      target="_blank"
+      to="/documentation/analysis/scan/sonarscanner/"
+    >
+      download_verb
+    </Link>
+  </p>
+</div>
+`;
+
+exports[`Shoud renders for "mac" correctly 1`] = `
+<div>
+  <h4
+    className="spacer-bottom"
+  >
+    onboarding.analysis.sq_scanner.header.mac
+  </h4>
+  <p
+    className="spacer-bottom markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.sq_scanner.text"
+      id="onboarding.analysis.sq_scanner.text"
+      values={
+        Object {
+          "dir": <code>
+            bin
+          </code>,
+          "env_var": <code>
+            PATH
+          </code>,
+        }
+      }
+    />
+  </p>
+  <p>
+    <Link
+      className="button"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      target="_blank"
+      to="/documentation/analysis/scan/sonarscanner/"
+    >
+      download_verb
+    </Link>
+  </p>
+</div>
+`;
+
+exports[`Shoud renders for "win" correctly 1`] = `
+<div>
+  <h4
+    className="spacer-bottom"
+  >
+    onboarding.analysis.sq_scanner.header.win
+  </h4>
+  <p
+    className="spacer-bottom markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.sq_scanner.text"
+      id="onboarding.analysis.sq_scanner.text"
+      values={
+        Object {
+          "dir": <code>
+            bin
+          </code>,
+          "env_var": <code>
+            %PATH%
+          </code>,
+        }
+      }
+    />
+  </p>
+  <p>
+    <Link
+      className="button"
+      onlyActiveOnIndex={false}
+      style={Object {}}
+      target="_blank"
+      to="/documentation/analysis/scan/sonarscanner/"
+    >
+      download_verb
+    </Link>
+  </p>
+</div>
+`;
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/ExecBuildWrapper-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/ExecBuildWrapper-test.tsx.snap
new file mode 100644
index 00000000000..7e7f188ffe3
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/ExecBuildWrapper-test.tsx.snap
@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shoud renders for "linux" correctly 1`] = `
+<Fragment>
+  <h4
+    className="huge-spacer-top spacer-bottom"
+  >
+    onboarding.analysis.build_wrapper.execute
+  </h4>
+  <p
+    className="spacer-bottom markdown"
+  >
+    onboarding.analysis.build_wrapper.execute_text
+  </p>
+  <CodeSnippet
+    snippet="build-wrapper-linux-x86-64 --out-dir bw-output onboarding.analysis.build_wrapper.execute_build_command"
+  />
+  <p
+    className="big-spacer-top markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.build_wrapper.docs"
+      id="onboarding.analysis.build_wrapper.docs"
+      values={
+        Object {
+          "link": <Link
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to="/documentation/analysis/languages/cfamily/"
+          >
+            onboarding.analysis.build_wrapper.docs_link
+          </Link>,
+        }
+      }
+    />
+  </p>
+</Fragment>
+`;
+
+exports[`Shoud renders for "mac" correctly 1`] = `
+<Fragment>
+  <h4
+    className="huge-spacer-top spacer-bottom"
+  >
+    onboarding.analysis.build_wrapper.execute
+  </h4>
+  <p
+    className="spacer-bottom markdown"
+  >
+    onboarding.analysis.build_wrapper.execute_text
+  </p>
+  <CodeSnippet
+    snippet="build-wrapper-macosx-x86 --out-dir bw-output onboarding.analysis.build_wrapper.execute_build_command"
+  />
+  <p
+    className="big-spacer-top markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.build_wrapper.docs"
+      id="onboarding.analysis.build_wrapper.docs"
+      values={
+        Object {
+          "link": <Link
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to="/documentation/analysis/languages/cfamily/"
+          >
+            onboarding.analysis.build_wrapper.docs_link
+          </Link>,
+        }
+      }
+    />
+  </p>
+</Fragment>
+`;
+
+exports[`Shoud renders for "win" correctly 1`] = `
+<Fragment>
+  <h4
+    className="huge-spacer-top spacer-bottom"
+  >
+    onboarding.analysis.build_wrapper.execute
+  </h4>
+  <p
+    className="spacer-bottom markdown"
+  >
+    onboarding.analysis.build_wrapper.execute_text
+  </p>
+  <CodeSnippet
+    snippet="build-wrapper-win-x86-64.exe --out-dir bw-output onboarding.analysis.build_wrapper.execute_build_command"
+  />
+  <p
+    className="big-spacer-top markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.build_wrapper.docs"
+      id="onboarding.analysis.build_wrapper.docs"
+      values={
+        Object {
+          "link": <Link
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to="/documentation/analysis/languages/cfamily/"
+          >
+            onboarding.analysis.build_wrapper.docs_link
+          </Link>,
+        }
+      }
+    />
+  </p>
+</Fragment>
+`;
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/ExecScanner-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/ExecScanner-test.tsx.snap
new file mode 100644
index 00000000000..140fe68ea6a
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/ExecScanner-test.tsx.snap
@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shoud renders for "linux" correctly 1`] = `
+<div>
+  <h4
+    className="huge-spacer-top spacer-bottom"
+  >
+    onboarding.analysis.sq_scanner.execute
+  </h4>
+  <InstanceMessage
+    message="onboarding.analysis.sq_scanner.execute.text"
+  >
+    <Component />
+  </InstanceMessage>
+  <CodeSnippet
+    isOneLine={false}
+    snippet={
+      Array [
+        "sonar-scanner",
+        "-Dsonar.projectKey=projectKey",
+        "-Dsonar.sources=.",
+        undefined,
+        "-Dsonar.host.url=host",
+        "-Dsonar.login=token",
+      ]
+    }
+  />
+  <p
+    className="big-spacer-top markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.sq_scanner.docs"
+      id="onboarding.analysis.sq_scanner.docs"
+      values={
+        Object {
+          "link": <Link
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to="/documentation/analysis/scan/sonarscanner/"
+          >
+            onboarding.analysis.sq_scanner.docs_link
+          </Link>,
+        }
+      }
+    />
+  </p>
+  <p
+    className="big-spacer-top markdown"
+  >
+    onboarding.analysis.auto_refresh_after_analysis
+  </p>
+</div>
+`;
+
+exports[`Shoud renders for "mac" correctly 1`] = `
+<div>
+  <h4
+    className="huge-spacer-top spacer-bottom"
+  >
+    onboarding.analysis.sq_scanner.execute
+  </h4>
+  <InstanceMessage
+    message="onboarding.analysis.sq_scanner.execute.text"
+  >
+    <Component />
+  </InstanceMessage>
+  <CodeSnippet
+    isOneLine={false}
+    snippet={
+      Array [
+        "sonar-scanner",
+        "-Dsonar.projectKey=projectKey",
+        "-Dsonar.sources=.",
+        undefined,
+        "-Dsonar.host.url=host",
+        "-Dsonar.login=token",
+      ]
+    }
+  />
+  <p
+    className="big-spacer-top markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.sq_scanner.docs"
+      id="onboarding.analysis.sq_scanner.docs"
+      values={
+        Object {
+          "link": <Link
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to="/documentation/analysis/scan/sonarscanner/"
+          >
+            onboarding.analysis.sq_scanner.docs_link
+          </Link>,
+        }
+      }
+    />
+  </p>
+  <p
+    className="big-spacer-top markdown"
+  >
+    onboarding.analysis.auto_refresh_after_analysis
+  </p>
+</div>
+`;
+
+exports[`Shoud renders for "win" correctly 1`] = `
+<div>
+  <h4
+    className="huge-spacer-top spacer-bottom"
+  >
+    onboarding.analysis.sq_scanner.execute
+  </h4>
+  <InstanceMessage
+    message="onboarding.analysis.sq_scanner.execute.text"
+  >
+    <Component />
+  </InstanceMessage>
+  <CodeSnippet
+    isOneLine={true}
+    snippet={
+      Array [
+        "sonar-scanner.bat",
+        "-D\\"sonar.projectKey=projectKey\\"",
+        "-D\\"sonar.sources=.\\"",
+        undefined,
+        "-D\\"sonar.host.url=host\\"",
+        "-D\\"sonar.login=token\\"",
+      ]
+    }
+  />
+  <p
+    className="big-spacer-top markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.sq_scanner.docs"
+      id="onboarding.analysis.sq_scanner.docs"
+      values={
+        Object {
+          "link": <Link
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to="/documentation/analysis/scan/sonarscanner/"
+          >
+            onboarding.analysis.sq_scanner.docs_link
+          </Link>,
+        }
+      }
+    />
+  </p>
+  <p
+    className="big-spacer-top markdown"
+  >
+    onboarding.analysis.auto_refresh_after_analysis
+  </p>
+</div>
+`;
+
+exports[`Should render for cfamily 1`] = `
+<div>
+  <h4
+    className="huge-spacer-top spacer-bottom"
+  >
+    onboarding.analysis.sq_scanner.execute
+  </h4>
+  <InstanceMessage
+    message="onboarding.analysis.sq_scanner.execute.text"
+  >
+    <Component />
+  </InstanceMessage>
+  <CodeSnippet
+    isOneLine={false}
+    snippet={
+      Array [
+        "sonar-scanner",
+        "-Dsonar.projectKey=projectKey",
+        "-Dsonar.sources=.",
+        "-Dsonar.cfamily.build-wrapper-output=bw-output",
+        "-Dsonar.host.url=host",
+        "-Dsonar.login=token",
+      ]
+    }
+  />
+  <p
+    className="big-spacer-top markdown"
+  >
+    <FormattedMessage
+      defaultMessage="onboarding.analysis.sq_scanner.docs"
+      id="onboarding.analysis.sq_scanner.docs"
+      values={
+        Object {
+          "link": <Link
+            onlyActiveOnIndex={false}
+            style={Object {}}
+            target="_blank"
+            to="/documentation/analysis/scan/sonarscanner/"
+          >
+            onboarding.analysis.sq_scanner.docs_link
+          </Link>,
+        }
+      }
+    />
+  </p>
+  <p
+    className="big-spacer-top markdown"
+  >
+    onboarding.analysis.auto_refresh_after_analysis
+  </p>
+</div>
+`;
diff --git a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/Other-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/Other-test.tsx.snap
index 5b11bd567db..15cc7f98669 100644
--- a/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/Other-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/manual/commands/__tests__/__snapshots__/Other-test.tsx.snap
@@ -2,249 +2,42 @@
 
 exports[`renders correctly: linux 1`] = `
 <div>
-  <div>
-    <h4
-      className="spacer-bottom"
-    >
-      onboarding.analysis.sq_scanner.header.linux
-    </h4>
-    <p
-      className="spacer-bottom markdown"
-    >
-      <FormattedMessage
-        defaultMessage="onboarding.analysis.sq_scanner.text"
-        id="onboarding.analysis.sq_scanner.text"
-        values={
-          Object {
-            "dir": <code>
-              bin
-            </code>,
-            "env_var": <code>
-              PATH
-            </code>,
-          }
-        }
-      />
-    </p>
-    <p>
-      <Link
-        className="button"
-        onlyActiveOnIndex={false}
-        style={Object {}}
-        target="_blank"
-        to="/documentation/analysis/scan/sonarscanner/"
-      >
-        download_verb
-      </Link>
-    </p>
-  </div>
-  <h4
-    className="huge-spacer-top spacer-bottom"
-  >
-    onboarding.analysis.sq_scanner.execute
-  </h4>
-  <InstanceMessage
-    message="onboarding.analysis.sq_scanner.execute.text"
-  >
-    <Component />
-  </InstanceMessage>
-  <CodeSnippet
-    isOneLine={false}
-    snippet={
-      Array [
-        "sonar-scanner",
-        "-Dsonar.projectKey=projectKey",
-        "-Dsonar.sources=.",
-        "-Dsonar.host.url=host",
-        "-Dsonar.login=token",
-      ]
-    }
+  <SQScanner
+    os="linux"
+  />
+  <ExecScanner
+    host="host"
+    os="linux"
+    projectKey="projectKey"
+    token="token"
   />
-  <p
-    className="big-spacer-top markdown"
-  >
-    <FormattedMessage
-      defaultMessage="onboarding.analysis.sq_scanner.docs"
-      id="onboarding.analysis.sq_scanner.docs"
-      values={
-        Object {
-          "link": <Link
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            target="_blank"
-            to="/documentation/analysis/scan/sonarscanner/"
-          >
-            onboarding.analysis.sq_scanner.docs_link
-          </Link>,
-        }
-      }
-    />
-  </p>
 </div>
 `;
 
 exports[`renders correctly: macos 1`] = `
 <div>
-  <div>
-    <h4
-      className="spacer-bottom"
-    >
-      onboarding.analysis.sq_scanner.header.mac
-    </h4>
-    <p
-      className="spacer-bottom markdown"
-    >
-      <FormattedMessage
-        defaultMessage="onboarding.analysis.sq_scanner.text"
-        id="onboarding.analysis.sq_scanner.text"
-        values={
-          Object {
-            "dir": <code>
-              bin
-            </code>,
-            "env_var": <code>
-              PATH
-            </code>,
-          }
-        }
-      />
-    </p>
-    <p>
-      <Link
-        className="button"
-        onlyActiveOnIndex={false}
-        style={Object {}}
-        target="_blank"
-        to="/documentation/analysis/scan/sonarscanner/"
-      >
-        download_verb
-      </Link>
-    </p>
-  </div>
-  <h4
-    className="huge-spacer-top spacer-bottom"
-  >
-    onboarding.analysis.sq_scanner.execute
-  </h4>
-  <InstanceMessage
-    message="onboarding.analysis.sq_scanner.execute.text"
-  >
-    <Component />
-  </InstanceMessage>
-  <CodeSnippet
-    isOneLine={false}
-    snippet={
-      Array [
-        "sonar-scanner",
-        "-Dsonar.projectKey=projectKey",
-        "-Dsonar.sources=.",
-        "-Dsonar.host.url=host",
-        "-Dsonar.login=token",
-      ]
-    }
+  <SQScanner
+    os="mac"
+  />
+  <ExecScanner
+    host="host"
+    os="mac"
+    projectKey="projectKey"
+    token="token"
   />
-  <p
-    className="big-spacer-top markdown"
-  >
-    <FormattedMessage
-      defaultMessage="onboarding.analysis.sq_scanner.docs"
-      id="onboarding.analysis.sq_scanner.docs"
-      values={
-        Object {
-          "link": <Link
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            target="_blank"
-            to="/documentation/analysis/scan/sonarscanner/"
-          >
-            onboarding.analysis.sq_scanner.docs_link
-          </Link>,
-        }
-      }
-    />
-  </p>
 </div>
 `;
 
 exports[`renders correctly: windows 1`] = `
 <div>
-  <div>
-    <h4
-      className="spacer-bottom"
-    >
-      onboarding.analysis.sq_scanner.header.win
-    </h4>
-    <p
-      className="spacer-bottom markdown"
-    >
-      <FormattedMessage
-        defaultMessage="onboarding.analysis.sq_scanner.text"
-        id="onboarding.analysis.sq_scanner.text"
-        values={
-          Object {
-            "dir": <code>
-              bin
-            </code>,
-            "env_var": <code>
-              %PATH%
-            </code>,
-          }
-        }
-      />
-    </p>
-    <p>
-      <Link
-        className="button"
-        onlyActiveOnIndex={false}
-        style={Object {}}
-        target="_blank"
-        to="/documentation/analysis/scan/sonarscanner/"
-      >
-        download_verb
-      </Link>
-    </p>
-  </div>
-  <h4
-    className="huge-spacer-top spacer-bottom"
-  >
-    onboarding.analysis.sq_scanner.execute
-  </h4>
-  <InstanceMessage
-    message="onboarding.analysis.sq_scanner.execute.text"
-  >
-    <Component />
-  </InstanceMessage>
-  <CodeSnippet
-    isOneLine={true}
-    snippet={
-      Array [
-        "sonar-scanner.bat",
-        "-D\\"sonar.projectKey=projectKey\\"",
-        "-D\\"sonar.sources=.\\"",
-        "-D\\"sonar.host.url=host\\"",
-        "-D\\"sonar.login=token\\"",
-      ]
-    }
+  <SQScanner
+    os="win"
+  />
+  <ExecScanner
+    host="host"
+    os="win"
+    projectKey="projectKey"
+    token="token"
   />
-  <p
-    className="big-spacer-top markdown"
-  >
-    <FormattedMessage
-      defaultMessage="onboarding.analysis.sq_scanner.docs"
-      id="onboarding.analysis.sq_scanner.docs"
-      values={
-        Object {
-          "link": <Link
-            onlyActiveOnIndex={false}
-            style={Object {}}
-            target="_blank"
-            to="/documentation/analysis/scan/sonarscanner/"
-          >
-            onboarding.analysis.sq_scanner.docs_link
-          </Link>,
-        }
-      }
-    />
-  </p>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/types.ts b/server/sonar-web/src/main/js/components/tutorials/types.ts
index 9a20efa47f0..5f9ba566b61 100644
--- a/server/sonar-web/src/main/js/components/tutorials/types.ts
+++ b/server/sonar-web/src/main/js/components/tutorials/types.ts
@@ -27,6 +27,7 @@ export enum TutorialModes {
 export enum BuildTools {
   Maven = 'maven',
   Gradle = 'gradle',
+  CFamily = 'cfamily',
   DotNet = 'dotnet',
   Other = 'other'
 }
@@ -39,4 +40,4 @@ export enum OSs {
 
 export type ManualTutorialConfig =
   | { buildTool?: BuildTools.Maven | BuildTools.Gradle | BuildTools.DotNet }
-  | { buildTool: BuildTools.Other; os?: OSs };
+  | { buildTool: BuildTools.Other | BuildTools.CFamily; os?: OSs };
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index c9c6710aa71..93ca2e33207 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -3288,6 +3288,7 @@ onboarding.build.maven=Maven
 onboarding.build.gradle=Gradle
 onboarding.build.make=Make
 onboarding.build.dotnet=.NET
+onboarding.build.cfamily=C,C++ or ObjC
 onboarding.build.other=Other (for JS, TS, Go, Python, PHP, ...)
 
 onboarding.build.other.os=What is your OS?
@@ -3296,6 +3297,16 @@ onboarding.build.other.os.win=Windows
 onboarding.build.other.os.mac=macOS
 
 onboarding.analysis.docs=Please visit the {link} for more details.
+onboarding.analysis.build_wrapper.header.linux=Download and unzip the Build Wrapper for Linux
+onboarding.analysis.build_wrapper.header.win=Download and unzip the Build Wrapper for Windows
+onboarding.analysis.build_wrapper.header.mac=Download and unzip the Build Wrapper for macOS
+onboarding.analysis.build_wrapper.text=And add the executable's directory to the {env_var} environment variable
+onboarding.analysis.build_wrapper.execute=Execute the Build Wrapper as a prefix to your build command
+onboarding.analysis.build_wrapper.execute_text=Run the following command in your project's folder.
+onboarding.analysis.build_wrapper.execute_build_command=<your clean build command>
+onboarding.analysis.build_wrapper.docs=Please visit the {link}  of the Build Wrapper for more details.
+onboarding.analysis.build_wrapper.docs_link=official documentation
+
 
 onboarding.analysis.java.maven.header=Execute the Scanner for Maven from your computer
 onboarding.analysis.java.maven.header.ci=Execute the Scanner for Maven from your CI