fix: Fix Transition Between /products --> Onboarding --> Product Intr…

…o Pages (#20491) * fix some state problems * add onboarding test for this specific case * some small updates
PostHog · Feb 22, 2024 · 0b8aab6 · 0b8aab6
1 parent 05a06d2
commit 0b8aab6
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 3 deletions.
diff --git a/cypress/e2e/onboarding.cy.ts b/cypress/e2e/onboarding.cy.ts
@@ -0,0 +1,42 @@
+import { urls } from 'scenes/urls'
+import { decideResponse } from '../fixtures/api/decide'
+
+describe('Onboarding', () => {
+    beforeEach(() => {
+        cy.intercept('https://app.posthog.com/decide/*', (req) =>
+            req.reply(
+                decideResponse({
+                    'product-intro-pages': 'test',
+                })
+            )
+        )
+    })
+
+    it('Navigate between /products to /onboarding to a product intro page', () => {
+        cy.visit('/products')
+
+        // Get started on product analytics onboarding
+        cy.get('[data-attr=product_analytics-get-started-button]').click()
+
+        // Confirm product intro is not included as the first step in the upper right breadcrumbs
+        cy.get('[data-attr=onboarding-breadcrumbs] > :first-child > * span').should('not.contain', 'Product Intro')
+
+        // Navigate to the product intro page by clicking the left side bar
+        cy.get('[data-attr=menu-item-replay').click()
+
+        // Confirm we're on the product_intro page
+        cy.get('[data-attr=top-bar-name] > span').contains('Product intro')
+
+        // Go back to /products
+        cy.visit('/products')
+
+        // Again get started on product analytics onboarding
+        cy.get('[data-attr=product_analytics-get-started-button]').click()
+
+        // Navigate to the product intro page by changing the url
+        cy.visit(urls.onboarding('session_replay', 'product_intro'))
+
+        // Confirm we're on the product intro page
+        cy.get('[data-attr=top-bar-name] > span').contains('Product intro')
+    })
+})
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -32,6 +32,7 @@ beforeEach(() => {
                 'surveys-new-creation-flow': true,
                 'surveys-results-visualizations': true,
                 'auto-redirect': true,
+
                 notebooks: true,
             })
         )

diff --git a/frontend/src/scenes/onboarding/OnboardingProductConfiguration.tsx b/frontend/src/scenes/onboarding/OnboardingProductConfiguration.tsx
@@ -36,7 +36,7 @@ export const OnboardingProductConfiguration = ({
                                 }}
                                 label={option.title}
                                 fullWidth={true}
-                                labelClassName="text-base font-semibold"
+                                labelClassName="text-base font-semibold -ml-2"
                                 checked={option.value || false}
                             />
                             <p className="prompt-text ml-0">{option.description}</p>

diff --git a/frontend/src/scenes/onboarding/OnboardingStep.tsx b/frontend/src/scenes/onboarding/OnboardingStep.tsx
@@ -48,7 +48,7 @@ export const OnboardingStep = ({
                     <h1 className="font-bold m-0 pl-2">
                         {title || stepKeyToTitle(currentOnboardingStep?.props.stepKey)}
                     </h1>
-                    <div className="flex items-center gap-x-3">
+                    <div className="flex items-center gap-x-3" data-attr="onboarding-breadcrumbs">
                         {onboardingStepKeys.map((stepName, idx) => {
                             return (
                                 <React.Fragment key={`stepKey-${idx}`}>

diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx
@@ -347,6 +347,10 @@ export const onboardingLogic = kea<onboardingLogicType>([
             if (productKey !== values.productKey) {
                 actions.setProductKey(productKey)
             }
+
+            // Reset onboarding steps so they can be populated upon render in the component.
+            actions.setAllOnboardingSteps([])
+
             if (step) {
                 actions.setStepKey(step)
             } else {

diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx
@@ -73,6 +73,7 @@ function OnboardingNotCompletedButton({
                 }
                 router.actions.push(url)
             }}
+            data-attr={`${productKey}-get-started-button`}
         >
             Get started
         </LemonButton>

diff --git a/frontend/src/scenes/sceneLogic.ts b/frontend/src/scenes/sceneLogic.ts
@@ -15,7 +15,7 @@ import { AvailableFeature, ProductKey } from '~/types'
 
 import { appContextLogic } from './appContextLogic'
 import { handleLoginRedirect } from './authentication/loginLogic'
-import { OnboardingStepKey } from './onboarding/onboardingLogic'
+import { onboardingLogic, OnboardingStepKey } from './onboarding/onboardingLogic'
 import { organizationLogic } from './organizationLogic'
 import { preflightLogic } from './PreflightCheck/preflightLogic'
 import type { sceneLogicType } from './sceneLogicType'
@@ -289,6 +289,9 @@ export const sceneLogic = kea<sceneLogicType>([
                                 console.warn(
                                     `Onboarding not completed for ${productKeyFromUrl}, redirecting to onboarding intro`
                                 )
+                                onboardingLogic.mount()
+                                onboardingLogic.actions.setIncludeIntro(true)
+                                onboardingLogic.unmount()
                                 router.actions.replace(
                                     urls.onboarding(productKeyFromUrl, OnboardingStepKey.PRODUCT_INTRO)
                                 )