SONAR-19922 Improvements in tutorials page after UX feedback

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 e6a84833a200bb1b80d808d6687ea0d50c06dc8b..56b3845c41e3123d901fae827300dccd8d10c2e9 100644 (file)
--- 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 cf7b50ab403302d3dc5b9331cb6222c46d45772b..33c096a909260122537dd025dfa44b0afddce96a 100644 (file)
--- 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 b3a6b0e2ece4edf33e4ba8c9e00ed7fcb771e888..d09f1870b4cae5ea494116732e3581a2adc16afd 100644 (file)
--- 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 756c28edb2926ce182ede883f0789e81e6250c01..875ee42663c036c4a0fdacb466e27e2d103f14f7 100644 (file)
--- 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 b71bcc00289b19f2ccc7058e6fa376ea49be0532..2ea2bb15e75f9a2f78e1b4ff29df144cf6309777 100644 (file)
--- 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 86b23d263ef5810130844dea449bf1552ff6f339..ff606173ee8b7d5bff1cb2907d93487278549002 100644 (file)
--- 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 38a8de03348480f2bb0519db7177b9c61863990e..f0e7a9ba77bf1a5b6afa1729d4d3aaf45738fa2a 100644 (file)
--- 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 1f5d6c95f9907afa4fc40dec1d59c0ad71541626..3210a06b3fbdf6fe25cdd1629d345d314f537fe3 100644 (file)
--- 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 e1266dd3543bbe5b3b8979eec9ca87546bb8bda3..171bbaeb09aa6c7b08f794889859eda37310bc61 100644 (file)
--- 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);
     });
   };