feat(notifications): add Notifiarr support (#464)

web/src/domain/constants.ts

@@ -263,6 +263,11 @@ export interface OptionBasic {
     value: string;
 }
 
+export interface OptionBasicTyped<T> {
+  label: string;
+  value: T;
+}
+
 export const PushStatusOptions: OptionBasic[] = [
   {
     label: "Rejected",
@@ -278,11 +283,15 @@ export const PushStatusOptions: OptionBasic[] = [
   }
 ];
 
-export const NotificationTypeOptions: OptionBasic[] = [
+export const NotificationTypeOptions: OptionBasicTyped<NotificationType>[] = [
   {
     label: "Discord",
     value: "DISCORD"
   },
+  {
+    label: "Notifiarr",
+    value: "NOTIFIARR"
+  },
   {
     label: "Telegram",
     value: "TELEGRAM"

web/src/forms/settings/NotificationForms.tsx

@@ -1,14 +1,10 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment } from "react";
-import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
 import type { FieldProps } from "formik";
+import { Field, Form, Formik, FormikErrors, FormikValues } 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";
+import { PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "../../components/inputs";
 import DEBUG from "../../components/debug";
 import { EventOptions, NotificationTypeOptions, SelectOption } from "../../domain/constants";
 import { useMutation } from "react-query";
@@ -80,6 +76,25 @@ function FormFieldsDiscord() {
   );
 }
 
+function FormFieldsNotifiarr() {
+  return (
+    <div className="border-t border-gray-200 dark:border-gray-700 py-4">
+      <div className="px-4 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">
+          Enable the autobrr integration and optionally create a new API Key.
+        </p>
+      </div>
+
+      <PasswordFieldWide
+        name="api_key"
+        label="API Key"
+        help="Notifiarr API Key"
+      />
+    </div>
+  );
+}
+
 function FormFieldsTelegram() {
   return (
     <div className="border-t border-gray-200 dark:border-gray-700 py-4">
@@ -105,8 +120,9 @@ function FormFieldsTelegram() {
 }
 
 const componentMap: componentMapType = {
-  DISCORD: <FormFieldsDiscord/>,
-  TELEGRAM: <FormFieldsTelegram/>
+  DISCORD: <FormFieldsDiscord />,
+  NOTIFIARR: <FormFieldsNotifiarr />,
+  TELEGRAM: <FormFieldsTelegram />
 };
 
 interface NotificationAddFormValues {
@@ -428,6 +444,7 @@ export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateP
     name: notification.name,
     webhook: notification.webhook,
     token: notification.token,
+    api_key: notification.api_key,
     channel: notification.channel,
     events: notification.events || []
   };

web/src/screens/settings/Notifications.tsx

@@ -80,6 +80,7 @@ const TelegramIcon = () => (
 
 const iconComponentMap: componentMapType = {
   DISCORD: <span className="flex items-center px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400"><DiscordIcon /> Discord</span>,
+  NOTIFIARR: <span className="flex items-center px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400"><DiscordIcon /> Notifiarr</span>,
   TELEGRAM: <span className="flex items-center px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400"><TelegramIcon /> Telegram</span>
 };
 

web/src/types/Notification.d.ts

@@ -1,4 +1,4 @@
-type NotificationType = "DISCORD" | "TELEGRAM";
+type NotificationType = "DISCORD" | "NOTIFIARR" | "TELEGRAM";
 type NotificationEvent = "PUSH_APPROVED" | "PUSH_REJECTED" | "PUSH_ERROR" | "IRC_DISCONNECTED" | "IRC_RECONNECTED" | "APP_UPDATE_AVAILABLE";
 
 interface Notification {
@@ -9,5 +9,6 @@ interface Notification {
   events: NotificationEvent[];
   webhook?: string;
   token?: string;
+  api_key?: string;
   channel?: string;
 }