diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/nuxt.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/nuxt.tsx
index e57a46e534d61..baa4947ad4950 100644
--- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/nuxt.tsx
+++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/nuxt.tsx
@@ -35,7 +35,7 @@ import posthog from 'posthog-js'
export default defineNuxtPlugin(nuxtApp => {
const runtimeConfig = useRuntimeConfig();
const posthogClient = posthog.init(runtimeConfig.public.posthogPublicKey, {
- api_host: runtimeConfig.public.posthogHost',
+ api_host: runtimeConfig.public.posthogHost,
${
isPersonProfilesDisabled
? ``
diff --git a/frontend/src/scenes/pipeline/Destinations.tsx b/frontend/src/scenes/pipeline/Destinations.tsx
index 61af57f3061c5..500111bdc5d1b 100644
--- a/frontend/src/scenes/pipeline/Destinations.tsx
+++ b/frontend/src/scenes/pipeline/Destinations.tsx
@@ -57,10 +57,14 @@ export function DestinationsTable({ inOverview = false }: { inOverview?: boolean
title: 'App',
width: 0,
render: function RenderAppInfo(_, destination) {
- if (destination.backend === 'plugin') {
- return
+ switch (destination.backend) {
+ case 'plugin':
+ return
+ case 'batch_export':
+ return
+ default:
+ return null
}
- return
},
},
{
diff --git a/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx b/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx
index 61d09e36015c4..926469a85ffd6 100644
--- a/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx
+++ b/frontend/src/scenes/pipeline/PipelineNodeConfiguration.tsx
@@ -1,6 +1,7 @@
import { useValues } from 'kea'
import { NotFound } from 'lib/components/NotFound'
+import { PipelineHogFunctionConfiguration } from './hogfunctions/PipelineHogFunctionConfiguration'
import { PipelineBatchExportConfiguration } from './PipelineBatchExportConfiguration'
import { pipelineNodeLogic } from './pipelineNodeLogic'
import { PipelinePluginConfiguration } from './PipelinePluginConfiguration'
@@ -15,7 +16,9 @@ export function PipelineNodeConfiguration(): JSX.Element {
return (
- {node.backend === PipelineBackend.Plugin ? (
+ {node.backend === PipelineBackend.HogFunction ? (
+
+ ) : node.backend === PipelineBackend.Plugin ? (
) : (
diff --git a/frontend/src/scenes/pipeline/PipelineNodeNew.tsx b/frontend/src/scenes/pipeline/PipelineNodeNew.tsx
index 30504da3fe51d..76eea7518a6b0 100644
--- a/frontend/src/scenes/pipeline/PipelineNodeNew.tsx
+++ b/frontend/src/scenes/pipeline/PipelineNodeNew.tsx
@@ -1,17 +1,20 @@
import { IconPlusSmall } from '@posthog/icons'
import { useValues } from 'kea'
+import { combineUrl, router } from 'kea-router'
import { NotFound } from 'lib/components/NotFound'
import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
+import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { LemonTable } from 'lib/lemon-ui/LemonTable'
import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink'
import { SceneExport } from 'scenes/sceneTypes'
import { urls } from 'scenes/urls'
-import { AvailableFeature, BatchExportService, PipelineStage, PluginType } from '~/types'
+import { AvailableFeature, BatchExportService, HogFunctionTemplateType, PipelineStage, PluginType } from '~/types'
import { pipelineDestinationsLogic } from './destinationsLogic'
import { frontendAppsLogic } from './frontendAppsLogic'
+import { PipelineHogFunctionConfiguration } from './hogfunctions/PipelineHogFunctionConfiguration'
import { PipelineBatchExportConfiguration } from './PipelineBatchExportConfiguration'
import { PIPELINE_TAB_TO_NODE_STAGE } from './PipelineNode'
import { pipelineNodeNewLogic, PipelineNodeNewLogicProps } from './pipelineNodeNewLogic'
@@ -21,21 +24,20 @@ import { PipelineBackend } from './types'
import { getBatchExportUrl, RenderApp, RenderBatchExportIcon } from './utils'
const paramsToProps = ({
- params: { stage, pluginIdOrBatchExportDestination },
+ params: { stage, id },
}: {
- params: { stage?: string; pluginIdOrBatchExportDestination?: string }
+ params: { stage?: string; id?: string }
}): PipelineNodeNewLogicProps => {
- const numericId =
- pluginIdOrBatchExportDestination && /^\d+$/.test(pluginIdOrBatchExportDestination)
- ? parseInt(pluginIdOrBatchExportDestination)
- : undefined
+ const numericId = id && /^\d+$/.test(id) ? parseInt(id) : undefined
const pluginId = numericId && !isNaN(numericId) ? numericId : null
- const batchExportDestination = pluginId ? null : pluginIdOrBatchExportDestination ?? null
+ const hogFunctionId = pluginId ? null : id?.startsWith('hog-') ? id.slice(4) : null
+ const batchExportDestination = hogFunctionId ? null : id ?? null
return {
stage: PIPELINE_TAB_TO_NODE_STAGE[stage + 's'] || null, // pipeline tab has stage plural here we have singular
- pluginId: pluginId,
- batchExportDestination: batchExportDestination,
+ pluginId,
+ batchExportDestination,
+ hogFunctionId,
}
}
@@ -45,32 +47,22 @@ export const scene: SceneExport = {
paramsToProps,
}
-type PluginEntry = {
- backend: PipelineBackend.Plugin
- id: number
+type TableEntry = {
+ backend: PipelineBackend
+ id: string | number
name: string
description: string
- plugin: PluginType
url?: string
+ icon: JSX.Element
}
-type BatchExportEntry = {
- backend: PipelineBackend.BatchExport
- id: BatchExportService['type']
- name: string
- description: string
- url: string
-}
-
-type TableEntry = PluginEntry | BatchExportEntry
-
function convertPluginToTableEntry(plugin: PluginType): TableEntry {
return {
backend: PipelineBackend.Plugin,
id: plugin.id,
name: plugin.name,
description: plugin.description || '',
- plugin: plugin,
+ icon:
,
// TODO: ideally we'd link to docs instead of GitHub repo, so it can open in panel
// Same for transformations and destinations tables
url: plugin.url,
@@ -80,17 +72,26 @@ function convertPluginToTableEntry(plugin: PluginType): TableEntry {
function convertBatchExportToTableEntry(service: BatchExportService['type']): TableEntry {
return {
backend: PipelineBackend.BatchExport,
- id: service,
+ id: service as string,
name: service,
description: `${service} batch export`,
+ icon:
,
url: getBatchExportUrl(service),
}
}
-export function PipelineNodeNew(
- params: { stage?: string; pluginIdOrBatchExportDestination?: string } = {}
-): JSX.Element {
- const { stage, pluginId, batchExportDestination } = paramsToProps({ params })
+function convertHogFunctionToTableEntry(hogFunction: HogFunctionTemplateType): TableEntry {
+ return {
+ backend: PipelineBackend.HogFunction,
+ id: `hog-${hogFunction.id}`, // TODO: This weird identifier thing isn't great
+ name: hogFunction.name,
+ description: hogFunction.description,
+ icon:
🦔,
+ }
+}
+
+export function PipelineNodeNew(params: { stage?: string; id?: string } = {}): JSX.Element {
+ const { stage, pluginId, batchExportDestination, hogFunctionId } = paramsToProps({ params })
if (!stage) {
return
@@ -103,6 +104,7 @@ export function PipelineNodeNew(
}
return res
}
+
if (batchExportDestination) {
if (stage !== PipelineStage.Destination) {
return
@@ -114,6 +116,14 @@ export function PipelineNodeNew(
)
}
+ if (hogFunctionId) {
+ const res =
+ if (stage === PipelineStage.Destination) {
+ return
{res}
+ }
+ return res
+ }
+
if (stage === PipelineStage.Transformation) {
return
} else if (stage === PipelineStage.Destination) {
@@ -135,11 +145,15 @@ function TransformationOptionsTable(): JSX.Element {
}
function DestinationOptionsTable(): JSX.Element {
+ const hogFunctionsEnabled = !!useFeatureFlag('HOG_FUNCTIONS')
const { batchExportServiceNames } = useValues(pipelineNodeNewLogic)
- const { plugins, loading } = useValues(pipelineDestinationsLogic)
+ const { plugins, loading, hogFunctionTemplates } = useValues(pipelineDestinationsLogic)
const pluginTargets = Object.values(plugins).map(convertPluginToTableEntry)
const batchExportTargets = Object.values(batchExportServiceNames).map(convertBatchExportToTableEntry)
- const targets = [...batchExportTargets, ...pluginTargets]
+ const hogFunctionTargets = hogFunctionsEnabled
+ ? Object.values(hogFunctionTemplates).map(convertHogFunctionToTableEntry)
+ : []
+ const targets = [...batchExportTargets, ...pluginTargets, ...hogFunctionTargets]
return
}
@@ -158,6 +172,7 @@ function NodeOptionsTable({
targets: TableEntry[]
loading: boolean
}): JSX.Element {
+ const { hashParams } = useValues(router)
return (
<>
- }
- return
+ return target.icon
},
},
{
@@ -198,7 +210,8 @@ function NodeOptionsTable({
type="primary"
data-attr={`new-${stage}-${target.id}`}
icon={
}
- to={urls.pipelineNodeNew(stage, target.id)}
+ // Preserve hash params to pass config in
+ to={combineUrl(urls.pipelineNodeNew(stage, target.id), {}, hashParams).url}
>
Create
diff --git a/frontend/src/scenes/pipeline/destinationsLogic.tsx b/frontend/src/scenes/pipeline/destinationsLogic.tsx
index d50e6b5de5091..05d4e2ff1d1e6 100644
--- a/frontend/src/scenes/pipeline/destinationsLogic.tsx
+++ b/frontend/src/scenes/pipeline/destinationsLogic.tsx
@@ -8,6 +8,8 @@ import { userLogic } from 'scenes/userLogic'
import {
BatchExportConfiguration,
+ HogFunctionTemplateType,
+ HogFunctionType,
PipelineStage,
PluginConfigTypeNew,
PluginConfigWithPluginInfoNew,
@@ -16,6 +18,7 @@ import {
} from '~/types'
import type { pipelineDestinationsLogicType } from './destinationsLogicType'
+import { HOG_FUNCTION_TEMPLATES } from './hogfunctions/templates/hog-templates'
import { pipelineAccessLogic } from './pipelineAccessLogic'
import { BatchExportDestination, convertToPipelineNode, Destination, PipelineBackend } from './types'
import { captureBatchExportEvent, capturePluginEvent, loadPluginsFromUrl } from './utils'
@@ -116,28 +119,68 @@ export const pipelineDestinationsLogic = kea
([
},
},
],
+
+ hogFunctionTemplates: [
+ {} as Record,
+ {
+ loadHogFunctionTemplates: async () => {
+ return HOG_FUNCTION_TEMPLATES.reduce((acc, template) => {
+ acc[template.id] = template
+ return acc
+ }, {} as Record)
+ },
+ },
+ ],
+ hogFunctions: [
+ [] as HogFunctionType[],
+ {
+ loadHogFunctions: async () => {
+ // TODO: Support pagination?
+ return (await api.hogFunctions.list()).results
+ },
+ },
+ ],
})),
selectors({
loading: [
- (s) => [s.pluginsLoading, s.pluginConfigsLoading, s.batchExportConfigsLoading],
- (pluginsLoading, pluginConfigsLoading, batchExportConfigsLoading) =>
- pluginsLoading || pluginConfigsLoading || batchExportConfigsLoading,
+ (s) => [
+ s.pluginsLoading,
+ s.pluginConfigsLoading,
+ s.batchExportConfigsLoading,
+ s.hogFunctionTemplatesLoading,
+ s.hogFunctionsLoading,
+ ],
+ (
+ pluginsLoading,
+ pluginConfigsLoading,
+ batchExportConfigsLoading,
+ hogFunctionTemplatesLoading,
+ hogFunctionsLoading
+ ) =>
+ pluginsLoading ||
+ pluginConfigsLoading ||
+ batchExportConfigsLoading ||
+ hogFunctionTemplatesLoading ||
+ hogFunctionsLoading,
],
destinations: [
- (s) => [s.pluginConfigs, s.plugins, s.batchExportConfigs, s.user],
- (pluginConfigs, plugins, batchExportConfigs, user): Destination[] => {
+ (s) => [s.pluginConfigs, s.plugins, s.batchExportConfigs, s.hogFunctions, s.user],
+ (pluginConfigs, plugins, batchExportConfigs, hogFunctions, user): Destination[] => {
// Migrations are shown only in impersonation mode, for us to be able to trigger them.
const rawBatchExports = Object.values(batchExportConfigs).filter(
(config) => config.destination.type !== 'HTTP' || user?.is_impersonated
)
- const rawDestinations: (PluginConfigWithPluginInfoNew | BatchExportConfiguration)[] = Object.values(
- pluginConfigs
- )
- .map((pluginConfig) => ({
- ...pluginConfig,
- plugin_info: plugins[pluginConfig.plugin] || null,
- }))
- .concat(rawBatchExports)
+
+ const rawDestinations: (PluginConfigWithPluginInfoNew | BatchExportConfiguration | HogFunctionType)[] =
+ Object.values(pluginConfigs)
+ .map(
+ (pluginConfig) => ({
+ ...pluginConfig,
+ plugin_info: plugins[pluginConfig.plugin] || null,
+ })
+ )
+ .concat(rawBatchExports)
+ .concat(hogFunctions)
const convertedDestinations = rawDestinations.map((d) =>
convertToPipelineNode(d, PipelineStage.Destination)
)
@@ -183,5 +226,7 @@ export const pipelineDestinationsLogic = kea([
actions.loadPlugins()
actions.loadPluginConfigs()
actions.loadBatchExports()
+ actions.loadHogFunctionTemplates()
+ actions.loadHogFunctions()
}),
])
diff --git a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputs.tsx b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputs.tsx
new file mode 100644
index 0000000000000..2f3cc63865729
--- /dev/null
+++ b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputs.tsx
@@ -0,0 +1,287 @@
+import { Monaco } from '@monaco-editor/react'
+import { IconPencil, IconPlus, IconX } from '@posthog/icons'
+import { LemonButton, LemonCheckbox, LemonInput, LemonSelect } from '@posthog/lemon-ui'
+import { useValues } from 'kea'
+import { CodeEditor } from 'lib/components/CodeEditors'
+import { languages } from 'monaco-editor'
+import { useEffect, useMemo, useState } from 'react'
+
+import { groupsModel } from '~/models/groupsModel'
+import { HogFunctionInputSchemaType } from '~/types'
+
+export type HogFunctionInputProps = {
+ schema: HogFunctionInputSchemaType
+ value?: any
+ onChange?: (value: any) => void
+ disabled?: boolean
+}
+
+const SECRET_FIELD_VALUE = '********'
+
+function useAutocompleteOptions(): languages.CompletionItem[] {
+ const { groupTypes } = useValues(groupsModel)
+
+ return useMemo(() => {
+ const options = [
+ ['event', 'The entire event payload as a JSON object'],
+ ['event.name', 'The name of the event e.g. $pageview'],
+ ['event.distinct_id', 'The distinct_id of the event'],
+ ['event.timestamp', 'The timestamp of the event'],
+ ['event.url', 'URL to the event in PostHog'],
+ ['event.properties', 'Properties of the event'],
+ ['event.properties.', 'The individual property of the event'],
+ ['person', 'The entire person payload as a JSON object'],
+ ['project.uuid', 'The UUID of the Person in PostHog'],
+ ['person.url', 'URL to the person in PostHog'],
+ ['person.properties', 'Properties of the person'],
+ ['person.properties.', 'The individual property of the person'],
+ ['project.id', 'ID of the project in PostHog'],
+ ['project.name', 'Name of the project'],
+ ['project.url', 'URL to the project in PostHog'],
+ ['source.name', 'Name of the source of this message'],
+ ['source.url', 'URL to the source of this message in PostHog'],
+ ]
+
+ groupTypes.forEach((groupType) => {
+ options.push([`groups.${groupType.group_type}`, `The entire group payload as a JSON object`])
+ options.push([`groups.${groupType.group_type}.id`, `The ID or 'key' of the group`])
+ options.push([`groups.${groupType.group_type}.url`, `URL to the group in PostHog`])
+ options.push([`groups.${groupType.group_type}.properties`, `Properties of the group`])
+ options.push([`groups.${groupType.group_type}.properties.`, `The individual property of the group`])
+ options.push([`groups.${groupType.group_type}.index`, `Index of the group`])
+ })
+
+ const items: languages.CompletionItem[] = options.map(([key, value]) => {
+ return {
+ label: key,
+ kind: languages.CompletionItemKind.Variable,
+ detail: value,
+ insertText: key,
+ range: {
+ startLineNumber: 1,
+ endLineNumber: 1,
+ startColumn: 0,
+ endColumn: 0,
+ },
+ }
+ })
+
+ return items
+ }, [groupTypes])
+}
+
+function JsonConfigField(props: {
+ onChange?: (value: string) => void
+ className: string
+ autoFocus: boolean
+ value?: string | object
+}): JSX.Element {
+ const suggestions = useAutocompleteOptions()
+ const [monaco, setMonaco] = useState()
+
+ useEffect(() => {
+ if (!monaco) {
+ return
+ }
+ monaco.languages.setLanguageConfiguration('json', {
+ wordPattern: /[a-zA-Z0-9_\-.]+/,
+ })
+
+ const provider = monaco.languages.registerCompletionItemProvider('json', {
+ triggerCharacters: ['{', '{{'],
+ provideCompletionItems: async (model, position) => {
+ const word = model.getWordUntilPosition(position)
+
+ const wordWithTrigger = model.getValueInRange({
+ startLineNumber: position.lineNumber,
+ startColumn: 0,
+ endLineNumber: position.lineNumber,
+ endColumn: position.column,
+ })
+
+ if (wordWithTrigger.indexOf('{') === -1) {
+ return { suggestions: [] }
+ }
+
+ const localSuggestions = suggestions.map((x) => ({
+ ...x,
+ insertText: x.insertText,
+ range: {
+ startLineNumber: position.lineNumber,
+ endLineNumber: position.lineNumber,
+ startColumn: word.startColumn,
+ endColumn: word.endColumn,
+ },
+ }))
+
+ return {
+ suggestions: localSuggestions,
+ incomplete: false,
+ }
+ },
+ })
+
+ return () => provider.dispose()
+ }, [suggestions, monaco])
+
+ return (
+ props.onChange?.(v ?? '')}
+ options={{
+ lineNumbers: 'off',
+ minimap: {
+ enabled: false,
+ },
+ quickSuggestions: {
+ other: true,
+ strings: true,
+ },
+ suggest: {
+ showWords: false,
+ showFields: false,
+ showKeywords: false,
+ },
+ scrollbar: {
+ vertical: 'hidden',
+ verticalScrollbarSize: 0,
+ },
+ }}
+ onMount={(_editor, monaco) => {
+ setMonaco(monaco)
+ }}
+ />
+ )
+}
+
+function DictionaryField({ onChange, value }: { onChange?: (value: any) => void; value: any }): JSX.Element {
+ const [entries, setEntries] = useState<[string, string][]>(Object.entries(value ?? {}))
+
+ useEffect(() => {
+ // NOTE: Filter out all empty entries as fetch will throw if passed in
+ const val = Object.fromEntries(entries.filter(([key, val]) => key.trim() !== '' || val.trim() !== ''))
+ onChange?.(val)
+ }, [entries])
+
+ return (
+
+ {entries.map(([key, val], index) => (
+
+ {
+ const newEntries = [...entries]
+ newEntries[index] = [key, newEntries[index][1]]
+ setEntries(newEntries)
+ }}
+ placeholder="Key"
+ />
+
+ {
+ const newEntries = [...entries]
+ newEntries[index] = [newEntries[index][0], val]
+ setEntries(newEntries)
+ }}
+ placeholder="Value"
+ />
+
+ }
+ size="small"
+ onClick={() => {
+ const newEntries = [...entries]
+ newEntries.splice(index, 1)
+ setEntries(newEntries)
+ }}
+ />
+
+ ))}
+
}
+ size="small"
+ type="secondary"
+ onClick={() => {
+ setEntries([...entries, ['', '']])
+ }}
+ >
+ Add entry
+
+
{schema.type}".
+
+ You may need to upgrade PostHog!
+
+ )
+ }
+}
diff --git a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputsEditor.tsx b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputsEditor.tsx
new file mode 100644
index 0000000000000..59bc0fbfffaa1
--- /dev/null
+++ b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionInputsEditor.tsx
@@ -0,0 +1,116 @@
+import { IconPlus, IconX } from '@posthog/icons'
+import { LemonButton, LemonCheckbox, LemonInput, LemonInputSelect, LemonSelect } from '@posthog/lemon-ui'
+import { capitalizeFirstLetter } from 'kea-forms'
+import { useEffect, useState } from 'react'
+
+import { HogFunctionInputSchemaType } from '~/types'
+
+const typeList = ['string', 'boolean', 'dictionary', 'choice', 'json'] as const
+
+export type HogFunctionInputsEditorProps = {
+ value?: HogFunctionInputSchemaType[]
+ onChange?: (value: HogFunctionInputSchemaType[]) => void
+}
+
+export function HogFunctionInputsEditor({ value, onChange }: HogFunctionInputsEditorProps): JSX.Element {
+ const [inputs, setInputs] = useState(value ?? [])
+
+ useEffect(() => {
+ onChange?.(inputs)
+ }, [inputs])
+
+ return (
+
+ {inputs.map((input, index) => {
+ const _onChange = (data: Partial
): void => {
+ setInputs((inputs) => {
+ const newInputs = [...inputs]
+ newInputs[index] = { ...newInputs[index], ...data }
+ return newInputs
+ })
+ }
+
+ return (
+
+
+ _onChange({ key })}
+ placeholder="Variable name"
+ />
+ ({
+ label: capitalizeFirstLetter(type),
+ value: type,
+ }))}
+ value={input.type}
+ className="w-30"
+ onChange={(type) => _onChange({ type })}
+ />
+
+ _onChange({ label })}
+ placeholder="Display label"
+ />
+ _onChange({ required })}
+ label="Required"
+ bordered
+ />
+ _onChange({ secret })}
+ label="Secret"
+ bordered
+ />
+ {input.type === 'choice' && (
+ choice.value)}
+ onChange={(choices) =>
+ _onChange({ choices: choices.map((value) => ({ label: value, value })) })
+ }
+ placeholder="Choices"
+ />
+ )}
+
+
}
+ size="small"
+ onClick={() => {
+ const newInputs = [...inputs]
+ newInputs.splice(index, 1)
+ setInputs(newInputs)
+ }}
+ />
+
+ }
+ size="small"
+ type="secondary"
+ onClick={() => {
+ setInputs([
+ ...inputs,
+ { type: 'string', key: `input_${inputs.length + 1}`, label: '', required: false },
+ ])
+ }}
+ >
+ Add input variable
+
+
+
+
+
Feature not enabled
+
Hog functions are not enabled for you yet. If you think they should be, contact support.
+
+
(
- candidate: PluginConfigWithPluginInfoNew | BatchExportConfiguration,
+ candidate: PluginConfigWithPluginInfoNew | BatchExportConfiguration | HogFunctionType,
stage: S
): S extends PipelineStage.Transformation
? Transformation
@@ -98,7 +109,20 @@ export function convertToPipelineNode(
? ImportApp
: never {
let node: PipelineNode
- if (isPluginConfig(candidate)) {
+ // check if type is a hog function
+ if ('hog' in candidate) {
+ node = {
+ stage: stage as PipelineStage.Destination,
+ backend: PipelineBackend.HogFunction,
+ interval: 'realtime',
+ id: `hog-${candidate.id}`,
+ name: candidate.name,
+ description: candidate.description,
+ enabled: candidate.enabled,
+ created_at: candidate.created_at,
+ updated_at: candidate.created_at,
+ }
+ } else if (isPluginConfig(candidate)) {
const almostNode: Omit<
Transformation | WebhookDestination | SiteApp | ImportApp | DataImportApp,
'frequency' | 'order'
diff --git a/frontend/src/scenes/sceneTypes.ts b/frontend/src/scenes/sceneTypes.ts
index c80897e8dd192..1dcb3f8af312b 100644
--- a/frontend/src/scenes/sceneTypes.ts
+++ b/frontend/src/scenes/sceneTypes.ts
@@ -9,6 +9,7 @@ export enum Scene {
Error404 = '404',
ErrorNetwork = '4xx',
ErrorProjectUnavailable = 'ProjectUnavailable',
+ ErrorTracking = 'ErrorTracking',
Dashboards = 'Dashboards',
Dashboard = 'Dashboard',
Insight = 'Insight',
diff --git a/frontend/src/scenes/scenes.ts b/frontend/src/scenes/scenes.ts
index 94983524158f6..f4ef644d8665c 100644
--- a/frontend/src/scenes/scenes.ts
+++ b/frontend/src/scenes/scenes.ts
@@ -53,6 +53,10 @@ export const sceneConfigurations: Record = {
activityScope: ActivityScope.DASHBOARD,
defaultDocsPath: '/docs/product-analytics/dashboards',
},
+ [Scene.ErrorTracking]: {
+ projectBased: true,
+ name: 'Error tracking',
+ },
[Scene.Insight]: {
projectBased: true,
name: 'Insights',
@@ -408,7 +412,6 @@ export const sceneConfigurations: Record = {
[Scene.Heatmaps]: {
projectBased: true,
name: 'Heatmaps',
- hideProjectNotice: true,
},
}
@@ -529,7 +532,7 @@ export const routes: Record = {
[urls.persons()]: Scene.PersonsManagement,
[urls.pipelineNodeDataWarehouseNew()]: Scene.pipelineNodeDataWarehouseNew,
[urls.pipelineNodeNew(':stage')]: Scene.PipelineNodeNew,
- [urls.pipelineNodeNew(':stage', ':pluginIdOrBatchExportDestination')]: Scene.PipelineNodeNew,
+ [urls.pipelineNodeNew(':stage', ':id')]: Scene.PipelineNodeNew,
[urls.pipeline(':tab')]: Scene.Pipeline,
[urls.pipelineNode(':stage', ':id', ':nodeTab')]: Scene.PipelineNode,
[urls.groups(':groupTypeIndex')]: Scene.PersonsManagement,
@@ -541,6 +544,7 @@ export const routes: Record = {
[urls.experiment(':id')]: Scene.Experiment,
[urls.earlyAccessFeatures()]: Scene.EarlyAccessFeatures,
[urls.earlyAccessFeature(':id')]: Scene.EarlyAccessFeature,
+ [urls.errorTracking()]: Scene.ErrorTracking,
[urls.surveys()]: Scene.Surveys,
[urls.survey(':id')]: Scene.Survey,
[urls.surveyTemplates()]: Scene.SurveyTemplates,
diff --git a/frontend/src/scenes/session-recordings/filters/RecordingsUniversalFilters.tsx b/frontend/src/scenes/session-recordings/filters/RecordingsUniversalFilters.tsx
new file mode 100644
index 0000000000000..2625549c1b53d
--- /dev/null
+++ b/frontend/src/scenes/session-recordings/filters/RecordingsUniversalFilters.tsx
@@ -0,0 +1,138 @@
+import { useActions, useMountedLogic, useValues } from 'kea'
+import { DateFilter } from 'lib/components/DateFilter/DateFilter'
+import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import UniversalFilters from 'lib/components/UniversalFilters/UniversalFilters'
+import { universalFiltersLogic } from 'lib/components/UniversalFilters/universalFiltersLogic'
+import { isUniversalGroupFilterLike } from 'lib/components/UniversalFilters/utils'
+import { TestAccountFilter } from 'scenes/insights/filters/TestAccountFilter'
+
+import { actionsModel } from '~/models/actionsModel'
+import { cohortsModel } from '~/models/cohortsModel'
+import { AndOrFilterSelect } from '~/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect'
+
+import { sessionRecordingsPlaylistLogic } from '../playlist/sessionRecordingsPlaylistLogic'
+import { DurationFilter } from './DurationFilter'
+
+export const RecordingsUniversalFilters = (): JSX.Element => {
+ useMountedLogic(cohortsModel)
+ useMountedLogic(actionsModel)
+ const { universalFilters } = useValues(sessionRecordingsPlaylistLogic)
+ const { setUniversalFilters } = useActions(sessionRecordingsPlaylistLogic)
+
+ const durationFilter = universalFilters.duration[0]
+
+ return (
+
+
+
+ {
+ setUniversalFilters({
+ ...universalFilters,
+ date_from: changedDateFrom,
+ date_to: changedDateTo,
+ })
+ }}
+ dateOptions={[
+ { key: 'Custom', values: [] },
+ { key: 'Last 24 hours', values: ['-24h'] },
+ { key: 'Last 3 days', values: ['-3d'] },
+ { key: 'Last 7 days', values: ['-7d'] },
+ { key: 'Last 30 days', values: ['-30d'] },
+ { key: 'All time', values: ['-90d'] },
+ ]}
+ dropdownPlacement="bottom-start"
+ size="small"
+ />
+ {
+ setUniversalFilters({
+ duration: [{ ...newRecordingDurationFilter, key: newDurationType }],
+ })
+ }}
+ recordingDurationFilter={durationFilter}
+ durationTypeFilter={durationFilter.key}
+ pageKey="session-recordings"
+ />
+
+ setUniversalFilters({
+ ...universalFilters,
+ filter_test_accounts: testFilters.filter_test_accounts,
+ })
+ }
+ />
+
+
+
{
+ setUniversalFilters({
+ ...universalFilters,
+ filter_group: {
+ type: type,
+ values: universalFilters.filter_group.values,
+ },
+ })
+ }}
+ disabledReason="'Or' filtering is not supported yet"
+ topLevelFilter={true}
+ suffix={['filter', 'filters']}
+ />
+
+
+
+ {
+ setUniversalFilters({
+ ...universalFilters,
+ filter_group: filterGroup,
+ })
+ }}
+ >
+
+
+
+
+
+ Session properties
+
+ onChange('console_log_level', {})}
+ disabledReason={hasConsoleLogLevelFilter ? 'Log level filter already added' : undefined}
+ >
+ Console log level
+
+ onChange('console_log_query', {})}
+ disabledReason={hasConsoleLogQueryFilter ? 'Log text filter already added' : undefined}
+ >
+ Console log text
+
+
+
+
+
+
Person properties
+
+ {properties.map((property) => (
+ {
+ const newProperties = properties.filter((p) => p != property)
+ setQuickFilterProperties(newProperties)
+ },
+ icon: ,
+ }}
+ onClick={() => onChange(property, { propertyFilterType: PropertyFilterType.Person })}
+ >
+
+
+ ))}
+ setShowPropertySelector(false)}
+ placement="right-start"
+ overlay={
+ {
+ properties.push(value as string)
+ setQuickFilterProperties([...properties])
+ setShowPropertySelector(false)
+ }}
+ taxonomicGroupTypes={[TaxonomicFilterGroupType.PersonProperties]}
+ excludedProperties={{ [TaxonomicFilterGroupType.PersonProperties]: properties }}
+ />
+ }
+ >
+ setShowPropertySelector(!showPropertySelector)} fullWidth>
+ Add property
+
+
+
+
+ )
+}
diff --git a/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss b/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss
index 943f17aa977ba..8549d99d48dde 100644
--- a/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss
+++ b/frontend/src/scenes/session-recordings/player/controller/Seekbar.scss
@@ -47,7 +47,7 @@
.PlayerSeekbar__currentbar {
z-index: 3;
- background-color: var(--recording-seekbar-red);
+ background-color: var(--primary-3000);
border-radius: var(--bar-height) 0 0 var(--bar-height);
}
@@ -76,7 +76,7 @@
width: var(--thumb-size);
height: var(--thumb-size);
margin-top: calc(var(--thumb-size) / 2 * -1);
- background-color: var(--recording-seekbar-red);
+ background-color: var(--primary-3000);
border: 2px solid var(--bg-light);
border-radius: 50%;
transition: top 150ms ease-in-out;
diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx
index e851684d58874..9131ba82271d2 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/components/ItemEvent.tsx
@@ -68,7 +68,7 @@ export function ItemEvent({ item, expanded, setExpanded }: ItemEventProps): JSX.
{item.data.fullyLoaded ? (
item.data.event === '$exception' ? (
-
+
) : (
)
diff --git a/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts b/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts
index 65829d1257afd..965e6f33382e3 100644
--- a/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts
+++ b/frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts
@@ -1,5 +1,6 @@
-import { actions, kea, listeners, path, reducers, selectors } from 'kea'
+import { actions, connect, kea, listeners, path, reducers, selectors } from 'kea'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { teamLogic } from 'scenes/teamLogic'
import { AutoplayDirection, DurationType, SessionRecordingPlayerTab } from '~/types'
@@ -191,7 +192,10 @@ export const playerSettingsLogic = kea([
setQuickFilterProperties: (properties: string[]) => ({ properties }),
setTimestampFormat: (format: TimestampFormat) => ({ format }),
}),
- reducers(() => ({
+ connect({
+ values: [teamLogic, ['currentTeam']],
+ }),
+ reducers(({ values }) => ({
showFilters: [
true,
{
@@ -211,7 +215,7 @@ export const playerSettingsLogic = kea([
},
],
quickFilterProperties: [
- ['$geoip_country_name'] as string[],
+ ['$geoip_country_name', ...(values.currentTeam?.person_display_name_properties || [])] as string[],
{
persist: true,
},
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
index 40d3d356bd447..17ae678e31792 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
@@ -23,6 +23,7 @@ import { urls } from 'scenes/urls'
import { ReplayTabs, SessionRecordingType } from '~/types'
+import { RecordingsUniversalFilters } from '../filters/RecordingsUniversalFilters'
import { SessionRecordingsFilters } from '../filters/SessionRecordingsFilters'
import { SessionRecordingPlayer } from '../player/SessionRecordingPlayer'
import { SessionRecordingPreview, SessionRecordingPreviewSkeleton } from './SessionRecordingPreview'
@@ -118,6 +119,7 @@ function RecordingsLists(): JSX.Element {
recordingsCount,
isRecordingsListCollapsed,
sessionSummaryLoading,
+ useUniversalFiltering,
} = useValues(sessionRecordingsPlaylistLogic)
const {
setSelectedRecordingId,
@@ -205,25 +207,27 @@ function RecordingsLists(): JSX.Element {
-
-
-
- }
- onClick={() => {
- if (notebookNode) {
- notebookNode.actions.toggleEditing()
- } else {
- setShowFilters(!showFilters)
+ {(!useUniversalFiltering || notebookNode) && (
+
+
+
}
- }}
- >
- Filter
-
+ onClick={() => {
+ if (notebookNode) {
+ notebookNode.actions.toggleEditing()
+ } else {
+ setShowFilters(!showFilters)
+ }
+ }}
+ >
+ Filter
+
+ )}
-
+
+
+ {useUniversalFiltering &&
}
+
-
-
+
You can now use key "{key.label}" for authentication:
- {value}
+
+ {value}
+
For security reasons the value above will never be shown again.
diff --git a/frontend/src/scenes/surveys/QuestionBranchingInput.tsx b/frontend/src/scenes/surveys/QuestionBranchingInput.tsx
new file mode 100644
index 0000000000000..96c6ea55912d6
--- /dev/null
+++ b/frontend/src/scenes/surveys/QuestionBranchingInput.tsx
@@ -0,0 +1,68 @@
+import './EditSurvey.scss'
+
+import { LemonSelect } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { LemonField } from 'lib/lemon-ui/LemonField'
+
+import { MultipleSurveyQuestion, RatingSurveyQuestion, SurveyQuestionBranchingType } from '~/types'
+
+import { surveyLogic } from './surveyLogic'
+
+export function QuestionBranchingInput({
+ questionIndex,
+ question,
+}: {
+ questionIndex: number
+ question: RatingSurveyQuestion | MultipleSurveyQuestion
+}): JSX.Element {
+ const { survey, getBranchingDropdownValue } = useValues(surveyLogic)
+ const { setQuestionBranching } = useActions(surveyLogic)
+
+ const availableNextQuestions = survey.questions
+ .map((question, questionIndex) => ({
+ ...question,
+ questionIndex,
+ }))
+ .filter((_, idx) => questionIndex !== idx)
+ const branchingDropdownValue = getBranchingDropdownValue(questionIndex, question)
+
+ return (
+ <>
+
+ setQuestionBranching(questionIndex, value)}
+ options={[
+ ...(questionIndex < survey.questions.length - 1
+ ? [
+ {
+ label: 'Next question',
+ value: SurveyQuestionBranchingType.NextQuestion,
+ },
+ ]
+ : []),
+ {
+ label: 'Confirmation message',
+ value: SurveyQuestionBranchingType.ConfirmationMessage,
+ },
+ {
+ label: 'Specific question based on answer',
+ value: SurveyQuestionBranchingType.ResponseBased,
+ },
+ ...availableNextQuestions.map((question) => ({
+ label: `${question.questionIndex + 1}. ${question.question}`,
+ value: `${SurveyQuestionBranchingType.SpecificQuestion}:${question.questionIndex}`,
+ })),
+ ]}
+ />
+
+ {branchingDropdownValue === SurveyQuestionBranchingType.ResponseBased && (
+
+ TODO: dropdowns for the response-based branching
+
+ )}
+
+ )
+}
diff --git a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx
index 4b43be07bcf46..ec3b03d54b41d 100644
--- a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx
+++ b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx
@@ -7,12 +7,15 @@ import { IconPlusSmall, IconTrash } from '@posthog/icons'
import { LemonButton, LemonCheckbox, LemonInput, LemonSelect } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { Group } from 'kea-forms'
+import { FEATURE_FLAGS } from 'lib/constants'
import { SortableDragIcon } from 'lib/lemon-ui/icons'
import { LemonField } from 'lib/lemon-ui/LemonField'
+import { featureFlagLogic as enabledFeaturesLogic } from 'lib/logic/featureFlagLogic'
import { Survey, SurveyQuestionType } from '~/types'
import { defaultSurveyFieldValues, NewSurvey, SurveyQuestionLabel } from './constants'
+import { QuestionBranchingInput } from './QuestionBranchingInput'
import { HTMLEditor } from './SurveyAppearanceUtils'
import { surveyLogic } from './surveyLogic'
@@ -85,6 +88,10 @@ export function SurveyEditQuestionHeader({
export function SurveyEditQuestionGroup({ index, question }: { index: number; question: any }): JSX.Element {
const { survey, descriptionContentType } = useValues(surveyLogic)
const { setDefaultForQuestionType, setSurveyValue } = useActions(surveyLogic)
+ const { featureFlags } = useValues(enabledFeaturesLogic)
+ const hasBranching =
+ featureFlags[FEATURE_FLAGS.SURVEYS_BRANCHING_LOGIC] &&
+ (question.type === SurveyQuestionType.Rating || question.type === SurveyQuestionType.SingleChoice)
const initialDescriptionContentType = descriptionContentType(index) ?? 'text'
@@ -332,6 +339,7 @@ export function SurveyEditQuestionGroup({ index, question }: { index: number; qu
}
/>
+ {hasBranching && }
)
diff --git a/frontend/src/scenes/surveys/surveyLogic.tsx b/frontend/src/scenes/surveys/surveyLogic.tsx
index c976e7f5dfb53..9b3964b64fdf3 100644
--- a/frontend/src/scenes/surveys/surveyLogic.tsx
+++ b/frontend/src/scenes/surveys/surveyLogic.tsx
@@ -16,10 +16,13 @@ import { hogql } from '~/queries/utils'
import {
Breadcrumb,
FeatureFlagFilters,
+ MultipleSurveyQuestion,
PropertyFilterType,
PropertyOperator,
+ RatingSurveyQuestion,
Survey,
SurveyQuestionBase,
+ SurveyQuestionBranchingType,
SurveyQuestionType,
SurveyUrlMatchType,
} from '~/types'
@@ -154,6 +157,7 @@ export const surveyLogic = kea
