From 81cbe7e5ba803048b6a77c7e935d111a98ceb23a Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Wed, 20 Sep 2023 15:20:39 -0700 Subject: [PATCH 1/6] kinda make the url navigation work --- .../src/scenes/onboarding/onboardingLogic.tsx | 73 ++++++++++++++++++- 1 file changed, 69 insertions(+), 4 deletions(-) diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx index 104779a1f4da4..c945d923d19f0 100644 --- a/frontend/src/scenes/onboarding/onboardingLogic.tsx +++ b/frontend/src/scenes/onboarding/onboardingLogic.tsx @@ -8,6 +8,23 @@ import { billingLogic } from 'scenes/billing/billingLogic' export interface OnboardingLogicProps { productKey: ProductKey | null } + +export enum OnboardingStepKey { + PRODUCT_INTRO = 'product_intro', + SDKS = 'sdks', + BILLING = 'billing', + PAIRS_WITH = 'pairs_with', +} + +export type OnboardingStepMap = Record + +const onboardingStepMap: OnboardingStepMap = { + [OnboardingStepKey.PRODUCT_INTRO]: 'OnboardingProductIntro', + [OnboardingStepKey.SDKS]: 'SDKs', + [OnboardingStepKey.BILLING]: 'OnboardingBillingStep', + [OnboardingStepKey.PAIRS_WITH]: 'OnboardingPairsWithStep', +} + export type AllOnboardingSteps = JSX.Element[] export const onboardingLogic = kea({ @@ -51,6 +68,12 @@ export const onboardingLogic = kea({ setAllOnboardingSteps: (_, { allOnboardingSteps }) => allOnboardingSteps as AllOnboardingSteps, }, ], + stepKey: [ + '' as string, + { + setStepKey: (_, { stepKey }) => stepKey, + }, + ], onCompleteOnbardingRedirectUrl: [ urls.default() as string, { @@ -110,9 +133,45 @@ export const onboardingLogic = kea({ completeOnboarding: () => { window.location.href = values.onCompleteOnbardingRedirectUrl }, + setAllOnboardingSteps: ({ allOnboardingSteps }) => { + // once we have the onboarding steps we need to make sure the step key is valid, + // and if so use it to set the step number. if not valid, remove it from the state + if (values.stepKey && values.stepKey in onboardingStepMap) { + const stepIndex = allOnboardingSteps + .map((step) => step.type.name) + .indexOf(onboardingStepMap[values.stepKey as OnboardingStepKey]) + if (stepIndex > -1) { + actions.setCurrentOnboardingStepNumber(stepIndex + 1) + } else { + actions.setStepKey('') + } + } + }, + setStepKey: ({ stepKey }) => { + if ( + stepKey && + values.allOnboardingSteps.length > 0 && + !values.allOnboardingSteps.find( + (step) => step.type.name === onboardingStepMap[stepKey as OnboardingStepKey] + ) + ) { + actions.setStepKey('') + } + }, }), - urlToAction: ({ actions }) => ({ - '/onboarding/:productKey': ({ productKey }, { success, upgraded }) => { + actionToUrl: ({ values }) => ({ + setCurrentOnboardingStepNumber: () => { + const stepName = values.allOnboardingSteps[values.currentOnboardingStepNumber - 1]?.type?.name + const stepKey = Object.keys(onboardingStepMap).find((key) => onboardingStepMap[key] === stepName) + if (stepKey && values.allOnboardingSteps.find((step) => step.type.name === stepName)) { + return [`/onboarding/${values.productKey}`, { step: stepKey }] + } else { + return [`/onboarding/${values.productKey}`] + } + }, + }), + urlToAction: ({ actions, values }) => ({ + '/onboarding/:productKey': ({ productKey }, { success, upgraded, step }) => { if (!productKey) { window.location.href = urls.default() return @@ -120,8 +179,14 @@ export const onboardingLogic = kea({ if (success || upgraded) { actions.setSubscribedDuringOnboarding(true) } - actions.setProductKey(productKey) - actions.setCurrentOnboardingStepNumber(1) + if (productKey !== values.productKey) { + actions.setProductKey(productKey) + } + if (step && step in onboardingStepMap) { + actions.setStepKey(step) + } else { + actions.setCurrentOnboardingStepNumber(1) + } }, }), }) From eb5219202e84bfbe7f784059d483584fd8fd8111 Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Wed, 20 Sep 2023 15:38:06 -0700 Subject: [PATCH 2/6] make it work for unnamed steps, just use number --- frontend/src/scenes/onboarding/onboardingLogic.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx index c945d923d19f0..fd6a33e680286 100644 --- a/frontend/src/scenes/onboarding/onboardingLogic.tsx +++ b/frontend/src/scenes/onboarding/onboardingLogic.tsx @@ -162,8 +162,10 @@ export const onboardingLogic = kea({ actionToUrl: ({ values }) => ({ setCurrentOnboardingStepNumber: () => { const stepName = values.allOnboardingSteps[values.currentOnboardingStepNumber - 1]?.type?.name - const stepKey = Object.keys(onboardingStepMap).find((key) => onboardingStepMap[key] === stepName) - if (stepKey && values.allOnboardingSteps.find((step) => step.type.name === stepName)) { + const stepKey = + Object.keys(onboardingStepMap).find((key) => onboardingStepMap[key] === stepName) || + values.currentOnboardingStepNumber.toString() + if (stepKey) { return [`/onboarding/${values.productKey}`, { step: stepKey }] } else { return [`/onboarding/${values.productKey}`] @@ -182,7 +184,7 @@ export const onboardingLogic = kea({ if (productKey !== values.productKey) { actions.setProductKey(productKey) } - if (step && step in onboardingStepMap) { + if (step && (step in onboardingStepMap || parseInt(step) > 1)) { actions.setStepKey(step) } else { actions.setCurrentOnboardingStepNumber(1) From 10a17292ae081ae23c82a8b02f28aab04120db0e Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Thu, 21 Sep 2023 11:14:25 -0700 Subject: [PATCH 3/6] handle unnamed steps navigation --- .../src/scenes/onboarding/onboardingLogic.tsx | 47 ++++++++++++++----- 1 file changed, 35 insertions(+), 12 deletions(-) diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx index fd6a33e680286..83cc54f4bba77 100644 --- a/frontend/src/scenes/onboarding/onboardingLogic.tsx +++ b/frontend/src/scenes/onboarding/onboardingLogic.tsx @@ -135,15 +135,34 @@ export const onboardingLogic = kea({ }, setAllOnboardingSteps: ({ allOnboardingSteps }) => { // once we have the onboarding steps we need to make sure the step key is valid, - // and if so use it to set the step number. if not valid, remove it from the state - if (values.stepKey && values.stepKey in onboardingStepMap) { - const stepIndex = allOnboardingSteps - .map((step) => step.type.name) - .indexOf(onboardingStepMap[values.stepKey as OnboardingStepKey]) - if (stepIndex > -1) { - actions.setCurrentOnboardingStepNumber(stepIndex + 1) - } else { - actions.setStepKey('') + // and if so use it to set the step number. if not valid, remove it from the state. + // valid step keys are either numbers (used for unnamed steps) or keys from the onboardingStepMap. + // if it's a number, we try to convert it to a named step key using the onboardingStepMap. + let stepKey = values.stepKey + if (values.stepKey) { + if (parseInt(values.stepKey) > 0) { + const stepName = allOnboardingSteps[parseInt(values.stepKey) - 1]?.type?.name + const newStepKey = Object.keys(onboardingStepMap).find((key) => onboardingStepMap[key] === stepName) + if (stepName && stepKey) { + stepKey = newStepKey || stepKey + actions.setStepKey(stepKey) + } + } + if (stepKey in onboardingStepMap) { + const stepIndex = allOnboardingSteps + .map((step) => step.type.name) + .indexOf(onboardingStepMap[stepKey as OnboardingStepKey]) + if (stepIndex > -1) { + actions.setCurrentOnboardingStepNumber(stepIndex + 1) + } else { + actions.setStepKey('') + } + } else if ( + parseInt(stepKey) > 1 && + allOnboardingSteps.length > 0 && + allOnboardingSteps[parseInt(stepKey) - 1] + ) { + actions.setCurrentOnboardingStepNumber(parseInt(stepKey)) } } }, @@ -151,9 +170,10 @@ export const onboardingLogic = kea({ if ( stepKey && values.allOnboardingSteps.length > 0 && - !values.allOnboardingSteps.find( + (!values.allOnboardingSteps.find( (step) => step.type.name === onboardingStepMap[stepKey as OnboardingStepKey] - ) + ) || + !values.allOnboardingSteps[parseInt(stepKey) - 1]) ) { actions.setStepKey('') } @@ -184,7 +204,7 @@ export const onboardingLogic = kea({ if (productKey !== values.productKey) { actions.setProductKey(productKey) } - if (step && (step in onboardingStepMap || parseInt(step) > 1)) { + if (step && (step in onboardingStepMap || parseInt(step) > 0)) { actions.setStepKey(step) } else { actions.setCurrentOnboardingStepNumber(1) @@ -192,3 +212,6 @@ export const onboardingLogic = kea({ }, }), }) + +// problems: +// - after upgrading it redirects to the first step From 4ca4f97d252746678f50dde8edd91ad9cb2cd1d5 Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Thu, 21 Sep 2023 11:24:06 -0700 Subject: [PATCH 4/6] include search params in redirect path so can get back to proper step --- frontend/src/scenes/billing/billingLogic.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/scenes/billing/billingLogic.ts b/frontend/src/scenes/billing/billingLogic.ts index 2fdc2aa0f56ee..9a0d1eff86ec7 100644 --- a/frontend/src/scenes/billing/billingLogic.ts +++ b/frontend/src/scenes/billing/billingLogic.ts @@ -77,7 +77,7 @@ export const billingLogic = kea([ return window.location.pathname.includes('/ingestion') ? urls.ingestion() + '/billing' : window.location.pathname.includes('/onboarding') - ? window.location.pathname + ? window.location.pathname + window.location.search : '' }, }, From cf0195501c3599b16a81554f4ea1c39e5ab6d6c0 Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Thu, 21 Sep 2023 11:38:54 -0700 Subject: [PATCH 5/6] explain things --- frontend/src/scenes/onboarding/onboardingLogic.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx index 83cc54f4bba77..44c2ea41920cc 100644 --- a/frontend/src/scenes/onboarding/onboardingLogic.tsx +++ b/frontend/src/scenes/onboarding/onboardingLogic.tsx @@ -141,6 +141,7 @@ export const onboardingLogic = kea({ let stepKey = values.stepKey if (values.stepKey) { if (parseInt(values.stepKey) > 0) { + // try to convert the step number to a step key const stepName = allOnboardingSteps[parseInt(values.stepKey) - 1]?.type?.name const newStepKey = Object.keys(onboardingStepMap).find((key) => onboardingStepMap[key] === stepName) if (stepName && stepKey) { @@ -158,6 +159,7 @@ export const onboardingLogic = kea({ actions.setStepKey('') } } else if ( + // if it's a number, just use that and set the correct onboarding step number parseInt(stepKey) > 1 && allOnboardingSteps.length > 0 && allOnboardingSteps[parseInt(stepKey) - 1] @@ -212,6 +214,3 @@ export const onboardingLogic = kea({ }, }), }) - -// problems: -// - after upgrading it redirects to the first step From 9d02dcb1c185cf45abd9e6af564c8b5d430036db Mon Sep 17 00:00:00 2001 From: Raquel Smith Date: Thu, 21 Sep 2023 13:10:05 -0700 Subject: [PATCH 6/6] more explaining --- frontend/src/scenes/onboarding/onboardingLogic.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx index 44c2ea41920cc..c896cff3f396e 100644 --- a/frontend/src/scenes/onboarding/onboardingLogic.tsx +++ b/frontend/src/scenes/onboarding/onboardingLogic.tsx @@ -157,6 +157,7 @@ export const onboardingLogic = kea({ actions.setCurrentOnboardingStepNumber(stepIndex + 1) } else { actions.setStepKey('') + actions.setCurrentOnboardingStepNumber(1) } } else if ( // if it's a number, just use that and set the correct onboarding step number @@ -169,6 +170,9 @@ export const onboardingLogic = kea({ } }, setStepKey: ({ stepKey }) => { + // if the step key is invalid (doesn't exist in the onboardingStepMap or the allOnboardingSteps array) + // remove it from the state. Numeric step keys are also allowed, as long as they are a valid + // index for the allOnboardingSteps array. if ( stepKey && values.allOnboardingSteps.length > 0 && @@ -183,6 +187,7 @@ export const onboardingLogic = kea({ }), actionToUrl: ({ values }) => ({ setCurrentOnboardingStepNumber: () => { + // when the current step number changes, update the url to reflect the new step const stepName = values.allOnboardingSteps[values.currentOnboardingStepNumber - 1]?.type?.name const stepKey = Object.keys(onboardingStepMap).find((key) => onboardingStepMap[key] === stepName) ||