fix: onboarding template fixes (#25119)

frontend/src/lib/lemon-ui/LemonSwitch/LemonSwitch.tsx

@@ -21,6 +21,8 @@ export interface LemonSwitchProps {
     tooltip?: string | JSX.Element | null
     handleContent?: React.ReactElement | null
     'aria-label'?: string
+    sliderColorOverrideChecked?: string
+    sliderColorOverrideUnchecked?: string
 }
 
 /** Counter used for collision-less automatic switch IDs. */
@@ -44,6 +46,8 @@ export const LemonSwitch: React.FunctionComponent<LemonSwitchProps & React.RefAt
             'data-attr': dataAttr,
             'aria-label': ariaLabel,
             handleContent,
+            sliderColorOverrideChecked,
+            sliderColorOverrideUnchecked,
         },
         ref
     ): JSX.Element {
@@ -80,7 +84,13 @@ export const LemonSwitch: React.FunctionComponent<LemonSwitchProps & React.RefAt
                 disabled={disabled}
                 {...conditionalProps}
             >
-                <div className="LemonSwitch__slider" />
+                <div
+                    className={`LemonSwitch__slider ${
+                        sliderColorOverrideChecked || sliderColorOverrideUnchecked
+                            ? `bg-${checked ? sliderColorOverrideChecked : sliderColorOverrideUnchecked}`
+                            : ''
+                    }`}
+                />
                 <div className="LemonSwitch__handle">{handleContent}</div>
             </button>
         )

frontend/src/scenes/activity/live/liveEventsTableLogic.tsx

@@ -26,6 +26,7 @@ export const liveEventsTableLogic = kea<liveEventsTableLogicType>([
         pollStats: true,
         setStats: (stats) => ({ stats }),
         showLiveStreamErrorToast: true,
+        addEventHost: (eventHost) => ({ eventHost }),
     })),
     reducers({
         events: [
@@ -83,6 +84,17 @@ export const liveEventsTableLogic = kea<liveEventsTableLogicType>([
                 },
             },
         ],
+        eventHosts: [
+            [] as string[],
+            {
+                addEventHost: (state, { eventHost }) => {
+                    if (!state.includes(eventHost)) {
+                        return [...state, eventHost]
+                    }
+                    return state
+                },
+            },
+        ],
     }),
     selectors(({ selectors }) => ({
         eventCount: [() => [selectors.events], (events: any) => events.length],
@@ -177,6 +189,17 @@ export const liveEventsTableLogic = kea<liveEventsTableLogicType>([
                 console.error('Failed to poll stats:', error)
             }
         },
+        addEvents: ({ events }) => {
+            if (events.length > 0) {
+                const event = events[0]
+                const eventUrl = event.properties?.$current_url
+                if (eventUrl) {
+                    const eventHost = new URL(eventUrl).host
+                    const eventProtocol = new URL(eventUrl).protocol
+                    actions.addEventHost(`${eventProtocol}//${eventHost}`)
+                }
+            }
+        },
     })),
     events(({ actions, cache }) => ({
         afterMount: () => {

frontend/src/scenes/onboarding/Onboarding.tsx

@@ -109,6 +109,9 @@ const ProductAnalyticsOnboarding = (): JSX.Element => {
     // not sure if there is a better way to do this
     useValues(newDashboardLogic)
 
+    const showTemplateSteps =
+        featureFlags[FEATURE_FLAGS.ONBOARDING_DASHBOARD_TEMPLATES] == 'test' && window.innerWidth > 1000
+
     const options: ProductConfigOption[] = [
         {
             title: 'Autocapture frontend interactions',
@@ -165,10 +168,12 @@ const ProductAnalyticsOnboarding = (): JSX.Element => {
                 stepKey={OnboardingStepKey.INSTALL}
             />
             <OnboardingProductConfiguration stepKey={OnboardingStepKey.PRODUCT_CONFIGURATION} options={options} />
-            {featureFlags[FEATURE_FLAGS.ONBOARDING_DASHBOARD_TEMPLATES] == 'test' ? (
+
+            {/* this is two conditionals because they need to be direct children of the wrapper */}
+            {showTemplateSteps ? (
                 <OnboardingDashboardTemplateSelectStep stepKey={OnboardingStepKey.DASHBOARD_TEMPLATE} />
             ) : null}
-            {featureFlags[FEATURE_FLAGS.ONBOARDING_DASHBOARD_TEMPLATES] == 'test' ? (
+            {showTemplateSteps ? (
                 <OnboardingDashboardTemplateConfigureStep stepKey={OnboardingStepKey.DASHBOARD_TEMPLATE_CONFIGURE} />
             ) : null}
         </OnboardingWrapper>

frontend/src/scenes/onboarding/onboardingLogic.tsx

@@ -2,6 +2,7 @@ import { actions, connect, kea, listeners, path, props, reducers, selectors } fr
 import { actionToUrl, router, urlToAction } from 'kea-router'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { liveEventsTableLogic } from 'scenes/activity/live/liveEventsTableLogic'
 import { billingLogic } from 'scenes/billing/billingLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { Scene } from 'scenes/sceneTypes'
@@ -110,6 +111,8 @@ export const getProductUri = (productKey: ProductKey): string => {
 export const onboardingLogic = kea<onboardingLogicType>([
     props({} as OnboardingLogicProps),
     path(['scenes', 'onboarding', 'onboardingLogic']),
+    // connect this so we start collecting live events the whole time during onboarding
+    connect(liveEventsTableLogic),
     connect({
         values: [
             billingLogic,

frontend/src/scenes/onboarding/productAnalyticsSteps/DashboardTemplateConfigureStep.tsx

@@ -17,6 +17,7 @@ import { iframedToolbarBrowserLogic } from 'lib/components/IframedToolbarBrowser
 import { useEffect, useRef, useState } from 'react'
 import { dashboardTemplateVariablesLogic } from 'scenes/dashboard/dashboardTemplateVariablesLogic'
 import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 
 import { onboardingLogic, OnboardingStepKey } from '../onboardingLogic'
 import { OnboardingStep } from '../OnboardingStep'
@@ -31,7 +32,7 @@ const UrlInput = ({ iframeRef }: { iframeRef: React.RefObject<HTMLIFrameElement>
     const { browserUrl, currentPath } = useValues(
         iframedToolbarBrowserLogic({ iframeRef, clearBrowserUrlOnUnmount: true })
     )
-    const { snippetHosts } = useValues(sdksLogic)
+    const { combinedSnippetAndLiveEventsHosts } = useValues(sdksLogic)
     const { addUrl } = useActions(authorizedUrlListLogic({ actionId: null, type: AuthorizedUrlListType.TOOLBAR_URLS }))
     const [inputValue, setInputValue] = useState(currentPath)
 
@@ -56,7 +57,7 @@ const UrlInput = ({ iframeRef }: { iframeRef: React.RefObject<HTMLIFrameElement>
                             <LemonInputSelect
                                 mode="single"
                                 value={[browserUrl || 'my-website.com']}
-                                options={snippetHosts.map((host) => ({ key: host, label: host }))}
+                                options={combinedSnippetAndLiveEventsHosts.map((host) => ({ key: host, label: host }))}
                                 allowCustomValues={false}
                                 onChange={(v) => {
                                     addUrl(v[0])
@@ -86,7 +87,9 @@ const UrlInput = ({ iframeRef }: { iframeRef: React.RefObject<HTMLIFrameElement>
 
 export const SiteChooser = (): JSX.Element => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
-    const { snippetHosts, hasSnippetEventsLoading } = useValues(sdksLogic)
+    const { combinedSnippetAndLiveEventsHosts, hasSnippetEventsLoading } = useValues(sdksLogic)
+    const { setStepKey } = useActions(onboardingLogic)
+    const { isCloud } = useValues(preflightLogic)
     const { setProposedBrowserUrl } = useActions(
         iframedToolbarBrowserLogic({
             iframeRef,
@@ -101,7 +104,6 @@ export const SiteChooser = (): JSX.Element => {
             automaticallyAuthorizeBrowserUrl: true,
         })
     )
-    const { setStepKey } = useActions(onboardingLogic)
 
     return (
         <>
@@ -122,15 +124,21 @@ export const SiteChooser = (): JSX.Element => {
                     <h2>Select where you want to track events from.</h2>
                     {hasSnippetEventsLoading ? (
                         <Spinner />
-                    ) : snippetHosts.length > 0 ? (
+                    ) : combinedSnippetAndLiveEventsHosts.length > 0 ? (
                         <>
                             <p>
-                                Not seeing the site you want?{' '}
-                                <Link onClick={() => setStepKey(OnboardingStepKey.INSTALL)}>Install posthog-js</Link> or
+                                Not seeing the site you want? Try clikcing around on your site to trigger a few events.
+                                If you haven't yet,{' '}
+                                <Link onClick={() => setStepKey(OnboardingStepKey.INSTALL)}>install posthog-js</Link> or
                                 the HTML snippet wherever you want to track events, then come back here.
                             </p>
+                            {isCloud && (
+                                <p className="text-muted italic">
+                                    Note: Sites must be served over HTTPS to be selected.
+                                </p>
+                            )}
                             <div className="space-y-2">
-                                {snippetHosts.map((host) => (
+                                {combinedSnippetAndLiveEventsHosts.concat('https://posthog.com').map((host) => (
                                     <LemonButton
                                         key={`snippet-host-button-${host}`}
                                         type="tertiary"
@@ -243,11 +251,11 @@ export const OnboardingDashboardTemplateConfigureStep = ({
                     </div>
                 ) : (
                     <div className="grid grid-cols-6 space-x-6 min-h-[80vh]">
-                        <div className="col-span-4 relative">
+                        <div className="col-span-4 relative max-h-[100vh] overflow-y-hidden">
                             {browserUrl && iframeBanner?.level != 'error' ? (
                                 <div className="border border-1 border-border-bold rounded h-full w-full flex flex-col">
                                     <UrlInput iframeRef={iframeRef} />
-                                    <div className="m-2 grow rounded">
+                                    <div className="m-2 grow rounded ">
                                         <IframedToolbarBrowser iframeRef={iframeRef} userIntent="add-action" />
                                     </div>
                                 </div>

frontend/src/scenes/onboarding/productAnalyticsSteps/onboardingTemplateConfigLogic.ts

@@ -6,6 +6,7 @@ import { dashboardTemplateVariablesLogic } from 'scenes/dashboard/dashboardTempl
 import { newDashboardLogic } from 'scenes/dashboard/newDashboardLogic'
 import { urls } from 'scenes/urls'
 
+import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
 import { DashboardTemplateType, DashboardType } from '~/types'
 
 import { onboardingLogic, OnboardingStepKey } from '../onboardingLogic'
@@ -30,6 +31,8 @@ export const onboardingTemplateConfigLogic = kea<onboardingTemplateConfigLogicTy
             ],
             onboardingLogic,
             ['goToPreviousStep', 'setOnCompleteOnboardingRedirectUrl', 'goToNextStep'],
+            sidePanelStateLogic,
+            ['closeSidePanel'],
         ],
     }),
     actions({
@@ -136,6 +139,9 @@ export const onboardingTemplateConfigLogic = kea<onboardingTemplateConfigLogicTy
                     actions.goToPreviousStep()
                 }
             }
+            if (step === OnboardingStepKey.DASHBOARD_TEMPLATE) {
+                actions.closeSidePanel()
+            }
             actions.setIsLoading(false)
         },
     })),

frontend/src/scenes/onboarding/sdks/sdksLogic.tsx

@@ -3,6 +3,7 @@ import { loaders } from 'kea-loaders'
 import { urlToAction } from 'kea-router'
 import api from 'lib/api'
 import { LemonSelectOptions } from 'lib/lemon-ui/LemonSelect/LemonSelect'
+import { liveEventsTableLogic } from 'scenes/activity/live/liveEventsTableLogic'
 
 import { HogQLQuery, NodeKind } from '~/queries/schema'
 import { hogql } from '~/queries/utils'
@@ -41,7 +42,7 @@ export const multiInstallProducts = [ProductKey.PRODUCT_ANALYTICS, ProductKey.FE
 export const sdksLogic = kea<sdksLogicType>([
     path(['scenes', 'onboarding', 'sdks', 'sdksLogic']),
     connect({
-        values: [onboardingLogic, ['productKey']],
+        values: [onboardingLogic, ['productKey'], liveEventsTableLogic, ['eventHosts']],
     }),
     actions({
         setSourceFilter: (sourceFilter: string | null) => ({ sourceFilter }),
@@ -118,6 +119,20 @@ export const sdksLogic = kea<sdksLogicType>([
                 return Object.keys(availableSDKInstructionsMap).length > 5 && sourceOptions.length > 2
             },
         ],
+        combinedSnippetAndLiveEventsHosts: [
+            (selectors) => [selectors.snippetHosts, selectors.eventHosts],
+            (snippetHosts: string[], eventHosts: string[]): string[] => {
+                const combinedSnippetAndLiveEventsHosts = snippetHosts
+                for (const host of eventHosts) {
+                    const hostProtocol = new URL(host).protocol
+                    const currentProtocol = window.location.protocol
+                    if (hostProtocol === currentProtocol && !combinedSnippetAndLiveEventsHosts.includes(host)) {
+                        combinedSnippetAndLiveEventsHosts.push(host)
+                    }
+                }
+                return combinedSnippetAndLiveEventsHosts
+            },
+        ],
     }),
     loaders(({ actions }) => ({
         hasSnippetEvents: [

frontend/src/toolbar/actions/ActionAttribute.tsx

@@ -58,15 +58,19 @@ export function ActionAttribute({
     return (
         <div key={attribute} className="flex flex-row gap-2 justify-between items-center">
             {automaticActionCreationEnabled && (
-                <LemonSwitch
-                    size="small"
-                    checked={automaticCreationIncludedPropertyKeys.includes(attribute)}
-                    onChange={(checked) =>
-                        checked
-                            ? addAutomaticCreationIncludedPropertyKey(attribute)
-                            : removeAutomaticCreationIncludedPropertyKey(attribute)
-                    }
-                />
+                <>
+                    <LemonSwitch
+                        size="small"
+                        checked={automaticCreationIncludedPropertyKeys.includes(attribute)}
+                        onChange={(checked) =>
+                            checked
+                                ? addAutomaticCreationIncludedPropertyKey(attribute)
+                                : removeAutomaticCreationIncludedPropertyKey(attribute)
+                        }
+                        sliderColorOverrideChecked="primary-3000-light"
+                        sliderColorOverrideUnchecked="muted-3000-light"
+                    />
+                </>
             )}
             <div className="text-muted text-xl">{icon}</div>
             <div className="grow">{text}</div>