chore: Remove hog functions flag and plugin based destinations (#25354)

frontend/src/lib/constants.tsx

@@ -192,7 +192,6 @@ export const FEATURE_FLAGS = {
     SETTINGS_PERSONS_JOIN_MODE: 'settings-persons-join-mode', // owner: @robbie-c
     SETTINGS_PERSONS_ON_EVENTS_HIDDEN: 'settings-persons-on-events-hidden', // owner: @Twixes
     HOG: 'hog', // owner: @mariusandra
-    HOG_FUNCTIONS: 'hog-functions', // owner: #team-cdp
     HOG_FUNCTIONS_LINKED: 'hog-functions-linked', // owner: #team-cdp
     PERSONLESS_EVENTS_NOT_SUPPORTED: 'personless-events-not-supported', // owner: @raquelmsmith
     ALERTS: 'alerts', // owner: @anirudhpillai #team-product-analytics

frontend/src/mocks/handlers.ts

@@ -16,6 +16,7 @@ import { SharingConfigurationType } from '~/types'
 
 import { getAvailableProductFeatures } from './features'
 import { billingJson } from './fixtures/_billing'
+import _hogFunctionTemplates from './fixtures/_hogFunctionTemplates.json'
 import * as statusPageAllOK from './fixtures/_status_page_all_ok.json'
 import { Mocks, MockSignature, mocksToHandlers } from './utils'
 
@@ -27,6 +28,14 @@ export const toPaginatedResponse = (results: any[]): typeof EMPTY_PAGINATED_RESP
     previous: null,
 })
 
+const hogFunctionTemplateRetrieveMock: MockSignature = (req, res, ctx) => {
+    const hogFunctionTemplate = _hogFunctionTemplates.results.find((conf) => conf.id === req.params.id)
+    if (!_hogFunctionTemplates) {
+        return res(ctx.status(404))
+    }
+    return res(ctx.json({ ...hogFunctionTemplate }))
+}
+
 // this really returns MaybePromise<ResponseFunction<any>>
 // but MSW doesn't export MaybePromise 🤷
 function posthogCORSResponse(req: RestRequest, res: ResponseComposition, ctx: RestContext): any {
@@ -135,6 +144,9 @@ export const defaultMocks: Mocks = {
             eligible: false,
         },
         'https://status.posthog.com/api/v2/summary.json': statusPageAllOK,
+        '/api/projects/:team_id/hog_function_templates': _hogFunctionTemplates,
+        '/api/projects/:team_id/hog_function_templates/:id': hogFunctionTemplateRetrieveMock,
+        '/api/projects/:team_id/hog_functions': EMPTY_PAGINATED_RESPONSE,
     },
     post: {
         'https://us.i.posthog.com/e/': (req, res, ctx): MockSignature => posthogCORSResponse(req, res, ctx),

frontend/src/scenes/actions/ActionEdit.tsx

@@ -6,7 +6,6 @@ import { router } from 'kea-router'
 import { EditableField } from 'lib/components/EditableField/EditableField'
 import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
 import { PageHeader } from 'lib/components/PageHeader'
-import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { IconPlayCircle } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonField } from 'lib/lemon-ui/LemonField'
@@ -35,8 +34,6 @@ export function ActionEdit({ action: loadedAction, id }: ActionEditLogicProps):
 
     const slackEnabled = currentTeam?.slack_incoming_webhook
 
-    const hogFunctionsEnabled = useFeatureFlag('HOG_FUNCTIONS')
-
     const deleteButton = (): JSX.Element => (
         <LemonButton
             data-attr="delete-action-bottom"
@@ -211,47 +208,42 @@ export function ActionEdit({ action: loadedAction, id }: ActionEditLogicProps):
                     </LemonField>
                 </div>
 
-                {!hogFunctionsEnabled || action.post_to_slack ? (
+                {action.post_to_slack ? (
                     <div className="my-4 space-y-2">
                         <h2 className="subtitle">Webhook delivery</h2>
 
-                        {hogFunctionsEnabled && (
-                            <>
-                                <LemonBanner
-                                    type="error"
-                                    action={{
-                                        children: 'Upgrade to new version',
-                                        onClick: () =>
-                                            LemonDialog.open({
-                                                title: 'Upgrade webhook',
-                                                width: '30rem',
-                                                description:
-                                                    'This will create a new Destination in the upgraded system. The action will have its webhook disabled. There will be slight difference in the placeholder tags, so double check that everything works as expected.',
-                                                secondaryButton: {
-                                                    type: 'secondary',
-                                                    children: 'Cancel',
-                                                },
-                                                primaryButton: {
-                                                    type: 'primary',
-                                                    onClick: () => migrateToHogFunction(),
-                                                    children: 'Upgrade',
-                                                },
-                                            }),
-                                        disabledReason: hasCohortFilters
-                                            ? 'Can not upgrade because action has a cohort filter.'
-                                            : migrationLoading
-                                            ? 'Loading...'
-                                            : actionChanged
-                                            ? 'Please save the action first'
-                                            : undefined,
-                                    }}
-                                >
-                                    Action Webhooks have been replaced by the new and improved{' '}
-                                    <b>Pipeline Destinations</b>.{' '}
-                                    {!hasCohortFilters && !actionChanged ? 'Click to upgrade.' : ''}
-                                </LemonBanner>
-                            </>
-                        )}
+                        <LemonBanner
+                            type="error"
+                            action={{
+                                children: 'Upgrade to new version',
+                                onClick: () =>
+                                    LemonDialog.open({
+                                        title: 'Upgrade webhook',
+                                        width: '30rem',
+                                        description:
+                                            'This will create a new Destination in the upgraded system. The action will have its webhook disabled. There will be slight difference in the placeholder tags, so double check that everything works as expected.',
+                                        secondaryButton: {
+                                            type: 'secondary',
+                                            children: 'Cancel',
+                                        },
+                                        primaryButton: {
+                                            type: 'primary',
+                                            onClick: () => migrateToHogFunction(),
+                                            children: 'Upgrade',
+                                        },
+                                    }),
+                                disabledReason: hasCohortFilters
+                                    ? 'Can not upgrade because action has a cohort filter.'
+                                    : migrationLoading
+                                    ? 'Loading...'
+                                    : actionChanged
+                                    ? 'Please save the action first'
+                                    : undefined,
+                            }}
+                        >
+                            Action Webhooks have been replaced by the new and improved <b>Pipeline Destinations</b>.{' '}
+                            {!hasCohortFilters && !actionChanged ? 'Click to upgrade.' : ''}
+                        </LemonBanner>
 
                         <LemonField name="post_to_slack">
                             {({ value, onChange }) => (

frontend/src/scenes/actions/ActionHogFunctions.tsx

@@ -1,6 +1,5 @@
 import { LemonBanner } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
-import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { actionEditLogic } from 'scenes/actions/actionEditLogic'
 import { actionLogic } from 'scenes/actions/actionLogic'
 import { LinkedHogFunctions } from 'scenes/pipeline/hogfunctions/list/LinkedHogFunctions'
@@ -12,9 +11,7 @@ export function ActionHogFunctions(): JSX.Element | null {
     const { hasCohortFilters, actionChanged, showCohortDisablesFunctionsWarning } = useValues(
         actionEditLogic({ id: action?.id, action })
     )
-    const hogFunctionsEnabled = useFeatureFlag('HOG_FUNCTIONS')
-
-    if (!action || !hogFunctionsEnabled) {
+    if (!action) {
         return null
     }
 

frontend/src/scenes/data-management/definition/DefinitionView.tsx

@@ -7,7 +7,6 @@ import { ObjectTags } from 'lib/components/ObjectTags/ObjectTags'
 import { PageHeader } from 'lib/components/PageHeader'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { UserActivityIndicator } from 'lib/components/UserActivityIndicator/UserActivityIndicator'
-import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { IconPlayCircle } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
@@ -37,7 +36,6 @@ export function DefinitionView(props: DefinitionLogicProps = {}): JSX.Element {
     const { definition, definitionLoading, definitionMissing, hasTaxonomyFeatures, singular, isEvent, isProperty } =
         useValues(logic)
     const { deleteDefinition } = useActions(logic)
-    const hogFunctionsEnabled = useFeatureFlag('HOG_FUNCTIONS')
 
     if (definitionLoading) {
         return <SpinnerOverlay sceneLevel />
@@ -200,24 +198,20 @@ export function DefinitionView(props: DefinitionLogicProps = {}): JSX.Element {
                 <>
                     <EventDefinitionProperties definition={definition} />
 
-                    {hogFunctionsEnabled && (
-                        <>
-                            <LemonDivider className="my-6" />
-                            <h2 className="flex-1 subtitle">Connected destinations</h2>
-                            <p>Get notified via Slack, webhooks or more whenever this event is captured.</p>
+                    <LemonDivider className="my-6" />
+                    <h2 className="flex-1 subtitle">Connected destinations</h2>
+                    <p>Get notified via Slack, webhooks or more whenever this event is captured.</p>
 
-                            <LinkedHogFunctions
-                                filters={{
-                                    events: [
-                                        {
-                                            id: `${definition.name}`,
-                                            type: 'events',
-                                        },
-                                    ],
-                                }}
-                            />
-                        </>
-                    )}
+                    <LinkedHogFunctions
+                        filters={{
+                            events: [
+                                {
+                                    id: `${definition.name}`,
+                                    type: 'events',
+                                },
+                            ],
+                        }}
+                    />
                     <LemonDivider className="my-6" />
                     <h3>Matching events</h3>
                     <p>This is the list of recent events that match this definition.</p>

frontend/src/scenes/pipeline/Pipeline.stories.tsx

@@ -69,7 +69,7 @@ export default {
                 '/api/projects/:team_id/pipeline_frontend_apps_configs/:id': pluginConfigRetrieveMock,
                 '/api/organizations/:organization_id/pipeline_import_apps/': empty,
                 '/api/projects/:team_id/pipeline_import_apps_configs/': empty,
-
+                '/api/projects/:team_id/integrations/': empty,
                 '/api/projects/:team_id/app_metrics/:plugin_config_id?date_from=-7d': require('./__mocks__/pluginMetrics.json'),
                 '/api/projects/:team_id/app_metrics/:plugin_config_id/error_details?error_type=Error': require('./__mocks__/pluginErrorDetails.json'),
             },
@@ -219,6 +219,13 @@ export function PipelineNodeNewBigQueryWithoutPipelines(): JSX.Element {
     return <App />
 }
 
+export function PipelineNodeNewHogFunction(): JSX.Element {
+    useEffect(() => {
+        router.actions.push(urls.pipelineNodeNew(PipelineStage.Destination, 'hog-template-slack'))
+    }, [])
+    return <App />
+}
+
 export function PipelineNodeEditConfiguration(): JSX.Element {
     useEffect(() => {
         router.actions.push(

frontend/src/scenes/pipeline/PipelinePluginConfiguration.tsx

@@ -17,7 +17,6 @@ import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { NotFound } from 'lib/components/NotFound'
 import { PageHeader } from 'lib/components/PageHeader'
-import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { LemonField } from 'lib/lemon-ui/LemonField'
 import { LemonMarkdown } from 'lib/lemon-ui/LemonMarkdown'
 import { CodeEditor } from 'lib/monaco/CodeEditor'
@@ -56,8 +55,6 @@ export function PipelinePluginConfiguration({
     } = useValues(logic)
     const { submitConfiguration, resetConfiguration, migrateToHogFunction } = useActions(logic)
 
-    const hasHogFunctions = useFeatureFlag('HOG_FUNCTIONS')
-
     if (!stage) {
         return <NotFound object="pipeline stage" />
     }
@@ -139,7 +136,7 @@ export function PipelinePluginConfiguration({
         <div className="space-y-3">
             <PageHeader buttons={buttons} />
 
-            {hasHogFunctions && plugin?.hog_function_migration_available && (
+            {plugin?.hog_function_migration_available && (
                 <LemonBanner
                     type="error"
                     action={{

frontend/src/scenes/pipeline/destinations/DestinationsFilters.tsx

@@ -1,10 +1,5 @@
-import { LemonBanner, LemonCheckbox, LemonInput, LemonSelect, Link } from '@posthog/lemon-ui'
+import { LemonCheckbox, LemonInput, LemonSelect, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { FlaggedFeature } from 'lib/components/FlaggedFeature'
-import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
-
-import { sidePanelStateLogic } from '~/layout/navigation-3000/sidepanel/sidePanelStateLogic'
-import { SidePanelTab } from '~/types'
 
 import { PipelineBackend } from '../types'
 import { destinationsFiltersLogic } from './destinationsFiltersLogic'
@@ -22,25 +17,9 @@ export function DestinationsFilters({
 }: DestinationsFiltersProps): JSX.Element | null {
     const { user, filters } = useValues(destinationsFiltersLogic)
     const { setFilters, openFeedbackDialog } = useActions(destinationsFiltersLogic)
-    const { openSidePanel } = useActions(sidePanelStateLogic)
-    const hogFunctionsEnabled = !!useFeatureFlag('HOG_FUNCTIONS')
 
     return (
         <div className="space-y-2">
-            <FlaggedFeature flag="hog-functions" match={false}>
-                <LemonBanner
-                    type="info"
-                    action={{
-                        onClick: () => openSidePanel(SidePanelTab.FeaturePreviews),
-                        children: 'Enable feature preview',
-                    }}
-                >
-                    We're excited to announce <b>Destinations 3000</b> - the new version of our realtime destinations
-                    that include a range of pre-built templates, native filtering, templating and even customizing the
-                    code.
-                </LemonBanner>
-            </FlaggedFeature>
-
             <div className="flex items-center gap-2">
                 {!hideSearch && (
                     <LemonInput
@@ -80,10 +59,7 @@ export function DestinationsFilters({
                         options={
                             [
                                 { label: 'All kinds', value: null },
-                                hogFunctionsEnabled
-                                    ? { label: 'Realtime (new)', value: PipelineBackend.HogFunction }
-                                    : undefined,
-                                { label: 'Realtime', value: PipelineBackend.Plugin },
+                                { label: 'Realtime', value: PipelineBackend.HogFunction },
                                 { label: 'Batch exports', value: PipelineBackend.BatchExport },
                             ].filter(Boolean) as { label: string; value: PipelineBackend | null }[]
                         }