feat(onboarding): scroll next page into view if previous page was scrolled (#5905)

Author: hoorayimhelping

src/homepageExperience/containers/ArduinoWizard.tsx

@@ -26,7 +26,10 @@ import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataD
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
-import {HOMEPAGE_NAVIGATION_STEPS_ARDUINO} from 'src/homepageExperience/utils'
+import {
+  scrollNextPageIntoView,
+  HOMEPAGE_NAVIGATION_STEPS_ARDUINO,
+} from 'src/homepageExperience/utils'
 import {normalizeEventName} from 'src/cloud/utils/reporting'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
@@ -85,6 +88,7 @@ export class ArduinoWizard extends PureComponent<{}, State> {
             ),
           }
         )
+        scrollNextPageIntoView()
       }
     )
   }
@@ -105,6 +109,7 @@ export class ArduinoWizard extends PureComponent<{}, State> {
             ),
           }
         )
+        scrollNextPageIntoView()
       }
     )
   }
@@ -120,6 +125,7 @@ export class ArduinoWizard extends PureComponent<{}, State> {
         ),
       }
     )
+    scrollNextPageIntoView()
   }
 
   renderStep = () => {

src/homepageExperience/containers/CliWizard.tsx

@@ -25,7 +25,10 @@ import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataD
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
-import {HOMEPAGE_NAVIGATION_STEPS_SHORT} from 'src/homepageExperience/utils'
+import {
+  scrollNextPageIntoView,
+  HOMEPAGE_NAVIGATION_STEPS_SHORT,
+} from 'src/homepageExperience/utils'
 import {normalizeEventName} from 'src/cloud/utils/reporting'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
@@ -84,6 +87,8 @@ export class CliWizard extends PureComponent<{}, State> {
             ),
           }
         )
+
+        scrollNextPageIntoView()
       }
     )
   }
@@ -104,6 +109,8 @@ export class CliWizard extends PureComponent<{}, State> {
             ),
           }
         )
+
+        scrollNextPageIntoView()
       }
     )
   }
@@ -119,6 +126,7 @@ export class CliWizard extends PureComponent<{}, State> {
         ),
       }
     )
+    scrollNextPageIntoView()
   }
 
   renderStep = () => {

src/homepageExperience/containers/GoWizard.tsx

@@ -23,12 +23,14 @@ import {normalizeEventName} from 'src/cloud/utils/reporting'
 
 import {GoIcon} from 'src/homepageExperience/components/HomepageIcons'
 
-import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
-
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  scrollNextPageIntoView,
+  HOMEPAGE_NAVIGATION_STEPS,
+} from 'src/homepageExperience/utils'
 
 interface State {
   currentStep: number
@@ -84,6 +86,7 @@ export class GoWizard extends PureComponent<null, State> {
             ),
           }
         )
+        scrollNextPageIntoView()
       }
     )
   }
@@ -104,6 +107,7 @@ export class GoWizard extends PureComponent<null, State> {
             ),
           }
         )
+        scrollNextPageIntoView()
       }
     )
   }
@@ -119,6 +123,7 @@ export class GoWizard extends PureComponent<null, State> {
         ),
       }
     )
+    scrollNextPageIntoView()
   }
 
   renderStep = () => {

src/homepageExperience/containers/NodejsWizard.tsx

@@ -23,12 +23,14 @@ import {normalizeEventName} from 'src/cloud/utils/reporting'
 
 import {NodejsIcon} from 'src/homepageExperience/components/HomepageIcons'
 
-import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
-
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  scrollNextPageIntoView,
+  HOMEPAGE_NAVIGATION_STEPS,
+} from 'src/homepageExperience/utils'
 
 interface State {
   currentStep: number
@@ -84,6 +86,7 @@ export class NodejsWizard extends PureComponent<null, State> {
             ),
           }
         )
+        scrollNextPageIntoView()
       }
     )
   }
@@ -104,6 +107,7 @@ export class NodejsWizard extends PureComponent<null, State> {
             ),
           }
         )
+        scrollNextPageIntoView()
       }
     )
   }
@@ -119,6 +123,7 @@ export class NodejsWizard extends PureComponent<null, State> {
         ),
       }
     )
+    scrollNextPageIntoView()
   }
 
   renderStep = () => {

src/homepageExperience/containers/PythonWizard.tsx

@@ -24,12 +24,14 @@ import {normalizeEventName} from 'src/cloud/utils/reporting'
 
 import {PythonIcon} from 'src/homepageExperience/components/HomepageIcons'
 
-import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
-
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  scrollNextPageIntoView,
+  HOMEPAGE_NAVIGATION_STEPS,
+} from 'src/homepageExperience/utils'
 
 interface State {
   currentStep: number
@@ -85,6 +87,7 @@ export class PythonWizard extends PureComponent<null, State> {
             ),
           }
         )
+        scrollNextPageIntoView()
       }
     )
   }
@@ -105,6 +108,7 @@ export class PythonWizard extends PureComponent<null, State> {
             ),
           }
         )
+        scrollNextPageIntoView()
       }
     )
   }
@@ -120,6 +124,7 @@ export class PythonWizard extends PureComponent<null, State> {
         ),
       }
     )
+    scrollNextPageIntoView()
   }
 
   renderStep = () => {

src/homepageExperience/utils.ts

@@ -1,5 +1,7 @@
 import {IconFont} from '@influxdata/clockface'
 
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
 export const HOMEPAGE_NAVIGATION_STEPS = [
   {
     name: 'Overview',
@@ -100,3 +102,18 @@ export const HOMEPAGE_NAVIGATION_STEPS_ARDUINO = [
     glyph: IconFont.StarSmile,
   },
 ]
+
+// Each onboarding page in the wizard has a single h1 at the top of it. Attempt to scroll it into view smoothly
+// Set a timeout of 0 so that this function call gets run after react has a had a chance to update state and
+// re-render on the main thread.
+export const scrollNextPageIntoView = () => {
+  if (isFlagEnabled('firstMileScrollTop')) {
+    setTimeout(() => {
+      document.querySelector('h1').scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest',
+      })
+    }, 0)
+  }
+}