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

src/assets/extlogos/pushbullet.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg preserveAspectRatio="xMidYMid" version="1.1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><path d="m128 0c-70.692 0-128 57.308-128 128s57.308 128 128 128 128-57.308 128-128-57.308-128-128-128zm-51 64.268h3.334c16.733 0 16.732-5.78e-4 16.732 16.732v91.867c-1e-6 16.733 5.77e-4 16.732-16.732 16.732h-3.334c-16.733 0-16.732 5.8e-4 -16.732-16.732v-91.867c0-16.733-5.78e-4 -16.732 16.732-16.732zm44.041 0h37.537c32.178 0 52.627 32.273 52.627 63.025 0 30.752-20.627 62.307-52.627 62.307h-37.537c-5.699 0-8.5078-2.8088-8.5078-8.5078v-108.32c0-5.698 2.8088-8.5059 8.5078-8.5059z" fill="#fff" mask="url(#mask-2)"/></svg>

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: (

src/i18n/locale/en.json

@@ -236,6 +236,18 @@
   "components.ResetPassword.validationpasswordrequired": "You must provide a password",
   "components.Search.search": "Search",
   "components.Search.searchresults": "Search Results",
+  "components.Settings.Notifications.NotificationsPushbullet.accessToken": "Access Token",
+  "components.Settings.Notifications.NotificationsPushbullet.agentEnabled": "Enable Agent",
+  "components.Settings.Notifications.NotificationsPushbullet.notificationTypes": "Notification Types",
+  "components.Settings.Notifications.NotificationsPushbullet.pushbulletSettingsFailed": "Pushbullet notification settings failed to save.",
+  "components.Settings.Notifications.NotificationsPushbullet.pushbulletSettingsSaved": "Pushbullet notification settings saved!",
+  "components.Settings.Notifications.NotificationsPushbullet.save": "Save Changes",
+  "components.Settings.Notifications.NotificationsPushbullet.saving": "Saving…",
+  "components.Settings.Notifications.NotificationsPushbullet.settingUpPushbullet": "Setting Up Pushbullet Notifications",
+  "components.Settings.Notifications.NotificationsPushbullet.settingUpPushbulletDescription": "To configure Pushbullet notifications, you need to <CreateAccessTokenLink>create an access token</CreateAccessTokenLink> and enter it below.",
+  "components.Settings.Notifications.NotificationsPushbullet.test": "Test",
+  "components.Settings.Notifications.NotificationsPushbullet.testSent": "Test notification sent!",
+  "components.Settings.Notifications.NotificationsPushbullet.validationAccessTokenRequired": "You must provide an access token.",
   "components.Settings.Notifications.NotificationsPushover.accessToken": "Access Token",
   "components.Settings.Notifications.NotificationsPushover.agentenabled": "Enable Agent",
   "components.Settings.Notifications.NotificationsPushover.notificationtypes": "Notification Types",
@@ -244,7 +256,7 @@
   "components.Settings.Notifications.NotificationsPushover.save": "Save Changes",
   "components.Settings.Notifications.NotificationsPushover.saving": "Saving…",
   "components.Settings.Notifications.NotificationsPushover.settinguppushover": "Setting Up Pushover Notifications",
-  "components.Settings.Notifications.NotificationsPushover.settinguppushoverDescription": "To set up 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.",
+  "components.Settings.Notifications.NotificationsPushover.settinguppushoverDescription": "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.",
   "components.Settings.Notifications.NotificationsPushover.test": "Test",
   "components.Settings.Notifications.NotificationsPushover.testsent": "Test notification sent!",
   "components.Settings.Notifications.NotificationsPushover.userToken": "User Token",
@@ -255,7 +267,7 @@
   "components.Settings.Notifications.NotificationsSlack.save": "Save Changes",
   "components.Settings.Notifications.NotificationsSlack.saving": "Saving…",
   "components.Settings.Notifications.NotificationsSlack.settingupslack": "Setting Up Slack Notifications",
-  "components.Settings.Notifications.NotificationsSlack.settingupslackDescription": "To use Slack notifications, you will need to create an <WebhookLink>Incoming Webhook</WebhookLink> integration and use the provided webhook URL below.",
+  "components.Settings.Notifications.NotificationsSlack.settingupslackDescription": "To configure Slack notifications, you will need to create an <WebhookLink>Incoming Webhook</WebhookLink> integration and enter the webhook URL below.",
   "components.Settings.Notifications.NotificationsSlack.slacksettingsfailed": "Slack notification settings failed to save.",
   "components.Settings.Notifications.NotificationsSlack.slacksettingssaved": "Slack notification settings saved!",
   "components.Settings.Notifications.NotificationsSlack.test": "Test",
@@ -299,7 +311,7 @@
   "components.Settings.Notifications.sendSilentlyTip": "Send notifications with no sound",
   "components.Settings.Notifications.senderName": "Sender Name",
   "components.Settings.Notifications.settinguptelegram": "Setting Up Telegram Notifications",
-  "components.Settings.Notifications.settinguptelegramDescription": "To set up 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.",
+  "components.Settings.Notifications.settinguptelegramDescription": "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.",
   "components.Settings.Notifications.smtpHost": "SMTP Host",
   "components.Settings.Notifications.smtpPort": "SMTP Port",
   "components.Settings.Notifications.ssldisabletip": "SSL should be disabled on standard TLS connections (port 587)",

src/pages/settings/notifications/pushbullet.tsx

@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import React from 'react';
+import NotificationsPushbullet from '../../../components/Settings/Notifications/NotificationsPushbullet';
+import SettingsLayout from '../../../components/Settings/SettingsLayout';
+import SettingsNotifications from '../../../components/Settings/SettingsNotifications';
+
+const NotificationsPage: NextPage = () => {
+  return (
+    <SettingsLayout>
+      <SettingsNotifications>
+        <NotificationsPushbullet />
+      </SettingsNotifications>
+    </SettingsLayout>
+  );
+};
+
+export default NotificationsPage;