SONAR-19909 New UI for azure pipelines tutorial

21 files changed, 351 insertions, 403 deletions

diff --git a/server/sonar-web/design-system/src/components/UnorderedList.tsx b/server/sonar-web/design-system/src/components/UnorderedList.tsx
index b63f1e322b1..dda24e0f046 100644
--- a/server/sonar-web/design-system/src/components/UnorderedList.tsx
+++ b/server/sonar-web/design-system/src/components/UnorderedList.tsx
@@ -21,8 +21,8 @@
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
 
-export const UnorderedList = styled.ul`
-  list-style: none;
+export const UnorderedList = styled.ul<{ ticks?: boolean }>`
+  list-style: ${({ ticks }) => (ticks ? 'disc' : 'none')};
   ${tw`sw-mt-4`}
   ${tw`sw-pl-0`}
 
diff --git a/server/sonar-web/design-system/src/components/index.ts b/server/sonar-web/design-system/src/components/index.ts
index b633b712bc8..fa3353d59e0 100644
--- a/server/sonar-web/design-system/src/components/index.ts
+++ b/server/sonar-web/design-system/src/components/index.ts
@@ -80,6 +80,8 @@ export * from './TreeMap';
 export * from './TreeMapRect';
 export * from './TutorialStep';
 export * from './TutorialStepList';
+export * from './UnorderedList';
+export * from './UnorderedListItem';
 export * from './buttons';
 export { ClipboardIconButton } from './clipboard';
 export * from './code-line/LineCoverage';
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
index 992ebb8b300..e6a84833a20 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/AzurePipelinesTutorial.tsx
@@ -17,15 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { BasicSeparator, Title, TutorialStep, TutorialStepList } from 'design-system';
 import * as React from 'react';
-import { Button } from '../../../components/controls/buttons';
 import { translate } from '../../../helpers/l10n';
 import { AlmKeys } from '../../../types/alm-settings';
 import { Component } from '../../../types/types';
 import { LoggedInUser } from '../../../types/users';
-import AllSetStep from '../components/AllSetStep';
-import FinishButton from '../components/FinishButton';
-import Step from '../components/Step';
+import AllSet from '../components/AllSet';
 import BranchAnalysisStepContent from './BranchAnalysisStepContent';
 import ExtensionInstallationStepContent from './ExtensionInstallationStepContent';
 import ServiceEndpointStepContent from './ServiceEndpointStepContent';
@@ -39,97 +37,58 @@ export interface AzurePipelinesTutorialProps {
 }
 
 export enum Steps {
-  ExtensionInstallation,
-  ServiceEndpoint,
-  BranchAnalysis,
-  AllSet,
-}
-
-interface Step {
-  step: Steps;
-  content: JSX.Element;
-  checkValidity?: boolean;
+  ExtensionInstallation = 'ExtensionInstallation',
+  ServiceEndpoint = 'ServiceEndpoint',
+  BranchAnalysis = 'BranchAnalysis',
 }
 
 export default function AzurePipelinesTutorial(props: AzurePipelinesTutorialProps) {
   const { alm, baseUrl, component, currentUser, willRefreshAutomatically } = props;
-
-  const [currentStep, setCurrentStep] = React.useState(Steps.ExtensionInstallation);
-  const [isCurrentStepValid, setIsCurrentStepValid] = React.useState(false);
-
-  const steps: Array<Step> = [
-    { step: Steps.ExtensionInstallation, content: <ExtensionInstallationStepContent /> },
-    {
-      step: Steps.ServiceEndpoint,
-      content: (
-        <ServiceEndpointStepContent
-          baseUrl={baseUrl}
-          component={component}
-          currentUser={currentUser}
-        />
-      ),
-    },
-    {
-      step: Steps.BranchAnalysis,
-      content: (
-        <BranchAnalysisStepContent
-          component={component}
-          onStepValidationChange={(isValid) => setIsCurrentStepValid(isValid)}
-        />
-      ),
-      checkValidity: true,
-    },
-  ];
-
-  const switchCurrentStep = (step: Steps) => {
-    setCurrentStep(step);
-    setIsCurrentStepValid(false);
-  };
-
-  const canContinue = (step: Step) => !step.checkValidity || isCurrentStepValid;
+  const [done, setDone] = React.useState<boolean>(false);
 
   return (
     <>
-      <div className="page-header big-spacer-bottom">
-        <h2 className="page-title">
-          {translate('onboarding.tutorial.with.azure_pipelines.title')}
-        </h2>
-      </div>
+      <Title>{translate('onboarding.tutorial.with.azure_pipelines.title')}</Title>
 
-      {steps.map((step, i) => (
-        <Step
-          key={step.step}
-          stepNumber={i + 1}
-          stepTitle={translate(
-            `onboarding.tutorial.with.azure_pipelines.${Steps[step.step]}.title`
+      <TutorialStepList>
+        <TutorialStep
+          title={translate(
+            `onboarding.tutorial.with.azure_pipelines.${Steps.ExtensionInstallation}.title`
           )}
-          open={step.step === currentStep}
-          finished={step.step < currentStep}
-          onOpen={() => switchCurrentStep(step.step)}
-          renderForm={() => (
-            <div className="boxed-group-inner">
-              <div>{step.content}</div>
-              {canContinue(step) &&
-                (step.step === Steps.BranchAnalysis ? (
-                  <FinishButton onClick={() => switchCurrentStep(step.step + 1)} />
-                ) : (
-                  <Button
-                    className="big-spacer-top spacer-bottom"
-                    onClick={() => switchCurrentStep(step.step + 1)}
-                  >
-                    {translate('continue')}
-                  </Button>
-                ))}
-            </div>
+        >
+          <ExtensionInstallationStepContent />
+        </TutorialStep>
+
+        <TutorialStep
+          title={translate(
+            `onboarding.tutorial.with.azure_pipelines.${Steps.ServiceEndpoint}.title`
           )}
-        />
-      ))}
-      <AllSetStep
-        alm={alm || AlmKeys.Azure}
-        stepNumber={4}
-        open={currentStep === Steps.AllSet}
-        willRefreshAutomatically={willRefreshAutomatically}
-      />
+        >
+          <ServiceEndpointStepContent
+            baseUrl={baseUrl}
+            component={component}
+            currentUser={currentUser}
+          />
+        </TutorialStep>
+
+        <TutorialStep
+          title={translate(
+            `onboarding.tutorial.with.azure_pipelines.${Steps.BranchAnalysis}.title`
+          )}
+        >
+          <BranchAnalysisStepContent component={component} onDone={setDone} />
+        </TutorialStep>
+
+        {done && (
+          <>
+            <BasicSeparator className="sw-my-10" />
+            <AllSet
+              alm={alm ?? AlmKeys.Azure}
+              willRefreshAutomatically={willRefreshAutomatically}
+            />
+          </>
+        )}
+      </TutorialStepList>
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/BranchAnalysisStepContent.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/BranchAnalysisStepContent.tsx
index 8b74202c41e..94d9200ad38 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/BranchAnalysisStepContent.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/BranchAnalysisStepContent.tsx
@@ -29,8 +29,7 @@ import AnalysisCommand from './commands/AnalysisCommand';
 export interface BranchesAnalysisStepProps {
   languages: Languages;
   component: Component;
-
-  onStepValidationChange: (isValid: boolean) => void;
+  onDone: (done: boolean) => void;
 }
 
 const BUILD_TOOLS_ORDERED: Array<BuildTools> = [
@@ -42,7 +41,7 @@ const BUILD_TOOLS_ORDERED: Array<BuildTools> = [
 ];
 
 export function BranchAnalysisStepContent(props: BranchesAnalysisStepProps) {
-  const { component, onStepValidationChange, languages } = props;
+  const { component, languages } = props;
 
   const [buildTechnology, setBuildTechnology] = React.useState<BuildTools | undefined>();
   const buildToolsList = languages['c']
@@ -59,7 +58,7 @@ export function BranchAnalysisStepContent(props: BranchesAnalysisStepProps) {
         options={buildToolsList}
       />
       <AnalysisCommand
-        onStepValidationChange={onStepValidationChange}
+        onStepValidationChange={props.onDone}
         buildTool={buildTechnology}
         projectKey={component.key}
         projectName={component.name}
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ExtensionInstallationStepContent.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ExtensionInstallationStepContent.tsx
index 17172642eb9..9eddb358816 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ExtensionInstallationStepContent.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ExtensionInstallationStepContent.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 { Link } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { translate } from '../../../helpers/l10n';
-import Link from '../../common/Link';
 
 export default function ExtensionInstallationStepContent() {
   return (
@@ -32,10 +32,7 @@ export default function ExtensionInstallationStepContent() {
         id="onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.sentence"
         values={{
           link: (
-            <Link
-              to="https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarqube"
-              target="_blank"
-            >
+            <Link to="https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarqube">
               {translate(
                 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.sentence.link'
               )}
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx
index 162866379f8..13f335f4720 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/JavaToolInstallation.tsx
@@ -17,6 +17,7 @@
  * 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, UnorderedList, UnorderedListItem } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { translate } from '../../../helpers/l10n';
@@ -33,8 +34,8 @@ function renderSentenceWithFieldAndValue(props: {
         'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.sentence'
       )}
       values={{
-        field: <strong>{field}</strong>,
-        value: <strong>{value}</strong>,
+        field: <b className="sw-font-semibold">{field}</b>,
+        value: <b className="sw-font-semibold">{value}</b>,
       }}
     />
   );
@@ -42,10 +43,10 @@ function renderSentenceWithFieldAndValue(props: {
 
 export default function JavaToolInstallation() {
   return (
-    <li>
+    <NumberedListItem>
       {translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.title')}
-      <ul className="list-styled list-alpha">
-        <li>
+      <UnorderedList ticks className="sw-ml-12">
+        <UnorderedListItem>
           {renderSentenceWithFieldAndValue({
             field: translate(
               'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_version'
@@ -56,16 +57,16 @@ export default function JavaToolInstallation() {
           {translate(
             'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.or_higher'
           )}
-        </li>
-        <li>
+        </UnorderedListItem>
+        <UnorderedListItem>
           {renderSentenceWithFieldAndValue({
             field: translate(
               'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_architecture'
             ),
             value: 'x64',
           })}
-        </li>
-        <li>
+        </UnorderedListItem>
+        <UnorderedListItem>
           {renderSentenceWithFieldAndValue({
             field: translate(
               'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.java_source'
@@ -74,8 +75,8 @@ export default function JavaToolInstallation() {
               'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java_installer.pre-installed'
             ),
           })}
-        </li>
-      </ul>
-    </li>
+        </UnorderedListItem>
+      </UnorderedList>
+    </NumberedListItem>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx
index 72fbc966a82..af583bf3a0c 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/ServiceEndpointStepContent.tsx
@@ -17,15 +17,20 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import {
+  ButtonSecondary,
+  ClipboardIconButton,
+  NumberedList,
+  NumberedListItem,
+} from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Button } from '../../../components/controls/buttons';
-import { ClipboardIconButton } from '../../../components/controls/clipboard';
 import { translate } from '../../../helpers/l10n';
 import { TokenType } from '../../../types/token';
 import { Component } from '../../../types/types';
 import { LoggedInUser } from '../../../types/users';
 import EditTokenModal from '../components/EditTokenModal';
+import { InlineSnippet } from '../components/InlineSnippet';
 import SentenceWithHighlights from '../components/SentenceWithHighlights';
 
 export interface ServiceEndpointStepProps {
@@ -41,46 +46,50 @@ export default function ServiceEndpointStepContent(props: ServiceEndpointStepPro
 
   return (
     <>
-      <ol className="list-styled">
-        <li>
+      <NumberedList>
+        <NumberedListItem>
           <SentenceWithHighlights
             translationKey="onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step1"
             highlightKeys={['menu']}
           />
-        </li>
-        <li>
+        </NumberedListItem>
+        <NumberedListItem>
           <SentenceWithHighlights
             translationKey="onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step2"
             highlightKeys={['type']}
           />
-        </li>
-        <li>
+        </NumberedListItem>
+        <NumberedListItem className="sw-flex sw-items-center">
           <FormattedMessage
             defaultMessage={translate(
               'onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step3.sentence'
             )}
             id="onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step3.sentence"
             values={{
-              url: <code className="rule">{baseUrl}</code>,
-              button: <ClipboardIconButton copyValue={baseUrl} />,
+              url: (
+                <span className="sw-ml-1">
+                  <InlineSnippet snippet={baseUrl} />
+                </span>
+              ),
+              button: <ClipboardIconButton className="sw-ml-2" copyValue={baseUrl} />,
             }}
           />
-        </li>
-        <li>
+        </NumberedListItem>
+        <NumberedListItem>
           <span>
             {translate('onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step4.sentence')}:
           </span>
-          <Button className="spacer-left" onClick={() => toggleModal(true)}>
+          <ButtonSecondary className="sw-ml-2" onClick={() => toggleModal(true)}>
             {translate('onboarding.token.generate.long')}
-          </Button>
-        </li>
-        <li>
+          </ButtonSecondary>
+        </NumberedListItem>
+        <NumberedListItem>
           {translate('onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step5.sentence')}
-        </li>
-        <li>
+        </NumberedListItem>
+        <NumberedListItem>
           {translate('onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.step6.sentence')}
-        </li>
-      </ol>
+        </NumberedListItem>
+      </NumberedList>
 
       {isModalVisible && (
         <EditTokenModal
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-it.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-it.tsx
index 541a20afae0..96c63ab7eb9 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-it.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/AzurePipelinesTutorial-it.tsx
@@ -47,7 +47,7 @@ afterEach(() => {
   tokenMock.reset();
 });
 
-it('should render correctly and allow navigating between the different steps', async () => {
+it('should render correctly and allow token generation', async () => {
   renderAzurePipelinesTutorial();
   const user = userEvent.setup();
 
@@ -58,9 +58,6 @@ it('should render correctly and allow navigating between the different steps', a
   //// Default step.
   assertDefaultStepIsCorrectlyRendered();
 
-  // Continue.
-  await goToNextStep(user);
-
   //// Token step.
   assertServiceEndpointStepIsCorrectlyRendered();
 
@@ -78,9 +75,6 @@ it('should render correctly and allow navigating between the different steps', a
   ).toBeInTheDocument();
   await clickButton(user, 'continue', modal);
 
-  // Continue.
-  await goToNextStep(user);
-
   //// Analysis step: .NET
   await user.click(getTutorialBuildButtons().dotnetBuildButton.get());
   assertDotNetStepIsCorrectlyRendered();
@@ -111,55 +105,11 @@ it('should render correctly and allow navigating between the different steps', a
   assertOtherStepIsCorrectlyRendered();
 
   //// Finish tutorial
-  await clickButton(user, 'tutorials.finish');
   assertFinishStepIsCorrectlyRendered();
 });
 
-it('allows to navigate back to a previous step', async () => {
-  renderAzurePipelinesTutorial();
-  const user = userEvent.setup();
-
-  // No clickable steps.
-  expect(
-    screen.queryByRole('button', {
-      name: 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title',
-    })
-  ).not.toBeInTheDocument();
-
-  // Go to the next steps.
-  await goToNextStep(user);
-  await goToNextStep(user);
-
-  // The first 2 steps become clickable.
-  expect(
-    screen.getByRole('button', {
-      name: 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title',
-    })
-  ).toBeInTheDocument();
-  expect(
-    screen.getByRole('button', {
-      name: 'onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.title',
-    })
-  ).toBeInTheDocument();
-
-  // Navigate back to the first step.
-  await clickButton(user, 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title');
-
-  // No more clickable steps.
-  expect(
-    screen.queryByRole('button', {
-      name: 'onboarding.tutorial.with.azure_pipelines.ExtensionInstallation.title',
-    })
-  ).not.toBeInTheDocument();
-});
-
-it('should not offer CFamily analysis if the language is not available', async () => {
+it('should not offer CFamily analysis if the language is not available', () => {
   renderAzurePipelinesTutorial(undefined, { languages: {} });
-  const user = userEvent.setup();
-
-  // Go to the analysis step.
-  await goToNextStep(user);
-  await goToNextStep(user);
 
   expect(getTutorialBuildButtons().dotnetBuildButton.get()).toBeInTheDocument();
   expect(getTutorialBuildButtons().cFamilyBuildButton.query()).not.toBeInTheDocument();
@@ -179,7 +129,7 @@ function assertServiceEndpointStepIsCorrectlyRendered() {
       name: 'onboarding.tutorial.with.azure_pipelines.ServiceEndpoint.title',
     })
   ).toBeInTheDocument();
-  expect(getCopyToClipboardValue()).toBe('https://sonarqube.example.com/');
+  expect(getCopyToClipboardValue(0, 'Copy to clipboard')).toBe('https://sonarqube.example.com/');
   expect(
     screen.getByRole('button', { name: 'onboarding.token.generate.long' })
   ).toBeInTheDocument();
@@ -191,26 +141,31 @@ function assertDotNetStepIsCorrectlyRendered() {
       name: 'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.title',
     })
   ).toBeInTheDocument();
-  expect(getCopyToClipboardValue()).toBe('foo');
+
+  expect(getCopyToClipboardValue(1, 'Copy to clipboard')).toBe('foo');
 }
 
 function assertMavenStepIsCorrectlyRendered() {
-  expect(getCopyToClipboardValue()).toMatchSnapshot('maven, copy additional properties');
+  expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('maven, copy additional properties');
 }
 
 function assertGradleStepIsCorrectlyRendered() {
-  expect(getCopyToClipboardValue()).toMatchSnapshot('gradle, copy additional properties');
+  expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot('gradle, copy additional properties');
 }
 
 function assertCFamilyStepIsCorrectlyRendered(os: string) {
-  expect(getCopyToClipboardValue(0)).toMatchSnapshot(`cfamily ${os}, copy shell script`);
-  expect(getCopyToClipboardValue(1)).toBe('foo');
-  expect(getCopyToClipboardValue(2)).toMatchSnapshot(`cfamily ${os}, copy additional properties`);
-  expect(getCopyToClipboardValue(3)).toMatchSnapshot(`cfamily ${os}, copy build-wrapper command`);
+  expect(getCopyToClipboardValue(0, 'Copy')).toMatchSnapshot(`cfamily ${os}, copy shell script`);
+  expect(getCopyToClipboardValue(1, 'Copy to clipboard')).toBe('foo');
+  expect(getCopyToClipboardValue(2, 'Copy to clipboard')).toMatchSnapshot(
+    `cfamily ${os}, copy additional properties`
+  );
+  expect(getCopyToClipboardValue(1, 'Copy')).toMatchSnapshot(
+    `cfamily ${os}, copy build-wrapper command`
+  );
 }
 
 function assertOtherStepIsCorrectlyRendered() {
-  expect(getCopyToClipboardValue()).toBe('foo');
+  expect(getCopyToClipboardValue(1, 'Copy to clipboard')).toBe('foo');
 }
 
 function assertFinishStepIsCorrectlyRendered() {
@@ -245,7 +200,3 @@ async function clickButton(user: UserEvent, name: string, context?: HTMLElement)
     await user.click(screen.getByRole('button', { name }));
   }
 }
-
-async function goToNextStep(user: UserEvent) {
-  await clickButton(user, 'continue');
-}
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-it.tsx.snap b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-it.tsx.snap
index cba7e2bcd12..2b4eb427b73 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-it.tsx.snap
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/__tests__/__snapshots__/AzurePipelinesTutorial-it.tsx.snap
@@ -1,33 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render correctly and allow navigating between the different steps: cfamily linux, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
+exports[`should render correctly and allow token generation: cfamily linux, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
 
-exports[`should render correctly and allow navigating between the different steps: cfamily linux, copy build-wrapper command 1`] = `"./build-wrapper-linux-x86/build-wrapper-linux-x86-64 --out-dir bw-output <your build command here>"`;
+exports[`should render correctly and allow token generation: cfamily linux, copy build-wrapper command 1`] = `"./build-wrapper-linux-x86/build-wrapper-linux-x86-64 --out-dir bw-output <your build command here>"`;
 
-exports[`should render correctly and allow navigating between the different steps: cfamily linux, copy shell script 1`] = `
+exports[`should render correctly and allow token generation: cfamily linux, copy shell script 1`] = `
 "curl 'http://localhost/static/cpp/build-wrapper-linux-x86.zip' --output build-wrapper.zip
 unzip build-wrapper.zip"
 `;
 
-exports[`should render correctly and allow navigating between the different steps: cfamily mac, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
+exports[`should render correctly and allow token generation: cfamily mac, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
 
-exports[`should render correctly and allow navigating between the different steps: cfamily mac, copy build-wrapper command 1`] = `"./build-wrapper-macos-x86/build-wrapper-macos-x86 --out-dir bw-output <your build command here>"`;
+exports[`should render correctly and allow token generation: cfamily mac, copy build-wrapper command 1`] = `"./build-wrapper-macos-x86/build-wrapper-macos-x86 --out-dir bw-output <your build command here>"`;
 
-exports[`should render correctly and allow navigating between the different steps: cfamily mac, copy shell script 1`] = `
+exports[`should render correctly and allow token generation: cfamily mac, copy shell script 1`] = `
 "curl 'http://localhost/static/cpp/build-wrapper-macosx-x86.zip' --output build-wrapper.zip
 unzip build-wrapper.zip"
 `;
 
-exports[`should render correctly and allow navigating between the different steps: cfamily win, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
+exports[`should render correctly and allow token generation: cfamily win, copy additional properties 1`] = `"sonar.cfamily.build-wrapper-output=bw-output"`;
 
-exports[`should render correctly and allow navigating between the different steps: cfamily win, copy build-wrapper command 1`] = `"build-wrapper-win-x86/build-wrapper-win-x86-64.exe --out-dir bw-output <your build command here>"`;
+exports[`should render correctly and allow token generation: cfamily win, copy build-wrapper command 1`] = `"build-wrapper-win-x86/build-wrapper-win-x86-64.exe --out-dir bw-output <your build command here>"`;
 
-exports[`should render correctly and allow navigating between the different steps: cfamily win, copy shell script 1`] = `
+exports[`should render correctly and allow token generation: cfamily win, copy shell script 1`] = `
 "Invoke-WebRequest -Uri 'http://localhost/static/cpp/build-wrapper-win-x86.zip' -OutFile 'build-wrapper.zip'
 Expand-Archive -Path 'build-wrapper.zip' -DestinationPath '.'"
 `;
 
-exports[`should render correctly and allow navigating between the different steps: gradle, copy additional properties 1`] = `
+exports[`should render correctly and allow token generation: gradle, copy additional properties 1`] = `
 "# Additional properties that will be passed to the scanner,
 # Put one key=value per line, example:
 # sonar.exclusions=**/*.bin
@@ -36,7 +36,7 @@ sonar.projectName=MyProject
 "
 `;
 
-exports[`should render correctly and allow navigating between the different steps: maven, copy additional properties 1`] = `
+exports[`should render correctly and allow token generation: maven, copy additional properties 1`] = `
 "# Additional properties that will be passed to the scanner,
 # Put one key=value per line, example:
 # sonar.exclusions=**/*.bin
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AlertClassicEditor.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AlertClassicEditor.tsx
index eff9fcb8264..3e618d4190d 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AlertClassicEditor.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AlertClassicEditor.tsx
@@ -17,28 +17,32 @@
  * 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 } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Alert } from '../../../../components/ui/Alert';
 import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
+import { useDocUrl } from '../../../../helpers/docs';
 import { translate } from '../../../../helpers/l10n';
 import { AlmKeys } from '../../../../types/alm-settings';
-import DocLink from '../../../common/DocLink';
 
 export default function AlertClassicEditor() {
+  const docUrl = useDocUrl();
+
   return (
-    <Alert variant="info" className="big-spacer-top">
-      <FormattedMessage
-        id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info"
-        defaultMessage={translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info')}
-        values={{
-          doc_link: (
-            <DocLink to={ALM_DOCUMENTATION_PATHS[AlmKeys.Azure]}>
-              {translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info.doc_link')}
-            </DocLink>
-          ),
-        }}
-      />
-    </Alert>
+    <FlagMessage variant="info" className="sw-mt-4">
+      <span>
+        <FormattedMessage
+          id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info"
+          defaultMessage={translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info')}
+          values={{
+            doc_link: (
+              <Link to={docUrl(ALM_DOCUMENTATION_PATHS[AlmKeys.Azure])}>
+                {translate('onboarding.tutorial.with.azure_pipelines.BranchAnalysis.info.doc_link')}
+              </Link>
+            ),
+          }}
+        />
+      </span>
+    </FlagMessage>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AnalysisCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AnalysisCommand.tsx
index 9b2078e5941..bc2dbe26694 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AnalysisCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/AnalysisCommand.tsx
@@ -33,13 +33,13 @@ export interface AnalysisCommandProps {
 }
 
 export default function AnalysisCommand(props: AnalysisCommandProps) {
-  const { buildTool, projectKey, projectName } = props;
+  const { buildTool, onStepValidationChange, projectKey, projectName } = props;
 
   React.useEffect(() => {
     if (buildTool && buildTool !== BuildTools.CFamily) {
-      props.onStepValidationChange(true);
+      onStepValidationChange(true);
     }
-  }, [buildTool, props.onStepValidationChange]);
+  }, [buildTool, onStepValidationChange]);
 
   if (!buildTool) {
     return null;
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx
index 2796120d285..2b84388ef07 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/ClangGCC.tsx
@@ -17,10 +17,16 @@
  * 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,
+  NumberedList,
+  NumberedListItem,
+  UnorderedList,
+  UnorderedListItem,
+} from 'design-system';
 import * as React from 'react';
 import { translate } from '../../../../helpers/l10n';
 import { getHostUrl } from '../../../../helpers/urls';
-import CodeSnippet from '../../../common/CodeSnippet';
 import { CompilationInfo } from '../../components/CompilationInfo';
 import GithubCFamilyExampleRepositories from '../../components/GithubCFamilyExampleRepositories';
 import RenderOptions from '../../components/RenderOptions';
@@ -44,7 +50,7 @@ type OsConstant = {
 };
 
 export default function ClangGCC(props: ClangGCCProps) {
-  const { projectKey } = props;
+  const { projectKey, onStepValidationChange } = props;
   const [os, setOs] = React.useState<OSs | undefined>();
   const host = getHostUrl();
 
@@ -77,11 +83,11 @@ unzip build-wrapper.zip`,
 
   React.useEffect(() => {
     if (os) {
-      props.onStepValidationChange(true);
+      onStepValidationChange(true);
     } else {
-      props.onStepValidationChange(false);
+      onStepValidationChange(false);
     }
-  }, [os, props.onStepValidationChange]);
+  }, [os, onStepValidationChange]);
 
   const handlOsChange = (value: OSs) => {
     setOs(value);
@@ -89,9 +95,7 @@ unzip build-wrapper.zip`,
 
   return (
     <>
-      <span className="big-spacer-top display-block">
-        {translate('onboarding.tutorial.with.azure_pipelines.os')}
-      </span>
+      <div className="sw-mt-4">{translate('onboarding.tutorial.with.azure_pipelines.os')}</div>
       <RenderOptions
         label={translate('onboarding.tutorial.with.azure_pipelines.os')}
         checked={os}
@@ -103,31 +107,34 @@ unzip build-wrapper.zip`,
       {os && (
         <>
           <GithubCFamilyExampleRepositories
-            className="big-spacer-top abs-width-600"
+            className="sw-mt-4 sw-w-abs-600"
             os={os}
             ci={TutorialModes.AzurePipelines}
           />
           <AlertClassicEditor />
-          <ol className="list-styled big-spacer-top">
-            <li>
+          <NumberedList className="sw-mt-4">
+            <NumberedListItem>
               <SentenceWithHighlights
                 translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp"
                 highlightPrefixKeys="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
                 highlightKeys={['pipeline']}
               />
-              <ul className="list-styled list-alpha spacer-top">
-                <li>
+              <UnorderedList ticks className="sw-ml-12 sw-mt-2">
+                <UnorderedListItem>
                   <SentenceWithHighlights
                     translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_wrapper.ccpp.script"
                     highlightPrefixKeys={codeSnippetDownload[os].highlightScriptKey}
                     highlightKeys={['task', 'inline']}
                   />
-                  <CodeSnippet snippet={codeSnippetDownload[os].script} />
-                </li>
-              </ul>
-            </li>
+                  <CodeSnippet
+                    className="sw-px-4 sw-py-6"
+                    snippet={codeSnippetDownload[os].script}
+                  />
+                </UnorderedListItem>
+              </UnorderedList>
+            </NumberedListItem>
 
-            <li>
+            <NumberedListItem>
               <SentenceWithHighlights
                 translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.ccpp"
                 highlightPrefixKeys="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
@@ -138,34 +145,39 @@ unzip build-wrapper.zip`,
                 kind={PrepareType.StandAlone}
                 projectKey={projectKey}
               />
-            </li>
+            </NumberedListItem>
 
-            <li>
+            <NumberedListItem>
               <SentenceWithHighlights
                 translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build.ccpp"
                 highlightKeys={['task']}
               />
-              <ul className="list-styled list-alpha spacer-top">
-                <li>
+              <UnorderedList className="sw-mt-2">
+                <UnorderedListItem>
                   <SentenceWithHighlights
                     translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.build_script.ccpp"
                     highlightKeys={['build_wrapper']}
                   />
-                  <CodeSnippet snippet={codeSnippetDownload[os].scriptBuild} />
+                  <CodeSnippet
+                    className="sw-px-4 sw-py-6"
+                    isOneLine
+                    snippet={codeSnippetDownload[os].scriptBuild}
+                  />
                   <CompilationInfo />
-                </li>
-              </ul>
-            </li>
+                </UnorderedListItem>
+              </UnorderedList>
+            </NumberedListItem>
 
-            <li>
+            <NumberedListItem>
               <SentenceWithHighlights
                 translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.ccpp"
                 highlightPrefixKeys="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run"
                 highlightKeys={['task', 'after']}
               />
-            </li>
+            </NumberedListItem>
+
             <PublishSteps />
-          </ol>
+          </NumberedList>
         </>
       )}
     </>
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/DotNet.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/DotNet.tsx
index 0b66059a3cf..f169fac87e2 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/DotNet.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/DotNet.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { NumberedList, NumberedListItem } from 'design-system';
 import * as React from 'react';
 import SentenceWithHighlights from '../../components/SentenceWithHighlights';
 import { BuildTools } from '../../types';
@@ -33,8 +34,8 @@ export default function DotNet(props: DotNetProps): JSX.Element {
   return (
     <>
       <AlertClassicEditor />
-      <ol className="list-styled big-spacer-top">
-        <li>
+      <NumberedList className="sw-mt-4">
+        <NumberedListItem>
           <SentenceWithHighlights
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
             highlightKeys={['pipeline', 'task', 'before']}
@@ -44,16 +45,16 @@ export default function DotNet(props: DotNetProps): JSX.Element {
             kind={PrepareType.MSBuild}
             projectKey={projectKey}
           />
-        </li>
-        <li>
+        </NumberedListItem>
+        <NumberedListItem>
           <SentenceWithHighlights
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run"
             highlightKeys={['task', 'after']}
           />
-        </li>
+        </NumberedListItem>
 
         <PublishSteps />
-      </ol>
+      </NumberedList>
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx
index 5e098e2a243..d13c33863b1 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaGradle.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { NumberedList, NumberedListItem, UnorderedList, UnorderedListItem } from 'design-system';
 import * as React from 'react';
 import { translate, translateWithParameters } from '../../../../helpers/l10n';
 import SentenceWithHighlights from '../../components/SentenceWithHighlights';
@@ -37,8 +38,8 @@ export default function JavaGradle(props: JavaGradleProps) {
   return (
     <>
       <AlertClassicEditor />
-      <ol className="list-styled big-spacer-top">
-        <li>
+      <NumberedList className="sw-mt-4">
+        <NumberedListItem>
           <SentenceWithHighlights
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
             highlightKeys={['pipeline', 'task', 'before']}
@@ -49,27 +50,27 @@ export default function JavaGradle(props: JavaGradleProps) {
             projectKey={projectKey}
             projectName={projectName}
           />
-        </li>
+        </NumberedListItem>
 
         <JavaToolInstallation />
 
-        <li>
+        <NumberedListItem>
           {translateWithParameters(
             'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java',
             translate('onboarding.build', BuildTools.Gradle)
           )}
-          <ul className="list-styled list-alpha big-spacer-bottom">
-            <li>
+          <UnorderedList ticks className="sw-ml-12 sw-mb-4">
+            <UnorderedListItem>
               <SentenceWithHighlights
                 translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java.settings"
                 highlightKeys={['section', 'option']}
               />
-            </li>
-          </ul>
-        </li>
+            </UnorderedListItem>
+          </UnorderedList>
+        </NumberedListItem>
 
         <PublishSteps />
-      </ol>
+      </NumberedList>
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx
index a7e7f9941bf..d7a5878228e 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/JavaMaven.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { NumberedList, NumberedListItem, UnorderedList, UnorderedListItem } from 'design-system';
 import * as React from 'react';
 import { translate, translateWithParameters } from '../../../../helpers/l10n';
 import SentenceWithHighlights from '../../components/SentenceWithHighlights';
@@ -36,8 +37,8 @@ export default function JavaMaven(props: JavaMavenProps) {
   return (
     <>
       <AlertClassicEditor />
-      <ol className="list-styled big-spacer-top">
-        <li>
+      <NumberedList className="sw-mt-4">
+        <NumberedListItem>
           <SentenceWithHighlights
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
             highlightKeys={['pipeline', 'task', 'before']}
@@ -48,27 +49,27 @@ export default function JavaMaven(props: JavaMavenProps) {
             projectKey={projectKey}
             projectName={projectName}
           />
-        </li>
+        </NumberedListItem>
 
         <JavaToolInstallation />
 
-        <li>
+        <NumberedListItem>
           {translateWithParameters(
             'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java',
             translate('onboarding.build', BuildTools.Maven)
           )}
-          <ul className="list-styled list-alpha big-spacer-bottom">
-            <li>
+          <UnorderedList ticks className="sw-ml-12 sw-mb-4">
+            <UnorderedListItem>
               <SentenceWithHighlights
                 translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.java.settings"
                 highlightKeys={['section', 'option']}
               />
-            </li>
-          </ul>
-        </li>
+            </UnorderedListItem>
+          </UnorderedList>
+        </NumberedListItem>
 
         <PublishSteps />
-      </ol>
+      </NumberedList>
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/Other.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/Other.tsx
index e1612a94be3..a04fd2fbe49 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/Other.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/Other.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { NumberedList, NumberedListItem } from 'design-system';
 import * as React from 'react';
 import SentenceWithHighlights from '../../components/SentenceWithHighlights';
 import { BuildTools } from '../../types';
@@ -33,8 +34,8 @@ export default function Other(props: OtherProps) {
   return (
     <>
       <AlertClassicEditor />
-      <ol className="list-styled big-spacer-top">
-        <li>
+      <NumberedList className="sw-mt-4">
+        <NumberedListItem>
           <SentenceWithHighlights
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare"
             highlightKeys={['pipeline', 'task', 'before']}
@@ -44,17 +45,17 @@ export default function Other(props: OtherProps) {
             kind={PrepareType.StandAlone}
             projectKey={projectKey}
           />
-        </li>
+        </NumberedListItem>
 
-        <li>
+        <NumberedListItem>
           <SentenceWithHighlights
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run"
             highlightKeys={['task', 'after']}
           />
-        </li>
+        </NumberedListItem>
 
         <PublishSteps />
-      </ol>
+      </NumberedList>
     </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx
index dc6e5975f2f..5a92bb6ef0b 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PrepareAnalysisCommand.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 { ClipboardIconButton, CodeSnippet, UnorderedList, UnorderedListItem } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { ClipboardIconButton } from '../../../../components/controls/clipboard';
 import { translate } from '../../../../helpers/l10n';
-import CodeSnippet from '../../../common/CodeSnippet';
+import { InlineSnippet } from '../../components/InlineSnippet';
 import SentenceWithHighlights from '../../components/SentenceWithHighlights';
 import { BuildTools } from '../../types';
 
@@ -51,14 +51,14 @@ sonar.projectName=${projectName}
 `;
 
   return (
-    <ul className="list-styled list-alpha spacer-top">
-      <li>
+    <UnorderedList ticks className="sw-ml-12 sw-my-2">
+      <UnorderedListItem>
         <SentenceWithHighlights
           translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.endpoint"
           highlightKeys={['endpoint']}
         />
-      </li>
-      <li>
+      </UnorderedListItem>
+      <UnorderedListItem>
         <FormattedMessage
           id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis"
           defaultMessage={translate(
@@ -66,114 +66,138 @@ sonar.projectName=${projectName}
           )}
           values={{
             section: (
-              <strong>
+              <b className="sw-font-semibold">
                 {translate(
                   'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis.section'
                 )}
-              </strong>
+              </b>
             ),
             run_analysis_value: (
-              <strong>
+              <b className="sw-font-semibold">
                 {translate(
                   'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare.run_analysis.values',
                   buildTool
                 )}
-              </strong>
+              </b>
             ),
           }}
         />
-      </li>
+      </UnorderedListItem>
 
       {kind === PrepareType.StandAlone && (
         <>
-          <li>
+          <UnorderedListItem>
             <SentenceWithHighlights
               translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.manual"
               highlightKeys={['mode']}
             />
-          </li>
+          </UnorderedListItem>
 
-          <li>
-            <FormattedMessage
-              id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence"
-              defaultMessage={translate(
-                'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence'
-              )}
-              values={{
-                project_key: (
-                  <b>
-                    {translate(
-                      'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence.project_key'
-                    )}
-                  </b>
-                ),
-                key: <code className="rule">{projectKey}</code>,
-                button: <ClipboardIconButton copyValue={projectKey} />,
-              }}
-            />
-          </li>
-          {buildTool === BuildTools.CFamily && (
-            <li>
+          <UnorderedListItem>
+            <span className="sw-flex sw-items-center">
               <FormattedMessage
-                id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp"
+                id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence"
                 defaultMessage={translate(
-                  'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp'
+                  'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence'
                 )}
                 values={{
-                  advanced: (
-                    <b>
+                  project_key: (
+                    <b className="sw-font-semibold sw-mx-1">
                       {translate(
-                        'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp.advanced'
+                        'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence.project_key'
                       )}
                     </b>
                   ),
-                  additional: (
-                    <b>
-                      {translate(
-                        'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp.additional'
-                      )}
-                    </b>
+                  key: (
+                    <span className="sw-ml-1">
+                      <InlineSnippet snippet={projectKey} />
+                    </span>
                   ),
-                  property: <code className="rule">{ADDITIONAL_PROPERTY}</code>,
-                  button: <ClipboardIconButton copyValue={ADDITIONAL_PROPERTY} />,
+                  button: <ClipboardIconButton className="sw-ml-2" copyValue={projectKey} />,
                 }}
               />
-            </li>
+            </span>
+          </UnorderedListItem>
+          {buildTool === BuildTools.CFamily && (
+            <UnorderedListItem>
+              <span className="sw-flex sw-items-center sw-flex-wrap">
+                <FormattedMessage
+                  id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp"
+                  defaultMessage={translate(
+                    'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp'
+                  )}
+                  values={{
+                    advanced: (
+                      <b className="sw-font-semibold sw-mx-1">
+                        {translate(
+                          'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp.advanced'
+                        )}
+                      </b>
+                    ),
+                    additional: (
+                      <b className="sw-font-semibold sw-mx-1">
+                        {translate(
+                          'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.prepare_additional.ccpp.additional'
+                        )}
+                      </b>
+                    ),
+                    property: (
+                      <span className="sw-ml-1">
+                        <InlineSnippet snippet={ADDITIONAL_PROPERTY} />
+                      </span>
+                    ),
+                    button: (
+                      <ClipboardIconButton className="sw-ml-2" copyValue={ADDITIONAL_PROPERTY} />
+                    ),
+                  }}
+                />
+              </span>
+            </UnorderedListItem>
           )}
         </>
       )}
 
       {kind === PrepareType.JavaMavenGradle && (
-        <li>
+        <UnorderedListItem>
           <SentenceWithHighlights
             translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.advanced_properties"
             highlightKeys={['section', 'properties']}
           />
           :
-          <CodeSnippet snippet={MAVEN_GRADLE_PROPS_SNIPPET} />
-        </li>
+          <CodeSnippet
+            className="sw-p-6"
+            language="properties"
+            snippet={MAVEN_GRADLE_PROPS_SNIPPET}
+          />
+        </UnorderedListItem>
       )}
       {kind === PrepareType.MSBuild && (
-        <li>
-          <FormattedMessage
-            id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence"
-            defaultMessage={translate(
-              'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence'
-            )}
-            values={{
-              project_key: (
-                <b>
-                  {translate(
-                    'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence.project_key'
-                  )}
-                </b>
-              ),
-              key: <code className="rule">{projectKey}</code>,
-              button: <ClipboardIconButton copyValue={projectKey} />,
-            }}
-          />
-        </li>
+        <UnorderedListItem>
+          <span className="sw-flex sw-items-center">
+            <FormattedMessage
+              id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence"
+              defaultMessage={translate(
+                'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence'
+              )}
+              values={{
+                project_key: (
+                  <b className="sw-font-semibold sw-mx-1">
+                    {translate(
+                      'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.run.key.sentence.project_key'
+                    )}
+                  </b>
+                ),
+                key: (
+                  <span className="sw-ml-1">
+                    <InlineSnippet snippet={projectKey} />
+                  </span>
+                ),
+                button: <ClipboardIconButton className="sw-ml-2" copyValue={projectKey} />,
+              }}
+            />
+          </span>
+        </UnorderedListItem>
       )}
-    </ul>
+    </UnorderedList>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PublishSteps.tsx b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PublishSteps.tsx
index 7366050a733..98088edb4d3 100644
--- a/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PublishSteps.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/azure-pipelines/commands/PublishSteps.tsx
@@ -17,37 +17,40 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { BasicSeparator, FlagMessage, Link, NumberedListItem } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import withAvailableFeatures, {
   WithAvailableFeaturesProps,
 } from '../../../../app/components/available-features/withAvailableFeatures';
-import { Alert } from '../../../../components/ui/Alert';
 import { ALM_DOCUMENTATION_PATHS } from '../../../../helpers/constants';
+import { useDocUrl } from '../../../../helpers/docs';
 import { translate } from '../../../../helpers/l10n';
 import { AlmKeys } from '../../../../types/alm-settings';
 import { Feature } from '../../../../types/features';
-import DocLink from '../../../common/DocLink';
 import SentenceWithHighlights from '../../components/SentenceWithHighlights';
 
 export interface PublishStepsProps extends WithAvailableFeaturesProps {}
+
 export function PublishSteps(props: PublishStepsProps) {
   const branchSupportEnabled = props.hasFeature(Feature.BranchSupport);
 
+  const docUrl = useDocUrl();
+
   return (
     <>
-      <li>
+      <NumberedListItem>
         <SentenceWithHighlights
           translationKey="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.publish_qg"
           highlightKeys={['task']}
         />
-        <Alert variant="info" className="spacer-top">
+        <FlagMessage variant="info" className="sw-mt-2">
           {translate(
             'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.publish_qg.info.sentence1'
           )}
-        </Alert>
-      </li>
-      <li>
+        </FlagMessage>
+      </NumberedListItem>
+      <NumberedListItem>
         <SentenceWithHighlights
           translationKey={
             branchSupportEnabled
@@ -56,25 +59,27 @@ export function PublishSteps(props: PublishStepsProps) {
           }
           highlightKeys={['tab', 'continuous_integration']}
         />
-      </li>
+      </NumberedListItem>
       {branchSupportEnabled && (
         <>
-          <hr />
-          <FormattedMessage
-            id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection"
-            defaultMessage={translate(
-              'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection'
-            )}
-            values={{
-              link: (
-                <DocLink to={ALM_DOCUMENTATION_PATHS[AlmKeys.Azure]}>
-                  {translate(
-                    'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection.link'
-                  )}
-                </DocLink>
-              ),
-            }}
-          />
+          <BasicSeparator className="sw-my-4" />
+          <div>
+            <FormattedMessage
+              id="onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection"
+              defaultMessage={translate(
+                'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection'
+              )}
+              values={{
+                link: (
+                  <Link to={docUrl(ALM_DOCUMENTATION_PATHS[AlmKeys.Azure])}>
+                    {translate(
+                      'onboarding.tutorial.with.azure_pipelines.BranchAnalysis.branch_protection.link'
+                    )}
+                  </Link>
+                ),
+              }}
+            />
+          </div>
         </>
       )}
     </>
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.css b/server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.css
deleted file mode 100644
index ac6236b0881..00000000000
--- a/server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2023 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-.github-cfamily-example-repositories-box {
-  box-sizing: border-box;
-}
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.tsx b/server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.tsx
index 332ba0ff603..59c2ca6e6e9 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/GithubCFamilyExampleRepositories.tsx
@@ -23,7 +23,6 @@ import React from 'react';
 import { translate } from '../../../helpers/l10n';
 import { getBaseUrl } from '../../../helpers/system';
 import { OSs, TutorialModes } from '../types';
-import './GithubCFamilyExampleRepositories.css';
 
 export interface GithubCFamilyExampleRepositoriesProps {
   className?: string;
@@ -61,7 +60,7 @@ export default function GithubCFamilyExampleRepositories(
       <div>
         <img
           alt="" // Should be ignored by screen readers
-          className="spacer-right"
+          className="sw-mr-2"
           height={20}
           src={`${getBaseUrl()}/images/alm/github.svg`}
         />
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithHighlights.tsx b/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithHighlights.tsx
index 47dae010bf2..2f99635caed 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithHighlights.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/SentenceWithHighlights.tsx
@@ -37,7 +37,11 @@ export default function SentenceWithHighlights({
 
   const transhighlightPrefixKeys = highlightPrefixKeys || translationKey;
   highlightKeys.forEach((key) => {
-    values[key] = <strong>{translate(transhighlightPrefixKeys, 'sentence', key)}</strong>;
+    values[key] = (
+      <strong className="sw-font-semibold">
+        {translate(transhighlightPrefixKeys, 'sentence', key)}
+      </strong>
+    );
   });
   return (
     <FormattedMessage