feat(notifications): add telegram support (#299)

* feat(notifications): add telegram support

* feat(notifications): change list view

* refactor(notifications): overall setup

* feat(notifications): forms add telegram
This commit is contained in:
Ludvig Lundgren 2022-06-13 17:01:36 +02:00 committed by GitHub
parent 2ab7133dd0
commit 38addb99e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 630 additions and 457 deletions

View file

@ -5,6 +5,7 @@ import type { FieldProps } from "formik";
import { XIcon } from "@heroicons/react/solid";
import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
import {
PasswordFieldWide,
SwitchGroupWide,
TextFieldWide
} from "../../components/inputs";
@ -59,18 +60,17 @@ const Option = (props: OptionProps) => {
);
};
function FormFieldsDiscord() {
return (
<div className="border-t border-gray-200 dark:border-gray-700 py-5">
{/*<div className="px-6 space-y-1">*/}
{/* <Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Credentials</Dialog.Title>*/}
{/* <p className="text-sm text-gray-500 dark:text-gray-400">*/}
{/* Api keys etc*/}
{/* </p>*/}
{/*</div>*/}
<div className="px-6 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Settings</Dialog.Title>
<p className="text-sm text-gray-500 dark:text-gray-400">
Create a <a href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks" rel="noopener noreferrer" target="_blank" className="font-medium text-blue-500">webhook integration</a> in your server.
</p>
</div>
<TextFieldWide
<PasswordFieldWide
name="webhook"
label="Webhook URL"
help="Discord channel webhook url"
@ -80,8 +80,33 @@ function FormFieldsDiscord() {
);
}
function FormFieldsTelegram() {
return (
<div className="border-t border-gray-200 dark:border-gray-700 py-5">
<div className="px-6 space-y-1">
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Settings</Dialog.Title>
<p className="text-sm text-gray-500 dark:text-gray-400">
Read how to <a href="https://core.telegram.org/bots#3-how-do-i-create-a-bot" rel="noopener noreferrer" target="_blank" className="font-medium text-blue-500">create a bot</a>.
</p>
</div>
<PasswordFieldWide
name="token"
label="Bot token"
help="Bot token"
/>
<PasswordFieldWide
name="channel"
label="Chat ID"
help="Chat ID"
/>
</div>
);
}
const componentMap: componentMapType = {
DISCORD: <FormFieldsDiscord/>
DISCORD: <FormFieldsDiscord/>,
TELEGRAM: <FormFieldsTelegram/>
};
interface NotificationAddFormValues {
@ -113,6 +138,19 @@ export function NotificationAddForm({ isOpen, toggle }: AddProps) {
mutation.mutate(formData as Notification);
};
const testMutation = useMutation(
(n: Notification) => APIClient.notifications.test(n),
{
onError: (err) => {
console.error(err);
}
}
);
const testNotification = (data: unknown) => {
testMutation.mutate(data as Notification);
};
const validate = (values: NotificationAddFormValues) => {
const errors = {} as FormikErrors<FormikValues>;
if (!values.name)
@ -253,6 +291,13 @@ export function NotificationAddForm({ isOpen, toggle }: AddProps) {
<div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
<div className="space-x-3 flex justify-end">
<button
type="button"
className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
onClick={() => testNotification(values)}
>
Test
</button>
<button
type="button"
className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
@ -348,12 +393,27 @@ export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateP
deleteMutation.mutate(notification.id);
};
const testMutation = useMutation(
(n: Notification) => APIClient.notifications.test(n),
{
onError: (err) => {
console.error(err);
}
}
);
const testNotification = (data: unknown) => {
testMutation.mutate(data as Notification);
};
const initialValues = {
id: notification.id,
enabled: notification.enabled,
type: notification.type,
name: notification.name,
webhook: notification.webhook,
token: notification.token,
channel: notification.channel,
events: notification.events || []
};
@ -366,6 +426,7 @@ export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateP
onSubmit={onSubmit}
deleteAction={deleteAction}
initialValues={initialValues}
testFn={testNotification}
>
{(values) => (
<div>