From fd75a6a5af0102072356538ee0e1535542a038dc Mon Sep 17 00:00:00 2001
From: Revanshu Paliwal <revanshu.paliwal@sonarsource.com>
Date: Tue, 25 Jul 2023 11:53:10 +0200
Subject: [PATCH] SONAR-19922 Improvements in tutorials page after UX feedback

---
 .../azure-pipelines/AzurePipelinesTutorial.tsx      |  2 +-
 .../bitbucket-pipelines/RepositoryVariables.tsx     |  6 +++---
 .../js/components/tutorials/components/AllSet.tsx   |  8 ++++----
 .../tutorials/components/CreateYmlFile.tsx          |  2 +-
 .../components/tutorials/components/GradleBuild.tsx | 10 ++++++++--
 .../tutorials/github-action/SecretStep.tsx          |  6 +++---
 .../tutorials/gitlabci/EnvironmentVariablesStep.tsx | 13 ++++++++++---
 .../components/tutorials/gitlabci/YmlFileStep.tsx   |  6 +++---
 .../js/components/tutorials/other/BuildToolForm.tsx |  7 ++++++-
 9 files changed, 39 insertions(+), 21 deletions(-)

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 e6a84833a20..56b3845c41e 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
@@ -50,7 +50,7 @@ export default function AzurePipelinesTutorial(props: AzurePipelinesTutorialProp
     <>
       <Title>{translate('onboarding.tutorial.with.azure_pipelines.title')}</Title>
 
-      <TutorialStepList>
+      <TutorialStepList className="sw-mb-10">
         <TutorialStep
           title={translate(
             `onboarding.tutorial.with.azure_pipelines.${Steps.ExtensionInstallation}.title`
diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx
index cf7b50ab403..33c096a9092 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/RepositoryVariables.tsx
@@ -77,7 +77,7 @@ export default function RepositoryVariables(props: RepositoryVariablesProps) {
             highlightKeys={['name']}
           />
           <InlineSnippet snippet="SONAR_TOKEN" className="sw-ml-1" />
-          <ClipboardIconButton copyValue="SONAR_TOKEN" className="sw-ml-2" />
+          <ClipboardIconButton copyValue="SONAR_TOKEN" className="sw-ml-2 sw-align-sub" />
         </NumberedListItem>
         <NumberedListItem>
           <TokenStepGenerator component={component} currentUser={currentUser} />
@@ -105,14 +105,14 @@ export default function RepositoryVariables(props: RepositoryVariablesProps) {
             highlightKeys={['name']}
           />
           <InlineSnippet snippet="SONAR_HOST_URL" className="sw-ml-1" />
-          <ClipboardIconButton copyValue="SONAR_HOST_URL" className="sw-ml-2" />
+          <ClipboardIconButton copyValue="SONAR_HOST_URL" className="sw-ml-2 sw-align-sub" />
         </NumberedListItem>
         <NumberedListItem>
           <FormattedMessage
             defaultMessage={translate('onboarding.tutorial.env_variables')}
             id="onboarding.tutorial.env_variables"
             values={{
-              extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1" />,
+              extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1 sw-align-sub" />,
               field: (
                 <span className="sw-body-sm-highlight">
                   {translate('onboarding.tutorial.env_variables.field')}
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx b/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
index b3a6b0e2ece..d09f1870b4c 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/AllSet.tsx
@@ -62,15 +62,15 @@ export function AllSet(props: AllSetProps) {
           {translate('onboarding.tutorial.ci_outro.refresh_text')}
         </p>
         <ul className="sw-mb-6">
-          <li className="sw-mb-4 sw-flex sw-items-center">
-            <CheckIcon className="sw-mr-2" />
+          <li className="sw-mb-4 sw-flex">
+            <CheckIcon className="sw-mr-2 sw-pt-1/2" />
             {branchSupportEnabled
               ? translate('onboarding.tutorial.ci_outro.commit.why', alm)
               : translate('onboarding.tutorial.ci_outro.commit.why.no_branches')}
           </li>
           {willRefreshAutomatically && (
-            <li className="sw-mb-4 sw-flex sw-items-center">
-              <CheckIcon className="sw-mr-2" />
+            <li className="sw-mb-4 sw-flex">
+              <CheckIcon className="sw-mr-2 sw-pt-1/2" />
               {translate('onboarding.tutorial.ci_outro.refresh.why')}
             </li>
           )}
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx b/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx
index 756c28edb29..875ee42663c 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/CreateYmlFile.tsx
@@ -39,7 +39,7 @@ export default function CreateYmlFile(props: CreateYmlFileProps) {
           file: (
             <>
               <InlineSnippet snippet={yamlFileName} />
-              <ClipboardIconButton copyValue={yamlFileName} className="sw-ml-2" />
+              <ClipboardIconButton copyValue={yamlFileName} className="sw-ml-2 sw-align-sub" />
             </>
           ),
         }}
diff --git a/server/sonar-web/src/main/js/components/tutorials/components/GradleBuild.tsx b/server/sonar-web/src/main/js/components/tutorials/components/GradleBuild.tsx
index b71bcc00289..2ea2bb15e75 100644
--- a/server/sonar-web/src/main/js/components/tutorials/components/GradleBuild.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/components/GradleBuild.tsx
@@ -41,13 +41,19 @@ export default function GradleBuild({ component }: Props) {
           groovy: (
             <>
               <InlineSnippet snippet={GradleBuildDSL.Groovy} />
-              <ClipboardIconButton copyValue={GradleBuildDSL.Groovy} className="sw-ml-2" />
+              <ClipboardIconButton
+                copyValue={GradleBuildDSL.Groovy}
+                className="sw-ml-2 sw-align-sub"
+              />
             </>
           ),
           kotlin: (
             <>
               <InlineSnippet snippet={GradleBuildDSL.Kotlin} />
-              <ClipboardIconButton copyValue={GradleBuildDSL.Kotlin} className="sw-ml-2" />
+              <ClipboardIconButton
+                copyValue={GradleBuildDSL.Kotlin}
+                className="sw-ml-2 sw-align-sub"
+              />
             </>
           ),
           sq: <InlineSnippet snippet="org.sonarqube" />,
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx
index 86b23d263ef..ff606173ee8 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/SecretStep.tsx
@@ -81,7 +81,7 @@ export default function SecretStep(props: SecretStepProps) {
             highlightKeys={['name']}
           />
           <InlineSnippet snippet="SONAR_TOKEN" className="sw-ml-1" />
-          <ClipboardIconButton copyValue="SONAR_TOKEN" className="sw-ml-2" />
+          <ClipboardIconButton copyValue="SONAR_TOKEN" className="sw-ml-2 sw-align-sub" />
         </NumberedListItem>
         <NumberedListItem>
           <TokenStepGenerator component={component} currentUser={currentUser} />
@@ -107,14 +107,14 @@ export default function SecretStep(props: SecretStepProps) {
             highlightKeys={['name']}
           />
           <InlineSnippet snippet="SONAR_HOST_URL" className="sw-ml-1" />
-          <ClipboardIconButton copyValue="SONAR_HOST_URL" className="sw-ml-2" />
+          <ClipboardIconButton copyValue="SONAR_HOST_URL" className="sw-ml-2 sw-align-sub" />
         </NumberedListItem>
         <NumberedListItem>
           <FormattedMessage
             defaultMessage={translate('onboarding.tutorial.env_variables')}
             id="onboarding.tutorial.env_variables"
             values={{
-              extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1" />,
+              extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1 sw-align-sub" />,
               field: (
                 <span className="sw-body-sm-highlight">
                   {translate('onboarding.tutorial.env_variables.field')}
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
index 38a8de03348..f0e7a9ba77b 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/EnvironmentVariablesStep.tsx
@@ -71,7 +71,9 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
               defaultMessage={fieldValueTranslation}
               id="onboarding.tutorial.with.gitlab_ci.variables.step1"
               values={{
-                extra: <ClipboardIconButton copyValue="SONAR_TOKEN" className="sw-ml-1" />,
+                extra: (
+                  <ClipboardIconButton copyValue="SONAR_TOKEN" className="sw-ml-1 sw-align-sub" />
+                ),
                 field: (
                   <span className="sw-body-sm-highlight">
                     {translate('onboarding.tutorial.with.gitlab_ci.variables.step1')}
@@ -135,7 +137,12 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
               defaultMessage={fieldValueTranslation}
               id="onboarding.tutorial.with.gitlab_ci.variables.step1"
               values={{
-                extra: <ClipboardIconButton copyValue="SONAR_HOST_URL" className="sw-ml-1" />,
+                extra: (
+                  <ClipboardIconButton
+                    copyValue="SONAR_HOST_URL"
+                    className="sw-ml-1 sw-align-sub"
+                  />
+                ),
                 field: (
                   <span className="sw-body-sm-highlight">
                     {translate('onboarding.tutorial.with.gitlab_ci.variables.step1')}
@@ -150,7 +157,7 @@ export default function EnvironmentVariablesStep(props: EnvironmentVariablesStep
               defaultMessage={fieldValueTranslation}
               id="onboarding.tutorial.with.gitlab_ci.variables.step2"
               values={{
-                extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1" />,
+                extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1 sw-align-sub" />,
                 field: (
                   <span className="sw-body-sm-highlight">
                     {translate('onboarding.tutorial.env_variables.field')}
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx
index 1f5d6c95f99..3210a06b3fb 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/YmlFileStep.tsx
@@ -158,7 +158,7 @@ export function YmlFileStep(props: YmlFileStepProps) {
                       <InlineSnippet snippet={filenameForBuildTool[buildTool]} />
 
                       <ClipboardIconButton
-                        className="sw-ml-2"
+                        className="sw-ml-2 sw-align-sub"
                         copyValue={filenameForBuildTool[buildTool]}
                       />
                     </>
@@ -171,7 +171,7 @@ export function YmlFileStep(props: YmlFileStepProps) {
                           <InlineSnippet snippet={GradleBuildDSL.Kotlin} />
 
                           <ClipboardIconButton
-                            className="sw-ml-2"
+                            className="sw-ml-2 sw-align-sub"
                             copyValue={GradleBuildDSL.Kotlin}
                           />
                         </>
@@ -215,7 +215,7 @@ export function YmlFileStep(props: YmlFileStepProps) {
                       />
 
                       <ClipboardIconButton
-                        className="sw-ml-2"
+                        className="sw-ml-2 sw-align-sub"
                         copyValue={translate('onboarding.tutorial.with.gitlab_ci.yaml.filename')}
                       />
                     </>
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/BuildToolForm.tsx b/server/sonar-web/src/main/js/components/tutorials/other/BuildToolForm.tsx
index e1266dd3543..171bbaeb09a 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/BuildToolForm.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/BuildToolForm.tsx
@@ -44,7 +44,12 @@ export class BuildToolForm extends React.PureComponent<Props, State> {
   }
 
   handleBuildToolChange = (buildTool: BuildTools) => {
-    this.setState({ config: { buildTool } }, () => {
+    const selectOsByDefault = (buildTool === BuildTools.CFamily ||
+      buildTool === BuildTools.Other) && {
+      os: OSs.Linux,
+    };
+
+    this.setState({ config: { buildTool, ...selectOsByDefault } }, () => {
       this.props.onDone(this.state.config);
     });
   };
-- 
2.39.5