Merge branch 'master' into project-based-prop-defs

PostHog · Dec 12, 2024 · 1cc3702 · 1cc3702
2 parents 8dad60e + aad8698
commit 1cc3702
Show file tree

Hide file tree

Showing 55 changed files with 1,136 additions and 176 deletions.
diff --git a/...tend/__snapshots__/components-networkrequest-navigationitem--all-slow--dark.png b/...tend/__snapshots__/components-networkrequest-navigationitem--all-slow--dark.png
diff --git a/...end/__snapshots__/components-networkrequest-navigationitem--all-slow--light.png b/...end/__snapshots__/components-networkrequest-navigationitem--all-slow--light.png
diff --git a/frontend/__snapshots__/components-networkrequest-navigationitem--default--dark.png b/frontend/__snapshots__/components-networkrequest-navigationitem--default--dark.png
diff --git a/...tend/__snapshots__/components-networkrequest-navigationitem--default--light.png b/...tend/__snapshots__/components-networkrequest-navigationitem--default--light.png
diff --git a/...tend/__snapshots__/components-networkrequest-navigationitem--expanded--dark.png b/...tend/__snapshots__/components-networkrequest-navigationitem--expanded--dark.png
diff --git a/...end/__snapshots__/components-networkrequest-navigationitem--expanded--light.png b/...end/__snapshots__/components-networkrequest-navigationitem--expanded--light.png
diff --git a/...components-networkrequest-navigationitem--really-slow-dom-interactive--dark.png b/...components-networkrequest-navigationitem--really-slow-dom-interactive--dark.png
diff --git a/...omponents-networkrequest-navigationitem--really-slow-dom-interactive--light.png b/...omponents-networkrequest-navigationitem--really-slow-dom-interactive--light.png
diff --git a/...snapshots__/components-networkrequest-navigationitem--really-slow-fcp--dark.png b/...snapshots__/components-networkrequest-navigationitem--really-slow-fcp--dark.png
diff --git a/...napshots__/components-networkrequest-navigationitem--really-slow-fcp--light.png b/...napshots__/components-networkrequest-navigationitem--really-slow-fcp--light.png
diff --git a/...ts__/components-networkrequest-navigationitem--really-slow-load-event--dark.png b/...ts__/components-networkrequest-navigationitem--really-slow-load-event--dark.png
diff --git a/...s__/components-networkrequest-navigationitem--really-slow-load-event--light.png b/...s__/components-networkrequest-navigationitem--really-slow-load-event--light.png
diff --git a/...hots__/components-networkrequest-navigationitem--slow-dom-interactive--dark.png b/...hots__/components-networkrequest-navigationitem--slow-dom-interactive--dark.png
diff --git a/...ots__/components-networkrequest-navigationitem--slow-dom-interactive--light.png b/...ots__/components-networkrequest-navigationitem--slow-dom-interactive--light.png
diff --git a/...tend/__snapshots__/components-networkrequest-navigationitem--slow-fcp--dark.png b/...tend/__snapshots__/components-networkrequest-navigationitem--slow-fcp--dark.png
diff --git a/...end/__snapshots__/components-networkrequest-navigationitem--slow-fcp--light.png b/...end/__snapshots__/components-networkrequest-navigationitem--slow-fcp--light.png
diff --git a/...snapshots__/components-networkrequest-navigationitem--slow-load-event--dark.png b/...snapshots__/components-networkrequest-navigationitem--slow-load-event--dark.png
diff --git a/...napshots__/components-networkrequest-navigationitem--slow-load-event--light.png b/...napshots__/components-networkrequest-navigationitem--slow-load-event--light.png
diff --git a/...shots__/components-networkrequest-navigationitem--web-vitals-all-fast--dark.png b/...shots__/components-networkrequest-navigationitem--web-vitals-all-fast--dark.png
diff --git a/...hots__/components-networkrequest-navigationitem--web-vitals-all-fast--light.png b/...hots__/components-networkrequest-navigationitem--web-vitals-all-fast--light.png
diff --git a/...ots__/components-networkrequest-navigationitem--web-vitals-all-medium--dark.png b/...ots__/components-networkrequest-navigationitem--web-vitals-all-medium--dark.png
diff --git a/...ts__/components-networkrequest-navigationitem--web-vitals-all-medium--light.png b/...ts__/components-networkrequest-navigationitem--web-vitals-all-medium--light.png
diff --git a/...shots__/components-networkrequest-navigationitem--web-vitals-all-slow--dark.png b/...shots__/components-networkrequest-navigationitem--web-vitals-all-slow--dark.png
diff --git a/...hots__/components-networkrequest-navigationitem--web-vitals-all-slow--light.png b/...hots__/components-networkrequest-navigationitem--web-vitals-all-slow--light.png
diff --git a/...pshots__/components-networkrequest-navigationitem--web-vitals-loading--dark.png b/...pshots__/components-networkrequest-navigationitem--web-vitals-loading--dark.png
diff --git a/...shots__/components-networkrequest-navigationitem--web-vitals-loading--light.png b/...shots__/components-networkrequest-navigationitem--web-vitals-loading--light.png
diff --git a/frontend/__snapshots__/components-playerinspector--default--dark.png b/frontend/__snapshots__/components-playerinspector--default--dark.png
diff --git a/frontend/__snapshots__/components-playerinspector--default--light.png b/frontend/__snapshots__/components-playerinspector--default--light.png
diff --git a/frontend/src/scenes/experiments/Metrics/PrimaryGoalTrends.tsx b/frontend/src/scenes/experiments/Metrics/PrimaryGoalTrends.tsx
@@ -24,6 +24,10 @@ export function PrimaryGoalTrends(): JSX.Element {
 
     const metricIdx = 0
     const currentMetric = experiment.metrics[metricIdx] as ExperimentTrendsQuery
+    // :FLAG: CLEAN UP AFTER MIGRATION
+    const isDataWarehouseMetric =
+        featureFlags[FEATURE_FLAGS.EXPERIMENTS_HOGQL] &&
+        currentMetric.count_query.series[0].kind === NodeKind.DataWarehouseNode
 
     return (
         <>
@@ -59,10 +63,18 @@ export function PrimaryGoalTrends(): JSX.Element {
                             MathAvailability.All
                         )
 
-                        setTrendsMetric({
-                            metricIdx,
-                            series,
-                        })
+                        if (series[0].kind === NodeKind.DataWarehouseNode) {
+                            setTrendsMetric({
+                                metricIdx,
+                                series,
+                                filterTestAccounts: false,
+                            })
+                        } else {
+                            setTrendsMetric({
+                                metricIdx,
+                                series,
+                            })
+                        }
                     } else {
                         if (actions?.length) {
                             setExperiment({
@@ -101,35 +113,37 @@ export function PrimaryGoalTrends(): JSX.Element {
                 showNumericalPropsOnly={true}
                 {...commonActionFilterProps}
             />
-            <div className="mt-4 space-y-4">
-                <TestAccountFilterSwitch
-                    checked={(() => {
-                        // :FLAG: CLEAN UP AFTER MIGRATION
-                        if (featureFlags[FEATURE_FLAGS.EXPERIMENTS_HOGQL]) {
-                            const val = currentMetric.count_query?.filterTestAccounts
-                            return hasFilters ? !!val : false
-                        }
-                        return hasFilters ? !!experiment.filters.filter_test_accounts : false
-                    })()}
-                    onChange={(checked: boolean) => {
-                        // :FLAG: CLEAN UP AFTER MIGRATION
-                        if (featureFlags[FEATURE_FLAGS.EXPERIMENTS_HOGQL]) {
-                            setTrendsMetric({
-                                metricIdx,
-                                filterTestAccounts: checked,
-                            })
-                        } else {
-                            setExperiment({
-                                filters: {
-                                    ...experiment.filters,
-                                    filter_test_accounts: checked,
-                                },
-                            })
-                        }
-                    }}
-                    fullWidth
-                />
-            </div>
+            {!isDataWarehouseMetric && (
+                <div className="mt-4 space-y-4">
+                    <TestAccountFilterSwitch
+                        checked={(() => {
+                            // :FLAG: CLEAN UP AFTER MIGRATION
+                            if (featureFlags[FEATURE_FLAGS.EXPERIMENTS_HOGQL]) {
+                                const val = currentMetric.count_query?.filterTestAccounts
+                                return hasFilters ? !!val : false
+                            }
+                            return hasFilters ? !!experiment.filters.filter_test_accounts : false
+                        })()}
+                        onChange={(checked: boolean) => {
+                            // :FLAG: CLEAN UP AFTER MIGRATION
+                            if (featureFlags[FEATURE_FLAGS.EXPERIMENTS_HOGQL]) {
+                                setTrendsMetric({
+                                    metricIdx,
+                                    filterTestAccounts: checked,
+                                })
+                            } else {
+                                setExperiment({
+                                    filters: {
+                                        ...experiment.filters,
+                                        filter_test_accounts: checked,
+                                    },
+                                })
+                            }
+                        }}
+                        fullWidth
+                    />
+                </div>
+            )}
             {isExperimentRunning && (
                 <LemonBanner type="info" className="mt-3 mb-3">
                     Preview insights are generated based on {EXPERIMENT_DEFAULT_DURATION} days of data. This can cause a

diff --git a/frontend/src/scenes/pipeline/hogfunctions/hogFunctionConfigurationLogic.tsx b/frontend/src/scenes/pipeline/hogfunctions/hogFunctionConfigurationLogic.tsx
@@ -451,6 +451,10 @@ export const hogFunctionConfigurationLogic = kea<hogFunctionConfigurationLogicTy
             errors: (data) => {
                 return {
                     name: !data.name ? 'Name is required' : undefined,
+                    mappings:
+                        data.type === 'site_destination' && (!data.mappings || data.mappings.length === 0)
+                            ? 'You must add at least one mapping'
+                            : undefined,
                     ...(values.inputFormErrors as any),
                 }
             },
@@ -639,8 +643,26 @@ export const hogFunctionConfigurationLogic = kea<hogFunctionConfigurationLogicTy
             },
         ],
         matchingFilters: [
-            (s) => [s.configuration],
-            (configuration): PropertyGroupFilter => {
+            (s) => [s.configuration, s.useMapping],
+            (configuration, useMapping): PropertyGroupFilter => {
+                // We're using mappings, but none are provided, so match zero events.
+                if (useMapping && !configuration.mappings?.length) {
+                    return {
+                        type: FilterLogicalOperator.And,
+                        values: [
+                            {
+                                type: FilterLogicalOperator.And,
+                                values: [
+                                    {
+                                        type: PropertyFilterType.HogQL,
+                                        key: 'false',
+                                    },
+                                ],
+                            },
+                        ],
+                    }
+                }
+
                 const seriesProperties: PropertyGroupFilterValue = {
                     type: FilterLogicalOperator.Or,
                     values: [],
@@ -809,7 +831,6 @@ export const hogFunctionConfigurationLogic = kea<hogFunctionConfigurationLogicTy
                 return hogFunction?.template?.hog && hogFunction.template.hog !== configuration.hog
             },
         ],
-
         subTemplate: [
             (s) => [s.template, s.subTemplateId],
             (template, subTemplateId) => {
@@ -821,8 +842,11 @@ export const hogFunctionConfigurationLogic = kea<hogFunctionConfigurationLogicTy
                 return subTemplate
             },
         ],
-
         forcedSubTemplateId: [() => [router.selectors.searchParams], ({ sub_template }) => !!sub_template],
+        mappingTemplates: [
+            (s) => [s.hogFunction, s.template],
+            (hogFunction, template) => template?.mapping_templates ?? hogFunction?.template?.mapping_templates ?? [],
+        ],
     })),
 
     listeners(({ actions, values, cache }) => ({
@@ -865,6 +889,20 @@ export const hogFunctionConfigurationLogic = kea<hogFunctionConfigurationLogicTy
                 ...(cache.configFromUrl ?? {}),
             }
 
+            if (values.template?.mapping_templates) {
+                config.mappings = [
+                    ...(config.mappings ?? []),
+                    ...values.template.mapping_templates
+                        .filter((t) => t.include_by_default)
+                        .map((template) => ({
+                            ...template,
+                            inputs: template.inputs_schema?.reduce((acc, input) => {
+                                acc[input.key] = { value: input.default }
+                                return acc
+                            }, {} as Record<string, HogFunctionInputType>),
+                        })),
+                ]
+            }
             const paramsFromUrl = cache.paramsFromUrl ?? {}
             const unsavedConfigurationToApply =
                 (values.unsavedConfiguration?.timestamp ?? 0) > Date.now() - UNSAVED_CONFIGURATION_TTL

diff --git a/frontend/src/scenes/pipeline/hogfunctions/mapping/HogFunctionMapping.tsx b/frontend/src/scenes/pipeline/hogfunctions/mapping/HogFunctionMapping.tsx
@@ -1,10 +1,11 @@
 import { IconPlus, IconPlusSmall, IconTrash } from '@posthog/icons'
-import { LemonButton, LemonLabel } from '@posthog/lemon-ui'
+import { LemonButton, LemonLabel, LemonSelect } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
 import { Group } from 'kea-forms'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { LemonField } from 'lib/lemon-ui/LemonField'
 import { getDefaultEventName } from 'lib/utils/getAppContext'
+import { useState } from 'react'
 import { ActionFilter } from 'scenes/insights/filters/ActionFilter/ActionFilter'
 import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow'
 
@@ -16,7 +17,8 @@ import { HogFunctionInputs } from '../HogFunctionInputs'
 
 export function HogFunctionMapping(): JSX.Element | null {
     const { groupsTaxonomicTypes } = useValues(groupsModel)
-    const { useMapping, showSource } = useValues(hogFunctionConfigurationLogic)
+    const { useMapping, showSource, mappingTemplates } = useValues(hogFunctionConfigurationLogic)
+    const [selectedMappingTemplate, setSelectedMappingTemplate] = useState<string | null>(null)
 
     if (!useMapping) {
         return null
@@ -34,16 +36,14 @@ export function HogFunctionMapping(): JSX.Element | null {
                                     <LemonLabel info="When an event matches these filters, the function is run with the appended inputs.">
                                         Mapping #{index + 1}
                                     </LemonLabel>
-                                    {mappings.length > 1 ? (
-                                        <LemonButton
-                                            key="delete"
-                                            icon={<IconTrash />}
-                                            title="Delete graph series"
-                                            data-attr={`delete-prop-filter-${index}`}
-                                            noPadding
-                                            onClick={() => onChange(mappings.filter((_, i) => i !== index))}
-                                        />
-                                    ) : null}
+                                    <LemonButton
+                                        key="delete"
+                                        icon={<IconTrash />}
+                                        title="Delete graph series"
+                                        data-attr={`delete-prop-filter-${index}`}
+                                        noPadding
+                                        onClick={() => onChange(mappings.filter((_, i) => i !== index))}
+                                    />
                                 </div>
                                 <ActionFilter
                                     bordered
@@ -119,40 +119,73 @@ export function HogFunctionMapping(): JSX.Element | null {
                             </div>
                         ))}
                         <div className="border bg-bg-light rounded p-3 space-y-2">
-                            <LemonButton
-                                type="tertiary"
-                                data-attr="add-action-event-button"
-                                icon={<IconPlusSmall />}
-                                onClick={() => {
-                                    const inputsSchema =
-                                        mappings.length > 0
-                                            ? structuredClone(mappings[mappings.length - 1].inputs_schema || [])
-                                            : []
-                                    const newMapping = {
-                                        inputs_schema: inputsSchema,
-                                        inputs: Object.fromEntries(
-                                            inputsSchema
-                                                .filter((m) => m.default !== undefined)
-                                                .map((m) => [m.key, { value: structuredClone(m.default) }])
-                                        ),
-                                        filters: {
-                                            events: [
-                                                {
-                                                    id: getDefaultEventName(),
-                                                    name: getDefaultEventName(),
-                                                    type: EntityTypes.EVENTS,
-                                                    order: 0,
-                                                    properties: [],
-                                                },
-                                            ],
-                                            actions: [],
-                                        },
+                            <LemonLabel>New Mapping</LemonLabel>
+                            <div className="flex gap-2">
+                                {mappingTemplates.length ? (
+                                    <LemonSelect
+                                        placeholder="Select a template"
+                                        value={selectedMappingTemplate}
+                                        onChange={setSelectedMappingTemplate}
+                                        options={mappingTemplates.map((t) => ({
+                                            label: t.name,
+                                            value: t.name,
+                                        }))}
+                                    />
+                                ) : null}
+                                <LemonButton
+                                    type="secondary"
+                                    data-attr="add-action-event-button"
+                                    icon={<IconPlusSmall />}
+                                    disabledReason={
+                                        mappingTemplates.length && !selectedMappingTemplate
+                                            ? 'Select a mapping template'
+                                            : undefined
                                     }
-                                    onChange([...mappings, newMapping])
-                                }}
-                            >
-                                Add mapping
-                            </LemonButton>
+                                    onClick={() => {
+                                        if (selectedMappingTemplate) {
+                                            const mappingTemplate = mappingTemplates.find(
+                                                (t) => t.name === selectedMappingTemplate
+                                            )
+                                            if (mappingTemplate) {
+                                                const { name, ...mapping } = mappingTemplate
+                                                const inputs = mapping.inputs_schema
+                                                    ? Object.fromEntries(
+                                                          mapping.inputs_schema
+                                                              .filter((m) => m.default !== undefined)
+                                                              .map((m) => [
+                                                                  m.key,
+                                                                  { value: structuredClone(m.default) },
+                                                              ])
+                                                      )
+                                                    : {}
+                                                onChange([...mappings, { ...mapping, inputs }])
+                                            }
+                                            setSelectedMappingTemplate(null)
+                                            return
+                                        }
+
+                                        const newMapping = {
+                                            inputs_schema: [],
+                                            inputs: {},
+                                            filters: {
+                                                events: [
+                                                    {
+                                                        id: getDefaultEventName(),
+                                                        name: getDefaultEventName(),
+                                                        type: EntityTypes.EVENTS,
+                                                        order: 0,
+                                                        properties: [],
+                                                    },
+                                                ],
+                                                actions: [],
+                                            },
+                                        }
+                                        onChange([...mappings, newMapping])
+                                    }}
+                                >
+                                    Add mapping
+                                </LemonButton>
+                            </div>
                         </div>
                     </>
                 )

diff --git a/frontend/src/scenes/session-recordings/components/OverviewGrid.tsx b/frontend/src/scenes/session-recordings/components/OverviewGrid.tsx
@@ -1,6 +1,26 @@
 import { Tooltip } from '@posthog/lemon-ui'
+import { ReactNode } from 'react'
 
-export function OverviewGrid({ children }: { children: React.ReactNode }): JSX.Element {
+interface OverviewItemBase {
+    icon?: ReactNode
+    label: string
+    tooltipTitle?: string
+}
+
+type TextOverviewItem = OverviewItemBase & {
+    type: 'text'
+    value: ReactNode
+}
+
+type PropertyOverviewItem = OverviewItemBase & {
+    type: 'property'
+    property: string
+    value?: string | undefined
+}
+
+export type OverviewItem = TextOverviewItem | PropertyOverviewItem
+
+export function OverviewGrid({ children }: { children: ReactNode }): JSX.Element {
     return (
         <div className="@container/og">
             <div className="grid grid-cols-1 place-items-center gap-4 p-2 @xs/og:grid-cols-2 @md/og:grid-cols-3 ">
@@ -14,16 +34,20 @@ export function OverviewGridItem({
     children,
     description,
     label,
+    icon,
 }: {
-    children: React.ReactNode
-    description: React.ReactNode
-    label: React.ReactNode
+    children?: ReactNode
+    description: ReactNode
+    label: ReactNode
+    icon?: ReactNode
 }): JSX.Element {
     return (
         <Tooltip title={description}>
             <div className="flex flex-1 w-full justify-between items-center ">
-                <div className="text-sm">{label}</div>
-                <div className="text-lg font-semibold">{children}</div>
+                <div className="text-sm">
+                    {icon} {label}
+                </div>
+                <div>{children}</div>
             </div>
         </Tooltip>
     )