diff --git a/frontend/public/services/pineapple-rain.png b/frontend/public/services/pineapple-rain.png new file mode 100644 index 00000000000..be605346825 Binary files /dev/null and b/frontend/public/services/pineapple-rain.png differ diff --git a/frontend/public/services/pineapple.png b/frontend/public/services/pineapple.png index 66f070dd20d..23e3490dd0d 100644 Binary files a/frontend/public/services/pineapple.png and b/frontend/public/services/pineapple.png differ diff --git a/frontend/src/scenes/pipeline/Pipeline.tsx b/frontend/src/scenes/pipeline/Pipeline.tsx index 3bb83139ee3..16bed8935ce 100644 --- a/frontend/src/scenes/pipeline/Pipeline.tsx +++ b/frontend/src/scenes/pipeline/Pipeline.tsx @@ -9,7 +9,7 @@ import { ActivityScope, PipelineTab } from '~/types' import { AppsManagement } from './AppsManagement' import { FrontendApps } from './FrontendApps' -import { DESTINATION_TYPES } from './hog-functions-list/constants' +import { DESTINATION_TYPES, SITE_APP_TYPES } from './hog-functions-list/constants' import { HogFunctionsList } from './hog-functions-list/HogFunctionsList' import { ImportApps } from './ImportApps' import { importAppsLogic } from './importAppsLogic' @@ -29,7 +29,8 @@ export function Pipeline(): JSX.Element { { key: PipelineTab.Sources, content: }, { key: PipelineTab.Transformations, content: }, { key: PipelineTab.Destinations, content: }, - { key: PipelineTab.SiteApps, content: }, + { key: PipelineTab.SiteApps, content: }, + { key: PipelineTab.SiteAppsOld, content: }, ] // Import apps are deprecated, we only show the tab if there are some still enabled diff --git a/frontend/src/scenes/pipeline/PipelineNodeNew.tsx b/frontend/src/scenes/pipeline/PipelineNodeNew.tsx index 5934b141971..a1ed4e42bd6 100644 --- a/frontend/src/scenes/pipeline/PipelineNodeNew.tsx +++ b/frontend/src/scenes/pipeline/PipelineNodeNew.tsx @@ -14,7 +14,7 @@ import { urls } from 'scenes/urls' import { AvailableFeature, PipelineStage, PluginType } from '~/types' import { frontendAppsLogic } from './frontendAppsLogic' -import { DESTINATION_TYPES } from './hog-functions-list/constants' +import { DESTINATION_TYPES, SITE_APP_TYPES } from './hog-functions-list/constants' import { NewFunctionsList } from './hog-functions-list/NewHogFunction' import { HogFunctionConfiguration } from './hogfunctions/HogFunctionConfiguration' import { PipelineBatchExportConfiguration } from './PipelineBatchExportConfiguration' @@ -106,6 +106,8 @@ export function PipelineNodeNew(params: { stage?: string; id?: string } = {}): J } else if (stage === PipelineStage.Destination) { return } else if (stage === PipelineStage.SiteApp) { + return + } else if (stage === PipelineStage.SiteAppOld) { return } else if (stage === PipelineStage.Source) { return diff --git a/frontend/src/scenes/pipeline/hog-functions-list/HogFunctionsList.tsx b/frontend/src/scenes/pipeline/hog-functions-list/HogFunctionsList.tsx index 066cd49092a..3e883517bf1 100644 --- a/frontend/src/scenes/pipeline/hog-functions-list/HogFunctionsList.tsx +++ b/frontend/src/scenes/pipeline/hog-functions-list/HogFunctionsList.tsx @@ -33,24 +33,44 @@ export function HogFunctionsList({ types }: HogFunctionsListProps): JSX.Element return ( <> - } - /> - - } - isEmpty={destinations.length === 0 && !loading} + {types.includes('destination') ? ( + <> + } + /> + + } + isEmpty={destinations.length === 0 && !loading} + /> + + + ) : types.includes('site_app') ? ( + } /> - + ) : ( + } + /> + )}
-

New destinations

+

+ {types.includes('destination') + ? 'New destinations' + : types.includes('site_app') + ? 'New site app' + : 'New Hog function'} +

) @@ -64,9 +84,11 @@ export function HogFunctionsListTable({ types }: HogFunctionsListProps): JSX.Ele const { toggleNode, deleteNode } = useActions(hogFunctionsListLogic({ types })) const { resetFilters } = useActions(hogFunctionsListFiltersLogic({ types })) + const isDestination = types.includes('destination') + return (
- + - {destination.backend === PipelineBackend.HogFunction ? ( - - ) : ( - - )} - - ) - }, - }, + ...(isDestination + ? [ + { + title: 'Frequency', + key: 'interval', + render: function RenderFrequency(_, destination) { + return destination.interval + }, + } as LemonTableColumn, + ] + : []), + ...(isDestination + ? [ + { + title: 'Last 7 days', + render: function RenderSuccessRate(_, destination) { + return ( + + {destination.backend === PipelineBackend.HogFunction ? ( + + ) : ( + + )} + + ) + }, + } as LemonTableColumn, + ] + : []), updatedAtColumn() as LemonTableColumn, { title: 'Status', diff --git a/frontend/src/scenes/pipeline/hog-functions-list/NewHogFunction.tsx b/frontend/src/scenes/pipeline/hog-functions-list/NewHogFunction.tsx index be5efd73de2..a6579480179 100644 --- a/frontend/src/scenes/pipeline/hog-functions-list/NewHogFunction.tsx +++ b/frontend/src/scenes/pipeline/hog-functions-list/NewHogFunction.tsx @@ -20,7 +20,7 @@ export type NewFunctionsListProps = { export function NewFunctionsList({ types }: NewFunctionsListProps): JSX.Element { return (
- + {types.includes('destination') ? : null}
diff --git a/frontend/src/scenes/pipeline/hog-functions-list/hogFunctionsListLogic.tsx b/frontend/src/scenes/pipeline/hog-functions-list/hogFunctionsListLogic.tsx index 6114519872a..ba532340bd7 100644 --- a/frontend/src/scenes/pipeline/hog-functions-list/hogFunctionsListLogic.tsx +++ b/frontend/src/scenes/pipeline/hog-functions-list/hogFunctionsListLogic.tsx @@ -68,7 +68,7 @@ export const hogFunctionsListLogic = kea([ updatePluginConfig: (pluginConfig: PluginConfigTypeNew) => ({ pluginConfig }), updateBatchExportConfig: (batchExportConfig: BatchExportConfiguration) => ({ batchExportConfig }), }), - loaders(({ values, actions }) => ({ + loaders(({ values, actions, props }) => ({ plugins: [ {} as Record, { @@ -173,7 +173,7 @@ export const hogFunctionsListLogic = kea([ { loadHogFunctions: async () => { // TODO: Support pagination? - return (await api.hogFunctions.list(undefined, ['destination', 'site_destination'])).results + return (await api.hogFunctions.list(undefined, props.types)).results }, deleteNodeHogFunction: async ({ destination }) => { diff --git a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx index 859f98d2ff9..f1d95950ff9 100644 --- a/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx +++ b/frontend/src/scenes/pipeline/hogfunctions/HogFunctionConfiguration.tsx @@ -239,7 +239,7 @@ export function HogFunctionConfiguration({ templateId, id }: HogFunctionConfigur - {hogFunction?.template ? ( + {hogFunction?.template && !hogFunction.template.id.startsWith('template-blank-') ? ( ({ error }), }), - reducers({ + reducers(({ props }) => ({ showSource: [ - false, + (props.templateId?.startsWith('template-blank-') ? true : false) && !props.id, { setShowSource: (_, { showSource }) => showSource, }, @@ -226,7 +226,7 @@ export const hogFunctionConfigurationLogic = kea error, }, ], - }), + })), loaders(({ actions, props, values }) => ({ template: [ null as HogFunctionTemplateType | null, diff --git a/frontend/src/scenes/pipeline/pipelineLogic.tsx b/frontend/src/scenes/pipeline/pipelineLogic.tsx index 38ea5f1d54b..536d79586c6 100644 --- a/frontend/src/scenes/pipeline/pipelineLogic.tsx +++ b/frontend/src/scenes/pipeline/pipelineLogic.tsx @@ -11,7 +11,11 @@ import { ActivityScope, Breadcrumb, PipelineTab } from '~/types' import type { pipelineLogicType } from './pipelineLogicType' export const humanFriendlyTabName = (tab: PipelineTab): string => { - return capitalizeFirstLetter(tab).replace(/[-_]/g, ' ') + const label = capitalizeFirstLetter(tab).replace(/[-_]/g, ' ') + if (label.endsWith(' old')) { + return label.slice(0, -4) + ' (old)' + } + return label } export const pipelineLogic = kea([ diff --git a/frontend/src/scenes/pipeline/pipelinePluginConfigurationLogic.tsx b/frontend/src/scenes/pipeline/pipelinePluginConfigurationLogic.tsx index 4c08205c5de..1e33efd91f8 100644 --- a/frontend/src/scenes/pipeline/pipelinePluginConfigurationLogic.tsx +++ b/frontend/src/scenes/pipeline/pipelinePluginConfigurationLogic.tsx @@ -17,7 +17,7 @@ import { getPluginConfigFormData, } from './configUtils' import { frontendAppsLogic } from './frontendAppsLogic' -import { DESTINATION_TYPES } from './hog-functions-list/constants' +import { DESTINATION_TYPES, SITE_APP_TYPES } from './hog-functions-list/constants' import { hogFunctionsListLogic } from './hog-functions-list/hogFunctionsListLogic' import { importAppsLogic } from './importAppsLogic' import { pipelineAccessLogic } from './pipelineAccessLogic' @@ -174,6 +174,8 @@ export const pipelinePluginConfigurationLogic = kea window.setTimeout(resolve, 1000)) + console.log("🦔 Script loaded") +} + +export function onEvent({ posthog, ...globals }) { + console.log(`🦔 Sending event: ${globals.event.event}`, globals) +} +""".strip(), + inputs_schema=[ + { + "key": "name", + "type": "string", + "label": "Name", + "description": "What's your name?", + "default": "Max", + }, + ], +) diff --git a/posthog/cdp/templates/pineapple/template_pineapple_mode.py b/posthog/cdp/templates/pineapple/template_pineapple_rain.py similarity index 96% rename from posthog/cdp/templates/pineapple/template_pineapple_mode.py rename to posthog/cdp/templates/pineapple/template_pineapple_rain.py index 3379859d9dc..c6f7b9fe2da 100644 --- a/posthog/cdp/templates/pineapple/template_pineapple_mode.py +++ b/posthog/cdp/templates/pineapple/template_pineapple_rain.py @@ -3,10 +3,10 @@ from posthog.cdp.templates.hog_function_template import HogFunctionTemplate template: HogFunctionTemplate = HogFunctionTemplate( status="free", type="site_app", - id="template-pineapple-mode", - name="Pineapple Mode", - description="Make any website better by adding pineapples", - icon_url="/static/services/pineapple.png", + id="template-pineapple-rain", + name="Pineapple Rain", + description="Make any website better by adding raining pineapples", + icon_url="/static/services/pineapple-rain.png", category=["Custom", "Analytics"], hog=""" const style = `