feat: notification framework

2025-09-17 17:24:35 +02:00 · 2020-11-22 19:11:14 +09:00
parent fb5c791b0b
commit d8e542e5fe
15 changed files with 577 additions and 3 deletions
--- a/src/components/Settings/Notifications/NotificationsDiscord.tsx
+++ b/src/components/Settings/Notifications/NotificationsDiscord.tsx
@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { Field, Form, Formik } from 'formik';
+import useSWR from 'swr';
+import LoadingSpinner from '../../Common/LoadingSpinner';
+import Button from '../../Common/Button';
+import { defineMessages, useIntl } from 'react-intl';
+import Axios from 'axios';
+import * as Yup from 'yup';
+
+const messages = defineMessages({
+  save: 'Save Changes',
+  saving: 'Saving...',
+});
+
+const NotificationsDiscord: React.FC = () => {
+  const intl = useIntl();
+  const { data, error, revalidate } = useSWR(
+    '/api/v1/settings/notifications/discord'
+  );
+
+  const NotificationsDiscordSchema = Yup.object().shape({
+    webhookUrl: Yup.string().required('You must provide a webhook URL'),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        enabled: data.enabled,
+        types: data.types,
+        webhookUrl: data.options.webhookUrl,
+      }}
+      validationSchema={NotificationsDiscordSchema}
+      onSubmit={async (values) => {
+        try {
+          await Axios.post('/api/v1/settings/notifications/discord', {
+            enabled: values.enabled,
+            types: values.types,
+            options: {
+              webhookUrl: values.webhookUrl,
+            },
+          });
+        } catch (e) {
+          // TODO show error
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({ errors, touched, isSubmitting }) => {
+        return (
+          <Form>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+              <label
+                htmlFor="isDefault"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+              >
+                Agent Enabled
+              </label>
+              <div className="mt-1 sm:mt-0 sm:col-span-2">
+                <Field
+                  type="checkbox"
+                  id="enabled"
+                  name="enabled"
+                  className="form-checkbox rounded-md h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
+                />
+              </div>
+            </div>
+            <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+              <label
+                htmlFor="name"
+                className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+              >
+                Webhook URL
+              </label>
+              <div className="mt-1 sm:mt-0 sm:col-span-2">
+                <div className="max-w-lg flex rounded-md shadow-sm">
+                  <Field
+                    id="webhookUrl"
+                    name="webhookUrl"
+                    type="text"
+                    placeholder="Server Settings -> Integrations -> Webhooks"
+                    className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                  />
+                </div>
+                {errors.webhookUrl && touched.webhookUrl && (
+                  <div className="text-red-500 mt-2">{errors.webhookUrl}</div>
+                )}
+              </div>
+            </div>
+            <div className="mt-8 border-t border-gray-700 pt-5">
+              <div className="flex justify-end">
+                <span className="ml-3 inline-flex rounded-md shadow-sm">
+                  <Button
+                    buttonType="primary"
+                    type="submit"
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting
+                      ? intl.formatMessage(messages.saving)
+                      : intl.formatMessage(messages.save)}
+                  </Button>
+                </span>
+              </div>
+            </div>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default NotificationsDiscord;