fix(cdp): distinguish destination invocation statuses

frontend/src/scenes/hog-functions/logs/HogFunctionLogs.tsx

@@ -3,14 +3,14 @@ import { router } from 'kea-router'
 import { useMemo } from 'react'
 
 import { IconEllipsis } from '@posthog/icons'
-import { LemonButton, LemonCheckbox, LemonDialog, LemonMenu, LemonTag } from '@posthog/lemon-ui'
+import { LemonButton, LemonCheckbox, LemonDialog, LemonMenu } from '@posthog/lemon-ui'
 
 import { LemonTableColumns } from 'lib/lemon-ui/LemonTable'
-import { capitalizeFirstLetter } from 'lib/utils'
 import { urls } from 'scenes/urls'
 
 import { hogFunctionConfigurationLogic } from '../configuration/hogFunctionConfigurationLogic'
 import { hogFunctionTestLogic } from '../configuration/hogFunctionTestLogic'
+import { HogFunctionInvocationStatusTag } from '../misc/HogFunctionInvocationStatusTag'
 import { hogFunctionLogsLogic } from './hogFunctionLogsLogic'
 import { LogsViewer } from './LogsViewer'
 import { GroupedLogEntry, LogsViewerLogicProps } from './logsViewerLogic'
@@ -149,9 +149,7 @@ function HogFunctionLogsStatus({
                     onChange={(checked) => setSelectedForRetry({ [record.instanceId]: checked })}
                 />
             ) : null}
-            <LemonTag type={status === 'success' ? 'success' : status === 'failure' ? 'danger' : 'warning'}>
-                {capitalizeFirstLetter(status)}
-            </LemonTag>
+            <HogFunctionInvocationStatusTag status={status} />
 
             {!internalEvent && (
                 <LemonMenu

frontend/src/scenes/hog-functions/misc/HogFunctionInvocationStatusTag.test.tsx

@@ -0,0 +1,25 @@
+import '@testing-library/jest-dom'
+
+import { render, screen } from '@testing-library/react'
+
+import { HogFunctionInvocationStatus, HogFunctionInvocationStatusTag } from './HogFunctionInvocationStatusTag'
+
+describe('HogFunctionInvocationStatusTag', () => {
+    it.each([
+        ['success', 'Success'],
+        ['failure', 'Failure'],
+        ['running', 'Running'],
+        ['not tested', 'Not tested'],
+        ['unknown', 'Unknown'],
+    ] satisfies [HogFunctionInvocationStatus, string][])(
+        'renders %s with a visible icon and accessible label',
+        (status, label) => {
+            render(<HogFunctionInvocationStatusTag status={status} />)
+
+            const tag = screen.getByLabelText(`Status: ${label}`)
+
+            expect(tag).toHaveTextContent(label)
+            expect(tag.querySelector('svg')).toBeInTheDocument()
+        }
+    )
+})

frontend/src/scenes/hog-functions/misc/HogFunctionInvocationStatusTag.tsx

@@ -0,0 +1,48 @@
+import { IconCheckCircle, IconClock, IconMinusSmall, IconQuestion, IconX } from '@posthog/icons'
+import { LemonTag, LemonTagType } from '@posthog/lemon-ui'
+
+export type HogFunctionInvocationStatus = 'success' | 'failure' | 'running' | 'not tested' | 'unknown'
+
+type StatusDisplay = {
+    label: string
+    type: LemonTagType
+    icon: JSX.Element
+}
+
+const STATUS_DISPLAY: Record<HogFunctionInvocationStatus, StatusDisplay> = {
+    success: {
+        label: 'Success',
+        type: 'success',
+        icon: <IconCheckCircle aria-hidden="true" />,
+    },
+    failure: {
+        label: 'Failure',
+        type: 'danger',
+        icon: <IconX aria-hidden="true" />,
+    },
+    running: {
+        label: 'Running',
+        type: 'warning',
+        icon: <IconClock aria-hidden="true" />,
+    },
+    'not tested': {
+        label: 'Not tested',
+        type: 'muted',
+        icon: <IconMinusSmall aria-hidden="true" />,
+    },
+    unknown: {
+        label: 'Unknown',
+        type: 'muted',
+        icon: <IconQuestion aria-hidden="true" />,
+    },
+}
+
+export function HogFunctionInvocationStatusTag({ status }: { status: HogFunctionInvocationStatus }): JSX.Element {
+    const { label, type, icon } = STATUS_DISPLAY[status]
+
+    return (
+        <LemonTag type={type} icon={icon} aria-label={`Status: ${label}`}>
+            {label}
+        </LemonTag>
+    )
+}

frontend/src/scenes/hog-functions/testing/HogFunctionTesting.tsx

@@ -13,15 +13,13 @@ import {
     LemonMenu,
     LemonTable,
     LemonTag,
-    LemonTagType,
     Tooltip,
 } from '@posthog/lemon-ui'
 
 import { DateFilter } from 'lib/components/DateFilter/DateFilter'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import { TZLabel } from 'lib/components/TZLabel'
-import { capitalizeFirstLetter } from 'lib/utils'
 import { InsightEmptyState } from 'scenes/insights/EmptyStates'
 import { PersonDisplay } from 'scenes/persons/PersonDisplay'
 import { urls } from 'scenes/urls'
@@ -35,6 +33,7 @@ import {
 import { hogFunctionTestLogic } from '../configuration/hogFunctionTestLogic'
 import { HogFunctionFilters } from '../filters/HogFunctionFilters'
 import { tagTypeForLevel } from '../logs/LogsViewer'
+import { HogFunctionInvocationStatus, HogFunctionInvocationStatusTag } from '../misc/HogFunctionInvocationStatusTag'
 import { CyclotronJobTestInvocationResultWithEventId, hogFunctionTestingLogic } from './hogFunctionTestingLogic'
 
 const buildGlobals = (
@@ -343,32 +342,17 @@ function TestingEventsList(): JSX.Element | null {
                     render: (_, row) => {
                         const eventId = row[0].uuid
 
-                        const getStatus = (): { text: string; type: LemonTagType } => {
+                        const getStatus = (): HogFunctionInvocationStatus => {
                             if (loadingRetries.includes(eventId)) {
-                                return {
-                                    text: 'Running',
-                                    type: 'warning',
-                                }
+                                return 'running'
                             } else if (row[3].length === 0) {
-                                return {
-                                    text: 'Not tested',
-                                    type: 'muted',
-                                }
+                                return 'not tested'
                             } else if (row[3][row[3].length - 1].status === 'error') {
-                                return {
-                                    text: 'Failure',
-                                    type: 'danger',
-                                }
+                                return 'failure'
                             } else if (row[3][row[3].length - 1].status === 'success') {
-                                return {
-                                    text: 'Success',
-                                    type: 'success',
-                                }
-                            }
-                            return {
-                                text: 'Unknown',
-                                type: 'muted',
+                                return 'success'
                             }
+                            return 'unknown'
                         }
 
                         return (
@@ -386,7 +370,7 @@ function TestingEventsList(): JSX.Element | null {
                                     />
                                 ) : null}
 
-                                <LemonTag type={getStatus().type}>{capitalizeFirstLetter(getStatus().text)}</LemonTag>
+                                <HogFunctionInvocationStatusTag status={getStatus()} />
 
                                 <LemonMenu
                                     items={[