From 0b8aab629bcf50e17dbf16284b389b8c7b94deb2 Mon Sep 17 00:00:00 2001 From: Bianca Yang <21014901+xrdt@users.noreply.github.com> Date: Wed, 21 Feb 2024 16:35:59 -0800 Subject: [PATCH] fix: Fix Transition Between /products --> Onboarding --> Product Intro Pages (#20491) * fix some state problems * add onboarding test for this specific case * some small updates --- cypress/e2e/onboarding.cy.ts | 42 +++++++++++++++++++ cypress/support/e2e.ts | 1 + .../OnboardingProductConfiguration.tsx | 2 +- .../src/scenes/onboarding/OnboardingStep.tsx | 2 +- .../src/scenes/onboarding/onboardingLogic.tsx | 4 ++ frontend/src/scenes/products/Products.tsx | 1 + frontend/src/scenes/sceneLogic.ts | 5 ++- 7 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 cypress/e2e/onboarding.cy.ts diff --git a/cypress/e2e/onboarding.cy.ts b/cypress/e2e/onboarding.cy.ts new file mode 100644 index 0000000000000..c3724b3c14fa8 --- /dev/null +++ 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 index e0bad88a76889..f717091bfefd3 100644 --- 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 index 5f973a3d2a715..a31162865edd3 100644 --- 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} />

{option.description}

diff --git a/frontend/src/scenes/onboarding/OnboardingStep.tsx b/frontend/src/scenes/onboarding/OnboardingStep.tsx index 166e9dd5fe516..be716a8d93370 100644 --- a/frontend/src/scenes/onboarding/OnboardingStep.tsx +++ b/frontend/src/scenes/onboarding/OnboardingStep.tsx @@ -48,7 +48,7 @@ export const OnboardingStep = ({

{title || stepKeyToTitle(currentOnboardingStep?.props.stepKey)}

-
+
{onboardingStepKeys.map((stepName, idx) => { return ( diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx index ab3a9350464b7..c089a27f7e95f 100644 --- a/frontend/src/scenes/onboarding/onboardingLogic.tsx +++ b/frontend/src/scenes/onboarding/onboardingLogic.tsx @@ -347,6 +347,10 @@ export const onboardingLogic = kea([ 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 index b6d91ddb4a329..e3ee328ee74ce 100644 --- 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 diff --git a/frontend/src/scenes/sceneLogic.ts b/frontend/src/scenes/sceneLogic.ts index d23fee96cffdb..606db24527f9c 100644 --- 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([ 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) )