openreplay/frontend/app/components/Alerts/AlertFormModal/AlertFormModal.tsx

import React, {useEffect, useState} from 'react';
import {SlideModal} from 'UI';
import {useStore} from 'App/mstore'
import {observer} from 'mobx-react-lite'
import AlertForm from '../AlertForm';
import {SLACK, TEAMS, WEBHOOK} from 'App/constants/schedule';
import {confirm} from 'UI';

interface Select {
    label: string;
    value: string | number
}


interface Props {
    showModal?: boolean;
    metricId?: number;
    onClose?: () => void;
}

function AlertFormModal(props: Props) {
    const {alertsStore, settingsStore} = useStore()
    const {metricId = null, showModal = false} = props;
    const [showForm, setShowForm] = useState(false);
    const webhooks = settingsStore.webhooks
    useEffect(() => {
        settingsStore.fetchWebhooks();
    }, []);


    const slackChannels: Select[] = []
    const hooks: Select[] = []
    const msTeamsChannels: Select[] = []

    webhooks.forEach((hook) => {
        const option = {value: hook.webhookId, label: hook.name}
        if (hook.type === SLACK) {
            slackChannels.push(option)
        }
        if (hook.type === WEBHOOK) {
            hooks.push(option)
        }
        if (hook.type === TEAMS) {
            msTeamsChannels.push(option)
        }
    })

    const saveAlert = (instance) => {
        const wasUpdating = instance.exists();
        alertsStore.save(instance).then(() => {
            if (!wasUpdating) {
                toggleForm(null, false);
            }
            if (props.onClose) {
                props.onClose();
            }
        });
    };

    const onDelete = async (instance) => {
        if (
            await confirm({
                header: 'Confirm',
                confirmButton: 'Yes, delete',
                confirmation: `Are you sure you want to permanently delete this alert?`,
            })
        ) {
            alertsStore.remove(instance.alertId).then(() => {
                toggleForm(null, false);
            });
        }
    };

    const toggleForm = (instance, state) => {
        if (instance) {
            alertsStore.init(instance);
        }
        return setShowForm(state ? state : !showForm);
    };

    return (
        <AlertForm
            metricId={metricId}
            edit={alertsStore.edit}
            slackChannels={slackChannels}
            msTeamsChannels={msTeamsChannels}
            webhooks={hooks}
            onSubmit={saveAlert}
            onClose={props.onClose}
            onDelete={onDelete}
        />
    );
}

export default observer(AlertFormModal);