From 57e3800540955230c9a7f02df588ac5a1c72f712 Mon Sep 17 00:00:00 2001 From: Jeremy Davis Date: Tue, 18 Jul 2023 11:16:29 +0200 Subject: [PATCH] SONAR-19907 New UI for Jenkins tutorial --- .../src/components/CodeSnippet.tsx | 2 +- .../__snapshots__/CodeSnippet-test.tsx.snap | 4 +- .../__tests__/TutorialSelection-it.tsx | 8 - .../components/DefaultProjectKey.tsx | 3 +- .../tutorials/components/LabelValuePair.tsx | 8 +- .../components/SentenceWithFilename.tsx | 2 +- .../tutorials/jenkins/JenkinsTutorial.tsx | 76 +--- .../tutorials/jenkins/JenkinsfileStep.tsx | 105 ++--- .../jenkins/MultiBranchPipelineStep.tsx | 424 +++++++++--------- .../tutorials/jenkins/PipelineStep.tsx | 160 +++---- .../tutorials/jenkins/PreRequisitesStep.tsx | 107 ++--- .../tutorials/jenkins/SelectAlmStep.tsx | 58 +-- .../tutorials/jenkins/WebhookStep.tsx | 49 +- .../jenkins/WebhookStepBitbucket.tsx | 66 ++- .../tutorials/jenkins/WebhookStepGitLab.tsx | 52 ++- .../tutorials/jenkins/WebhookStepGithub.tsx | 45 +- .../jenkins/__tests__/JenkinsTutorial-it.tsx | 61 +-- .../jenkins/buildtool-steps/CFamilly.tsx | 56 +-- .../CreateJenkinsfileBulletPoint.tsx | 77 ++-- .../jenkins/buildtool-steps/DotNet.tsx | 36 +- .../jenkins/buildtool-steps/DotNetCore.tsx | 12 +- .../buildtool-steps/DotNetFramework.tsx | 12 +- .../buildtool-steps/DotNetPrereqsMSBuild.tsx | 42 +- .../buildtool-steps/DotNetPrereqsScanner.tsx | 45 +- .../jenkins/buildtool-steps/Gradle.tsx | 31 +- .../jenkins/buildtool-steps/Maven.tsx | 14 +- .../jenkins/buildtool-steps/Other.tsx | 2 - .../resources/org/sonar/l10n/core.properties | 3 +- 28 files changed, 704 insertions(+), 856 deletions(-) diff --git a/server/sonar-web/design-system/src/components/CodeSnippet.tsx b/server/sonar-web/design-system/src/components/CodeSnippet.tsx index 4e8b57066d9..bf11a5632ba 100644 --- a/server/sonar-web/design-system/src/components/CodeSnippet.tsx +++ b/server/sonar-web/design-system/src/components/CodeSnippet.tsx @@ -71,7 +71,7 @@ export function CodeSnippet(props: Props) { > {!noCopy && copyButton} 
         foo
@@ -408,7 +408,7 @@ exports[`should show reduced size when single line with no editting 1`] = `
       Copy
     
     
       foobar
     
diff --git a/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-it.tsx b/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-it.tsx
index 72f92633148..8824df09ed1 100644
--- a/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-it.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/__tests__/TutorialSelection-it.tsx
@@ -124,7 +124,6 @@ it('should correctly fetch the corresponding ALM setting', async () => {
     .mockResolvedValueOnce([
       { key: 'binding', url: 'https://enterprise.github.com', alm: AlmKeys.GitHub },
     ]);
-  const user = userEvent.setup();
   renderTutorialSelection(
     {
       projectBinding: mockProjectAlmBindingResponse({ alm: AlmKeys.GitHub, key: 'binding' }),
@@ -133,7 +132,6 @@ it('should correctly fetch the corresponding ALM setting', async () => {
   );
   await waitOnDataLoaded();
 
-  await startJenkinsTutorial(user);
   expect(screen.getByText('https://enterprise.github.com', { exact: false })).toBeInTheDocument();
 });
 
@@ -190,12 +188,6 @@ async function startLocalTutorial(user: UserEvent) {
   await user.click(screen.getByRole('radio', { name: 'onboarding.build.maven' }));
 }
 
-async function startJenkinsTutorial(user: UserEvent) {
-  await user.click(
-    screen.getByRole('button', { name: 'onboarding.tutorial.with.jenkins.prereqs.done' })
-  );
-}
-
 function renderTutorialSelection(
   props: Partial> = {},
   navigateTo: string = 'dashboard?id=bar'
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/DefaultProjectKey.tsx b/server/sonar-web/src/main/js/components/tutorials/components/DefaultProjectKey.tsx
index 6303900989e..b2b8bf75909 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/DefaultProjectKey.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/DefaultProjectKey.tsx
@@ -38,7 +38,8 @@ export default function DefaultProjectKey(props: DefaultProjectKeyProps) {
       />
       
     
   );
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/LabelValuePair.tsx b/server/sonar-web/src/main/js/components/tutorials/components/LabelValuePair.tsx
index b3bee6e131b..fee3a456865 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/LabelValuePair.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/LabelValuePair.tsx
@@ -17,8 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { ClipboardIconButton } from 'design-system';
 import * as React from 'react';
-import { ClipboardIconButton } from '../../../components/controls/clipboard';
 import { translate } from '../../../helpers/l10n';
 
 export interface LabelValuePairProps {
@@ -28,9 +28,9 @@ export interface LabelValuePairProps {
 
 export default function LabelValuePair({ translationKey, value }: LabelValuePairProps) {
   return (
-    

-      {translate(translationKey, 'label')}: {value}
-      
+    

+      {translate(translationKey, 'label')}: {value}
+      
     

   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithFilename.tsx b/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithFilename.tsx
index 94aa6f25a07..66babe1170c 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithFilename.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithFilename.tsx
@@ -32,7 +32,7 @@ export default function SentenceWithFilename({
   translationKey,
 }: SentenceWithFilenameProps) {
   return (
-    
+    
       (projectBinding?.alm);
-  const [step, setStep] = React.useState(alm ? Steps.PreRequisites : Steps.SelectAlm);
+  const [done, setDone] = React.useState(false);
 
   return (
     <>
-      

-        
{translate('onboarding.tutorial.with.jenkins.title')}

-      

+      {translate('onboarding.tutorial.with.jenkins.title')}
 
-      {hasSelectAlmStep && (
-         {
-            setAlm(value);
-            setStep(Steps.PreRequisites);
-          }}
-          onOpen={() => setStep(Steps.SelectAlm)}
-        />
-      )}
+      {hasSelectAlmStep && }
 
       {alm && (
         <>
-           Steps.PreRequisites}
-            onDone={() => setStep(Steps.MultiBranchPipeline)}
-            onOpen={() => setStep(Steps.PreRequisites)}
-            open={step === Steps.PreRequisites}
-          />
+          
 
           {branchSupportEnabled ? (
              Steps.MultiBranchPipeline}
-              onDone={() => setStep(Steps.Webhook)}
-              onOpen={() => setStep(Steps.MultiBranchPipeline)}
-              open={step === Steps.MultiBranchPipeline}
               projectBinding={projectBinding}
             />
           ) : (
-             Steps.MultiBranchPipeline}
-              onDone={() => setStep(Steps.Webhook)}
-              onOpen={() => setStep(Steps.MultiBranchPipeline)}
-              open={step === Steps.MultiBranchPipeline}
-            />
+            
           )}
 
            Steps.Webhook}
-            onDone={() => setStep(Steps.Jenkinsfile)}
-            onOpen={() => setStep(Steps.Webhook)}
-            open={step === Steps.Webhook}
             projectBinding={projectBinding}
           />
 
-           Steps.Jenkinsfile}
-            onDone={() => setStep(Steps.AllSet)}
-            onOpen={() => setStep(Steps.Jenkinsfile)}
-            open={step === Steps.Jenkinsfile}
-          />
+          
 
-          
+          {done && (
+            <>
+              
+              
+            
+          )}
         
       )}
     
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 9ecb92389bb..12394ea8705 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
@@ -17,13 +17,12 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { FlagMessage, NumberedList, NumberedListItem, TutorialStep } from 'design-system';
 import * as React from 'react';
-import { Alert } from '../../../components/ui/Alert';
 import { translate } from '../../../helpers/l10n';
 import { Component } from '../../../types/types';
 import { withCLanguageFeature } from '../../hoc/withCLanguageFeature';
 import RenderOptions from '../components/RenderOptions';
-import Step from '../components/Step';
 import { BuildTools } from '../types';
 import CFamilly from './buildtool-steps/CFamilly';
 import DotNet from './buildtool-steps/DotNet';
@@ -31,21 +30,11 @@ import Gradle from './buildtool-steps/Gradle';
 import Maven from './buildtool-steps/Maven';
 import Other from './buildtool-steps/Other';
 
-export interface JenkinsfileStepProps {
-  baseUrl: string;
-  component: Component;
-  hasCLanguageFeature: boolean;
-  finished: boolean;
-  onDone: () => void;
-  onOpen: () => void;
-  open: boolean;
-}
-
-export interface LanguageProps {
-  onDone: () => void;
-  component: Component;
-  baseUrl: string;
-}
+const BUILD_TOOLS_WITH_NO_ADDITIONAL_OPTIONS = [
+  BuildTools.Maven,
+  BuildTools.Gradle,
+  BuildTools.Other,
+];
 
 const BUILDTOOL_COMPONENT_MAP: {
   [x in BuildTools]: React.ComponentType;
@@ -57,48 +46,60 @@ const BUILDTOOL_COMPONENT_MAP: {
   [BuildTools.Other]: Other,
 };
 
+export interface JenkinsfileStepProps {
+  baseUrl: string;
+  component: Component;
+  hasCLanguageFeature: boolean;
+  onDone: (done: boolean) => void;
+}
+
+export interface LanguageProps {
+  onDone: (done: boolean) => void;
+  component: Component;
+  baseUrl: string;
+}
+
 export function JenkinsfileStep(props: JenkinsfileStepProps) {
-  const { component, hasCLanguageFeature, baseUrl, finished, open } = props;
+  const { component, hasCLanguageFeature, baseUrl, onDone } = props;
+
   const [buildTool, setBuildTool] = React.useState();
+
   const buildToolOrder = Object.keys(BUILDTOOL_COMPONENT_MAP);
   if (!hasCLanguageFeature) {
     buildToolOrder.splice(buildToolOrder.indexOf(BuildTools.CFamily), 1);
   }
+
+  const BuildToolComponent = buildTool ? BUILDTOOL_COMPONENT_MAP[buildTool] : undefined;
+
+  React.useEffect(() => {
+    if (buildTool && BUILD_TOOLS_WITH_NO_ADDITIONAL_OPTIONS.includes(buildTool)) {
+      onDone(true);
+    }
+  }, [buildTool, onDone]);
+
   return (
-     (
-        

-          
    
-            
  1. 
-              {translate('onboarding.build')}
-               setBuildTool(value as BuildTools)}
-                optionLabelKey="onboarding.build"
-                options={buildToolOrder}
-              />
-              {buildTool === BuildTools.CFamily && (
-                
-                  {translate('onboarding.tutorial.with.jenkins.jenkinsfile.cfamilly.agent_setup')}
-                
-              )}
-            
    2. 
-            {buildTool !== undefined &&
-              React.createElement(BUILDTOOL_COMPONENT_MAP[buildTool], {
-                component,
-                baseUrl,
-                onDone: props.onDone,
-              })}
-          

-        

-      )}
-      stepNumber={3}
-      stepTitle={translate('onboarding.tutorial.with.jenkins.jenkinsfile.title')}
-    />
+    
+      
+        
+          {translate('onboarding.build')}
+           setBuildTool(value as BuildTools)}
+            optionLabelKey="onboarding.build"
+            options={buildToolOrder}
+          />
+          {buildTool === BuildTools.CFamily && (
+            
+              {translate('onboarding.tutorial.with.jenkins.jenkinsfile.cfamilly.agent_setup')}
+            
+          )}
+        
+        {BuildToolComponent !== undefined && (
+          
+        )}
+      
+    
   );
 }
 
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx
index bab33765bd7..5907b2baf59 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/MultiBranchPipelineStep.tsx
@@ -17,46 +17,46 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import {
+  CodeSnippet,
+  ListItem,
+  NumberedList,
+  NumberedListItem,
+  TutorialStep,
+  UnorderedList,
+} from 'design-system';
 import * as React from 'react';
-import { rawSizes } from '../../../app/theme';
-import { Button } from '../../../components/controls/buttons';
-import ChevronRightIcon from '../../../components/icons/ChevronRightIcon';
 import { translate } from '../../../helpers/l10n';
 import {
   AlmKeys,
   AlmSettingsInstance,
   ProjectAlmBindingResponse,
 } from '../../../types/alm-settings';
-import CodeSnippet from '../../common/CodeSnippet';
 import LabelActionPair from '../components/LabelActionPair';
 import LabelValuePair from '../components/LabelValuePair';
 import SentenceWithHighlights from '../components/SentenceWithHighlights';
-import Step from '../components/Step';
 import { buildGithubLink } from '../utils';
 
 export interface MultiBranchPipelineStepProps {
   alm: AlmKeys;
   almBinding?: AlmSettingsInstance;
-  finished: boolean;
-  onDone: () => void;
-  onOpen: () => void;
-  open: boolean;
+
   projectBinding?: ProjectAlmBindingResponse;
 }
 
 /* Capture [workspaceID] from this pattern: https://bitbucket.org/[workspaceId]/  */
-const bitbucketcloudUrlRegex = new RegExp('https:\\/\\/bitbucket.org\\/(.+)\\/');
+const bitbucketcloudUrlRegex = /https:\/\/bitbucket.org\/(.+)\//;
 
 function extractBitbucketCloudWorkspaceId(almBinding?: AlmSettingsInstance): string | undefined {
   if (almBinding?.url) {
-    const result = almBinding.url.match(bitbucketcloudUrlRegex);
+    const result = bitbucketcloudUrlRegex.exec(almBinding.url);
 
     return result ? result[1] : undefined;
   }
 }
 
 export default function MultiBranchPipelineStep(props: MultiBranchPipelineStepProps) {
-  const { alm, almBinding, finished, open, projectBinding } = props;
+  const { alm, almBinding, projectBinding } = props;
 
   const workspaceId = extractBitbucketCloudWorkspaceId(almBinding);
   const isGitLab = alm === AlmKeys.GitLab;
@@ -64,221 +64,197 @@ export default function MultiBranchPipelineStep(props: MultiBranchPipelineStepPr
   const isBitbucketCloud = alm === AlmKeys.BitbucketCloud;
   const isGitHub = alm === AlmKeys.GitHub;
 
-  const renderForm = React.useCallback(
-    () => (
-      

-        

-          {translate('onboarding.tutorial.with.jenkins.multi_branch_pipeline.intro')}
-        

-        
    
-          
  1. 
-            
-          
    2. 
-          
  2. 
-            
-            
      
-              {isBitbucketServer && (
-                <>
-                  
    • 
-                    
-                  
      • 
-                  
    • 
-                    
-                  
      • 
-                  
    • 
-                    {projectBinding?.repository ? (
-                      
-                    ) : (
-                      
-                    )}
-                  
      • 
-                  
    • 
-                    {projectBinding?.slug ? (
-                      
-                    ) : (
-                      
+  return (
+    
+      
      
+        {translate('onboarding.tutorial.with.jenkins.multi_branch_pipeline.intro')}
+      
      
+      
+        
+          
+        
+        
+          
+          
+            {isBitbucketServer && (
+              <>
+                
+                  
+                
+                
+                  
+                
+                
+                  {projectBinding?.repository ? (
+                    
+                  ) : (
+                    
+                  )}
+                
+                
+                  {projectBinding?.slug ? (
+                    
+                  ) : (
+                    
+                  )}
+                
+              
+            )}
+            {isBitbucketCloud && (
+              <>
+                
+                  
+                
+                
+                  
+                
+                
+                  {workspaceId ? (
+                    
+                  ) : (
+                    
+                  )}
+                
+                
+                  {projectBinding?.repository ? (
+                    
+                  ) : (
+                    
+                  )}
+                
+              
+            )}
+            {isGitHub && (
+              <>
+                
+                  
+                
+                
+                  {almBinding !== undefined &&
+                  projectBinding !== undefined &&
+                  buildGithubLink(almBinding, projectBinding) !== null ? (
+                    
+                  ) : (
+                    
+                  )}
+                
+              
+            )}
+            {isGitLab && (
+              <>
+                
+                  
+                
+                
+                  
+                
+                
+                  
+                
+              
+            )}
+            
+              
+                {translate(
+                  'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label'
+                )}
+                :
+              
+              
+                
+                  
+                
+                
+                  
+                
+                
+                  
+                    {translate(
+                      'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.label'
                     )}
-                  
      • 
-                
-              )}
-              {isBitbucketCloud && (
-                <>
-                  
    • 
-                    
-                  
      • 
-                  
    • 
-                    
-                  
      • 
-                  
    • 
-                    {workspaceId ? (
-                      
+                  
+                    
+                      
-                    ) : (
-                      
-                    )}
-                  
      • 
-                  
    • 
-                    {projectBinding?.repository ? (
-                      
+                    
+                      
-                    ) : (
-                      
-                    )}
-                  
      • 
-                
-              )}
-              {isGitHub && (
-                <>
-                  
    • 
-                    
-                  
      • 
-                  
    • 
-                    {almBinding !== undefined &&
-                    projectBinding !== undefined &&
-                    buildGithubLink(almBinding, projectBinding) !== null ? (
-                      
-                    ) : (
-                      
-                    )}
-                  
      • 
-                
-              )}
-              {isGitLab && (
-                <>
-                  
    • 
-                    
-                  
      • 
-                  
    • 
-                    
-                  
      • 
-                  
    • 
-                    
-                  
      • 
-                
-              )}
-              
    • 
-                
-                  {translate(
-                    'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.label'
-                  )}
-                  :
-                
-                
        
-                  
      1. 
-                    
-                  
        2. 
-                  
      2. 
-                    
-                  
        3. 
-                  
      3. 
-                    
-                      {translate(
-                        'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.behaviors.ref_specs.label'
-                      )}
-                      :
-                    
-                    
          
-                      
        • 
-                        
-                      
          • 
-                      
        • 
-                        
-                        
-                      
          • 
-                    
        
-                  
        4. 
-                
      
-              
      • 
-            
    
-            
    
-              {translate(
-                'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.leave_defaults'
-              )}
-            
    
-          
    3. 
-          
  3. 
-            
-            
      
-              
    • 
-                
-              
      • 
-              
    • 
-                
-              
      • 
-            
    
-          
    4. 
-          
  4. 
-            
-          
    5. 
-        

-        
-      

-    ),
-    [
-      isBitbucketCloud,
-      isBitbucketServer,
-      isGitHub,
-      isGitLab,
-      workspaceId,
-      alm,
-      projectBinding,
-      almBinding,
-      props.onDone,
-    ]
-  );
-
-  return (
-    
+                    
+                  
+                
+              
+            
+          
+          

+            {translate(
+              'onboarding.tutorial.with.jenkins.multi_branch_pipeline.step2.leave_defaults'
+            )}
+          

+        
+        
+          
+          
+            
+              
+            
+            
+              
+            
+          
+        
+        
+          
+        
+      
+    
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/PipelineStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/PipelineStep.tsx
index 03989c36c66..6bf868cbc44 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/PipelineStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/PipelineStep.tsx
@@ -17,113 +17,97 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import {
+  ListItem,
+  NumberedList,
+  NumberedListItem,
+  TutorialStep,
+  UnorderedList,
+} from 'design-system';
 import * as React from 'react';
-import { rawSizes } from '../../../app/theme';
-import { Button } from '../../../components/controls/buttons';
-import ChevronRightIcon from '../../../components/icons/ChevronRightIcon';
 import { translate } from '../../../helpers/l10n';
 import { AlmKeys } from '../../../types/alm-settings';
 import LabelActionPair from '../components/LabelActionPair';
 import SentenceWithHighlights from '../components/SentenceWithHighlights';
-import Step from '../components/Step';
 
 export interface PipelineStepProps {
   alm: AlmKeys;
-  finished: boolean;
-  onDone: () => void;
-  onOpen: () => void;
-  open: boolean;
 }
 
 export default function PipelineStep(props: PipelineStepProps) {
-  const { alm, finished, open } = props;
+  const { alm } = props;
   return (
-     (
-        

-          

-            {translate('onboarding.tutorial.with.jenkins.pipeline.intro')}
-          

-          
    
-            
  1. 
+    
+      
    {translate('onboarding.tutorial.with.jenkins.pipeline.intro')}
    
+      
+        
+          
+        
+        
+          {alm === AlmKeys.GitLab ? (
+            <>
               
-            
    2. 
-            
  2. 
-              {alm === AlmKeys.GitLab ? (
-                <>
+              
+                
                   
-                  
      
-                    
    • 
-                      
-                    
      • 
-                    
    • 
-                      
-                    
      • 
-                    
    • 
-                      
-                    
      • 
-                  
    
-                
-              ) : (
-                
-              )}
-            
    3. 
-            
  3. 
-              
-              
      
-                
    • 
-                  
-                
      • 
-                
    • 
+                
+                
+                  
+                
+                
                   
-                
      • 
-                
    • 
-                  
-                
      • 
-              
    
-            
    4. 
-            
  4. 
+                
+              
+            
+          ) : (
+            
+          )}
+        
+        
+          
+          
+            
+              
+            
+            
               
-            
    5. 
-          

-          
-        

-      )}
-      stepNumber={1}
-      stepTitle={translate('onboarding.tutorial.with.jenkins.pipeline.title')}
-    />
+            
+            
+              
+            
+          
+        
+        
+          
+        
+      
+    
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx
index 66b40aeee7d..bbce2f6f1f8 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/PreRequisitesStep.tsx
@@ -17,78 +17,65 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { FlagMessage, Link, ListItem, TutorialStep, UnorderedList } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { rawSizes } from '../../../app/theme';
-import { Button } from '../../../components/controls/buttons';
-import ChevronRightIcon from '../../../components/icons/ChevronRightIcon';
-import { Alert } from '../../../components/ui/Alert';
+import { useDocUrl } from '../../../helpers/docs';
 import { translate } from '../../../helpers/l10n';
 import { AlmKeys } from '../../../types/alm-settings';
-import DocLink from '../../common/DocLink';
 import SentenceWithHighlights from '../components/SentenceWithHighlights';
-import Step from '../components/Step';
 
 export interface PreRequisitesStepProps {
   alm: AlmKeys;
   branchesEnabled: boolean;
-  finished: boolean;
-  onDone: () => void;
-  onOpen: () => void;
-  open: boolean;
 }
 
 export default function PreRequisitesStep(props: PreRequisitesStepProps) {
-  const { alm, branchesEnabled, finished, open } = props;
+  const { alm, branchesEnabled } = props;
+
+  const docUrl = useDocUrl();
+
   return (
-     (
-        

-          
-            
-          
-          
    
-            {branchesEnabled && (
-              
  • 
-                {translate('onboarding.tutorial.with.jenkins.prereqs.plugins.branch_source', alm)}
-              
    • 
-            )}
-            {!branchesEnabled && alm === AlmKeys.GitLab && (
-              
  • {translate('onboarding.tutorial.with.jenkins.prereqs.plugins.gitlab_plugin')}
    • 
-            )}
-            
  • {translate('onboarding.tutorial.with.jenkins.prereqs.plugins.sonar_scanner')}
    • 
-          

-          

-            
-                    {translate('onboarding.tutorial.with.jenkins.prereqs.step_by_step_guide.link')}
-                  
-                ),
-              }}
-            />
-          

-          

-            {translate('onboarding.tutorial.with.jenkins.prereqs.following_are_recommendations')}
-          

-          
-        

-      )}
-      stepTitle={translate('onboarding.tutorial.with.jenkins.prereqs.title')}
-    />
+    
+      
+        
+          
+        
+      
+      
+        {branchesEnabled && (
+          
+            {translate('onboarding.tutorial.with.jenkins.prereqs.plugins.branch_source', alm)}
+          
+        )}
+        {!branchesEnabled && alm === AlmKeys.GitLab && (
+          
+            {translate('onboarding.tutorial.with.jenkins.prereqs.plugins.gitlab_plugin')}
+          
+        )}
+        
+          {translate('onboarding.tutorial.with.jenkins.prereqs.plugins.sonar_scanner')}
+        
+      
+      

+        
+                {translate('onboarding.tutorial.with.jenkins.prereqs.step_by_step_guide.link')}
+              
+            ),
+          }}
+        />
+      

+      

+        {translate('onboarding.tutorial.with.jenkins.prereqs.following_are_recommendations')}
+      

+    
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/SelectAlmStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/SelectAlmStep.tsx
index 7be3688d5bf..40dd9773602 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/SelectAlmStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/SelectAlmStep.tsx
@@ -17,18 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { ToggleButton, TutorialStep } from 'design-system';
 import * as React from 'react';
-import AlertSuccessIcon from '../../../components/icons/AlertSuccessIcon';
 import { hasMessage, translate } from '../../../helpers/l10n';
 import { AlmKeys } from '../../../types/alm-settings';
-import ButtonToggle from '../../controls/ButtonToggle';
-import Step from '../components/Step';
 
 export interface SelectAlmStepProps {
   alm?: AlmKeys;
-  open: boolean;
-  onCheck: (value: AlmKeys) => void;
-  onOpen: () => void;
+  onChange: (value: AlmKeys) => void;
 }
 
 function getAlmLongName(alm: AlmKeys) {
@@ -36,39 +32,23 @@ function getAlmLongName(alm: AlmKeys) {
 }
 
 export default function SelectAlmStep(props: SelectAlmStepProps) {
-  const { alm, open } = props;
+  const { alm } = props;
   return (
-     (
-        

-           ({
-              label: getAlmLongName(almKey),
-              value: almKey,
-            }))}
-            value={alm}
-          />
-        

-      )}
-      renderResult={() =>
-        alm && (
-          

-            
-            {getAlmLongName(alm)}
-          

-        )
-      }
-      stepTitle={translate('onboarding.tutorial.with.jenkins.alm_selection.title')}
-    />
+    
+       ({
+          label: getAlmLongName(almKey),
+          value: almKey,
+        }))}
+        value={alm}
+      />
+    
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStep.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStep.tsx
index 1d7f6874d7f..5dd15fe8374 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStep.tsx
@@ -19,30 +19,22 @@
  */
 /* eslint-disable react/no-unused-prop-types */
 
+import { NumberedList, TutorialStep } from 'design-system';
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { rawSizes } from '../../../app/theme';
-import { Button, ButtonLink } from '../../../components/controls/buttons';
-import ChevronRightIcon from '../../../components/icons/ChevronRightIcon';
 import { translate } from '../../../helpers/l10n';
 import {
   AlmKeys,
   AlmSettingsInstance,
   ProjectAlmBindingResponse,
 } from '../../../types/alm-settings';
-import Step from '../components/Step';
 import WebhookStepBitbucket from './WebhookStepBitbucket';
-import WebhookStepGithub from './WebhookStepGithub';
 import WebhookStepGitLab from './WebhookStepGitLab';
+import WebhookStepGithub from './WebhookStepGithub';
 
 export interface WebhookStepProps {
   alm: AlmKeys;
   almBinding?: AlmSettingsInstance;
   branchesEnabled: boolean;
-  finished: boolean;
-  onDone: () => void;
-  onOpen: () => void;
-  open: boolean;
   projectBinding?: ProjectAlmBindingResponse;
 }
 
@@ -79,37 +71,14 @@ function renderAlmSpecificInstructions(props: WebhookStepProps) {
 }
 
 export default function WebhookStep(props: WebhookStepProps) {
-  const { alm, finished, open } = props;
+  const { alm } = props;
 
   return (
-     (
-        

-          

-            
-                    {translate('onboarding.tutorial.with.jenkins.webhook.intro.link')}
-                  
-                ),
-              }}
-            />
-          

-          
    {renderAlmSpecificInstructions(props)}

-          
-        

-      )}
-      stepNumber={2}
-      stepTitle={translate('onboarding.tutorial.with.jenkins.webhook', alm, 'title')}
-    />
+    
+      

+        {translate('onboarding.tutorial.with.jenkins.webhook.intro.sentence')}
+      

+      {renderAlmSpecificInstructions(props)}
+    
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
index 069451b99ee..63ff06f5c79 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepBitbucket.tsx
@@ -17,9 +17,9 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { CodeSnippet, FlagMessage, ListItem, NumberedListItem, UnorderedList } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Alert } from '../../../components/ui/Alert';
 import { translate } from '../../../helpers/l10n';
 import { stripTrailingSlash } from '../../../helpers/urls';
 import {
@@ -27,7 +27,6 @@ import {
   AlmSettingsInstance,
   ProjectAlmBindingResponse,
 } from '../../../types/alm-settings';
-import CodeSnippet from '../../common/CodeSnippet';
 import Link from '../../common/Link';
 import LabelActionPair from '../components/LabelActionPair';
 import SentenceWithHighlights from '../components/SentenceWithHighlights';
@@ -74,7 +73,7 @@ export default function WebhookStepBitbucket(props: WebhookStepBitbucketProps) {
 
   return (
     <>
-      
  • 
+      
         
-        
      
-          
    • 
+        
+          
             
-          
      • 
-          
    • 
+          
+          
             
      
               
             
      
             
             {branchesEnabled && !isBitbucketCloud && (
-              
+              
                 {translate('onboarding.tutorial.with.jenkins.webhook.bitbucket.step1.url.warning')}
-              
+              
             )}
-          
      • 
-        
    
-      
    • 
+          
+        
+      
       {isBitbucketCloud ? (
-        
  • 
+        
           
-          
      
-            
    • 
+          
+            
               
-            
      • 
+            
             {branchesEnabled && (
-              
    • 
+              
                 
-              
      • 
+              
             )}
-          
    
-        
    • 
+          
+        
       ) : (
-        
  • 
+        
           
-          
      
-            
    • 
+          
+            
               
-            
      • 
+            
             {branchesEnabled && (
-              
    • 
+              
                 
-              
      • 
+              
             )}
-          
    
-        
    • 
+          
+        
       )}
-      
  • 
+      
         {isBitbucketCloud ? (
           
         )}
-      
    • 
+      
     
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGitLab.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGitLab.tsx
index 5bc211ab7be..883d086041c 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGitLab.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGitLab.tsx
@@ -17,10 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { CodeSnippet, ListItem, NumberedListItem, UnorderedList } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { translate } from '../../../helpers/l10n';
-import CodeSnippet from '../../common/CodeSnippet';
 import LabelActionPair from '../components/LabelActionPair';
 import SentenceWithHighlights from '../components/SentenceWithHighlights';
 
@@ -31,7 +31,7 @@ export interface WebhookStepGitLabProps {
 export default function WebhookStepGitLab({ branchesEnabled }: WebhookStepGitLabProps) {
   return (
     <>
-      
  • 
+      
         
-        
      
+        
           {branchesEnabled ? (
-            
    • 
+            
               
      
                 
               
      
-              
-            
      • 
+              
+            
           ) : (
             <>
-              
    • 
+              
                 
-              
      • 
-              
    • 
+              
+              
                 
-              
      • 
+              
             
           )}
-        
    
-      
    • 
-      
  • 
+        
+      
+      
         
-        
      
-          
    • 
-            
+        
+          
+            
               {translate('onboarding.tutorial.with.jenkins.webhook.gitlab.step2.repo')}
             
-          
      • 
+          
           {branchesEnabled && (
-            
    • 
-              
+            
+              
                 {translate('onboarding.tutorial.with.jenkins.webhook.gitlab.step2.mr')}
               
-            
      • 
+            
           )}
-        
    
-      
    • 
-      
  • 
+        
+      
+      
         
-      
    • 
+      
     
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGithub.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGithub.tsx
index 624e6336aef..bea0464256e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGithub.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/WebhookStepGithub.tsx
@@ -17,12 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { CodeSnippet, Link, ListItem, NumberedListItem, UnorderedList } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { translate } from '../../../helpers/l10n';
 import { AlmSettingsInstance, ProjectAlmBindingResponse } from '../../../types/alm-settings';
-import CodeSnippet from '../../common/CodeSnippet';
-import Link from '../../common/Link';
 import LabelActionPair from '../components/LabelActionPair';
 import SentenceWithHighlights from '../components/SentenceWithHighlights';
 import { buildGithubLink } from '../utils';
@@ -45,57 +44,57 @@ export default function WebhookStepGithub(props: WebhookStepGithubProps) {
 
   return (
     <>
-      
  • 
+      
         
+              
                 {translate('onboarding.tutorial.with.jenkins.webhook.github.step1.link')}
               
             ) : (
-              
+              
                 {translate('onboarding.tutorial.with.jenkins.webhook.github.step1.link')}
               
             ),
           }}
         />
-        
      
-          
    • 
+        
+          
             
      
               
             
      
-            
-          
      • 
-        
    
-      
    • 
-      
  • 
+            
+          
+        
+      
+      
         
-        
      
-          
    • 
-            
+        
+          
+            
               {translate('onboarding.tutorial.with.jenkins.webhook.github.step2.repo')}
             
-          
      • 
+          
           {branchesEnabled && (
-            
    • 
-              
+            
+              
                 {translate('onboarding.tutorial.with.jenkins.webhook.github.step2.pr')}
               
-            
      • 
+            
           )}
-        
    
-      
    • 
-      
  • 
+        
+      
+      
         
-      
    • 
+      
     
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsTutorial-it.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsTutorial-it.tsx
index fd1378270cf..d68683744d3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsTutorial-it.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/__tests__/JenkinsTutorial-it.tsx
@@ -50,13 +50,10 @@ const ui = {
   devopsPlatformTitle: byRole('heading', {
     name: 'onboarding.tutorial.with.jenkins.alm_selection.title',
   }),
-  devopsPlatformButton: (alm: AlmKeys) => byRole('button', { name: `alm.${alm}.long` }),
+  devopsPlatformButton: (alm: AlmKeys) => byRole('radio', { name: `alm.${alm}.long` }),
   prerequisitesTitle: byRole('heading', { name: 'onboarding.tutorial.with.jenkins.prereqs.title' }),
   branchSourcePluginBulletPoint: (alm: AlmKeys) =>
     byText(`onboarding.tutorial.with.jenkins.prereqs.plugins.branch_source.${alm}`),
-  configureAnalysisButton: byRole('button', {
-    name: 'onboarding.tutorial.with.jenkins.prereqs.done',
-  }),
   multiBranchStepTitle: byRole('heading', {
     name: 'onboarding.tutorial.with.jenkins.multi_branch_pipeline.title',
   }),
@@ -98,65 +95,60 @@ it.each([AlmKeys.BitbucketCloud, AlmKeys.BitbucketServer, AlmKeys.GitHub, AlmKey
     // 2. Prerequisites
     expect(ui.branchSourcePluginBulletPoint(alm).get()).toBeInTheDocument();
 
-    await user.click(ui.configureAnalysisButton.get());
-
     // 3. Multibranch Pipeline Job
     expect(ui.multiBranchPipelineSecondListItem(alm).get()).toBeInTheDocument();
-    expect(getCopyToClipboardValue()).toMatchSnapshot(`ref spec`);
-
-    await user.click(ui.continueButton.get());
+    expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot(`ref spec`);
 
     // 4. Create DevOps platform webhook
     expect(ui.webhookStepTitle(alm).get()).toBeInTheDocument();
-    expect(getCopyToClipboardValue()).toMatchSnapshot(`jenkins url`);
-
-    await user.click(ui.continueButton.get());
+    expect(getCopyToClipboardValue(1, 'Copy')).toMatchSnapshot(`jenkins url`);
 
     // 5. Create jenkinsfile
     // Maven
     await user.click(ui.mavenBuildButton.get());
-    expect(getCopyToClipboardValue()).toMatchSnapshot(`maven jenkinsfile`);
+    expect(getCopyToClipboardValue(2, 'Copy')).toMatchSnapshot(`maven jenkinsfile`);
 
     // Gradle (Groovy)
     await user.click(ui.gradleBuildButton.get());
-    expect(getCopyToClipboardValue()).toMatchSnapshot(`Groovy: build.gradle file`);
+    expect(getCopyToClipboardValue(2, 'Copy')).toMatchSnapshot(`Groovy: build.gradle file`);
     // Gradle(Kotlin)
     await user.click(ui.gradleDSLButton(GradleBuildDSL.Kotlin).get());
-    expect(getCopyToClipboardValue()).toMatchSnapshot(`Kotlin: build.gradle.kts file`);
-    expect(getCopyToClipboardValue(1)).toMatchSnapshot(`gradle jenkinsfile`);
+    expect(getCopyToClipboardValue(2, 'Copy')).toMatchSnapshot(`Kotlin: build.gradle.kts file`);
+    expect(getCopyToClipboardValue(3, 'Copy')).toMatchSnapshot(`gradle jenkinsfile`);
 
     // .NET
     await user.click(ui.dotnetBuildButton.get());
     await user.click(ui.windowsDotnetCoreButton.get());
-    expect(getCopyToClipboardValue(1)).toMatchSnapshot(`windows dotnet core jenkinsfile`);
+    expect(getCopyToClipboardValue(2, 'Copy')).toMatchSnapshot(`windows dotnet core jenkinsfile`);
 
     await user.click(ui.windowsDotnetFrameworkButton.get());
-    expect(getCopyToClipboardValue(2)).toMatchSnapshot(`windows dotnet framework jenkinsfile`);
+    expect(getCopyToClipboardValue(2, 'Copy')).toMatchSnapshot(
+      `windows dotnet framework jenkinsfile`
+    );
 
     await user.click(ui.linuxDotnetCoreButton.get());
-    expect(getCopyToClipboardValue(1)).toMatchSnapshot(`linux dotnet core jenkinsfile`);
+    expect(getCopyToClipboardValue(2, 'Copy')).toMatchSnapshot(`linux dotnet core jenkinsfile`);
 
     // CFamilly
     await user.click(ui.cFamilyBuildButton.get());
-    expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot(`sonar-project.properties code`);
+    expect(getCopyToClipboardValue(2, 'Copy')).toMatchSnapshot(`sonar-project.properties code`);
 
     await user.click(ui.linuxButton.get());
-    expect(getCopyToClipboardValue()).toMatchSnapshot(`cfamily linux jenkinsfile`);
+    expect(getCopyToClipboardValue(3, 'Copy')).toMatchSnapshot(`cfamily linux jenkinsfile`);
 
     await user.click(ui.windowsButton.get());
-    expect(getCopyToClipboardValue()).toMatchSnapshot(`cfamily windows jenkinsfile`);
+    expect(getCopyToClipboardValue(3, 'Copy')).toMatchSnapshot(`cfamily windows jenkinsfile`);
 
     await user.click(ui.macosButton.get());
-    expect(getCopyToClipboardValue()).toMatchSnapshot(`cfamily macos jenkinsfile`);
+    expect(getCopyToClipboardValue(3, 'Copy')).toMatchSnapshot(`cfamily macos jenkinsfile`);
 
     // Other
     await user.click(ui.otherBuildButton.get());
-    expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot(
+    expect(getCopyToClipboardValue(2, 'Copy')).toMatchSnapshot(
       `other build tools sonar-project.properties code`
     );
-    expect(getCopyToClipboardValue()).toMatchSnapshot(`other build tools jenkinsfile`);
+    expect(getCopyToClipboardValue(3, 'Copy')).toMatchSnapshot(`other build tools jenkinsfile`);
 
-    await user.click(ui.finishTutorialButton.get());
     expect(ui.allSetSentence.get()).toBeInTheDocument();
   }
 );
@@ -169,13 +161,7 @@ it.each([AlmKeys.GitHub, AlmKeys.GitLab, AlmKeys.BitbucketCloud])(
 
     expect(await ui.devopsPlatformTitle.find()).toBeInTheDocument();
     await user.click(ui.devopsPlatformButton(alm).get());
-    await user.click(ui.configureAnalysisButton.get());
     expect(ui.pipelineIntroText.get()).toBeInTheDocument();
-    await user.click(ui.continueButton.get());
-    // navigate back and forth
-    await user.click(ui.pipelineStepTitle.get());
-    await user.click(ui.continueButton.get());
-    expect(ui.webhookStepIntroSentence.get()).toBeInTheDocument();
   }
 );
 
@@ -199,14 +185,8 @@ it.each([AlmKeys.GitHub, AlmKeys.BitbucketCloud])(
 
     expect(ui.devopsPlatformTitle.query()).not.toBeInTheDocument();
 
-    await user.click(ui.configureAnalysisButton.get());
-    await user.click(ui.continueButton.get());
-
     expect(ui.webhookAlmLink(alm).get()).toBeInTheDocument();
-
-    await user.click(ui.continueButton.get());
     await user.click(ui.mavenBuildButton.get());
-    await user.click(ui.finishTutorialButton.get());
     expect(ui.allSetSentence.get()).toBeInTheDocument();
   }
 );
@@ -216,11 +196,7 @@ it('navigates between steps', async () => {
   renderJenkinsTutorial();
 
   await user.click(ui.devopsPlatformButton(AlmKeys.GitHub).get());
-  await user.click(ui.configureAnalysisButton.get());
-  await user.click(ui.continueButton.get());
-  await user.click(ui.continueButton.get());
   await user.click(ui.mavenBuildButton.get());
-  await user.click(ui.finishTutorialButton.get());
   expect(ui.allSetSentence.get()).toBeInTheDocument();
 
   // Navigate back
@@ -234,7 +210,6 @@ it('navigates between steps', async () => {
   expect(ui.multiBranchPipelineSecondListItem(AlmKeys.GitHub).get()).toBeInTheDocument();
 
   await user.click(ui.prerequisitesTitle.get());
-  expect(ui.configureAnalysisButton.get()).toBeInTheDocument();
 
   await user.click(ui.devopsPlatformTitle.get());
   expect(ui.devopsPlatformButton(AlmKeys.BitbucketCloud).get()).toBeInTheDocument();
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 8bbd6f71141..ca17d2de1fd 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
@@ -17,11 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { NumberedListItem } from 'design-system/lib';
 import * as React from 'react';
 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, TutorialModes } from '../../types';
@@ -103,38 +103,42 @@ const YAML_MAP: Record string> = {
 };
 
 export default function CFamilly(props: LanguageProps) {
-  const { baseUrl, component } = props;
+  const { baseUrl, component, onDone } = props;
   const [os, setOs] = React.useState();
+
+  React.useEffect(() => {
+    onDone(os !== undefined);
+  }, [os, onDone]);
+
   return (
     <>
       
-      
  • 
+      
         {translate('onboarding.build.other.os')}
-         setOs(value as OSs)}
-          options={Object.values(OSs)}
-        />
-        {os && (
-          
+           setOs(value as OSs)}
+            options={Object.values(OSs)}
           />
-        )}
-      
    • 
+          {os && (
+            
+          )}
+        
    
+      
       {os && (
-        <>
-          
-            
-          
-          
-        
+        
+          
+        
       )}
     
   );
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CreateJenkinsfileBulletPoint.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CreateJenkinsfileBulletPoint.tsx
index f1df6ad3070..ba4930155f9 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CreateJenkinsfileBulletPoint.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/CreateJenkinsfileBulletPoint.tsx
@@ -17,61 +17,62 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { CodeSnippet, FlagMessage, HelperHintIcon, NumberedListItem } from 'design-system';
 import * as React from 'react';
 import HelpTooltip from '../../../../components/controls/HelpTooltip';
-import { Alert } from '../../../../components/ui/Alert';
-import CodeSnippet from '../../../common/CodeSnippet';
 import SentenceWithFilename from '../../components/SentenceWithFilename';
 import SentenceWithHighlights from '../../components/SentenceWithHighlights';
 
 export interface CreateJenkinsfileBulletPointProps {
   alertTranslationKeyPart?: string;
   children?: React.ReactNode;
-  otherAlert?: JSX.Element;
   snippet: string;
 }
 
 export default function CreateJenkinsfileBulletPoint(props: CreateJenkinsfileBulletPointProps) {
-  const { children, snippet, alertTranslationKeyPart, otherAlert } = props;
+  const { children, snippet, alertTranslationKeyPart } = props;
 
   return (
-    
  • 
+    
       
-      {alertTranslationKeyPart && (
-        
-          
    
-            
-            
-                  
    
-                    
-                  
    
-                  
    
-                    
-                  
    
-                
-              }
-            />
-            {otherAlert}
-          
    
-            
-      )}
-      
-      {children}
-    
    • 
+      
    
+        {alertTranslationKeyPart && (
+          
+            
    
+              
+              
+                    
    
+                      
+                    
    
+                    
    
+                      
+                    
    
+                  
+                }
+              >
+                
+                  
+            
    
+              
+        )}
+        
+        {children}
+      
    
+    
   );
 }
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 a38208f9f3f..d39dfed053f 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
@@ -17,10 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { NumberedListItem } from 'design-system/lib';
 import * as React from 'react';
 import { translate } from '../../../../helpers/l10n';
 import { Component } from '../../../../types/types';
-import FinishButton from '../../components/FinishButton';
 import RenderOptions from '../../components/RenderOptions';
 import { OSs } from '../../types';
 import { LanguageProps } from '../JenkinsfileStep';
@@ -42,26 +42,30 @@ const DotOS: { [key in keyof typeof DotNetFlavor]: OSDotNet } = {
 };
 
 export default function DotNet(props: LanguageProps) {
-  const { component } = props;
-  const [flavorComponent, setFlavorComponet] = React.useState();
+  const { component, onDone } = props;
+  const [flavorComponent, setFlavorComponent] = React.useState();
   const DotNetTutorial = flavorComponent && DotNetFlavor[flavorComponent];
+
+  React.useEffect(() => {
+    onDone(flavorComponent !== undefined);
+  }, [flavorComponent, onDone]);
+
   return (
     <>
-      
  • 
+      
         {translate('onboarding.tutorial.with.jenkins.jenkinsfile.dotnet.build_agent')}
-         setFlavorComponet(value as keyof typeof DotNetFlavor)}
-          options={Object.keys(DotNetFlavor)}
-        />
-      
    • 
+        
    
+           setFlavorComponent(value as keyof typeof DotNetFlavor)}
+            options={Object.keys(DotNetFlavor)}
+          />
+        
    
+      
       {DotNetTutorial && flavorComponent && (
-        <>
-          
-          
-        
+        
       )}
     
   );
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetCore.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetCore.tsx
index 76d162038d7..9987c9863e1 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetCore.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetCore.tsx
@@ -17,8 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { CodeSnippet, NumberedListItem } from 'design-system';
 import * as React from 'react';
-import CodeSnippet from '../../../common/CodeSnippet';
 import SentenceWithFilename from '../../components/SentenceWithFilename';
 import { OSs } from '../../types';
 import { DotNetCoreFrameworkProps, OSDotNet } from './DotNet';
@@ -48,13 +48,17 @@ export default function DotNetCore({ component, os }: DotNetCoreFrameworkProps)
   return (
     <>
       
-      
  • 
+      
         
-        
-      
    • 
+        
+      
     
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetFramework.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetFramework.tsx
index 8581a8f3a1a..a7e3eab0918 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetFramework.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetFramework.tsx
@@ -17,8 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { CodeSnippet, NumberedListItem } from 'design-system';
 import * as React from 'react';
-import CodeSnippet from '../../../common/CodeSnippet';
 import SentenceWithFilename from '../../components/SentenceWithFilename';
 import { DotNetCoreFrameworkProps } from './DotNet';
 import DotNetPrereqsMSBuild from './DotNetPrereqsMSBuild';
@@ -45,13 +45,17 @@ export default function DotNetFramework({ component }: DotNetCoreFrameworkProps)
     <>
       
       
-      
  • 
+      
         
-        
-      
    • 
+        
+      
     
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsMSBuild.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsMSBuild.tsx
index bb5a13be596..79796519486 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsMSBuild.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsMSBuild.tsx
@@ -17,44 +17,52 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import {
+  ClipboardIconButton,
+  FlagMessage,
+  ListItem,
+  NumberedListItem,
+  OrderedList,
+} from 'design-system';
 import * as React from 'react';
-import { ClipboardIconButton } from '../../../../components/controls/clipboard';
-import { Alert } from '../../../../components/ui/Alert';
 import { translate } from '../../../../helpers/l10n';
+import { InlineSnippet } from '../../components/InlineSnippet';
 import SentenceWithHighlights from '../../components/SentenceWithHighlights';
 
 export default function DotNetPrereqsMSBuild() {
   return (
-    
  • 
+    
       
-      
-        {translate('onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.info')}
-      
-      
      
-        
    1. 
+      
      
+        
+          {translate('onboarding.tutorial.with.jenkins.dotnet.msbuild.prereqs.info')}
+        
+      
      
+      
+        
           
-        
      2. 
-        
    2. 
+        
+        
           
-        
      3. 
-        
    3. 
+        
+        
           
-          Default MSBuild
-          
-        
      4. 
-      
    
-    
    • 
+          
+          
+        
+      
+    
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsScanner.tsx b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsScanner.tsx
index 2e9780f1e04..1d2c961dca3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsScanner.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/jenkins/buildtool-steps/DotNetPrereqsScanner.tsx
@@ -17,50 +17,59 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import {
+  ClipboardIconButton,
+  FlagMessage,
+  ListItem,
+  NumberedListItem,
+  OrderedList,
+} from 'design-system';
 import * as React from 'react';
-import { ClipboardIconButton } from '../../../../components/controls/clipboard';
-import { Alert } from '../../../../components/ui/Alert';
 import { translate } from '../../../../helpers/l10n';
+import { InlineSnippet } from '../../components/InlineSnippet';
 import SentenceWithHighlights from '../../components/SentenceWithHighlights';
 
 export default function DotNetPrereqsScanner() {
   return (
-    
  • 
+    
       
-      
+      
         {translate('onboarding.tutorial.with.jenkins.dotnet.scanner.prereqs.info')}
-      
-      
      
-        
    1. 
+      
+      
+        
           
-        
      2. 
-        
    2. 
+        
+        
           
-        
      3. 
-        
    3. 
+        
+        
           
-          SonarScanner for MSBuild
-          
-        
      4. 
-        
    4. 
+          
+          
+        
+        
           
-        
      5. 
-      
    
-    
    • 
+        
+      
+    
   );
 }
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 51c24f8c8ef..03aa14f1817 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
@@ -17,12 +17,12 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { CodeSnippet, NumberedListItem } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { translate } from '../../../../helpers/l10n';
-import CodeSnippet from '../../../common/CodeSnippet';
-import FinishButton from '../../components/FinishButton';
 import GradleBuildSelection from '../../components/GradleBuildSelection';
+import { InlineSnippet } from '../../components/InlineSnippet';
 import { GradleBuildDSL } from '../../types';
 import { buildGradleSnippet } from '../../utils';
 import { LanguageProps } from '../JenkinsfileStep';
@@ -44,8 +44,8 @@ export default function Gradle(props: LanguageProps) {
 
   return (
     <>
-      
  • 
-        
+      
+        
           {GradleBuildDSL.Groovy},
-              kotlin: {GradleBuildDSL.Kotlin},
+              groovy: ,
+              kotlin: ,
             }}
           />
         
-        
-          {(build) => (
-            
-          )}
-        
-      
    • 
+        
    
+          
+            {(build) => (
+              
+            )}
+          
+        
    
+      
       
-      
     
   );
 }
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 b35210eeb2c..2ac775c1027 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
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import FinishButton from '../../components/FinishButton';
 import { LanguageProps } from '../JenkinsfileStep';
 import CreateJenkinsfileBulletPoint from './CreateJenkinsfileBulletPoint';
 
@@ -36,14 +35,11 @@ function jenkinsfileSnippet(projectKey: string, projectName: string) {
 }`;
 }
 
-export default function Maven({ component, onDone }: LanguageProps) {
+export default function Maven({ component }: LanguageProps) {
   return (
-    <>
-      
-      
-    
+    
   );
 }
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 cb775a5f807..c9c8fcad16e 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,7 +19,6 @@
  */
 import * as React from 'react';
 import DefaultProjectKey from '../../components/DefaultProjectKey';
-import FinishButton from '../../components/FinishButton';
 import { LanguageProps } from '../JenkinsfileStep';
 import CreateJenkinsfileBulletPoint from './CreateJenkinsfileBulletPoint';
 
@@ -44,7 +43,6 @@ export default function Other(props: LanguageProps) {
         alertTranslationKeyPart="onboarding.tutorial.with.jenkins.jenkinsfile.other.step3"
         snippet={JENKINSFILE_SNIPPET}
       />
-      
     
   );
 }
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 4ca949a3f65..2fc7369e30c 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -4295,8 +4295,7 @@ onboarding.tutorial.with.jenkins.webhook.bitbucket.title=Create a Bitbucket Serv
 onboarding.tutorial.with.jenkins.webhook.bitbucketcloud.title=Create a Bitbucket Cloud Webhook
 onboarding.tutorial.with.jenkins.webhook.github.title=Create a GitHub Webhook
 onboarding.tutorial.with.jenkins.webhook.gitlab.title=Create a GitLab Webhook
-onboarding.tutorial.with.jenkins.webhook.intro.sentence=Create a Webhook in your repository to trigger the Jenkins job on push. Already have a Webhook configured? {link}
-onboarding.tutorial.with.jenkins.webhook.intro.link=Skip this step.
+onboarding.tutorial.with.jenkins.webhook.intro.sentence=Create a Webhook in your repository to trigger the Jenkins job on push. You may skip this step if you already have a Webhook configured.
 onboarding.tutorial.with.jenkins.webhook.step1.sentence=Go to the {link} and enter the following information:
 onboarding.tutorial.with.jenkins.webhook.bitbucket.step1.link=Bitbucket Server Webhook creation page for your repository
 onboarding.tutorial.with.jenkins.webhook.bitbucketcloud.step1.link=Bitbucket Cloud Webhook creation page for your repository
-- 
2.39.5