feat(notif): Add Pushbullet notification agent (#950)

src/components/Settings/Notifications/NotificationsPushbullet/index.tsx

@@ -0,0 +1,198 @@
+import React 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';
+import { useToasts } from 'react-toast-notifications';
+import Alert from '../../../Common/Alert';
+import NotificationTypeSelector from '../../../NotificationTypeSelector';
+
+const messages = defineMessages({
+  save: 'Save Changes',
+  saving: 'Saving…',
+  agentEnabled: 'Enable Agent',
+  accessToken: 'Access Token',
+  validationAccessTokenRequired: 'You must provide an access token.',
+  pushbulletSettingsSaved: 'Pushbullet notification settings saved!',
+  pushbulletSettingsFailed: 'Pushbullet notification settings failed to save.',
+  testSent: 'Test notification sent!',
+  test: 'Test',
+  settingUpPushbullet: 'Setting Up Pushbullet Notifications',
+  settingUpPushbulletDescription:
+    'To configure Pushbullet notifications, you need to <CreateAccessTokenLink>create an access token</CreateAccessTokenLink> and enter it below.',
+  notificationTypes: 'Notification Types',
+});
+
+const NotificationsPushbullet: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const { data, error, revalidate } = useSWR(
+    '/api/v1/settings/notifications/pushbullet'
+  );
+
+  const NotificationsPushbulletSchema = Yup.object().shape({
+    accessToken: Yup.string().required(
+      intl.formatMessage(messages.validationAccessTokenRequired)
+    ),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        enabled: data?.enabled,
+        types: data?.types,
+        accessToken: data?.options.accessToken,
+      }}
+      validationSchema={NotificationsPushbulletSchema}
+      onSubmit={async (values) => {
+        try {
+          await axios.post('/api/v1/settings/notifications/pushbullet', {
+            enabled: values.enabled,
+            types: values.types,
+            options: {
+              accessToken: values.accessToken,
+            },
+          });
+          addToast(intl.formatMessage(messages.pushbulletSettingsSaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.pushbulletSettingsFailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({ errors, touched, isSubmitting, values, isValid, setFieldValue }) => {
+        const testSettings = async () => {
+          await axios.post('/api/v1/settings/notifications/pushbullet/test', {
+            enabled: true,
+            types: values.types,
+            options: {
+              accessToken: values.accessToken,
+            },
+          });
+
+          addToast(intl.formatMessage(messages.testSent), {
+            appearance: 'info',
+            autoDismiss: true,
+          });
+        };
+
+        return (
+          <>
+            <Alert
+              title={intl.formatMessage(messages.settingUpPushbullet)}
+              type="info"
+            >
+              {intl.formatMessage(messages.settingUpPushbulletDescription, {
+                CreateAccessTokenLink: function CreateAccessTokenLink(msg) {
+                  return (
+                    <a
+                      href="https://www.pushbullet.com/#settings"
+                      className="text-indigo-100 hover:text-white hover:underline"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {msg}
+                    </a>
+                  );
+                },
+              })}
+            </Alert>
+            <Form className="section">
+              <div className="form-row">
+                <label htmlFor="enabled" className="checkbox-label">
+                  {intl.formatMessage(messages.agentEnabled)}
+                </label>
+                <div className="form-input">
+                  <Field type="checkbox" id="enabled" name="enabled" />
+                </div>
+              </div>
+              <div className="form-row">
+                <label htmlFor="accessToken" className="text-label">
+                  {intl.formatMessage(messages.accessToken)}
+                </label>
+                <div className="form-input">
+                  <div className="flex max-w-lg rounded-md shadow-sm">
+                    <Field
+                      id="accessToken"
+                      name="accessToken"
+                      type="text"
+                      placeholder={intl.formatMessage(messages.accessToken)}
+                    />
+                  </div>
+                  {errors.accessToken && touched.accessToken && (
+                    <div className="error">{errors.accessToken}</div>
+                  )}
+                </div>
+              </div>
+              <div
+                role="group"
+                aria-labelledby="group-label"
+                className="form-group"
+              >
+                <div className="form-row">
+                  <span id="group-label" className="group-label">
+                    {intl.formatMessage(messages.notificationTypes)}
+                  </span>
+                  <div className="form-input">
+                    <div className="max-w-lg">
+                      <NotificationTypeSelector
+                        currentTypes={values.types}
+                        onUpdate={(newTypes) =>
+                          setFieldValue('types', newTypes)
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="actions">
+                <div className="flex justify-end">
+                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                    <Button
+                      buttonType="warning"
+                      disabled={isSubmitting || !isValid}
+                      onClick={(e) => {
+                        e.preventDefault();
+
+                        testSettings();
+                      }}
+                    >
+                      {intl.formatMessage(messages.test)}
+                    </Button>
+                  </span>
+                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                    <Button
+                      buttonType="primary"
+                      type="submit"
+                      disabled={isSubmitting || !isValid}
+                    >
+                      {isSubmitting
+                        ? intl.formatMessage(messages.saving)
+                        : intl.formatMessage(messages.save)}
+                    </Button>
+                  </span>
+                </div>
+              </div>
+            </Form>
+          </>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default NotificationsPushbullet;

src/components/Settings/Notifications/NotificationsPushover/index.tsx

@@ -24,9 +24,9 @@ const messages = defineMessages({
   test: 'Test',
   settinguppushover: 'Setting Up Pushover Notifications',
   settinguppushoverDescription:
-    'To setup Pushover you need to <RegisterApplicationLink>register an application</RegisterApplicationLink> and get the access token.\
-    When setting up the application you can use one of the icons in the <IconLink>public folder</IconLink> on github.\
-    You also need the pushover user token which can be found on the start page when you log in.',
+    'To configure Pushover notifications, you need to <RegisterApplicationLink>register an application</RegisterApplicationLink> and get the access token.\
+    When setting up the application, you can use one of the icons in the <IconLink>public folder</IconLink> on GitHub.\
+    You also need the Pushover user token, which can be found on the start page when you log in.',
   notificationtypes: 'Notification Types',
 });
 

src/components/Settings/Notifications/NotificationsSlack/index.tsx

@@ -22,7 +22,7 @@ const messages = defineMessages({
   test: 'Test',
   settingupslack: 'Setting Up Slack Notifications',
   settingupslackDescription:
-    'To use Slack notifications, you will need to create an <WebhookLink>Incoming Webhook</WebhookLink> integration and use the provided webhook URL below.',
+    'To configure Slack notifications, you will need to create an <WebhookLink>Incoming Webhook</WebhookLink> integration and enter the webhook URL below.',
   notificationtypes: 'Notification Types',
   validationWebhookUrl: 'You must provide a valid URL',
 });

src/components/Settings/Notifications/NotificationsTelegram.tsx

@@ -24,9 +24,9 @@ const messages = defineMessages({
   test: 'Test',
   settinguptelegram: 'Setting Up Telegram Notifications',
   settinguptelegramDescription:
-    'To setup Telegram you need to <CreateBotLink>create a bot</CreateBotLink> and get the bot API key.\
-    Additionally, you need the chat ID for the chat you want the bot to send notifications to.\
-    You can do this by adding <GetIdBotLink>@get_id_bot</GetIdBotLink> to the chat or group chat.',
+    'To configure Telegram notifications, you need to <CreateBotLink>create a bot</CreateBotLink> and get the bot API key.\
+    Additionally, you need the chat ID for the chat where you would like the bot to send notifications.\
+    You can get this by adding <GetIdBotLink>@get_id_bot</GetIdBotLink> to the chat or group chat.',
   notificationtypes: 'Notification Types',
   sendSilently: 'Send Silently',
   sendSilentlyTip: 'Send notifications with no sound',

src/components/Settings/SettingsNotifications.tsx

@@ -2,9 +2,10 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import DiscordLogo from '../../assets/extlogos/discord_white.svg';
+import DiscordLogo from '../../assets/extlogos/discord.svg';
 import SlackLogo from '../../assets/extlogos/slack.svg';
 import TelegramLogo from '../../assets/extlogos/telegram.svg';
+import PushbulletLogo from '../../assets/extlogos/pushbullet.svg';
 import PushoverLogo from '../../assets/extlogos/pushover.svg';
 import Bolt from '../../assets/bolt.svg';
 import { Field, Form, Formik } from 'formik';
@@ -95,6 +96,17 @@ const settingsRoutes: SettingsRoute[] = [
     route: '/settings/notifications/telegram',
     regex: /^\/settings\/notifications\/telegram/,
   },
+  {
+    text: 'Pushbullet',
+    content: (
+      <span className="flex items-center">
+        <PushbulletLogo className="h-4 mr-2" />
+        Pushbullet
+      </span>
+    ),
+    route: '/settings/notifications/pushbullet',
+    regex: /^\/settings\/notifications\/pushbullet/,
+  },
   {
     text: 'Pushover',
     content: (