From 6cc81e30c5c456f32362698d0c88c1801cd36233 Mon Sep 17 00:00:00 2001
From: Revanshu Paliwal <revanshu.paliwal@sonarsource.com>
Date: Thu, 20 Jul 2023 10:17:56 +0200
Subject: [PATCH] SONAR-19907 FIxes after validation and review

---
 .../BitbucketPipelinesTutorial.tsx            |   2 +-
 .../components/DefaultProjectKey.tsx          |   6 +-
 .../GithubCFamilyExampleRepositories.tsx      |   2 +-
 .../tutorials/github-action/SecretStep.tsx    |   2 +-
 .../github-action/commands/CFamily.tsx        |   2 +-
 .../tutorials/gitlabci/YmlFileStep.tsx        |   6 +-
 .../gitlabci/commands/PipeCommand.tsx         |   2 +-
 .../jenkins/buildtool-steps/CFamilly.tsx      |   2 +-
 .../tutorials/other/DoneNextSteps.tsx         | 100 +++++++++++-------
 9 files changed, 72 insertions(+), 52 deletions(-)

diff --git a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
index 3d3c4ef3f35..31c33edbc17 100644
--- a/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/bitbucket-pipelines/BitbucketPipelinesTutorial.tsx
@@ -84,7 +84,7 @@ export default function BitbucketPipelinesTutorial(props: BitbucketPipelinesTuto
               <>
                 {buildTool === BuildTools.CFamily && (
                   <GithubCFamilyExampleRepositories
-                    className="sw-my-4 sw-bg-inherit sw-w-abs-600"
+                    className="sw-my-4 sw-w-abs-600"
                     ci={TutorialModes.BitbucketPipelines}
                   />
                 )}
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 b2b8bf75909..c53a717787b 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
@@ -36,11 +36,7 @@ export default function DefaultProjectKey(props: DefaultProjectKeyProps) {
         filename="sonar-project.properties"
         translationKey="onboarding.tutorial.other.project_key"
       />
-      <CodeSnippet
-        snippet={sonarProjectSnippet(component.key)}
-        isOneLine
-        className="sw-p-6 sw-overflow-auto"
-      />
+      <CodeSnippet snippet={sonarProjectSnippet(component.key)} isOneLine className="sw-p-6" />
     </NumberedListItem>
   );
 }
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 59c2ca6e6e9..b6fc67871ab 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
@@ -56,7 +56,7 @@ export default function GithubCFamilyExampleRepositories(
   const link = `https://github.com/orgs/sonarsource-cfamily-examples/repositories?q=${queryParams}`;
 
   return (
-    <Card className={classNames('sw-p-4', className)}>
+    <Card className={classNames('sw-p-4 sw-bg-inherit', className)}>
       <div>
         <img
           alt="" // Should be ignored by screen readers
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 ef5ad4b7acd..86b23d263ef 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
@@ -114,7 +114,7 @@ export default function SecretStep(props: SecretStepProps) {
             defaultMessage={translate('onboarding.tutorial.env_variables')}
             id="onboarding.tutorial.env_variables"
             values={{
-              extra: <ClipboardIconButton copyValue={baseUrl} />,
+              extra: <ClipboardIconButton copyValue={baseUrl} className="sw-ml-1" />,
               field: (
                 <span className="sw-body-sm-highlight">
                   {translate('onboarding.tutorial.env_variables.field')}
diff --git a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx
index 450aad1d9a9..b1a6589e7a0 100644
--- a/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/github-action/commands/CFamily.tsx
@@ -133,7 +133,7 @@ export default function CFamily(props: CFamilyProps) {
         />
         {os && (
           <GithubCFamilyExampleRepositories
-            className="sw-mt-4 sw-bg-inherit sw-w-abs-600"
+            className="sw-mt-4 sw-w-abs-600"
             os={os}
             ci={TutorialModes.GitHubActions}
           />
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 664b4f2da6f..b06d09d08e8 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
@@ -130,7 +130,7 @@ export function YmlFileStep(props: YmlFileStepProps) {
         {buildTool === BuildTools.CFamily && (
           <GithubCFamilyExampleRepositories
             ci={TutorialModes.GitLabCI}
-            className="sw-my-4 sw-bg-inherit sw-w-abs-600"
+            className="sw-my-4 sw-w-abs-600"
           />
         )}
       </NumberedListItem>
@@ -177,7 +177,7 @@ export function YmlFileStep(props: YmlFileStepProps) {
               <GradleBuildSelection className="sw-mb-4 sw-mt-2">
                 {(build) => (
                   <CodeSnippet
-                    className="sw-p-6 sw-overflow-auto"
+                    className="sw-p-6"
                     language="yml"
                     snippet={snippetForBuildTool[buildTool](component.key, component.name, build)}
                   />
@@ -185,7 +185,7 @@ export function YmlFileStep(props: YmlFileStepProps) {
               </GradleBuildSelection>
             ) : (
               <CodeSnippet
-                className="sw-p-6 sw-overflow-auto"
+                className="sw-p-6"
                 language="yml"
                 snippet={snippetForBuildTool[buildTool](component.key, component.name)}
               />
diff --git a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx
index bf6143cebc0..b5d13db1e0b 100644
--- a/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/gitlabci/commands/PipeCommand.tsx
@@ -102,5 +102,5 @@ sonarqube-vulnerability-report:
     - sonarqube-check
 `;
 
-  return <CodeSnippet className="sw-p-6 sw-overflow-auto" snippet={command} language="yml" />;
+  return <CodeSnippet className="sw-p-6" snippet={command} language="yml" />;
 }
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 ca17d2de1fd..a0e21e87013 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
@@ -125,7 +125,7 @@ export default function CFamilly(props: LanguageProps) {
           />
           {os && (
             <GithubCFamilyExampleRepositories
-              className="sw-my-4 sw-bg-inherit"
+              className="sw-my-4"
               os={os}
               ci={TutorialModes.Jenkins}
             />
diff --git a/server/sonar-web/src/main/js/components/tutorials/other/DoneNextSteps.tsx b/server/sonar-web/src/main/js/components/tutorials/other/DoneNextSteps.tsx
index 6f788da72e8..4f9c5069055 100644
--- a/server/sonar-web/src/main/js/components/tutorials/other/DoneNextSteps.tsx
+++ b/server/sonar-web/src/main/js/components/tutorials/other/DoneNextSteps.tsx
@@ -17,10 +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 styled from '@emotion/styled';
+import { animated, config, useSpring } from '@react-spring/web';
 import { BasicSeparator, FlagVisual, Link } from 'design-system';
 import * as React from 'react';
 import { useDocUrl } from '../../../helpers/docs';
 import { translate } from '../../../helpers/l10n';
+import useIntersectionObserver from '../../../hooks/useIntersectionObserver';
 import { Component } from '../../../types/types';
 
 export interface DoneNextStepsProps {
@@ -29,50 +32,71 @@ export interface DoneNextStepsProps {
 
 export default function DoneNextSteps({ component }: DoneNextStepsProps) {
   const isProjectAdmin = component.configuration?.showSettings;
+  const outroRef = React.useRef<HTMLDivElement>(null);
+
+  const intersectionEntry = useIntersectionObserver(outroRef, { freezeOnceVisible: true });
+
+  const outroAnimation = useSpring({
+    from: { top: '200px' },
+    to: intersectionEntry?.isIntersecting ? { top: '0px' } : { top: '200px' },
+    config: config.wobbly,
+  });
 
   const docUrl = useDocUrl();
 
   return (
-    <>
+    <animated.div
+      className="sw-flex sw-flex-col sw-items-center sw-relative"
+      ref={outroRef}
+      style={outroAnimation}
+    >
       <BasicSeparator className="sw-my-8" />
+      <StyledDiv>
+        <div className="sw-flex sw-justify-center sw-mb-12">
+          <FlagVisual />
+        </div>
 
-      <div className="sw-flex sw-justify-center sw-mb-12">
-        <FlagVisual />
-      </div>
+        <p>
+          <strong className="sw-font-semibold sw-mr-1">
+            {translate('onboarding.analysis.auto_refresh_after_analysis.done')}
+          </strong>
+          {translate('onboarding.analysis.auto_refresh_after_analysis.auto_refresh')}
+        </p>
+        <p className="sw-mt-4">
+          {isProjectAdmin
+            ? translate(
+                'onboarding.analysis.auto_refresh_after_analysis.set_up_pr_deco_and_ci.admin'
+              )
+            : translate('onboarding.analysis.auto_refresh_after_analysis.set_up_pr_deco_and_ci')}
+        </p>
+        <div className="sw-mt-4">
+          <span>
+            {translate('onboarding.analysis.auto_refresh_after_analysis.check_these_links')}
+          </span>
+          <ul className="sw-flex sw-flex-col sw-gap-2 sw-mt-2">
+            <li>
+              <Link to={docUrl('/analyzing-source-code/branches/branch-analysis/')}>
+                {translate(
+                  'onboarding.analysis.auto_refresh_after_analysis.check_these_links.branches'
+                )}
+              </Link>
+            </li>
 
-      <p>
-        <strong className="sw-font-semibold sw-mr-1">
-          {translate('onboarding.analysis.auto_refresh_after_analysis.done')}
-        </strong>
-        {translate('onboarding.analysis.auto_refresh_after_analysis.auto_refresh')}
-      </p>
-      <p className="sw-mt-4">
-        {isProjectAdmin
-          ? translate('onboarding.analysis.auto_refresh_after_analysis.set_up_pr_deco_and_ci.admin')
-          : translate('onboarding.analysis.auto_refresh_after_analysis.set_up_pr_deco_and_ci')}
-      </p>
-      <div className="sw-mt-4">
-        <span>
-          {translate('onboarding.analysis.auto_refresh_after_analysis.check_these_links')}
-        </span>
-        <ul className="sw-flex sw-flex-col sw-gap-2 sw-mt-2">
-          <li>
-            <Link to={docUrl('/analyzing-source-code/branches/branch-analysis/')}>
-              {translate(
-                'onboarding.analysis.auto_refresh_after_analysis.check_these_links.branches'
-              )}
-            </Link>
-          </li>
-
-          <li>
-            <Link to={docUrl('/analyzing-source-code/pull-request-analysis')}>
-              {translate(
-                'onboarding.analysis.auto_refresh_after_analysis.check_these_links.pr_analysis'
-              )}
-            </Link>
-          </li>
-        </ul>
-      </div>
-    </>
+            <li>
+              <Link to={docUrl('/analyzing-source-code/pull-request-analysis')}>
+                {translate(
+                  'onboarding.analysis.auto_refresh_after_analysis.check_these_links.pr_analysis'
+                )}
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </StyledDiv>
+    </animated.div>
   );
 }
+
+const StyledDiv = styled.div`
+  width: 840px;
+  margin: auto;
+`;
-- 
2.39.5