onboarding product logic:

PostHog · Dec 17, 2024 · e861541 · e861541
1 parent eaf9de7
commit e861541
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 6 deletions.
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
@@ -156,6 +156,7 @@ export const FEATURE_FLAGS = {
     FF_DASHBOARD_TEMPLATES: 'ff-dashboard-templates', // owner: @EDsCODE
     ARTIFICIAL_HOG: 'artificial-hog', // owner: @Twixes
     CS_DASHBOARDS: 'cs-dashboards', // owner: @pauldambra
+    PRODUCT_ANALYTICS_ONBOARDING: 'product-analytics-onboarding', // owner: @surbhi
     PRODUCT_SPECIFIC_ONBOARDING: 'product-specific-onboarding', // owner: @raquelmsmith
     REDIRECT_SIGNUPS_TO_INSTANCE: 'redirect-signups-to-instance', // owner: @raquelmsmith
     APPS_AND_EXPORTS_UI: 'apps-and-exports-ui', // owner: @benjackwhite

diff --git a/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx b/frontend/src/scenes/onboarding/sdks/sdksLogic.tsx
@@ -2,7 +2,9 @@ import { actions, afterMount, connect, events, kea, listeners, path, reducers, s
 import { loaders } from 'kea-loaders'
 import { urlToAction } from 'kea-router'
 import api from 'lib/api'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { LemonSelectOptions } from 'lib/lemon-ui/LemonSelect/LemonSelect'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { liveEventsTableLogic } from 'scenes/activity/live/liveEventsTableLogic'
 
 import { HogQLQuery, NodeKind } from '~/queries/schema'
@@ -39,10 +41,25 @@ Products that will often be installed in multiple places, eg. web and mobile
 */
 export const multiInstallProducts = [ProductKey.PRODUCT_ANALYTICS, ProductKey.FEATURE_FLAGS]
 
+const getOrderedSDKs = (sdks: SDK[]): SDK[] => {
+    return [
+        ...sdks.filter((sdk) => sdk.key === 'html'),
+        ...sdks.filter((sdk) => sdk.key === 'javascript-web'),
+        ...sdks.filter((sdk) => !['html', 'javascript-web'].includes(sdk.key)),
+    ]
+}
+
 export const sdksLogic = kea<sdksLogicType>([
     path(['scenes', 'onboarding', 'sdks', 'sdksLogic']),
     connect({
-        values: [onboardingLogic, ['productKey'], liveEventsTableLogic, ['eventHosts']],
+        values: [
+            onboardingLogic,
+            ['productKey'],
+            liveEventsTableLogic,
+            ['eventHosts'],
+            featureFlagLogic,
+            ['featureFlags'],
+        ],
     }),
     actions({
         setSourceFilter: (sourceFilter: string | null) => ({ sourceFilter }),
@@ -173,14 +190,21 @@ export const sdksLogic = kea<sdksLogicType>([
     })),
     listeners(({ actions, values }) => ({
         filterSDKs: () => {
-            const filteredSDks: SDK[] = allSDKs
+            let filteredSDks: SDK[] = allSDKs
                 .filter((sdk) => {
                     if (!values.sourceFilter || !sdk) {
                         return true
                     }
                     return sdk.tags.includes(values.sourceFilter)
                 })
                 .filter((sdk) => Object.keys(values.availableSDKInstructionsMap).includes(sdk.key))
+
+            if (
+                values.featureFlags[FEATURE_FLAGS.PRODUCT_ANALYTICS_ONBOARDING] &&
+                values.productKey === ProductKey.PRODUCT_ANALYTICS
+            ) {
+                filteredSDks = getOrderedSDKs(filteredSDks)
+            }
             actions.setSDKs(filteredSDks)
             actions.setSourceOptions(getSourceOptions(values.availableSDKInstructionsMap))
         },
@@ -196,14 +220,21 @@ export const sdksLogic = kea<sdksLogicType>([
             actions.setSelectedSDK(null)
             actions.filterSDKs()
         },
-        [onboardingLogic.actionTypes.setProductKey]: () => {
-            // TODO: This doesn't seem to run when the setProductKey action is called in onboardingLogic...
+        [onboardingLogic.actionTypes.setProductKey]: ({ productKey }) => {
+            // Set default source filter for Product Analytics
+            if (
+                productKey === ProductKey.PRODUCT_ANALYTICS &&
+                values.featureFlags[FEATURE_FLAGS.PRODUCT_ANALYTICS_ONBOARDING]
+            ) {
+                actions.setSourceFilter('Recommended')
+            } else {
+                actions.setSourceFilter(null)
+            }
             actions.resetSDKs()
         },
         resetSDKs: () => {
             actions.filterSDKs()
             actions.setSelectedSDK(null)
-            actions.setSourceFilter(null)
             actions.setSourceOptions(getSourceOptions(values.availableSDKInstructionsMap))
         },
         setSelectedSDK: () => {
@@ -216,6 +247,9 @@ export const sdksLogic = kea<sdksLogicType>([
                 actions.setSelectedSDK(values.sdks?.[0] || null)
             }
         },
+        afterMount: () => {
+            actions.filterSDKs()
+        },
     })),
     events(({ actions }) => ({
         afterMount: () => {
@@ -226,7 +260,13 @@ export const sdksLogic = kea<sdksLogicType>([
         actions.loadSnippetEvents()
     }),
     urlToAction(({ actions }) => ({
-        '/onboarding/:productKey': (_productKey, { sdk }) => {
+        '/onboarding/:productKey': (_product_key, { sdk }) => {
+            if (
+                onboardingLogic.values.productKey === ProductKey.PRODUCT_ANALYTICS &&
+                onboardingLogic.values.featureFlags[FEATURE_FLAGS.PRODUCT_ANALYTICS_ONBOARDING]
+            ) {
+                actions.setSourceFilter('Recommended')
+            }
             const matchedSDK = allSDKs.find((s) => s.key === sdk)
             if (matchedSDK) {
                 actions.setSelectedSDK(matchedSDK)