Merge branch 'master' into update-preview

.github/workflows/container-images-cd.yml

@@ -33,11 +33,6 @@ jobs:
               with:
                   fetch-depth: 2
 
-            - name: Override git.py
-              run: >
-                  echo "def get_git_commit(): return '${GITHUB_SHA}'" > posthog/git.py
-                  echo "def get_git_branch(): return '${GITHUB_REF_NAME}'" >> posthog/git.py
-
             - name: Set up Docker Buildx
               uses: docker/setup-buildx-action@v2
 

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/queries/nodes/DataNode/TestAccountFilters.tsx

@@ -0,0 +1,77 @@
+import { useActions, useValues } from 'kea'
+import { IconSettings } from 'lib/lemon-ui/icons'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonSwitch } from 'lib/lemon-ui/LemonSwitch'
+import { filterTestAccountsDefaultsLogic } from 'scenes/settings/project/filterTestAccountDefaultsLogic'
+import { teamLogic } from 'scenes/teamLogic'
+import { urls } from 'scenes/urls'
+
+import { DataNode, EventsQuery, HogQLQuery } from '~/queries/schema'
+import { isEventsQuery, isHogQLQuery } from '~/queries/utils'
+
+interface TestAccountFiltersProps {
+    query: DataNode
+    setQuery?: (query: EventsQuery | HogQLQuery) => void
+}
+export function TestAccountFilters({ query, setQuery }: TestAccountFiltersProps): JSX.Element | null {
+    const { currentTeam } = useValues(teamLogic)
+    const hasFilters = (currentTeam?.test_account_filters || []).length > 0
+    const { setLocalDefault } = useActions(filterTestAccountsDefaultsLogic)
+
+    if (!isEventsQuery(query) && !isHogQLQuery(query)) {
+        return null
+    }
+    const checked = hasFilters
+        ? !!(isHogQLQuery(query)
+              ? query.filters?.filterTestAccounts
+              : isEventsQuery(query)
+              ? query.filterTestAccounts
+              : false)
+        : false
+    const onChange = isHogQLQuery(query)
+        ? (checked: boolean) => {
+              const newQuery: HogQLQuery = {
+                  ...query,
+                  filters: {
+                      ...query.filters,
+                      filterTestAccounts: checked,
+                  },
+              }
+              setQuery?.(newQuery)
+          }
+        : isEventsQuery(query)
+        ? (checked: boolean) => {
+              const newQuery: EventsQuery = {
+                  ...query,
+                  filterTestAccounts: checked,
+              }
+              setQuery?.(newQuery)
+          }
+        : undefined
+
+    return (
+        <LemonSwitch
+            checked={checked}
+            onChange={(checked: boolean) => {
+                onChange?.(checked)
+                setLocalDefault(checked)
+            }}
+            id="test-account-filter"
+            bordered
+            label={
+                <div className="flex items-center">
+                    <span>Filter out internal and test users</span>
+                    <LemonButton
+                        icon={<IconSettings />}
+                        to={urls.settings('project-product-analytics', 'internal-user-filtering')}
+                        size="small"
+                        noPadding
+                        className="ml-1"
+                    />
+                </div>
+            }
+            disabledReason={!hasFilters ? "You haven't set any internal and test filters" : null}
+        />
+    )
+    return null
+}