SONAR-13890 Make bitbucket/github tutorial ending a stand-alone step for increased clarity

47 files changed, 399 insertions, 123 deletions

diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx
index 1c53cd067be..b5a79c1d500 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/AnalysisCommand.tsx
@@ -32,7 +32,7 @@ import { PreambuleYaml } from './PreambuleYaml';
 
 export interface AnalysisCommandProps {
   appState: T.AppState;
-  buildTool?: BuildTools;
+  buildTool: BuildTools;
   component: T.Component;
 }
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
index 982c7cc4b6a..b41b7749e41 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
@@ -24,6 +24,8 @@ import {
   AlmSettingsInstance,
   ProjectAlmBindingResponse
 } from '../../../types/alm-settings';
+import AllSetStep from '../components/AllSetStep';
+import FinishButton from '../components/FinishButton';
 import Step from '../components/Step';
 import YamlFileStep from '../components/YamlFileStep';
 import AnalysisCommand from './AnalysisCommand';
@@ -31,7 +33,8 @@ import RepositoryVariables from './RepositoryVariables';
 
 export enum Steps {
   REPOSITORY_VARIABLES = 1,
-  YAML = 2
+  YAML = 2,
+  ALL_SET = 3
 }
 
 export interface BitbucketPipelinesTutorialProps {
@@ -66,16 +69,27 @@ export default function BitbucketPipelinesTutorial(props: BitbucketPipelinesTuto
         stepTitle={translate('onboarding.tutorial.with.bitbucket_pipelines.create_secret.title')}
       />
       <Step
+        finished={step > Steps.YAML}
         onOpen={() => setStep(Steps.YAML)}
         open={step === Steps.YAML}
         renderForm={() => (
-          <YamlFileStep alm={AlmKeys.BitbucketCloud}>
-            {buildTool => <AnalysisCommand buildTool={buildTool} component={component} />}
+          <YamlFileStep>
+            {buildTool => (
+              <>
+                <AnalysisCommand buildTool={buildTool} component={component} />
+                <FinishButton onClick={() => setStep(Steps.ALL_SET)} />
+              </>
+            )}
           </YamlFileStep>
         )}
         stepNumber={Steps.YAML}
         stepTitle={translate('onboarding.tutorial.with.bitbucket_pipelines.yaml.title')}
       />
+      <AllSetStep
+        alm={almBinding?.alm || AlmKeys.BitbucketCloud}
+        open={step === Steps.ALL_SET}
+        stepNumber={Steps.ALL_SET}
+      />
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx
index 1bad0d829df..8200ad27904 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/BitbucketPipelinesTutorial-test.tsx
@@ -32,6 +32,7 @@ import BitbucketPipelinesTutorial, {
 
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot('default');
+  expect(shallowRender({ almBinding: undefined })).toMatchSnapshot('no binding');
   expect(renderStepContent(shallowRender())).toMatchSnapshot('repo variable step content');
   expect(renderStepContent(shallowRender(), 1)).toMatchSnapshot('yaml file step content');
 });
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/__snapshots__/BitbucketPipelinesTutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/__snapshots__/BitbucketPipelinesTutorial-test.tsx.snap
index 45e2b22a367..819ee58c015 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/__snapshots__/BitbucketPipelinesTutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/__tests__/__snapshots__/BitbucketPipelinesTutorial-test.tsx.snap
@@ -11,12 +11,44 @@ exports[`should render correctly: default 1`] = `
     stepTitle="onboarding.tutorial.with.bitbucket_pipelines.create_secret.title"
   />
   <Step
+    finished={false}
     onOpen={[Function]}
     open={false}
     renderForm={[Function]}
     stepNumber={2}
     stepTitle="onboarding.tutorial.with.bitbucket_pipelines.yaml.title"
   />
+  <AllSetStep
+    alm="github"
+    open={false}
+    stepNumber={3}
+  />
+</Fragment>
+`;
+
+exports[`should render correctly: no binding 1`] = `
+<Fragment>
+  <Step
+    finished={false}
+    onOpen={[Function]}
+    open={true}
+    renderForm={[Function]}
+    stepNumber={1}
+    stepTitle="onboarding.tutorial.with.bitbucket_pipelines.create_secret.title"
+  />
+  <Step
+    finished={false}
+    onOpen={[Function]}
+    open={false}
+    renderForm={[Function]}
+    stepNumber={2}
+    stepTitle="onboarding.tutorial.with.bitbucket_pipelines.yaml.title"
+  />
+  <AllSetStep
+    alm="bitbucketcloud"
+    open={false}
+    stepNumber={3}
+  />
 </Fragment>
 `;
 
@@ -73,9 +105,7 @@ exports[`should render correctly: repo variable step content 1`] = `
 `;
 
 exports[`should render correctly: yaml file step content 1`] = `
-<Connect(withCLanguageFeature(YamlFileStep))
-  alm="bitbucketcloud"
->
+<Connect(withCLanguageFeature(YamlFileStep))>
   [Function]
 </Connect(withCLanguageFeature(YamlFileStep))>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/FinishButton.tsx b/server/sonar-web/src/main/js/components/tutorials/components/FinishButton.tsx
new file mode 100644
index 00000000000..491637b730f
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/components/FinishButton.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 { Button } from 'sonar-ui-common/components/controls/buttons';
+import ChevronRightIcon from 'sonar-ui-common/components/icons/ChevronRightIcon';
+import { translate } from 'sonar-ui-common/helpers/l10n';
+import { rawSizes } from '../../../app/theme';
+
+export interface FinishButtonProps {
+  onClick: () => void;
+}
+
+export default function FinishButton(props: FinishButtonProps) {
+  return (
+    <Button className="big-spacer-top big-spacer-bottom" onClick={props.onClick}>
+      {translate('tutorials.finish')}
+      <ChevronRightIcon size={rawSizes.baseFontSizeRaw} />
+    </Button>
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx b/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx
index 1c28586d3e8..f9a6c4828c2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/YamlFileStep.tsx
@@ -19,15 +19,12 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import { AlmKeys } from '../../../types/alm-settings';
 import { withCLanguageFeature } from '../../hoc/withCLanguageFeature';
 import RenderOptions from '../components/RenderOptions';
 import { BuildTools } from '../types';
-import AllSet from './AllSet';
 
 export interface YamlFileStepProps {
-  alm: AlmKeys;
-  children?: (buildTool?: BuildTools) => React.ReactElement<{}>;
+  children?: (buildTool: BuildTools) => React.ReactElement<{}>;
   hasCLanguageFeature: boolean;
 }
 
@@ -38,7 +35,7 @@ export interface AnalysisCommandProps {
 }
 
 export function YamlFileStep(props: YamlFileStepProps) {
-  const { alm, children, hasCLanguageFeature } = props;
+  const { children, hasCLanguageFeature } = props;
 
   const buildTools = [BuildTools.Maven, BuildTools.Gradle, BuildTools.DotNet];
   if (hasCLanguageFeature) {
@@ -62,14 +59,8 @@ export function YamlFileStep(props: YamlFileStepProps) {
             optionLabelKey="onboarding.build"
           />
         </li>
-        {children && children(buildToolSelected)}
+        {children && buildToolSelected && children(buildToolSelected)}
       </ol>
-      {buildToolSelected !== undefined && (
-        <>
-          <hr className="huge-spacer-top huge-spacer-bottom" />
-          <AllSet alm={alm} />
-        </>
-      )}
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/FinishButton-test.tsx b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/FinishButton-test.tsx
new file mode 100644
index 00000000000..f14de7b8cc0
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/FinishButton-test.tsx
@@ -0,0 +1,30 @@
+/*
+ * 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 FinishButton, { FinishButtonProps } from '../FinishButton';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+});
+
+function shallowRender(props: Partial<FinishButtonProps> = {}) {
+  return shallow<FinishButtonProps>(<FinishButton onClick={jest.fn()} {...props} />);
+}
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/YamlFileStep-test.tsx b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/YamlFileStep-test.tsx
index 936287cac55..b657844f5a9 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/YamlFileStep-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/YamlFileStep-test.tsx
@@ -19,7 +19,8 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { AlmKeys } from '../../../../types/alm-settings';
+import { BuildTools } from '../../types';
+import RenderOptions from '../RenderOptions';
 import { YamlFileStep, YamlFileStepProps } from '../YamlFileStep';
 
 it('should render correctly', () => {
@@ -27,8 +28,14 @@ it('should render correctly', () => {
   expect(shallowRender({ hasCLanguageFeature: true })).toMatchSnapshot('C available');
 });
 
+it('should render child correctly', () => {
+  const children = jest.fn();
+  const wrapper = shallowRender({ children });
+  expect(wrapper).toMatchSnapshot('C unavailable');
+  wrapper.find(RenderOptions).simulate('check', BuildTools.DotNet);
+  expect(children).toBeCalledWith(BuildTools.DotNet);
+});
+
 function shallowRender(props: Partial<YamlFileStepProps> = {}) {
-  return shallow<YamlFileStepProps>(
-    <YamlFileStep alm={AlmKeys.GitHub} hasCLanguageFeature={false} {...props} />
-  );
+  return shallow<YamlFileStepProps>(<YamlFileStep hasCLanguageFeature={false} {...props} />);
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/FinishButton-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/FinishButton-test.tsx.snap
new file mode 100644
index 00000000000..fe4e12192d2
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/FinishButton-test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<Button
+  className="big-spacer-top big-spacer-bottom"
+  onClick={[MockFunction]}
+>
+  tutorials.finish
+  <ChevronRightIcon
+    size={13}
+  />
+</Button>
+`;
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/YamlFileStep-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/YamlFileStep-test.tsx.snap
index c33c7635df3..5b13369d15c 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/YamlFileStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/components/__tests__/__snapshots__/YamlFileStep-test.tsx.snap
@@ -1,5 +1,30 @@
 // 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"
+  >
+    <li>
+      onboarding.build
+      <RenderOptions
+        name="language"
+        onCheck={[Function]}
+        optionLabelKey="onboarding.build"
+        options={
+          Array [
+            "maven",
+            "gradle",
+            "dotnet",
+            "other",
+          ]
+        }
+      />
+    </li>
+  </ol>
+</Fragment>
+`;
+
 exports[`should render correctly: C available 1`] = `
 <Fragment>
   <ol
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/AnalysisCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/AnalysisCommand.tsx
index 40e2333e4e7..e21a74c8dc1 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/AnalysisCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/AnalysisCommand.tsx
@@ -28,8 +28,9 @@ import Others from './commands/Others';
 
 export interface AnalysisCommandProps {
   appState: T.AppState;
-  buildTool?: BuildTools;
+  buildTool: BuildTools;
   component: T.Component;
+  onDone: () => void;
 }
 
 export function AnalysisCommand(props: AnalysisCommandProps) {
@@ -45,15 +46,25 @@ export function AnalysisCommand(props: AnalysisCommandProps) {
 
   switch (buildTool) {
     case BuildTools.Maven:
-      return <JavaMaven branchesEnabled={branchesEnabled} component={component} />;
+      return (
+        <JavaMaven branchesEnabled={branchesEnabled} component={component} onDone={props.onDone} />
+      );
     case BuildTools.Gradle:
-      return <Gradle branchesEnabled={branchesEnabled} component={component} />;
+      return (
+        <Gradle branchesEnabled={branchesEnabled} component={component} onDone={props.onDone} />
+      );
     case BuildTools.DotNet:
-      return <DotNet branchesEnabled={branchesEnabled} component={component} />;
+      return (
+        <DotNet branchesEnabled={branchesEnabled} component={component} onDone={props.onDone} />
+      );
     case BuildTools.CFamily:
-      return <CFamily branchesEnabled={branchesEnabled} component={component} />;
+      return (
+        <CFamily branchesEnabled={branchesEnabled} component={component} onDone={props.onDone} />
+      );
     case BuildTools.Other:
-      return <Others branchesEnabled={branchesEnabled} component={component} />;
+      return (
+        <Others branchesEnabled={branchesEnabled} component={component} onDone={props.onDone} />
+      );
   }
   return null;
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx
index 88bdaf9e897..03647bf12c0 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/GitHubActionTutorial.tsx
@@ -24,6 +24,7 @@ import {
   AlmSettingsInstance,
   ProjectAlmBindingResponse
 } from '../../../types/alm-settings';
+import AllSetStep from '../components/AllSetStep';
 import Step from '../components/Step';
 import YamlFileStep from '../components/YamlFileStep';
 import AnalysisCommand from './AnalysisCommand';
@@ -31,7 +32,8 @@ import SecretStep from './SecretStep';
 
 export enum Steps {
   CREATE_SECRET = 1,
-  YAML = 2
+  YAML = 2,
+  ALL_SET = 3
 }
 
 export interface GitHubActionTutorialProps {
@@ -66,16 +68,28 @@ export default function GitHubActionTutorial(props: GitHubActionTutorialProps) {
         stepTitle={translate('onboarding.tutorial.with.github_action.create_secret.title')}
       />
       <Step
+        finished={step > Steps.YAML}
         onOpen={() => setStep(Steps.YAML)}
         open={step === Steps.YAML}
         renderForm={() => (
-          <YamlFileStep alm={AlmKeys.GitHub}>
-            {buildTool => <AnalysisCommand buildTool={buildTool} component={component} />}
+          <YamlFileStep>
+            {buildTool => (
+              <AnalysisCommand
+                buildTool={buildTool}
+                component={component}
+                onDone={() => setStep(Steps.ALL_SET)}
+              />
+            )}
           </YamlFileStep>
         )}
         stepNumber={Steps.YAML}
         stepTitle={translate('onboarding.tutorial.with.github_action.yaml.title')}
       />
+      <AllSetStep
+        alm={almBinding?.alm || AlmKeys.GitHub}
+        open={step === Steps.ALL_SET}
+        stepNumber={Steps.ALL_SET}
+      />
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/AnalysisCommand-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/AnalysisCommand-test.tsx
index 461b5ac519c..1013f5cee21 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/AnalysisCommand-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/AnalysisCommand-test.tsx
@@ -36,6 +36,12 @@ it.each([
 
 function shallowRender(props: Partial<AnalysisCommandProps> = {}) {
   return shallow<AnalysisCommandProps>(
-    <AnalysisCommand appState={mockAppState()} component={mockComponent()} {...props} />
+    <AnalysisCommand
+      appState={mockAppState()}
+      component={mockComponent()}
+      buildTool={BuildTools.DotNet}
+      onDone={jest.fn()}
+      {...props}
+    />
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx
index d0fb0ccadce..891c84a1e1d 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/GitHubActionTutorial-test.tsx
@@ -30,6 +30,7 @@ import GitHubActionTutorial, { GitHubActionTutorialProps } from '../GitHubAction
 
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot('default');
+  expect(shallowRender({ almBinding: undefined })).toMatchSnapshot('no binding');
   expect(renderStepContent(shallowRender())).toMatchSnapshot('secrets step content');
   expect(renderStepContent(shallowRender(), 1)).toMatchSnapshot('yaml file step content');
 });
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/AnalysisCommand-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/AnalysisCommand-test.tsx.snap
index 99f415c28cb..9d88eb179df 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/AnalysisCommand-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/AnalysisCommand-test.tsx.snap
@@ -24,6 +24,7 @@ exports[`should render correctly for "cfamily" 1`] = `
       "tags": Array [],
     }
   }
+  onDone={[MockFunction]}
 />
 `;
 
@@ -51,6 +52,7 @@ exports[`should render correctly for "dotnet" 1`] = `
       "tags": Array [],
     }
   }
+  onDone={[MockFunction]}
 />
 `;
 
@@ -78,6 +80,7 @@ exports[`should render correctly for "gradle" 1`] = `
       "tags": Array [],
     }
   }
+  onDone={[MockFunction]}
 />
 `;
 
@@ -105,6 +108,7 @@ exports[`should render correctly for "maven" 1`] = `
       "tags": Array [],
     }
   }
+  onDone={[MockFunction]}
 />
 `;
 
@@ -132,6 +136,7 @@ exports[`should render correctly for "other" 1`] = `
       "tags": Array [],
     }
   }
+  onDone={[MockFunction]}
 />
 `;
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/GitHubActionTutorial-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/GitHubActionTutorial-test.tsx.snap
index a4e2065b68b..bea7818d24e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/GitHubActionTutorial-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/__tests__/__snapshots__/GitHubActionTutorial-test.tsx.snap
@@ -11,12 +11,44 @@ exports[`should render correctly: default 1`] = `
     stepTitle="onboarding.tutorial.with.github_action.create_secret.title"
   />
   <Step
+    finished={false}
     onOpen={[Function]}
     open={false}
     renderForm={[Function]}
     stepNumber={2}
     stepTitle="onboarding.tutorial.with.github_action.yaml.title"
   />
+  <AllSetStep
+    alm="github"
+    open={false}
+    stepNumber={3}
+  />
+</Fragment>
+`;
+
+exports[`should render correctly: no binding 1`] = `
+<Fragment>
+  <Step
+    finished={false}
+    onOpen={[Function]}
+    open={true}
+    renderForm={[Function]}
+    stepNumber={1}
+    stepTitle="onboarding.tutorial.with.github_action.create_secret.title"
+  />
+  <Step
+    finished={false}
+    onOpen={[Function]}
+    open={false}
+    renderForm={[Function]}
+    stepNumber={2}
+    stepTitle="onboarding.tutorial.with.github_action.yaml.title"
+  />
+  <AllSetStep
+    alm="github"
+    open={false}
+    stepNumber={3}
+  />
 </Fragment>
 `;
 
@@ -73,9 +105,7 @@ exports[`should render correctly: secrets step content 1`] = `
 `;
 
 exports[`should render correctly: yaml file step content 1`] = `
-<Connect(withCLanguageFeature(YamlFileStep))
-  alm="github"
->
+<Connect(withCLanguageFeature(YamlFileStep))>
   [Function]
 </Connect(withCLanguageFeature(YamlFileStep))>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx
index f673d58461b..4f2a13aeae7 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx
@@ -22,12 +22,14 @@ import { translate } from 'sonar-ui-common/helpers/l10n';
 import { CompilationInfo } from '../../components/CompilationInfo';
 import CreateYmlFile from '../../components/CreateYmlFile';
 import DefaultProjectKey from '../../components/DefaultProjectKey';
+import FinishButton from '../../components/FinishButton';
 import RenderOptions from '../../components/RenderOptions';
 import { OSs } from '../../types';
 
 export interface CFamilyProps {
   branchesEnabled?: boolean;
   component: T.Component;
+  onDone: () => void;
 }
 
 const STEPS = {
@@ -155,6 +157,7 @@ export default function CFamily(props: CFamilyProps) {
             yamlTemplate={cfamilyYamlTemplate(!!branchesEnabled, os)}
           />
           <CompilationInfo className="abs-width-800" />
+          <FinishButton onClick={props.onDone} />
         </>
       )}
     </>
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/DotNet.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/DotNet.tsx
index c99e812057f..003e26868a3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/DotNet.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/DotNet.tsx
@@ -19,10 +19,12 @@
  */
 import * as React from 'react';
 import CreateYmlFile from '../../components/CreateYmlFile';
+import FinishButton from '../../components/FinishButton';
 
 export interface DotNetProps {
   branchesEnabled?: boolean;
   component: T.Component;
+  onDone: () => void;
 }
 
 const dotnetYamlTemplate = (projectKey: string, branchesEnabled: boolean) => `name: Build
@@ -74,9 +76,12 @@ jobs:
 export default function DotNet(props: DotNetProps) {
   const { component, branchesEnabled } = props;
   return (
-    <CreateYmlFile
-      yamlFileName=".github/workflows/build.yml"
-      yamlTemplate={dotnetYamlTemplate(component.key, !!branchesEnabled)}
-    />
+    <>
+      <CreateYmlFile
+        yamlFileName=".github/workflows/build.yml"
+        yamlTemplate={dotnetYamlTemplate(component.key, !!branchesEnabled)}
+      />
+      <FinishButton onClick={props.onDone} />
+    </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Gradle.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Gradle.tsx
index 42cffc2d98c..af28cb25261 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Gradle.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Gradle.tsx
@@ -23,11 +23,13 @@ import { ClipboardIconButton } from 'sonar-ui-common/components/controls/clipboa
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import CodeSnippet from '../../../common/CodeSnippet';
 import CreateYmlFile from '../../components/CreateYmlFile';
+import FinishButton from '../../components/FinishButton';
 import { buildGradleSnippet } from '../../utils';
 
 export interface GradleProps {
   branchesEnabled?: boolean;
   component: T.Component;
+  onDone: () => void;
 }
 const gradleYamlTemplate = (branchesEnabled: boolean) => `name: Build
 on:
@@ -91,6 +93,7 @@ export default function Gradle(props: GradleProps) {
         yamlFileName=".github/workflows/build.yml"
         yamlTemplate={gradleYamlTemplate(!!branchesEnabled)}
       />
+      <FinishButton onClick={props.onDone} />
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/JavaMaven.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/JavaMaven.tsx
index 54d21e2232c..879f9df3334 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/JavaMaven.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/JavaMaven.tsx
@@ -23,11 +23,13 @@ import { ClipboardIconButton } from 'sonar-ui-common/components/controls/clipboa
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import CodeSnippet from '../../../common/CodeSnippet';
 import CreateYmlFile from '../../components/CreateYmlFile';
+import FinishButton from '../../components/FinishButton';
 import { mavenPomSnippet } from '../../utils';
 
 export interface JavaMavenProps {
   branchesEnabled?: boolean;
   component: T.Component;
+  onDone: () => void;
 }
 
 const mavenYamlTemplte = (branchesEnabled: boolean) => `name: Build
@@ -90,6 +92,7 @@ export default function JavaMaven(props: JavaMavenProps) {
         yamlFileName=".github/workflows/build.yml"
         yamlTemplate={mavenYamlTemplte(!!branchesEnabled)}
       />
+      <FinishButton onClick={props.onDone} />
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Others.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Others.tsx
index ea4f93e419f..425f10557f9 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Others.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/Others.tsx
@@ -20,10 +20,12 @@
 import * as React from 'react';
 import CreateYmlFile from '../../components/CreateYmlFile';
 import DefaultProjectKey from '../../components/DefaultProjectKey';
+import FinishButton from '../../components/FinishButton';
 
 export interface OthersProps {
   branchesEnabled?: boolean;
   component: T.Component;
+  onDone: () => void;
 }
 
 const yamlTemplate = (branchesEnabled: boolean) => {
@@ -79,6 +81,7 @@ export default function Others(props: OthersProps) {
         yamlFileName=".github/workflows/build.yml"
         yamlTemplate={yamlTemplate(!!branchesEnabled)}
       />
+      <FinishButton onClick={props.onDone} />
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/CFamily-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/CFamily-test.tsx
index c809742bb89..f851057286e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/CFamily-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/CFamily-test.tsx
@@ -43,6 +43,6 @@ it.each([
 
 function shallowRender(props: Partial<CFamilyProps> = {}) {
   return shallow<CFamilyProps>(
-    <CFamily branchesEnabled={true} component={mockComponent()} {...props} />
+    <CFamily branchesEnabled={true} component={mockComponent()} {...props} onDone={jest.fn()} />
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/DotNet-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/DotNet-test.tsx
index 64f0b1e4517..c44d6ee550f 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/DotNet-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/DotNet-test.tsx
@@ -29,6 +29,6 @@ it('should render correctly', () => {
 
 function shallowRender(props: Partial<DotNetProps> = {}) {
   return shallow<DotNetProps>(
-    <DotNet branchesEnabled={true} component={mockComponent()} {...props} />
+    <DotNet branchesEnabled={true} component={mockComponent()} {...props} onDone={jest.fn()} />
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/Gradle-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/Gradle-test.tsx
index cc1adcff93c..50431d5dc81 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/Gradle-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/Gradle-test.tsx
@@ -29,6 +29,6 @@ it('should render correctly', () => {
 
 function shallowRender(props: Partial<GradleProps> = {}) {
   return shallow<GradleProps>(
-    <Gradle branchesEnabled={true} component={mockComponent()} {...props} />
+    <Gradle branchesEnabled={true} component={mockComponent()} {...props} onDone={jest.fn()} />
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/JavaMaven-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/JavaMaven-test.tsx
index 809996402a8..6b0aecdff16 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/JavaMaven-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/JavaMaven-test.tsx
@@ -29,6 +29,6 @@ it('should render correctly', () => {
 
 function shallowRender(props: Partial<JavaMavenProps> = {}) {
   return shallow<JavaMavenProps>(
-    <JavaMaven branchesEnabled={true} component={mockComponent()} {...props} />
+    <JavaMaven branchesEnabled={true} component={mockComponent()} {...props} onDone={jest.fn()} />
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/Others-test.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/Others-test.tsx
index 8130c93369e..cb799f321c1 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/Others-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/Others-test.tsx
@@ -29,6 +29,6 @@ it('should render correctly', () => {
 
 function shallowRender(props: Partial<OthersProps> = {}) {
   return shallow<OthersProps>(
-    <Others branchesEnabled={true} component={mockComponent()} {...props} />
+    <Others branchesEnabled={true} component={mockComponent()} {...props} onDone={jest.fn()} />
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/CFamily-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/CFamily-test.tsx.snap
index 6e48693b2a4..964c6787a55 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/CFamily-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/CFamily-test.tsx.snap
@@ -129,6 +129,9 @@ jobs:
   <CompilationInfo
     className="abs-width-800"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
 
@@ -221,6 +224,9 @@ jobs:
   <CompilationInfo
     className="abs-width-800"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
 
@@ -322,5 +328,8 @@ jobs:
   <CompilationInfo
     className="abs-width-800"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/DotNet-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/DotNet-test.tsx.snap
index afb06fa5683..3e0e44b10de 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/DotNet-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/DotNet-test.tsx.snap
@@ -1,9 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<CreateYmlFile
-  yamlFileName=".github/workflows/build.yml"
-  yamlTemplate="name: Build
+<Fragment>
+  <CreateYmlFile
+    yamlFileName=".github/workflows/build.yml"
+    yamlTemplate="name: Build
 on:
   push:
     branches:
@@ -49,13 +50,18 @@ jobs:
           .\\\\.sonar\\\\scanner\\\\dotnet-sonarscanner begin /k:\\"my-project\\" /d:sonar.login=\\"\${{ secrets.SONAR_TOKEN }}\\" /d:sonar.host.url=\\"\${{ secrets.SONAR_HOST_URL }}\\"
           dotnet build
           .\\\\.sonar\\\\scanner\\\\dotnet-sonarscanner end /d:sonar.login=\\"\${{ secrets.SONAR_TOKEN }}\\""
-/>
+  />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
+</Fragment>
 `;
 
 exports[`should render correctly: without branch enabled 1`] = `
-<CreateYmlFile
-  yamlFileName=".github/workflows/build.yml"
-  yamlTemplate="name: Build
+<Fragment>
+  <CreateYmlFile
+    yamlFileName=".github/workflows/build.yml"
+    yamlTemplate="name: Build
 on:
   push:
     branches:
@@ -100,5 +106,9 @@ jobs:
           .\\\\.sonar\\\\scanner\\\\dotnet-sonarscanner begin /k:\\"my-project\\" /d:sonar.login=\\"\${{ secrets.SONAR_TOKEN }}\\" /d:sonar.host.url=\\"\${{ secrets.SONAR_HOST_URL }}\\"
           dotnet build
           .\\\\.sonar\\\\scanner\\\\dotnet-sonarscanner end /d:sonar.login=\\"\${{ secrets.SONAR_TOKEN }}\\""
-/>
+  />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
+</Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/Gradle-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/Gradle-test.tsx.snap
index d6ebf7d8b7e..c37eb9b7819 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/Gradle-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/Gradle-test.tsx.snap
@@ -80,6 +80,9 @@ jobs:
           SONAR_HOST_URL: \${{ secrets.SONAR_HOST_URL }}
         run: ./gradlew build sonarqube --info"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
 
@@ -162,5 +165,8 @@ jobs:
           SONAR_HOST_URL: \${{ secrets.SONAR_HOST_URL }}
         run: ./gradlew build sonarqube --info"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/JavaMaven-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/JavaMaven-test.tsx.snap
index 6aa14eb97de..2def81470d0 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/JavaMaven-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/JavaMaven-test.tsx.snap
@@ -69,6 +69,9 @@ jobs:
           SONAR_HOST_URL: \${{ secrets.SONAR_HOST_URL }}
         run: mvn -B verify org.sonarsource.scanner.maven:sonar-maven-plugin:sonar"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
 
@@ -140,5 +143,8 @@ jobs:
           SONAR_HOST_URL: \${{ secrets.SONAR_HOST_URL }}
         run: mvn -B verify org.sonarsource.scanner.maven:sonar-maven-plugin:sonar"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/Others-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/Others-test.tsx.snap
index 1f02cbc2cc7..6ecc6c79c53 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/Others-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/__tests__/__snapshots__/Others-test.tsx.snap
@@ -56,6 +56,9 @@ jobs:
       #   env:
       #     SONAR_TOKEN: \${{ secrets.SONAR_TOKEN }}"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
 
@@ -111,5 +114,8 @@ jobs:
       #   env:
       #     SONAR_TOKEN: \${{ secrets.SONAR_TOKEN }}"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
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 6e8e84e2b0b..a6ab708384f 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
@@ -18,11 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { Button } from 'sonar-ui-common/components/controls/buttons';
-import ChevronRightIcon from 'sonar-ui-common/components/icons/ChevronRightIcon';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { translate } from 'sonar-ui-common/helpers/l10n';
-import { rawSizes } from '../../../app/theme';
 import { withCLanguageFeature } from '../../hoc/withCLanguageFeature';
 import RenderOptions from '../components/RenderOptions';
 import Step from '../components/Step';
@@ -44,6 +41,7 @@ export interface JenkinsfileStepProps {
 }
 
 export interface LanguageProps {
+  onDone: () => void;
   component: T.Component;
   baseUrl: string;
 }
@@ -89,14 +87,12 @@ export function JenkinsfileStep(props: JenkinsfileStepProps) {
               )}
             </li>
             {buildTool !== undefined &&
-              React.createElement(BUILDTOOL_COMPONENT_MAP[buildTool], { component, baseUrl })}
+              React.createElement(BUILDTOOL_COMPONENT_MAP[buildTool], {
+                component,
+                baseUrl,
+                onDone: props.onDone
+              })}
           </ol>
-          {buildTool !== undefined && (
-            <Button className="big-spacer-top" onClick={props.onDone}>
-              {translate('tutorials.finish')}
-              <ChevronRightIcon size={rawSizes.baseFontSizeRaw} />
-            </Button>
-          )}
         </div>
       )}
       stepNumber={3}
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 62c25169a1a..f99f6e72527 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
@@ -48,17 +48,9 @@ exports[`should render correctly for .NET 1`] = `
           "tags": Array [],
         }
       }
+      onDone={[MockFunction]}
     />
   </ol>
-  <Button
-    className="big-spacer-top"
-    onClick={[MockFunction]}
-  >
-    tutorials.finish
-    <ChevronRightIcon
-      size={13}
-    />
-  </Button>
 </div>
 `;
 
@@ -110,17 +102,9 @@ exports[`should render correctly for Gradle 1`] = `
           "tags": Array [],
         }
       }
+      onDone={[MockFunction]}
     />
   </ol>
-  <Button
-    className="big-spacer-top"
-    onClick={[MockFunction]}
-  >
-    tutorials.finish
-    <ChevronRightIcon
-      size={13}
-    />
-  </Button>
 </div>
 `;
 
@@ -172,17 +156,9 @@ exports[`should render correctly for Maven 1`] = `
           "tags": Array [],
         }
       }
+      onDone={[MockFunction]}
     />
   </ol>
-  <Button
-    className="big-spacer-top"
-    onClick={[MockFunction]}
-  >
-    tutorials.finish
-    <ChevronRightIcon
-      size={13}
-    />
-  </Button>
 </div>
 `;
 
@@ -234,17 +210,9 @@ exports[`should render correctly for Other 1`] = `
           "tags": Array [],
         }
       }
+      onDone={[MockFunction]}
     />
   </ol>
-  <Button
-    className="big-spacer-top"
-    onClick={[MockFunction]}
-  >
-    tutorials.finish
-    <ChevronRightIcon
-      size={13}
-    />
-  </Button>
 </div>
 `;
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CFamilly.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CFamilly.tsx
index e1af3004dff..40572ef286f 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CFamilly.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CFamilly.tsx
@@ -21,15 +21,12 @@ import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { CompilationInfo } from '../../components/CompilationInfo';
 import DefaultProjectKey from '../../components/DefaultProjectKey';
+import FinishButton from '../../components/FinishButton';
 import RenderOptions from '../../components/RenderOptions';
 import { OSs } from '../../types';
+import { LanguageProps } from '../JenkinsfileStep';
 import CreateJenkinsfileBulletPoint from './CreateJenkinsfileBulletPoint';
 
-export interface CFamillyProps {
-  component: T.Component;
-  baseUrl: string;
-}
-
 const YAML_MAP: Record<OSs, (baseUrl: string) => string> = {
   [OSs.Linux]: baseUrl => `node {
   stage('SCM') {
@@ -104,7 +101,8 @@ const YAML_MAP: Record<OSs, (baseUrl: string) => string> = {
 }`
 };
 
-export default function CFamilly({ baseUrl, component }: CFamillyProps) {
+export default function CFamilly(props: LanguageProps) {
+  const { baseUrl, component } = props;
   const [os, setOs] = React.useState<OSs>();
   return (
     <>
@@ -120,11 +118,14 @@ export default function CFamilly({ baseUrl, component }: CFamillyProps) {
         />
       </li>
       {os && (
-        <CreateJenkinsfileBulletPoint
-          alertTranslationKeyPart="onboarding.tutorial.with.jenkins.jenkinsfile.other.step3"
-          snippet={YAML_MAP[os](baseUrl)}>
-          <CompilationInfo />
-        </CreateJenkinsfileBulletPoint>
+        <>
+          <CreateJenkinsfileBulletPoint
+            alertTranslationKeyPart="onboarding.tutorial.with.jenkins.jenkinsfile.other.step3"
+            snippet={YAML_MAP[os](baseUrl)}>
+            <CompilationInfo />
+          </CreateJenkinsfileBulletPoint>
+          <FinishButton onClick={props.onDone} />
+        </>
       )}
     </>
   );
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNet.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNet.tsx
index 194a04cd58b..2664493f4d1 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNet.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNet.tsx
@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import { translate } from 'sonar-ui-common/helpers/l10n';
+import FinishButton from '../../components/FinishButton';
 import RenderOptions from '../../components/RenderOptions';
 import { OSs } from '../../types';
 import { LanguageProps } from '../JenkinsfileStep';
@@ -39,7 +40,8 @@ const DotOS: { [key in keyof typeof DotNetFlavor]: OSDotNet } = {
   linux_core: OSs.Linux
 };
 
-export default function DotNet({ component }: LanguageProps) {
+export default function DotNet(props: LanguageProps) {
+  const { component } = props;
   const [flavorComponent, setFlavorComponet] = React.useState<keyof typeof DotNetFlavor>();
   const DotNetTutorial = flavorComponent && DotNetFlavor[flavorComponent];
   return (
@@ -55,7 +57,10 @@ export default function DotNet({ component }: LanguageProps) {
         />
       </li>
       {DotNetTutorial && flavorComponent && (
-        <DotNetTutorial component={component} os={DotOS[flavorComponent]} />
+        <>
+          <DotNetTutorial component={component} os={DotOS[flavorComponent]} />
+          <FinishButton onClick={props.onDone} />
+        </>
       )}
     </>
   );
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Gradle.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Gradle.tsx
index 887737f269d..afb53dcee7e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Gradle.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Gradle.tsx
@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import CodeSnippet from '../../../common/CodeSnippet';
+import FinishButton from '../../components/FinishButton';
 import SentenceWithFilename from '../../components/SentenceWithFilename';
 import { buildGradleSnippet } from '../../utils';
 import { LanguageProps } from '../JenkinsfileStep';
@@ -35,7 +36,8 @@ const JENKINSFILE_SNIPPET = `node {
   }
 }`;
 
-export default function Gradle({ component }: LanguageProps) {
+export default function Gradle(props: LanguageProps) {
+  const { component } = props;
   return (
     <>
       <li className="abs-width-600">
@@ -46,6 +48,7 @@ export default function Gradle({ component }: LanguageProps) {
         <CodeSnippet snippet={buildGradleSnippet(component.key)} />
       </li>
       <CreateJenkinsfileBulletPoint snippet={JENKINSFILE_SNIPPET} />
+      <FinishButton onClick={props.onDone} />
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Maven.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Maven.tsx
index b4d5fc5f178..48f0cbd398c 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Maven.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Maven.tsx
@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import CodeSnippet from '../../../common/CodeSnippet';
+import FinishButton from '../../components/FinishButton';
 import SentenceWithFilename from '../../components/SentenceWithFilename';
 import { mavenPomSnippet } from '../../utils';
 import { LanguageProps } from '../JenkinsfileStep';
@@ -36,7 +37,8 @@ const JENKINSFILE_SNIPPET = `node {
   }
 }`;
 
-export default function Maven({ component }: LanguageProps) {
+export default function Maven(props: LanguageProps) {
+  const { component } = props;
   return (
     <>
       <li className="abs-width-600">
@@ -50,6 +52,7 @@ export default function Maven({ component }: LanguageProps) {
         alertTranslationKeyPart="onboarding.tutorial.with.jenkins.jenkinsfile.maven.step3"
         snippet={JENKINSFILE_SNIPPET}
       />
+      <FinishButton onClick={props.onDone} />
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Other.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Other.tsx
index 0656f5d3020..d79d6034a77 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Other.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/Other.tsx
@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import DefaultProjectKey from '../../components/DefaultProjectKey';
+import FinishButton from '../../components/FinishButton';
 import { LanguageProps } from '../JenkinsfileStep';
 import CreateJenkinsfileBulletPoint from './CreateJenkinsfileBulletPoint';
 
@@ -34,7 +35,8 @@ const JENKINSFILE_SNIPPET = `node {
   }
 }`;
 
-export default function Other({ component }: LanguageProps) {
+export default function Other(props: LanguageProps) {
+  const { component } = props;
   return (
     <>
       <DefaultProjectKey component={component} />
@@ -42,6 +44,7 @@ export default function Other({ component }: LanguageProps) {
         alertTranslationKeyPart="onboarding.tutorial.with.jenkins.jenkinsfile.other.step3"
         snippet={JENKINSFILE_SNIPPET}
       />
+      <FinishButton onClick={props.onDone} />
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CFamilly-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CFamilly-test.tsx
index fe4bfbb201c..850cc51fb31 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CFamilly-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/CFamilly-test.tsx
@@ -22,7 +22,8 @@ import * as React from 'react';
 import { mockComponent } from '../../../../../helpers/testMocks';
 import RenderOptions from '../../../components/RenderOptions';
 import { OSs } from '../../../types';
-import CFamilly, { CFamillyProps } from '../CFamilly';
+import { LanguageProps } from '../../JenkinsfileStep';
+import CFamilly from '../CFamilly';
 
 it('should render correctly for', () => {
   expect(shallowRender()).toMatchSnapshot();
@@ -34,8 +35,8 @@ it.each([[OSs.Linux], [OSs.MacOS], [OSs.Windows]])('should render correctly for
   expect(wrapper).toMatchSnapshot(os);
 });
 
-function shallowRender(props: Partial<CFamillyProps> = {}) {
-  return shallow<CFamillyProps>(
-    <CFamilly component={mockComponent()} baseUrl="nice_url_sample" {...props} />
+function shallowRender(props: Partial<LanguageProps> = {}) {
+  return shallow<LanguageProps>(
+    <CFamilly onDone={jest.fn()} component={mockComponent()} baseUrl="nice_url_sample" {...props} />
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/DotNet-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/DotNet-test.tsx
index 778c46cb5df..34fb7885039 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/DotNet-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/DotNet-test.tsx
@@ -28,5 +28,7 @@ it('should render correctly', () => {
 });
 
 function shallowRender(props: Partial<LanguageProps> = {}) {
-  return shallow<LanguageProps>(<DotNet component={mockComponent()} baseUrl="" {...props} />);
+  return shallow<LanguageProps>(
+    <DotNet onDone={jest.fn()} component={mockComponent()} baseUrl="" {...props} />
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Gradle-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Gradle-test.tsx
index d516ed091df..6f3821676f0 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Gradle-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Gradle-test.tsx
@@ -28,5 +28,7 @@ it('should render correctly', () => {
 });
 
 function shallowRender(props: Partial<LanguageProps> = {}) {
-  return shallow<LanguageProps>(<Gradle component={mockComponent()} baseUrl="" {...props} />);
+  return shallow<LanguageProps>(
+    <Gradle onDone={jest.fn()} component={mockComponent()} baseUrl="" {...props} />
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Maven-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Maven-test.tsx
index 7bbf42c309e..4eb619ffd64 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Maven-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Maven-test.tsx
@@ -28,5 +28,7 @@ it('should render correctly', () => {
 });
 
 function shallowRender(props: Partial<LanguageProps> = {}) {
-  return shallow<LanguageProps>(<Maven component={mockComponent()} baseUrl="" {...props} />);
+  return shallow<LanguageProps>(
+    <Maven onDone={jest.fn()} component={mockComponent()} baseUrl="" {...props} />
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Other-test.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Other-test.tsx
index 1e1a8f71392..0916d828d7a 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Other-test.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/Other-test.tsx
@@ -28,5 +28,7 @@ it('should render correctly', () => {
 });
 
 function shallowRender(props: Partial<LanguageProps> = {}) {
-  return shallow<LanguageProps>(<Other component={mockComponent()} baseUrl="" {...props} />);
+  return shallow<LanguageProps>(
+    <Other onDone={jest.fn()} component={mockComponent()} baseUrl="" {...props} />
+  );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/CFamilly-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/CFamilly-test.tsx.snap
index fb390f35e17..8cd9fedca98 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/CFamilly-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/CFamilly-test.tsx.snap
@@ -110,6 +110,9 @@ exports[`should render correctly for linux: linux 1`] = `
   >
     <CompilationInfo />
   </CreateJenkinsfileBulletPoint>
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
 
@@ -183,6 +186,9 @@ exports[`should render correctly for mac: mac 1`] = `
   >
     <CompilationInfo />
   </CreateJenkinsfileBulletPoint>
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
 
@@ -262,5 +268,8 @@ exports[`should render correctly for win: win 1`] = `
   >
     <CompilationInfo />
   </CreateJenkinsfileBulletPoint>
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Gradle-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Gradle-test.tsx.snap
index 1a8cf211bb5..35a3d42c75f 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Gradle-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Gradle-test.tsx.snap
@@ -33,5 +33,8 @@ sonarqube {
   }
 }"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Maven-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Maven-test.tsx.snap
index a619e3b65a0..b8da799365f 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Maven-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Maven-test.tsx.snap
@@ -29,5 +29,8 @@ exports[`should render correctly 1`] = `
   }
 }"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Other-test.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Other-test.tsx.snap
index d77f4bc3a58..29c9141f07e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Other-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/__tests__/__snapshots__/Other-test.tsx.snap
@@ -40,5 +40,8 @@ exports[`should render correctly 1`] = `
   }
 }"
   />
+  <FinishButton
+    onClick={[MockFunction]}
+  />
 </Fragment>
 `;