89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import cn from 'classnames';
|
|
import withPageTitle from 'HOCs/withPageTitle';
|
|
import { Button, Loader, NoContent, Icon } from 'UI';
|
|
import { init, fetchList, remove } from 'Duck/webhook';
|
|
import WebhookForm from './WebhookForm';
|
|
import ListItem from './ListItem';
|
|
import styles from './webhooks.module.css';
|
|
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
|
|
import { confirm } from 'UI';
|
|
import { toast } from 'react-toastify';
|
|
import { useModal } from 'App/components/Modal';
|
|
|
|
function Webhooks(props) {
|
|
const { webhooks, loading } = props;
|
|
const { showModal, hideModal } = useModal();
|
|
|
|
const noSlackWebhooks = webhooks.filter((hook) => hook.type !== 'slack');
|
|
useEffect(() => {
|
|
props.fetchList();
|
|
}, []);
|
|
|
|
const init = (v) => {
|
|
props.init(v);
|
|
showModal(<WebhookForm onClose={hideModal} onDelete={removeWebhook} />);
|
|
};
|
|
|
|
const removeWebhook = async (id) => {
|
|
if (
|
|
await confirm({
|
|
header: 'Confirm',
|
|
confirmButton: 'Yes, delete',
|
|
confirmation: `Are you sure you want to remove this webhook?`,
|
|
})
|
|
) {
|
|
props.remove(id).then(() => {
|
|
toast.success('Webhook removed successfully');
|
|
});
|
|
hideModal();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className={styles.tabHeader}>
|
|
<h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Webhooks'}</h3>
|
|
{/* <Button rounded={true} icon="plus" variant="outline" onClick={() => init()} /> */}
|
|
<Button variant="primary" onClick={() => init()}>Add</Button>
|
|
</div>
|
|
|
|
<div className="text-base text-disabled-text flex items-center mt-3">
|
|
<Icon name="info-circle-fill" className="mr-2" size={16} />
|
|
Leverage webhooks to push OpenReplay data to other systems.
|
|
</div>
|
|
|
|
<Loader loading={loading}>
|
|
<NoContent
|
|
title={
|
|
<div className="flex flex-col items-center justify-center">
|
|
<AnimatedSVG name={ICONS.NO_WEBHOOKS} size={80} />
|
|
<div className="text-center text-gray-600 my-4">None added yet</div>
|
|
</div>
|
|
}
|
|
size="small"
|
|
show={noSlackWebhooks.size === 0}
|
|
>
|
|
<div className="cursor-pointer">
|
|
{noSlackWebhooks.map((webhook) => (
|
|
<ListItem key={webhook.key} webhook={webhook} onEdit={() => init(webhook)} />
|
|
))}
|
|
</div>
|
|
</NoContent>
|
|
</Loader>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default connect(
|
|
(state) => ({
|
|
webhooks: state.getIn(['webhooks', 'list']),
|
|
loading: state.getIn(['webhooks', 'loading']),
|
|
}),
|
|
{
|
|
init,
|
|
fetchList,
|
|
remove,
|
|
}
|
|
)(withPageTitle('Webhooks - OpenReplay Preferences')(Webhooks));
|