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 = ({