fix: Quick start panel header (#20333)

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

@@ -11,9 +11,9 @@ import { NotebookPanel } from 'scenes/notebooks/NotebookPanel/NotebookPanel'
 
 import { SidePanelTab } from '~/types'
 
+import { SidePanelActivation, SidePanelActivationIcon } from './panels/activation/SidePanelActivation'
 import { SidePanelActivity, SidePanelActivityIcon } from './panels/activity/SidePanelActivity'
 import { SidePanelDiscussion, SidePanelDiscussionIcon } from './panels/discussion/SidePanelDiscussion'
-import { SidePanelActivation, SidePanelActivationIcon } from './panels/SidePanelActivation'
 import { SidePanelDocs } from './panels/SidePanelDocs'
 import { SidePanelFeaturePreviews } from './panels/SidePanelFeaturePreviews'
 import { SidePanelSettings } from './panels/SidePanelSettings'

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

@@ -0,0 +1,123 @@
+import { LemonButton, LemonButtonWithSideActionProps } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { ProfessorHog } from 'lib/components/hedgehogs'
+import { IconCheckmark, IconClose, LemonIconProps } from 'lib/lemon-ui/icons'
+import { LemonProgressCircle } from 'lib/lemon-ui/LemonProgressCircle'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+
+import {
+    activationLogic,
+    ActivationTaskType,
+} from '~/layout/navigation-3000/sidepanel/panels/activation/activationLogic'
+
+import { SidePanelPaneHeader } from '../../components/SidePanelPaneHeader'
+
+export const SidePanelActivation = (): JSX.Element => {
+    const { activeTasks, completionPercent, completedTasks } = useValues(activationLogic)
+
+    return (
+        <>
+            <SidePanelPaneHeader title="Quick start" />
+            <div className="p-4 space-y-2 overflow-y-auto">
+                <p>Use our Quick Start guide to learn about everything PostHog can do for you and your product.</p>
+                <div className="flex items-center justify-center">
+                    <div className="flex flex-col items-center">
+                        <LemonProgressCircle progress={completionPercent / 100} size={100} className="text-primary">
+                            <span className="text-2xl">{activeTasks.length}</span>
+                        </LemonProgressCircle>
+                        <p className="text-muted mt-2 ">still to go</p>
+                    </div>
+                    <div className="h-60">
+                        <ProfessorHog className="max-h-full w-auto object-contain" />
+                    </div>
+                </div>
+                {activeTasks.length > 0 && (
+                    <div>
+                        <h4>What's next?</h4>
+                        <ul className="space-y-2">
+                            {activeTasks.map((task: ActivationTaskType) => (
+                                <ActivationTask key={task.id} {...task} />
+                            ))}
+                        </ul>
+                    </div>
+                )}
+                {completedTasks.length > 0 && (
+                    <div>
+                        <h4>Completed</h4>
+                        <ul className="space-y-2">
+                            {completedTasks.map((task: ActivationTaskType) => (
+                                <ActivationTask key={task.id} {...task} />
+                            ))}
+                        </ul>
+                    </div>
+                )}
+            </div>
+        </>
+    )
+}
+
+export const SidePanelActivationIcon = ({ className }: { className: LemonIconProps['className'] }): JSX.Element => {
+    const { activeTasks, completionPercent } = useValues(activationLogic)
+
+    return (
+        <LemonProgressCircle progress={completionPercent / 100} strokePercentage={0.15} size={20} className={className}>
+            <span className="text-xs font-semibold">{activeTasks.length}</span>
+        </LemonProgressCircle>
+    )
+}
+
+const ActivationTask = ({
+    id,
+    name,
+    description,
+    completed,
+    canSkip,
+    skipped,
+    url,
+}: ActivationTaskType): JSX.Element => {
+    const displaySideAction = !completed && !skipped && canSkip
+    const { runTask, skipTask } = useActions(activationLogic)
+    const { reportActivationSideBarTaskClicked } = useActions(eventUsageLogic)
+
+    const content = (
+        <div className="my-4 mx-2">
+            <p className="m-0">{name}</p>
+            {!completed && !skipped && <p className="font-normal text-xs mt-2 mb-0 mx-0">{description}</p>}
+        </div>
+    )
+
+    const params: Partial<LemonButtonWithSideActionProps> = {
+        id,
+        fullWidth: true,
+        type: 'secondary',
+        icon: completed ? <IconCheckmark /> : skipped ? <IconClose /> : null,
+        tooltip: name,
+    }
+    if (url) {
+        params.to = url
+        params.targetBlank = true
+    } else {
+        params.onClick = () => {
+            runTask(id)
+            reportActivationSideBarTaskClicked(id)
+        }
+    }
+    return (
+        <li>
+            {displaySideAction ? (
+                <LemonButton
+                    {...params}
+                    sideAction={{
+                        icon: <IconClose />,
+                        tooltip: 'Skip task',
+                        onClick: () => skipTask(id),
+                    }}
+                >
+                    {content}
+                </LemonButton>
+            ) : (
+                <LemonButton {...params}>{content}</LemonButton>
+            )}
+        </li>
+    )
+}

frontend/src/lib/components/ActivationSidebar/activationLogic.ts → frontend/src/layout/navigation-3000/sidepanel/panels/activation/activationLogic.ts

@@ -1,6 +1,6 @@
 import { actions, connect, events, kea, listeners, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
-import { router, urlToAction } from 'kea-router'
+import { router } from 'kea-router'
 import api from 'lib/api'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { permanentlyMount } from 'lib/utils/kea-logic-builders'
@@ -13,7 +13,7 @@ import { urls } from 'scenes/urls'
 
 import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
 import { dashboardsModel } from '~/models/dashboardsModel'
-import { EventDefinitionType, ProductKey, SidePanelTab, TeamBasicType } from '~/types'
+import { EventDefinitionType, ProductKey, TeamBasicType } from '~/types'
 
 import type { activationLogicType } from './activationLogicType'
 
@@ -362,12 +362,5 @@ export const activationLogic = kea<activationLogicType>([
             actions.loadInsights()
         },
     })),
-    urlToAction(({ actions, values }) => ({
-        '*': (_, params) => {
-            if (params?.onboarding_completed && !values.hasCompletedAllTasks) {
-                actions.openSidePanel(SidePanelTab.Activation)
-            }
-        },
-    })),
     permanentlyMount(),
 ])

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

@@ -1,9 +1,9 @@
 import { connect, kea, path, selectors } from 'kea'
-import { activationLogic } from 'lib/components/ActivationSidebar/activationLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 
+import { activationLogic } from '~/layout/navigation-3000/sidepanel/panels/activation/activationLogic'
 import { SidePanelTab } from '~/types'
 
 import { sidePanelActivityLogic } from './panels/activity/sidePanelActivityLogic'

frontend/src/scenes/onboarding/onboardingLogic.tsx

@@ -34,8 +34,8 @@ export const getProductUri = (productKey: ProductKey, featureFlags?: FeatureFlag
     switch (productKey) {
         case ProductKey.PRODUCT_ANALYTICS:
             return featureFlags && featureFlags[FEATURE_FLAGS.REDIRECT_WEB_PRODUCT_ANALYTICS_ONBOARDING] === 'test'
-                ? combineUrl(urls.webAnalytics(), { onboarding_completed: true }).url
-                : combineUrl(urls.insights(), { onboarding_completed: true }).url
+                ? combineUrl(urls.webAnalytics(), {}, { panel: 'activation' }).url
+                : combineUrl(urls.insights(), {}, { panel: 'activation' }).url
         case ProductKey.SESSION_REPLAY:
             return urls.replay()
         case ProductKey.FEATURE_FLAGS: