insights/products/alerts/frontend/views/InlineAlertNotifications.tsx

import { useActions, useValues } from 'kea'
import { ReactNode, useEffect, useState } from 'react'

import api from 'lib/api'
import { urls } from 'scenes/urls'

import { InsightsFunctionType, IntegrationType } from '~/types'

import {
    AlertNotificationDestinationEditor,
    AlertNotificationDestinationView,
    AlertNotificationUrlInput,
    PendingAlertNotificationDestinationView,
} from 'products/alerts/frontend/components/AlertNotificationDestinationEditor'
import {
    ALERT_NOTIFICATION_TYPE_DISCORD,
    ALERT_NOTIFICATION_TYPE_MICROSOFT_TEAMS,
    ALERT_NOTIFICATION_TYPE_SLACK,
    ALERT_NOTIFICATION_TYPE_WEBHOOK,
    AlertNotificationType,
    PendingAlertNotification,
    getAlertNotificationAddDisabledReason,
} from 'products/alerts/frontend/logic/alertNotifications'

import { ALERT_NOTIFICATION_TYPE_OPTIONS, alertNotificationLogic } from '../logic/alertNotificationLogic'

// Fetched directly rather than through slackIntegrationLogic's loader: that loader keeps a
// single last-result slot per workspace, so multiple destination rows in the same workspace
// looking up different channels concurrently would cancel each other's requests.
function SlackDestinationChannel({ workspaceId, channelId }: { workspaceId: number; channelId: string }): JSX.Element {
    const [channelName, setChannelName] = useState<string | null>(null)

    useEffect(() => {
        let cancelled = false
        api.integrations.slackChannelsById(workspaceId, channelId).then((res) => {
            if (!cancelled) {
                setChannelName(res.channels[0]?.name ?? null)
            }
        })
        return () => {
            cancelled = true
        }
    }, [workspaceId, channelId])

    return <>{channelName ? `#${channelName}` : 'channel'}</>
}

interface SlackDestinationInputs {
    slack_workspace?: { value: number }
    channel?: { value: string }
}

function getInsightsFunctionDestination(
    insightsFunction: InsightsFunctionType,
    slackIntegrations: IntegrationType[] | undefined
): { type: string; detail: ReactNode } {
    const inputs = insightsFunction.inputs as SlackDestinationInputs | null | undefined
    const channelId = inputs?.channel?.value
    if (channelId) {
        // Destinations from before `slack_workspace` existed can only be safely attributed to a
        // workspace when exactly one is connected — with 2+, there's no way to know which one it
        // was created against, so guessing would risk showing the wrong workspace/channel.
        const workspaceId =
            inputs?.slack_workspace?.value ?? (slackIntegrations?.length === 1 ? slackIntegrations[0].id : undefined)
        if (workspaceId === undefined) {
            return { type: 'Slack', detail: null }
        }
        const workspaceName = slackIntegrations?.find((integration) => integration.id === workspaceId)?.display_name
        return {
            type: 'Slack',
            detail: (
                <>
                    {workspaceName ?? 'Unknown workspace'} ·{' '}
                    <SlackDestinationChannel workspaceId={workspaceId} channelId={channelId} />
                </>
            ),
        }
    }
    if (insightsFunction.template_id === 'template-discord') {
        const webhookUrl = insightsFunction.inputs?.webhookUrl?.value
        return { type: 'Discord', detail: typeof webhookUrl === 'string' ? webhookUrl : null }
    }
    if (insightsFunction.template_id === 'template-microsoft-teams') {
        const webhookUrl = insightsFunction.inputs?.webhookUrl?.value
        return { type: 'Microsoft Teams', detail: typeof webhookUrl === 'string' ? webhookUrl : null }
    }
    const urlValue = insightsFunction.inputs?.url?.value
    if (urlValue && typeof urlValue === 'string') {
        return { type: 'Webhook', detail: urlValue }
    }
    return { type: insightsFunction.name, detail: null }
}

function getPendingNotificationDestination(
    notification: PendingAlertNotification,
    slackIntegrations: IntegrationType[] | undefined
): Pick<PendingAlertNotificationDestinationView, 'title' | 'detail'> {
    switch (notification.type) {
        case ALERT_NOTIFICATION_TYPE_SLACK: {
            const workspaceName = slackIntegrations?.find(
                (integration) => integration.id === notification.slackWorkspaceId
            )?.display_name
            return {
                title: 'Slack',
                detail: `${workspaceName ?? 'Unknown workspace'} · #${notification.slackChannelName ?? 'channel'}`,
            }
        }
        case ALERT_NOTIFICATION_TYPE_DISCORD:
            return { title: 'Discord', detail: notification.webhookUrl }
        case ALERT_NOTIFICATION_TYPE_MICROSOFT_TEAMS:
            return { title: 'Microsoft Teams', detail: notification.webhookUrl }
        case ALERT_NOTIFICATION_TYPE_WEBHOOK:
            return { title: 'Webhook', detail: notification.webhookUrl }
        default: {
            const exhaustiveCheck: never = notification
            return exhaustiveCheck
        }
    }
}

function getUrlInput(type: AlertNotificationType): AlertNotificationUrlInput | undefined {
    switch (type) {
        case ALERT_NOTIFICATION_TYPE_DISCORD:
            return { placeholder: 'https://discord.com/api/webhooks/...' }
        case ALERT_NOTIFICATION_TYPE_MICROSOFT_TEAMS:
            return { placeholder: 'https://<region>.logic.azure.com:443/workflows/...' }
        case ALERT_NOTIFICATION_TYPE_WEBHOOK:
            return { placeholder: 'https://example.com/webhook' }
        case ALERT_NOTIFICATION_TYPE_SLACK:
            return undefined
        default: {
            const exhaustiveCheck: never = type
            return exhaustiveCheck
        }
    }
}

interface InlineAlertNotificationsProps {
    alertId?: string
}

export function InlineAlertNotifications({ alertId }: InlineAlertNotificationsProps): JSX.Element {
    const logic = alertNotificationLogic({ alertId })
    const {
        existingInsightsFunctions,
        existingInsightsFunctionsLoading,
        pendingNotifications,
        integrationsLoading,
        integrationsFailed,
        slackIntegrations,
        selectedSlackIntegration,
        selectedType,
        slackChannelValue,
        webhookUrl,
    } = useValues(logic)
    const {
        addPendingNotification,
        removePendingNotification,
        deleteExistingInsightsFunction,
        setSelectedType,
        setSelectedSlackIntegrationId,
        setSlackChannelValue,
        setWebhookUrl,
        loadIntegrations,
    } = useActions(logic)

    const buildPendingNotification = (): PendingAlertNotification | null => {
        if (selectedType === ALERT_NOTIFICATION_TYPE_SLACK) {
            if (!slackChannelValue || !selectedSlackIntegration) {
                return null
            }
            const [channelId, channelLabel] = slackChannelValue.split('|')
            return {
                type: ALERT_NOTIFICATION_TYPE_SLACK,
                slackWorkspaceId: selectedSlackIntegration.id,
                slackChannelId: channelId,
                slackChannelName: channelLabel?.replace('#', '') ?? channelId,
            }
        }
        if (!webhookUrl) {
            return null
        }
        if (selectedType === ALERT_NOTIFICATION_TYPE_DISCORD) {
            return { type: ALERT_NOTIFICATION_TYPE_DISCORD, webhookUrl }
        }
        if (selectedType === ALERT_NOTIFICATION_TYPE_MICROSOFT_TEAMS) {
            return { type: ALERT_NOTIFICATION_TYPE_MICROSOFT_TEAMS, webhookUrl }
        }
        return { type: ALERT_NOTIFICATION_TYPE_WEBHOOK, webhookUrl }
    }

    const handleAdd = (): void => {
        const notification = buildPendingNotification()
        if (!notification) {
            return
        }
        addPendingNotification(notification)
        if (notification.type === ALERT_NOTIFICATION_TYPE_SLACK) {
            setSlackChannelValue(null)
            return
        }
        setWebhookUrl('')
    }

    const existingDestinations: AlertNotificationDestinationView[] = existingInsightsFunctions.map((insightsFunction) => {
        const destination = getInsightsFunctionDestination(insightsFunction, slackIntegrations)
        return {
            key: insightsFunction.id,
            title: destination.type,
            detail: destination.detail,
            tags: [
                { label: insightsFunction.enabled ? 'Active' : 'Paused', type: insightsFunction.enabled ? 'success' : 'default' },
            ],
            viewAction: {
                kind: 'icon',
                url: urls.insightsFunction(insightsFunction.id),
                tooltip: 'Open destination',
                targetBlank: true,
            },
            onDelete: () => deleteExistingInsightsFunction(insightsFunction),
        }
    })

    const pendingDestinations: PendingAlertNotificationDestinationView[] = pendingNotifications.map(
        (notification, index) => ({
            key: `${notification.type}-${index}`,
            ...getPendingNotificationDestination(notification, slackIntegrations),
            onRemove: () => removePendingNotification(index),
        })
    )

    const urlInput = getUrlInput(selectedType)

    return (
        <div>
            <AlertNotificationDestinationEditor
                destinations={{
                    showExisting: Boolean(alertId),
                    existingLoading: existingInsightsFunctionsLoading,
                    existing: existingDestinations,
                    pending: pendingDestinations,
                }}
                notificationType={{
                    options: ALERT_NOTIFICATION_TYPE_OPTIONS,
                    value: selectedType,
                    onChange: setSelectedType,
                }}
                slack={{
                    notificationType: ALERT_NOTIFICATION_TYPE_SLACK,
                    integrationsLoading,
                    integrationsFailed,
                    onRetryIntegrations: loadIntegrations,
                    integrations: slackIntegrations,
                    integration: selectedSlackIntegration,
                    onIntegrationChange: setSelectedSlackIntegrationId,
                    channelValue: slackChannelValue,
                    onChannelValueChange: setSlackChannelValue,
                }}
                url={urlInput ? { input: urlInput, value: webhookUrl, onChange: setWebhookUrl } : undefined}
                add={{
                    onClick: handleAdd,
                    disabledReason: getAlertNotificationAddDisabledReason(
                        selectedType,
                        Boolean(selectedSlackIntegration),
                        slackChannelValue,
                        webhookUrl
                    ),
                }}
            />
        </div>
    )
}