feat(cdp): Error tracking notifications

frontend/src/layout/navigation-3000/sidepanel/panels/activity/SidePanelActivitySubscriptions.tsx

@@ -6,6 +6,7 @@ export function SidePanelActivitySubscriptions(): JSX.Element {
             <p>Get notified of your team's activity</p>
 
             <LinkedHogFunctions
+                logicKey="activity-log"
                 type="internal_destination"
                 subTemplateId="activity-log"
                 filters={{

frontend/src/scenes/actions/ActionHogFunctions.tsx

@@ -35,6 +35,7 @@ export function ActionHogFunctions(): JSX.Element | null {
             ) : null}
 
             <LinkedHogFunctions
+                logicKey="actions"
                 type="destination"
                 filters={filters}
                 newDisabledReason={

frontend/src/scenes/appScenes.ts

@@ -35,7 +35,9 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.EarlyAccessFeatures]: () => import('./early-access-features/EarlyAccessFeatures'),
     [Scene.EarlyAccessFeature]: () => import('./early-access-features/EarlyAccessFeature'),
     [Scene.ErrorTracking]: () => import('./error-tracking/ErrorTrackingScene'),
-    [Scene.ErrorTrackingConfiguration]: () => import('./error-tracking/ErrorTrackingConfigurationScene'),
+    [Scene.ErrorTrackingAlerts]: () => import('./error-tracking/alerts/ErrorTrackingAlertsScene'),
+    [Scene.ErrorTrackingAlert]: () => import('./error-tracking/alerts/ErrorTrackingAlertScene'),
+    [Scene.ErrorTrackingSymbolSets]: () => import('./error-tracking/symbol-sets/ErrorTrackingSymbolSetsScene'),
     [Scene.ErrorTrackingIssue]: () => import('./error-tracking/ErrorTrackingIssueScene'),
     [Scene.Surveys]: () => import('./surveys/Surveys'),
     [Scene.Survey]: () => import('./surveys/Survey'),

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

@@ -183,15 +183,15 @@ export function DefinitionView(props: DefinitionLogicProps = {}): JSX.Element {
             <LemonDivider className="my-6" />
             <div className="flex flex-wrap">
                 {isEvent && definition.created_at && (
-                    <div className="flex-1 flex flex-col">
+                    <div className="flex flex-col flex-1">
                         <h5>First seen</h5>
                         <b>
                             <TZLabel time={definition.created_at} />
                         </b>
                     </div>
                 )}
                 {isEvent && definition.last_seen_at && (
-                    <div className="flex-1 flex flex-col">
+                    <div className="flex flex-col flex-1">
                         <h5>Last seen</h5>
                         <b>
                             <TZLabel time={definition.last_seen_at} />
@@ -200,7 +200,7 @@ export function DefinitionView(props: DefinitionLogicProps = {}): JSX.Element {
                 )}
 
                 {isProperty && (
-                    <div className="flex-1 flex flex-col">
+                    <div className="flex flex-col flex-1">
                         <h5>Property type</h5>
                         <b>{(definition as PropertyDefinition).property_type ?? '-'}</b>
                     </div>
@@ -218,6 +218,7 @@ export function DefinitionView(props: DefinitionLogicProps = {}): JSX.Element {
                     <p>Get notified via Slack, webhooks or more whenever this event is captured.</p>
 
                     <LinkedHogFunctions
+                        logicKey="event-definitions"
                         type="destination"
                         filters={{
                             events: [

frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx

@@ -331,6 +331,7 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element {
                         <h3>Notifications</h3>
                         <p>Get notified when people opt in or out of your feature.</p>
                         <LinkedHogFunctions
+                            logicKey="eaf"
                             type="destination"
                             filters={destinationFilters}
                             subTemplateId="early-access-feature-enrollment"

frontend/src/scenes/error-tracking/ErrorTrackingIssueScene.tsx

@@ -13,7 +13,7 @@ import { AssigneeSelect } from './AssigneeSelect'
 import ErrorTrackingFilters from './ErrorTrackingFilters'
 import { errorTrackingIssueSceneLogic } from './errorTrackingIssueSceneLogic'
 import { OverviewTab } from './groups/OverviewTab'
-import { SymbolSetUploadModal } from './SymbolSetUploadModal'
+import { SymbolSetUploadModal } from './symbol-sets/SymbolSetUploadModal'
 
 export const scene: SceneExport = {
     component: ErrorTrackingIssueScene,

frontend/src/scenes/error-tracking/ErrorTrackingScene.tsx

@@ -1,6 +1,13 @@
 import { TZLabel } from '@posthog/apps-common'
-import { IconGear } from '@posthog/icons'
-import { LemonButton, LemonCheckbox, LemonDivider, LemonSegmentedButton } from '@posthog/lemon-ui'
+import { IconEllipsis, IconGear } from '@posthog/icons'
+import {
+    LemonButton,
+    LemonCheckbox,
+    LemonDivider,
+    LemonMenu,
+    LemonMenuItems,
+    LemonSegmentedButton,
+} from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { BindLogic, useActions, useValues } from 'kea'
 import { FeedbackNotice } from 'lib/components/FeedbackNotice'
@@ -176,21 +183,26 @@ const AssigneeColumn: QueryContextColumnComponent = (props) => {
 const Header = (): JSX.Element => {
     const { user } = useValues(userLogic)
 
+    const items: LemonMenuItems = [{ label: 'Manage symbol sets', to: urls.errorTrackingSymbolSets() }]
+
+    if (user?.is_staff) {
+        items.push({
+            label: 'Send an exception',
+            onClick: () => {
+                throw Error('Oh my!')
+            },
+        })
+    }
+
     return (
         <PageHeader
             buttons={
                 <>
-                    {user?.is_staff ? (
-                        <LemonButton
-                            onClick={() => {
-                                throw Error('Oh my!')
-                            }}
-                        >
-                            Send an exception
-                        </LemonButton>
-                    ) : null}
-                    <LemonButton to={urls.errorTrackingConfiguration()} type="secondary" icon={<IconGear />}>
-                        Configure
+                    <LemonMenu items={items}>
+                        <LemonButton icon={<IconEllipsis />} />
+                    </LemonMenu>
+                    <LemonButton to={urls.errorTrackingAlerts()} type="secondary" icon={<IconGear />}>
+                        Configure alerts
                     </LemonButton>
                 </>
             }

frontend/src/scenes/error-tracking/alerts/ErrorTrackingAlertScene.tsx

@@ -0,0 +1,44 @@
+import { kea, path, props, selectors } from 'kea'
+import { HogFunctionConfiguration } from 'scenes/pipeline/hogfunctions/HogFunctionConfiguration'
+import { Scene, SceneExport } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { Breadcrumb } from '~/types'
+
+import type { errorTrackingAlertSceneLogicType } from './ErrorTrackingAlertSceneType'
+
+export const errorTrackingAlertSceneLogic = kea<errorTrackingAlertSceneLogicType>([
+    path((key) => ['scenes', 'error-tracking', 'errorTrackingAlertSceneLogic', key]),
+    props({} as { id: string }),
+    selectors({
+        breadcrumbs: [
+            (_, p) => [p.id],
+            (id): Breadcrumb[] => [
+                {
+                    key: Scene.ErrorTracking,
+                    path: urls.errorTracking(),
+                    name: 'Error tracking',
+                },
+                {
+                    key: Scene.ErrorTrackingAlerts,
+                    path: urls.errorTrackingAlerts(),
+                    name: 'Alerts',
+                },
+                {
+                    key: Scene.ErrorTrackingAlert,
+                    name: id === 'new' ? 'Create alert' : 'Edit alert',
+                },
+            ],
+        ],
+    }),
+])
+
+export const scene: SceneExport = {
+    component: ErrorTrackingAlertScene,
+    logic: errorTrackingAlertSceneLogic,
+    paramsToProps: ({ params: { id } }): (typeof errorTrackingAlertSceneLogic)['props'] => ({ id }),
+}
+
+export function ErrorTrackingAlertScene(): JSX.Element {
+    return <HogFunctionConfiguration id={null} templateId="template-error-tracking-alert" />
+}

frontend/src/scenes/error-tracking/alerts/ErrorTrackingAlertsScene.tsx

@@ -0,0 +1,65 @@
+import { LemonButton } from '@posthog/lemon-ui'
+import { kea, path, selectors } from 'kea'
+import { PageHeader } from 'lib/components/PageHeader'
+import { LinkedHogFunctions } from 'scenes/pipeline/hogfunctions/list/LinkedHogFunctions'
+import { SceneExport } from 'scenes/sceneTypes'
+import { Scene } from 'scenes/sceneTypes'
+import { urls } from 'scenes/urls'
+
+import { Breadcrumb } from '~/types'
+
+import type { errorTrackingAlertsSceneLogicType } from './ErrorTrackingAlertsSceneType'
+
+export const errorTrackingAlertsSceneLogic = kea<errorTrackingAlertsSceneLogicType>([
+    path(['scenes', 'error-tracking', 'errorTrackingAlertsSceneLogic']),
+    selectors({
+        breadcrumbs: [
+            () => [],
+            (): Breadcrumb[] => [
+                {
+                    key: Scene.ErrorTracking,
+                    name: 'Error tracking',
+                    path: urls.errorTracking(),
+                },
+                {
+                    key: Scene.ErrorTrackingAlerts,
+                    name: 'Alerts',
+                },
+            ],
+        ],
+    }),
+])
+
+export const scene: SceneExport = {
+    component: ErrorTrackingAlertsScene,
+    logic: errorTrackingAlertsSceneLogic,
+}
+
+export function ErrorTrackingAlertsScene(): JSX.Element {
+    return (
+        <>
+            <PageHeader
+                buttons={
+                    <LemonButton type="primary" to={urls.errorTrackingAlert('new')} className="flex">
+                        Setup alert
+                    </LemonButton>
+                }
+            />
+
+            <LinkedHogFunctions
+                logicKey="error-tracking-alerts"
+                type="internal_destination"
+                subTemplateId="errors"
+                filters={{
+                    events: [
+                        {
+                            id: `$error_something`,
+                            type: 'events',
+                        },
+                    ],
+                }}
+            />
+            {/* <DestinationsTable types={['error_tracking_alert']} hideKind hideFeedback /> */}
+        </>
+    )
+}

frontend/src/scenes/error-tracking/errorTrackingIssueSceneLogic.ts

@@ -155,11 +155,7 @@ export const errorTrackingIssueSceneLogic = kea<errorTrackingIssueSceneLogicType
     actionToUrl(({ values }) => ({
         setTab: () => {
             const searchParams = router.values.searchParams
-
-            if (values.tab != IssueTab.Overview) {
-                searchParams['tab'] = values.tab
-            }
-
+            searchParams['tab'] = values.tab
             return [router.values.location.pathname, searchParams]
         },
     })),

frontend/src/scenes/error-tracking/ErrorTrackingConfigurationScene.tsx → frontend/src/scenes/error-tracking/symbol-sets/ErrorTrackingSymbolSetsScene.tsx

@@ -8,16 +8,15 @@ import { humanFriendlyDetailedTime } from 'lib/utils'
 import { useEffect, useState } from 'react'
 import { SceneExport } from 'scenes/sceneTypes'
 
-import { AlphaAccessScenePrompt } from './AlphaAccessScenePrompt'
 import { errorTrackingSymbolSetLogic } from './errorTrackingSymbolSetLogic'
 import { SymbolSetUploadModal } from './SymbolSetUploadModal'
 
 export const scene: SceneExport = {
-    component: ErrorTrackingConfigurationScene,
+    component: ErrorTrackingSymbolSetsScene,
     logic: errorTrackingSymbolSetLogic,
 }
 
-export function ErrorTrackingConfigurationScene(): JSX.Element {
+export default function ErrorTrackingSymbolSetsScene(): JSX.Element {
     const { missingSymbolSets, validSymbolSets } = useValues(errorTrackingSymbolSetLogic)
     const { loadSymbolSets } = useActions(errorTrackingSymbolSetLogic)
 
@@ -26,24 +25,21 @@ export function ErrorTrackingConfigurationScene(): JSX.Element {
     }, [loadSymbolSets])
 
     return (
-        <AlphaAccessScenePrompt>
-            <div className="space-y-4">
-                <h2>Symbol sets</h2>
-                <p>
-                    Source maps are required to demangle any minified code in your exception stack traces. PostHog
-                    automatically retrieves source maps where possible. Cases where it was not possible are listed
-                    below. Source maps can be uploaded retroactively but changes will only apply to all future
-                    exceptions ingested.
-                </p>
-                {missingSymbolSets.length > 0 && (
-                    <SymbolSetTable id="missing" dataSource={missingSymbolSets} pageSize={5} missing />
-                )}
-                {(validSymbolSets.length > 0 || missingSymbolSets.length === 0) && (
-                    <SymbolSetTable id="valid" dataSource={validSymbolSets} pageSize={10} />
-                )}
-                <SymbolSetUploadModal />
-            </div>
-        </AlphaAccessScenePrompt>
+        <div className="space-y-4">
+            <h2>Symbol sets</h2>
+            <p>
+                Source maps are required to demangle any minified code in your exception stack traces. PostHog
+                automatically retrieves source maps where possible. Cases where it was not possible are listed below.
+                Source maps can be uploaded retroactively but changes will only apply to all future exceptions ingested.
+            </p>
+            {missingSymbolSets.length > 0 && (
+                <SymbolSetTable id="missing" dataSource={missingSymbolSets} pageSize={5} missing />
+            )}
+            {(validSymbolSets.length > 0 || missingSymbolSets.length === 0) && (
+                <SymbolSetTable id="valid" dataSource={validSymbolSets} pageSize={10} />
+            )}
+            <SymbolSetUploadModal />
+        </div>
     )
 }
 

frontend/src/scenes/error-tracking/errorTrackingSymbolSetLogic.tsx → frontend/src/scenes/error-tracking/symbol-sets/errorTrackingSymbolSetLogic.tsx

@@ -9,7 +9,7 @@ import { urls } from 'scenes/urls'
 
 import { Breadcrumb } from '~/types'
 
-import type { errorTrackingSymbolSetLogicType } from './errorTrackingSymbolSetLogicType'
+import type { errorTrackingSymbolSetLogicType } from '../symbol-sets/errorTrackingSymbolSetLogicType'
 
 export enum ErrorGroupTab {
     Overview = 'overview',
@@ -66,8 +66,8 @@ export const errorTrackingSymbolSetLogic = kea<errorTrackingSymbolSetLogicType>(
                     path: urls.errorTracking(),
                 },
                 {
-                    key: Scene.ErrorTrackingConfiguration,
-                    name: 'Configuration',
+                    key: Scene.ErrorTrackingSymbolSets,
+                    name: 'Symbol Sets',
                 },
             ],
         ],

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

@@ -21,7 +21,7 @@ import { NewButton } from '../NewButton'
 import { pipelineAccessLogic } from '../pipelineAccessLogic'
 import { Destination, PipelineBackend, SiteApp, Transformation } from '../types'
 import { pipelineNodeMenuCommonItems, RenderApp, RenderBatchExportIcon } from '../utils'
-import { DestinationsFilters } from './DestinationsFilters'
+import { DestinationsFilters, DestinationsFiltersProps } from './DestinationsFilters'
 import { destinationsFiltersLogic } from './destinationsFiltersLogic'
 import { pipelineDestinationsLogic } from './destinationsLogic'
 import { DestinationOptionsTable } from './NewDestinations'
@@ -79,15 +79,20 @@ export function Destinations({ types }: DestinationsProps): JSX.Element {
 }
 export type DestinationsTableProps = {
     types: HogFunctionTypeType[]
-    hideFeedback?: boolean
-    hideAddDestinationButton?: boolean
 }
 
 export function DestinationsTable({
+    hideSearch,
     hideFeedback,
     hideAddDestinationButton,
+    hideKind,
+    hideShowPaused,
     types,
-}: DestinationsTableProps): JSX.Element {
+}: DestinationsTableProps &
+    Pick<
+        DestinationsFiltersProps,
+        'hideSearch' | 'hideFeedback' | 'hideAddDestinationButton' | 'hideShowPaused' | 'hideKind'
+    >): JSX.Element {
     const { canConfigurePlugins, canEnableDestination } = useValues(pipelineAccessLogic)
     const { loading, filteredDestinations, destinations, hiddenDestinations } = useValues(
         pipelineDestinationsLogic({ types })
@@ -107,8 +112,11 @@ export function DestinationsTable({
         <div className="space-y-2">
             <DestinationsFilters
                 types={types}
+                hideSearch={hideSearch}
                 hideFeedback={hideFeedback}
                 hideAddDestinationButton={hideAddDestinationButton}
+                hideKind={hideKind}
+                hideShowPaused={hideShowPaused}
             />
 
             <LemonTable

frontend/src/scenes/pipeline/hogfunctions/filters/HogFunctionFiltersInternal.tsx

@@ -11,6 +11,18 @@ const FILTER_OPTIONS = [
         label: 'Team activity',
         value: '$activity_log_entry_created',
     },
+    {
+        label: 'New issue created',
+        value: '$error_tracking_alert_created',
+    },
+    {
+        label: 'Resolved issue reoccurs',
+        value: '$error_tracking_alert_reoccurred',
+    },
+    {
+        label: 'Assigned issue',
+        value: '$error_tracking_alert_assigned',
+    },
 ]
 
 const getSimpleFilterValue = (value?: HogFunctionFiltersType): string | undefined => {