SONAR-15086 Link C/C++ sample projects to tutorial

server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx

@@ -23,9 +23,10 @@ import { translate } from '../../../../helpers/l10n';
 import { getHostUrl } from '../../../../helpers/urls';
 import CodeSnippet from '../../../common/CodeSnippet';
 import { CompilationInfo } from '../../components/CompilationInfo';
+import GithubCFamilyExampleRepositories from '../../components/GithubCFamilyExampleRepositories';
 import RenderOptions from '../../components/RenderOptions';
 import SentenceWithHighlights from '../../components/SentenceWithHighlights';
-import { BuildTools, OSs } from '../../types';
+import { BuildTools, OSs, TutorialModes } from '../../types';
 import AlertClassicEditor from './AlertClassicEditor';
 import PrepareAnalysisCommand, { PrepareType } from './PrepareAnalysisCommand';
 import PublishSteps from './PublishSteps';
@@ -102,6 +103,11 @@ unzip build-wrapper.zip`,
 
       {os && (
         <>
+          <GithubCFamilyExampleRepositories
+            className="big-spacer-top abs-width-600"
+            os={os}
+            ci={TutorialModes.AzurePipelines}
+          />
           <AlertClassicEditor />
           <ol className="list-styled big-spacer-top">
             <li>

server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/__tests__/__snapshots__/ClangGCC-test.tsx.snap

@@ -20,6 +20,11 @@ exports[`should render correctly for "linux" 1`] = `
       ]
     }
   />
+  <GithubCFamilyExampleRepositories
+    ci="azure-pipelines"
+    className="big-spacer-top abs-width-600"
+    os="linux"
+  />
   <AlertClassicEditor />
   <ol
     className="list-styled big-spacer-top"
@@ -137,6 +142,11 @@ exports[`should render correctly for "mac" 1`] = `
       ]
     }
   />
+  <GithubCFamilyExampleRepositories
+    ci="azure-pipelines"
+    className="big-spacer-top abs-width-600"
+    os="mac"
+  />
   <AlertClassicEditor />
   <ol
     className="list-styled big-spacer-top"
@@ -254,6 +264,11 @@ exports[`should render correctly for "win" 1`] = `
       ]
     }
   />
+  <GithubCFamilyExampleRepositories
+    ci="azure-pipelines"
+    className="big-spacer-top abs-width-600"
+    os="win"
+  />
   <AlertClassicEditor />
   <ol
     className="list-styled big-spacer-top"

server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx

@@ -26,8 +26,10 @@ import {
 } from '../../../types/alm-settings';
 import AllSetStep from '../components/AllSetStep';
 import FinishButton from '../components/FinishButton';
+import GithubCFamilyExampleRepositories from '../components/GithubCFamilyExampleRepositories';
 import Step from '../components/Step';
 import YamlFileStep from '../components/YamlFileStep';
+import { BuildTools, TutorialModes } from '../types';
 import AnalysisCommand from './AnalysisCommand';
 import RepositoryVariables from './RepositoryVariables';
 
@@ -84,6 +86,12 @@ export default function BitbucketPipelinesTutorial(props: BitbucketPipelinesTuto
           <YamlFileStep>
             {buildTool => (
               <>
+                {buildTool === BuildTools.CFamily && (
+                  <GithubCFamilyExampleRepositories
+                    className="big-spacer-top"
+                    ci={TutorialModes.BitbucketPipelines}
+                  />
+                )}
                 <AnalysisCommand buildTool={buildTool} component={component} />
                 <FinishButton onClick={() => setStep(Steps.ALL_SET)} />
               </>

server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.css

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+.github-cfamily-example-repositories-box {
+  box-sizing: border-box;
+}

server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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 classNames from 'classnames';
+import React from 'react';
+import { translate } from '../../../helpers/l10n';
+import { getBaseUrl } from '../../../helpers/system';
+import { OSs, TutorialModes } from '../types';
+import './GithubCFamilyExampleRepositories.css';
+
+export interface GithubCFamilyExampleRepositoriesProps {
+  className?: string;
+  os?: OSs;
+  ci?: TutorialModes;
+}
+
+const OS_SEARCH_MAP = {
+  [OSs.Linux]: 'linux',
+  [OSs.Windows]: 'windows',
+  [OSs.MacOS]: 'macos'
+};
+
+const CI_SEARCH_MAP = {
+  [TutorialModes.Jenkins]: 'jenkins',
+  [TutorialModes.AzurePipelines]: 'azure',
+  [TutorialModes.GitHubActions]: 'gh-actions',
+  [TutorialModes.GitLabCI]: 'gitlab',
+  [TutorialModes.BitbucketPipelines]: 'bitbucket',
+  [TutorialModes.Manual]: 'manual',
+  [TutorialModes.OtherCI]: 'manual'
+};
+
+export default function GithubCFamilyExampleRepositories(
+  props: GithubCFamilyExampleRepositoriesProps
+) {
+  const { className, os, ci } = props;
+  const queryParams = ['sq', os ? OS_SEARCH_MAP[os] : undefined, ci ? CI_SEARCH_MAP[ci] : undefined]
+    .filter(s => !!s)
+    .join('+');
+  const link = `https://github.com/orgs/sonarsource-cfamily-examples/repositories?q=${queryParams}`;
+
+  return (
+    <div
+      className={classNames(
+        'github-cfamily-example-repositories-box big-padded boxed-group',
+        className
+      )}>
+      <div className="display-flex-center">
+        <img
+          alt="" // Should be ignored by screen readers
+          className="spacer-right"
+          height={20}
+          src={`${getBaseUrl()}/images/alm/github.svg`}
+        />
+        <a className="spacer-left big" rel="noopener noreferrer" target="_blank" href={link}>
+          sonarsource-cfamily-examples
+        </a>
+      </div>
+      <p className="spacer-top">
+        {translate('onboarding.tutorial.cfamily.examples_repositories_description')}
+      </p>
+    </div>
+  );
+}

server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx

@@ -28,12 +28,6 @@ export interface YamlFileStepProps {
   hasCLanguageFeature: boolean;
 }
 
-export interface AnalysisCommandProps {
-  appState: T.AppState;
-  buildTool?: BuildTools;
-  component: T.Component;
-}
-
 export function YamlFileStep(props: YamlFileStepProps) {
   const { children, hasCLanguageFeature } = props;
 
@@ -46,22 +40,19 @@ export function YamlFileStep(props: YamlFileStepProps) {
   const [buildToolSelected, setBuildToolSelected] = React.useState<BuildTools>();
 
   return (
-    <>
-      <ol className="list-styled big-spacer-top big-spacer-bottom">
-        <li>
-          {translate('onboarding.build')}
-
-          <RenderOptions
-            checked={buildToolSelected}
-            name="language"
-            onCheck={value => setBuildToolSelected(value as BuildTools)}
-            options={buildTools}
-            optionLabelKey="onboarding.build"
-          />
-        </li>
-        {children && buildToolSelected && children(buildToolSelected)}
-      </ol>
-    </>
+    <ol className="list-styled big-spacer-top big-spacer-bottom">
+      <li className="abs-width-600">
+        {translate('onboarding.build')}
+        <RenderOptions
+          checked={buildToolSelected}
+          name="language"
+          onCheck={value => setBuildToolSelected(value as BuildTools)}
+          options={buildTools}
+          optionLabelKey="onboarding.build"
+        />
+      </li>
+      {children && buildToolSelected && children(buildToolSelected)}
+    </ol>
   );
 }
 

server/sonar-web/src/main/js/components/tutorials/components/__tests__/GithubCFamilyExampleRepositories-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, TutorialModes } from '../../types';
+import GithubCFamilyExampleRepositories, {
+  GithubCFamilyExampleRepositoriesProps
+} from '../GithubCFamilyExampleRepositories';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+  expect(shallowRender({ os: OSs.MacOS, ci: TutorialModes.AzurePipelines })).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<GithubCFamilyExampleRepositoriesProps> = {}) {
+  return shallow<GithubCFamilyExampleRepositoriesProps>(
+    <GithubCFamilyExampleRepositories className="test-class" {...props} />
+  );
+}

server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/GithubCFamilyExampleRepositories-test.tsx.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<div
+  className="github-cfamily-example-repositories-box big-padded boxed-group test-class"
+>
+  <div
+    className="display-flex-center"
+  >
+    <img
+      alt=""
+      className="spacer-right"
+      height={20}
+      src="/images/alm/github.svg"
+    />
+    <a
+      className="spacer-left big"
+      href="https://github.com/orgs/sonarsource-cfamily-examples/repositories?q=sq"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      sonarsource-cfamily-examples
+    </a>
+  </div>
+  <p
+    className="spacer-top"
+  >
+    onboarding.tutorial.cfamily.examples_repositories_description
+  </p>
+</div>
+`;
+
+exports[`should render correctly 2`] = `
+<div
+  className="github-cfamily-example-repositories-box big-padded boxed-group test-class"
+>
+  <div
+    className="display-flex-center"
+  >
+    <img
+      alt=""
+      className="spacer-right"
+      height={20}
+      src="/images/alm/github.svg"
+    />
+    <a
+      className="spacer-left big"
+      href="https://github.com/orgs/sonarsource-cfamily-examples/repositories?q=sq+macos+azure"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      sonarsource-cfamily-examples
+    </a>
+  </div>
+  <p
+    className="spacer-top"
+  >
+    onboarding.tutorial.cfamily.examples_repositories_description
+  </p>
+</div>
+`;

server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/YamlFileStep-test.tsx.snap

@@ -1,77 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render child correctly: C unavailable 1`] = `
-<Fragment>
-  <ol
-    className="list-styled big-spacer-top big-spacer-bottom"
+<ol
+  className="list-styled big-spacer-top big-spacer-bottom"
+>
+  <li
+    className="abs-width-600"
   >
-    <li>
-      onboarding.build
-      <RenderOptions
-        name="language"
-        onCheck={[Function]}
-        optionLabelKey="onboarding.build"
-        options={
-          Array [
-            "maven",
-            "gradle",
-            "dotnet",
-            "other",
-          ]
-        }
-      />
-    </li>
-  </ol>
-</Fragment>
+    onboarding.build
+    <RenderOptions
+      name="language"
+      onCheck={[Function]}
+      optionLabelKey="onboarding.build"
+      options={
+        Array [
+          "maven",
+          "gradle",
+          "dotnet",
+          "other",
+        ]
+      }
+    />
+  </li>
+</ol>
 `;
 
 exports[`should render correctly: C available 1`] = `
-<Fragment>
-  <ol
-    className="list-styled big-spacer-top big-spacer-bottom"
+<ol
+  className="list-styled big-spacer-top big-spacer-bottom"
+>
+  <li
+    className="abs-width-600"
   >
-    <li>
-      onboarding.build
-      <RenderOptions
-        name="language"
-        onCheck={[Function]}
-        optionLabelKey="onboarding.build"
-        options={
-          Array [
-            "maven",
-            "gradle",
-            "dotnet",
-            "cfamily",
-            "other",
-          ]
-        }
-      />
-    </li>
-  </ol>
-</Fragment>
+    onboarding.build
+    <RenderOptions
+      name="language"
+      onCheck={[Function]}
+      optionLabelKey="onboarding.build"
+      options={
+        Array [
+          "maven",
+          "gradle",
+          "dotnet",
+          "cfamily",
+          "other",
+        ]
+      }
+    />
+  </li>
+</ol>
 `;
 
 exports[`should render correctly: C unavailable 1`] = `
-<Fragment>
-  <ol
-    className="list-styled big-spacer-top big-spacer-bottom"
+<ol
+  className="list-styled big-spacer-top big-spacer-bottom"
+>
+  <li
+    className="abs-width-600"
   >
-    <li>
-      onboarding.build
-      <RenderOptions
-        name="language"
-        onCheck={[Function]}
-        optionLabelKey="onboarding.build"
-        options={
-          Array [
-            "maven",
-            "gradle",
-            "dotnet",
-            "other",
-          ]
-        }
-      />
-    </li>
-  </ol>
-</Fragment>
+    onboarding.build
+    <RenderOptions
+      name="language"
+      onCheck={[Function]}
+      optionLabelKey="onboarding.build"
+      options={
+        Array [
+          "maven",
+          "gradle",
+          "dotnet",
+          "other",
+        ]
+      }
+    />
+  </li>
+</ol>
 `;

server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx

@@ -23,8 +23,9 @@ import { CompilationInfo } from '../../components/CompilationInfo';
 import CreateYmlFile from '../../components/CreateYmlFile';
 import DefaultProjectKey from '../../components/DefaultProjectKey';
 import FinishButton from '../../components/FinishButton';
+import GithubCFamilyExampleRepositories from '../../components/GithubCFamilyExampleRepositories';
 import RenderOptions from '../../components/RenderOptions';
-import { OSs } from '../../types';
+import { OSs, TutorialModes } from '../../types';
 
 export interface CFamilyProps {
   branchesEnabled?: boolean;
@@ -147,7 +148,7 @@ export default function CFamily(props: CFamilyProps) {
   return (
     <>
       <DefaultProjectKey component={component} />
-      <li>
+      <li className="abs-width-600">
         <span>{translate('onboarding.build.other.os')}</span>
         <RenderOptions
           checked={os}
@@ -156,6 +157,13 @@ export default function CFamily(props: CFamilyProps) {
           optionLabelKey="onboarding.build.other.os"
           options={Object.values(OSs)}
         />
+        {os && (
+          <GithubCFamilyExampleRepositories
+            className="big-spacer-top"
+            os={os}
+            ci={TutorialModes.GitHubActions}
+          />
+        )}
       </li>
       {os && (
         <>

server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/CFamily-test.tsx.snap

@@ -26,7 +26,9 @@ exports[`should render correctly 1`] = `
       }
     }
   />
-  <li>
+  <li
+    className="abs-width-600"
+  >
     <span>
       onboarding.build.other.os
     </span>
@@ -72,7 +74,9 @@ exports[`should render correctly for linux: branches disabled 1`] = `
       }
     }
   />
-  <li>
+  <li
+    className="abs-width-600"
+  >
     <span>
       onboarding.build.other.os
     </span>
@@ -89,6 +93,11 @@ exports[`should render correctly for linux: branches disabled 1`] = `
         ]
       }
     />
+    <GithubCFamilyExampleRepositories
+      ci="github-actions"
+      className="big-spacer-top"
+      os="linux"
+    />
   </li>
   <CreateYmlFile
     yamlFileName=".github/workflows/build.yml"
@@ -168,7 +177,9 @@ exports[`should render correctly for mac: branches enabled 1`] = `
       }
     }
   />
-  <li>
+  <li
+    className="abs-width-600"
+  >
     <span>
       onboarding.build.other.os
     </span>
@@ -185,6 +196,11 @@ exports[`should render correctly for mac: branches enabled 1`] = `
         ]
       }
     />
+    <GithubCFamilyExampleRepositories
+      ci="github-actions"
+      className="big-spacer-top"
+      os="mac"
+    />
   </li>
   <CreateYmlFile
     yamlFileName=".github/workflows/build.yml"
@@ -263,7 +279,9 @@ exports[`should render correctly for win: branches enabled 1`] = `
       }
     }
   />
-  <li>
+  <li
+    className="abs-width-600"
+  >
     <span>
       onboarding.build.other.os
     </span>
@@ -280,6 +298,11 @@ exports[`should render correctly for win: branches enabled 1`] = `
         ]
       }
     />
+    <GithubCFamilyExampleRepositories
+      ci="github-actions"
+      className="big-spacer-top"
+      os="win"
+    />
   </li>
   <CreateYmlFile
     yamlFileName=".github/workflows/build.yml"

server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx

@@ -23,8 +23,9 @@ import { ClipboardIconButton } from '../../../components/controls/clipboard';
 import { translate } from '../../../helpers/l10n';
 import { withAppState } from '../../hoc/withAppState';
 import FinishButton from '../components/FinishButton';
+import GithubCFamilyExampleRepositories from '../components/GithubCFamilyExampleRepositories';
 import Step from '../components/Step';
-import { BuildTools } from '../types';
+import { BuildTools, TutorialModes } from '../types';
 import PipeCommand from './commands/PipeCommand';
 
 export interface YmlFileStepProps {
@@ -52,6 +53,12 @@ export function YmlFileStep(props: YmlFileStepProps) {
         <div className="flex-column-full">
           {buildTool && (
             <>
+              {buildTool === BuildTools.CFamily && (
+                <GithubCFamilyExampleRepositories
+                  className="big-spacer-bottom abs-width-600"
+                  ci={TutorialModes.GitLabCI}
+                />
+              )}
               <div className="big-spacer-bottom">
                 <FormattedMessage
                   defaultMessage={translate('onboarding.tutorial.with.gitlab_ci.yml.description')}
@@ -71,7 +78,6 @@ export function YmlFileStep(props: YmlFileStepProps) {
                   }}
                 />
               </div>
-
               <div className="big-spacer-bottom abs-width-600">
                 <PipeCommand
                   buildTool={buildTool}
@@ -79,13 +85,11 @@ export function YmlFileStep(props: YmlFileStepProps) {
                   projectKey={projectKey}
                 />
               </div>
-
               <p className="little-spacer-bottom">
                 {branchesEnabled
                   ? translate('onboarding.tutorial.with.gitlab_ci.yml.baseconfig')
                   : translate('onboarding.tutorial.with.gitlab_ci.yml.baseconfig.no_branches')}
               </p>
-
               <p>{translate('onboarding.tutorial.with.gitlab_ci.yml.existing')}</p>
             </>
           )}

server/sonar-web/src/main/js/components/tutorials/gitlabci/__tests__/__snapshots__/YmlFileStep-test.tsx.snap

@@ -11,6 +11,10 @@ exports[`should render correctly for build tool cfamily: with branch support 1`]
       className="flex-column-full"
     >
       <React.Fragment>
+        <GithubCFamilyExampleRepositories
+          ci="gitlab-ci"
+          className="big-spacer-bottom abs-width-600"
+        />
         <div
           className="big-spacer-bottom"
         >
@@ -71,6 +75,10 @@ exports[`should render correctly for build tool cfamily: without branch support
       className="flex-column-full"
     >
       <React.Fragment>
+        <GithubCFamilyExampleRepositories
+          ci="gitlab-ci"
+          className="big-spacer-bottom abs-width-600"
+        />
         <div
           className="big-spacer-bottom"
         >

server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CFamilly.tsx

@@ -22,8 +22,9 @@ import { translate } from '../../../../helpers/l10n';
 import { CompilationInfo } from '../../components/CompilationInfo';
 import DefaultProjectKey from '../../components/DefaultProjectKey';
 import FinishButton from '../../components/FinishButton';
+import GithubCFamilyExampleRepositories from '../../components/GithubCFamilyExampleRepositories';
 import RenderOptions from '../../components/RenderOptions';
-import { OSs } from '../../types';
+import { OSs, TutorialModes } from '../../types';
 import { LanguageProps } from '../JenkinsfileStep';
 import CreateJenkinsfileBulletPoint from './CreateJenkinsfileBulletPoint';
 
@@ -107,7 +108,7 @@ export default function CFamilly(props: LanguageProps) {
   return (
     <>
       <DefaultProjectKey component={component} />
-      <li>
+      <li className="abs-width-600">
         {translate('onboarding.build.other.os')}
         <RenderOptions
           checked={os}
@@ -116,6 +117,13 @@ export default function CFamilly(props: LanguageProps) {
           onCheck={value => setOs(value as OSs)}
           options={Object.values(OSs)}
         />
+        {os && (
+          <GithubCFamilyExampleRepositories
+            className="big-spacer-top big-spacer-bottom"
+            os={os}
+            ci={TutorialModes.Jenkins}
+          />
+        )}
       </li>
       {os && (
         <>

server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/CFamilly-test.tsx.snap

@@ -26,7 +26,9 @@ exports[`should render correctly for 1`] = `
       }
     }
   />
-  <li>
+  <li
+    className="abs-width-600"
+  >
     onboarding.build.other.os
     <RenderOptions
       name="flavorComponent"
@@ -70,7 +72,9 @@ exports[`should render correctly for linux: linux 1`] = `
       }
     }
   />
-  <li>
+  <li
+    className="abs-width-600"
+  >
     onboarding.build.other.os
     <RenderOptions
       checked="linux"
@@ -85,6 +89,11 @@ exports[`should render correctly for linux: linux 1`] = `
         ]
       }
     />
+    <GithubCFamilyExampleRepositories
+      ci="jenkins"
+      className="big-spacer-top big-spacer-bottom"
+      os="linux"
+    />
   </li>
   <CreateJenkinsfileBulletPoint
     alertTranslationKeyPart="onboarding.tutorial.with.jenkins.jenkinsfile.other.step3"
@@ -142,7 +151,9 @@ exports[`should render correctly for mac: mac 1`] = `
       }
     }
   />
-  <li>
+  <li
+    className="abs-width-600"
+  >
     onboarding.build.other.os
     <RenderOptions
       checked="mac"
@@ -157,6 +168,11 @@ exports[`should render correctly for mac: mac 1`] = `
         ]
       }
     />
+    <GithubCFamilyExampleRepositories
+      ci="jenkins"
+      className="big-spacer-top big-spacer-bottom"
+      os="mac"
+    />
   </li>
   <CreateJenkinsfileBulletPoint
     alertTranslationKeyPart="onboarding.tutorial.with.jenkins.jenkinsfile.other.step3"
@@ -218,7 +234,9 @@ exports[`should render correctly for win: win 1`] = `
       }
     }
   />
-  <li>
+  <li
+    className="abs-width-600"
+  >
     onboarding.build.other.os
     <RenderOptions
       checked="win"
@@ -233,6 +251,11 @@ exports[`should render correctly for win: win 1`] = `
         ]
       }
     />
+    <GithubCFamilyExampleRepositories
+      ci="jenkins"
+      className="big-spacer-top big-spacer-bottom"
+      os="win"
+    />
   </li>
   <CreateJenkinsfileBulletPoint
     alertTranslationKeyPart="onboarding.tutorial.with.jenkins.jenkinsfile.other.step3"

server/sonar-web/src/main/js/components/tutorials/manual/BuildToolForm.tsx

@@ -21,8 +21,9 @@ import * as React from 'react';
 import RadioToggle from '../../../components/controls/RadioToggle';
 import { translate } from '../../../helpers/l10n';
 import { withCLanguageFeature } from '../../hoc/withCLanguageFeature';
+import GithubCFamilyExampleRepositories from '../components/GithubCFamilyExampleRepositories';
 import RenderOptions from '../components/RenderOptions';
-import { BuildTools, ManualTutorialConfig, OSs } from '../types';
+import { BuildTools, ManualTutorialConfig, OSs, TutorialModes } from '../types';
 
 interface Props {
   hasCLanguageFeature: boolean;
@@ -91,6 +92,14 @@ export class BuildToolForm extends React.PureComponent<Props, State> {
             titleLabelKey="onboarding.build.other.os"
           />
         )}
+
+        {config.buildTool === BuildTools.CFamily && config.os && (
+          <GithubCFamilyExampleRepositories
+            className="big-spacer-top abs-width-600"
+            os={config.os}
+            ci={TutorialModes.Manual}
+          />
+        )}
       </>
     );
   }

server/sonar-web/src/main/js/components/tutorials/manual/ProjectAnalysisStep.tsx

@@ -54,7 +54,7 @@ export default class ProjectAnalysisStep extends React.PureComponent<Props, Stat
           <BuildToolForm onDone={this.handleBuildToolSelect} />
 
           {this.state.config && (
-            <div className="huge-spacer-top">
+            <div className="big-spacer-top">
               <AnalysisCommand
                 component={this.props.component}
                 languageConfig={this.state.config}

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -3597,6 +3597,7 @@ onboarding.tutorial.cfamilly.compilation_database_info=If you have trouble using
 onboarding.tutorial.cfamilly.compilation_database_info.link=compilation database
 onboarding.tutorial.cfamilly.speed_caching=You can also speed up your analysis by enabling {link}.
 onboarding.tutorial.cfamilly.speed_caching.link=multi-threading and caching
+onboarding.tutorial.cfamily.examples_repositories_description=Check out our C and C++ sample projects with SonarQube analysis configured
 
 onboarding.tutorial.choose_method=How do you want to analyze your repository?
 onboarding.tutorial.choose_method.devops_platform.description=Do you want to integrate with your favorite CI? Choose one of the following tutorials.