feat: add reverse proxy step to quick start steps + more quick start events

frontend/src/layout/navigation-3000/sidepanel/panels/activation/SidePanelActivation.tsx

@@ -78,7 +78,7 @@ const ActivationTask = ({
 }: ActivationTaskType): JSX.Element => {
     const displaySideAction = !completed && !skipped && canSkip
     const { runTask, skipTask } = useActions(activationLogic)
-    const { reportActivationSideBarTaskClicked } = useActions(eventUsageLogic)
+    const { reportActivationSideBarTaskClicked, reportActivationSideBarTaskSkipped } = useActions(eventUsageLogic)
 
     const content = (
         <div className="my-4 mx-2">
@@ -87,6 +87,11 @@ const ActivationTask = ({
         </div>
     )
 
+    const handleSkip = (): void => {
+        skipTask(id)
+        reportActivationSideBarTaskSkipped(id)
+    }
+
     const params: Partial<LemonButtonWithSideActionProps> = {
         id,
         fullWidth: true,
@@ -97,6 +102,9 @@ const ActivationTask = ({
     if (url) {
         params.to = url
         params.targetBlank = true
+        params.onClick = () => {
+            reportActivationSideBarTaskClicked(id)
+        }
     } else {
         params.onClick = () => {
             runTask(id)
@@ -111,7 +119,7 @@ const ActivationTask = ({
                     sideAction={{
                         icon: <IconX />,
                         tooltip: 'Skip task',
-                        onClick: () => skipTask(id),
+                        onClick: () => handleSkip(),
                     }}
                 >
                     {content}

frontend/src/layout/navigation-3000/sidepanel/panels/activation/activationLogic.ts

@@ -2,7 +2,6 @@ import { actions, connect, events, kea, listeners, path, reducers, selectors } f
 import { loaders } from 'kea-loaders'
 import { router } from 'kea-router'
 import api from 'lib/api'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { permanentlyMount } from 'lib/utils/kea-logic-builders'
 import { membersLogic } from 'scenes/organization/membersLogic'
 import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
@@ -25,6 +24,7 @@ export enum ActivationTasks {
     SetupSessionRecordings = 'setup_session_recordings',
     TrackCustomEvents = 'track_custom_events',
     InstallFirstApp = 'install_first_app',
+    SetupReverseProxy = 'setup_reverse_proxy',
 }
 
 export type ActivationTaskType = {
@@ -65,8 +65,6 @@ export const activationLogic = kea<activationLogicType>([
             ['loadPluginsSuccess', 'loadPluginsFailure'],
             sidePanelStateLogic,
             ['openSidePanel'],
-            eventUsageLogic,
-            ['reportActivationSideBarShown'],
             savedInsightsLogic,
             ['loadInsights', 'loadInsightsSuccess', 'loadInsightsFailure'],
             dashboardsModel,
@@ -282,6 +280,17 @@ export const activationLogic = kea<activationLogicType>([
                                 skipped: skippedTasks.includes(ActivationTasks.InstallFirstApp),
                             })
                             break
+                        case ActivationTasks.SetupReverseProxy:
+                            tasks.push({
+                                id: ActivationTasks.SetupReverseProxy,
+                                name: 'Set up reverse proxy',
+                                description: 'Secure your PostHog instance with a reverse proxy',
+                                completed: false,
+                                canSkip: true,
+                                skipped: skippedTasks.includes(ActivationTasks.SetupReverseProxy),
+                                url: 'https://posthog.com/docs/advanced/proxy',
+                            })
+                            break
                         default:
                             break
                     }

frontend/src/layout/navigation-3000/sidepanel/sidePanelStateLogic.tsx

@@ -1,6 +1,7 @@
-import { actions, kea, listeners, path, reducers } from 'kea'
+import { actions, connect, kea, listeners, path, reducers } from 'kea'
 import { actionToUrl, router, urlToAction } from 'kea-router'
 import { windowValues } from 'kea-window-values'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 
 import { SidePanelTab } from '~/types'
 
@@ -10,6 +11,9 @@ import type { sidePanelStateLogicType } from './sidePanelStateLogicType'
 
 export const sidePanelStateLogic = kea<sidePanelStateLogicType>([
     path(['scenes', 'navigation', 'sidepanel', 'sidePanelStateLogic']),
+    connect(() => ({
+        actions: [eventUsageLogic, ['reportActivationSideBarOpened', 'reportActivationSideBarClosed']],
+    })),
     actions({
         openSidePanel: (tab: SidePanelTab, options?: string) => ({ tab, options }),
         closeSidePanel: (tab?: SidePanelTab) => ({ tab }),
@@ -55,14 +59,17 @@ export const sidePanelStateLogic = kea<sidePanelStateLogicType>([
     listeners(({ actions, values }) => ({
         // NOTE: We explicitly reference the actions instead of connecting so that people don't accidentally
         // use this logic instead of sidePanelStateLogic
-        openSidePanel: () => {
+        openSidePanel: ({ tab }) => {
+            actions.reportActivationSideBarOpened(tab)
             actions.setSidePanelOpen(true)
         },
         closeSidePanel: ({ tab }) => {
             if (!tab) {
+                actions.reportActivationSideBarClosed()
                 // If we aren't specifiying the tab we always close
                 actions.setSidePanelOpen(false)
             } else if (values.selectedTab === tab) {
+                actions.reportActivationSideBarClosed(tab)
                 // Otherwise we only close it if the tab is the currently open one
                 actions.setSidePanelOpen(false)
             }

frontend/src/lib/utils/eventUsageLogic.ts

@@ -43,6 +43,7 @@ import {
     SessionPlayerData,
     SessionRecordingPlayerTab,
     SessionRecordingUsageType,
+    SidePanelTab,
     Survey,
 } from '~/types'
 
@@ -457,12 +458,10 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportInstanceSettingChange: (name: string, value: string | boolean | number) => ({ name, value }),
         reportAxisUnitsChanged: (properties: Record<string, any>) => ({ ...properties }),
         reportTeamSettingChange: (name: string, value: any) => ({ name, value }),
-        reportActivationSideBarShown: (
-            activeTasksCount: number,
-            completedTasksCount: number,
-            completionPercent: number
-        ) => ({ activeTasksCount, completedTasksCount, completionPercent }),
+        reportActivationSideBarOpened: (tab: SidePanelTab) => ({ tab }),
+        reportActivationSideBarClosed: (tab?: SidePanelTab) => ({ tab }),
         reportActivationSideBarTaskClicked: (key: string) => ({ key }),
+        reportActivationSideBarTaskSkipped: (key: string) => ({ key }),
         reportBillingUpgradeClicked: (plan: string) => ({ plan }),
         reportRoleCreated: (role: string) => ({ role }),
         reportResourceAccessLevelUpdated: (resourceType: Resource, roleName: string, accessLevel: AccessLevel) => ({
@@ -1088,18 +1087,26 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
                 value,
             })
         },
-        reportActivationSideBarShown: ({ activeTasksCount, completedTasksCount, completionPercent }) => {
-            posthog.capture('activation sidebar shown', {
-                active_tasks_count: activeTasksCount,
-                completed_tasks_count: completedTasksCount,
-                completion_percent_count: completionPercent,
+        reportActivationSideBarOpened: ({ tab }) => {
+            posthog.capture('activation sidebar opened', {
+                tab,
+            })
+        },
+        reportActivationSideBarClosed: ({ tab }) => {
+            posthog.capture('activation sidebar closed', {
+                tab,
             })
         },
         reportActivationSideBarTaskClicked: ({ key }) => {
             posthog.capture('activation sidebar task clicked', {
                 key,
             })
         },
+        reportActivationSideBarTaskSkipped: ({ key }) => {
+            posthog.capture('activation sidebar task skipped', {
+                key,
+            })
+        },
         reportBillingUpgradeClicked: ({ plan }) => {
             posthog.capture('billing upgrade button clicked', {
                 plan,