feat(notifications): add slack notification agent

re #365
2025-09-17 17:24:35 +02:00 · 2020-12-25 19:02:04 +09:00
parent 5d06a34731
commit 1163e81adc
12 changed files with 657 additions and 24 deletions
--- a/overseerr-api.yml
+++ b/overseerr-api.yml
@@ -841,6 +841,20 @@ components:
          properties:
            webhookUrl:
              type: string
+    SlackSettings:
+      type: object
+      properties:
+        enabled:
+          type: boolean
+          example: false
+        types:
+          type: number
+          example: 2
+        options:
+          type: object
+          properties:
+            webhookUrl:
+              type: string
    NotificationEmailSettings:
      type: object
      properties:
@@ -1621,6 +1635,52 @@ paths:
      responses:
        '204':
          description: Test notification attempted
+  /settings/notifications/slack:
+    get:
+      summary: Return current slack notification settings
+      description: Returns current slack notification settings in JSON format
+      tags:
+        - settings
+      responses:
+        '200':
+          description: Returned slack settings
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SlackSettings'
+    post:
+      summary: Update slack notification settings
+      description: Update current slack notification settings with provided values
+      tags:
+        - settings
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SlackSettings'
+      responses:
+        '200':
+          description: 'Values were sucessfully updated'
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SlackSettings'
+  /settings/notifications/slack/test:
+    post:
+      summary: Test the provided slack settings
+      description: Sends a test notification to the slack agent
+      tags:
+        - settings
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SlackSettings'
+      responses:
+        '204':
+          description: Test notification attempted
  /settings/about:
    get:
      summary: Return current about stats
--- a/server/index.ts
+++ b/server/index.ts
@@ -18,6 +18,7 @@ import notificationManager from './lib/notifications';
 import DiscordAgent from './lib/notifications/agents/discord';
 import EmailAgent from './lib/notifications/agents/email';
 import { getAppVersion } from './utils/appVersion';
+import SlackAgent from './lib/notifications/agents/slack';

 const API_SPEC_PATH = path.join(__dirname, '../overseerr-api.yml');

@@ -42,7 +43,11 @@ app
    const settings = getSettings().load();

    // Register Notification Agents
-    notificationManager.registerAgents([new DiscordAgent(), new EmailAgent()]);
+    notificationManager.registerAgents([
+      new DiscordAgent(),
+      new EmailAgent(),
+      new SlackAgent(),
+    ]);

    // Start Jobs
    startJobs();
--- a/server/lib/notifications/agents/slack.ts
+++ b/server/lib/notifications/agents/slack.ts
@@ -0,0 +1,225 @@
+import axios from 'axios';
+import { Notification } from '..';
+import logger from '../../../logger';
+import { getSettings, NotificationAgentSlack } from '../../settings';
+import { BaseAgent, NotificationAgent, NotificationPayload } from './agent';
+
+interface EmbedField {
+  type: 'plain_text' | 'mrkdwn';
+  text: string;
+}
+
+interface TextItem {
+  type: 'plain_text' | 'mrkdwn';
+  text: string;
+  emoji?: boolean;
+}
+
+interface Element {
+  type: 'button';
+  text?: TextItem;
+  value: string;
+  url: string;
+  action_id: 'button-action';
+}
+
+interface EmbedBlock {
+  type: 'header' | 'actions' | 'section' | 'context';
+  block_id?: 'section789';
+  text?: TextItem;
+  fields?: EmbedField[];
+  accessory?: {
+    type: 'image';
+    image_url: string;
+    alt_text: string;
+  };
+  elements?: Element[];
+}
+
+interface SlackBlockEmbed {
+  blocks: EmbedBlock[];
+}
+
+class SlackAgent
+  extends BaseAgent<NotificationAgentSlack>
+  implements NotificationAgent {
+  protected getSettings(): NotificationAgentSlack {
+    if (this.settings) {
+      return this.settings;
+    }
+
+    const settings = getSettings();
+
+    return settings.notifications.agents.slack;
+  }
+
+  public buildEmbed(
+    type: Notification,
+    payload: NotificationPayload
+  ): SlackBlockEmbed {
+    const settings = getSettings();
+    let header = 'Overseerr';
+    let actionUrl: string | undefined;
+
+    const fields: EmbedField[] = [];
+
+    switch (type) {
+      case Notification.MEDIA_PENDING:
+        header = 'New Request';
+        fields.push(
+          {
+            type: 'mrkdwn',
+            text: `*Requested By*\n${payload.notifyUser.username ?? ''}`,
+          },
+          {
+            type: 'mrkdwn',
+            text: '*Status*\nPending Approval',
+          }
+        );
+        if (settings.main.applicationUrl) {
+          actionUrl = `${settings.main.applicationUrl}/${payload.media?.mediaType}/${payload.media?.tmdbId}`;
+        }
+        break;
+      case Notification.MEDIA_APPROVED:
+        header = 'Request Approved';
+        fields.push(
+          {
+            type: 'mrkdwn',
+            text: `*Requested By*\n${payload.notifyUser.username ?? ''}`,
+          },
+          {
+            type: 'mrkdwn',
+            text: '*Status*\nProcessing Request',
+          }
+        );
+        if (settings.main.applicationUrl) {
+          actionUrl = `${settings.main.applicationUrl}/${payload.media?.mediaType}/${payload.media?.tmdbId}`;
+        }
+        break;
+      case Notification.MEDIA_AVAILABLE:
+        header = 'Now available!';
+        fields.push(
+          {
+            type: 'mrkdwn',
+            text: `*Requested By*\n${payload.notifyUser.username ?? ''}`,
+          },
+          {
+            type: 'mrkdwn',
+            text: '*Status*\nAvailable',
+          }
+        );
+
+        if (settings.main.applicationUrl) {
+          actionUrl = `${settings.main.applicationUrl}/${payload.media?.mediaType}/${payload.media?.tmdbId}`;
+        }
+        break;
+    }
+
+    const blocks: EmbedBlock[] = [
+      {
+        type: 'header',
+        text: {
+          type: 'plain_text',
+          text: header,
+        },
+      },
+      {
+        type: 'section',
+        text: {
+          type: 'mrkdwn',
+          text: `*${payload.subject}*`,
+        },
+      },
+    ];
+
+    if (payload.message) {
+      blocks.push({
+        type: 'section',
+        text: {
+          type: 'mrkdwn',
+          text: payload.message,
+        },
+        accessory: payload.image
+          ? {
+              type: 'image',
+              image_url: payload.image,
+              alt_text: payload.subject,
+            }
+          : undefined,
+      });
+    }
+
+    if (fields.length > 0) {
+      blocks.push({
+        type: 'section',
+        fields: [
+          ...fields,
+          ...(payload.extra ?? []).map(
+            (extra): EmbedField => ({
+              type: 'mrkdwn',
+              text: `*${extra.name}*\n${extra.value}`,
+            })
+          ),
+        ],
+      });
+    }
+
+    if (actionUrl) {
+      blocks.push({
+        type: 'actions',
+        elements: [
+          {
+            action_id: 'button-action',
+            type: 'button',
+            url: actionUrl,
+            value: 'open_overseerr',
+            text: {
+              type: 'plain_text',
+              text: 'Open Overseerr',
+            },
+          },
+        ],
+      });
+    }
+
+    return {
+      blocks,
+    };
+  }
+
+  // TODO: Add checking for type here once we add notification type filters for agents
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public shouldSend(_type: Notification): boolean {
+    if (this.getSettings().enabled && this.getSettings().options.webhookUrl) {
+      return true;
+    }
+
+    return false;
+  }
+
+  public async send(
+    type: Notification,
+    payload: NotificationPayload
+  ): Promise<boolean> {
+    logger.debug('Sending slack notification', { label: 'Notifications' });
+    try {
+      const webhookUrl = this.getSettings().options.webhookUrl;
+
+      if (!webhookUrl) {
+        return false;
+      }
+
+      await axios.post(webhookUrl, this.buildEmbed(type, payload));
+
+      return true;
+    } catch (e) {
+      logger.error('Error sending Slack notification', {
+        label: 'Notifications',
+        message: e.message,
+      });
+      return false;
+    }
+  }
+}
+
+export default SlackAgent;
--- a/server/lib/settings.ts
+++ b/server/lib/settings.ts
@@ -66,6 +66,12 @@ export interface NotificationAgentDiscord extends NotificationAgentConfig {
  };
 }

+export interface NotificationAgentSlack extends NotificationAgentConfig {
+  options: {
+    webhookUrl: string;
+  };
+}
+
 export interface NotificationAgentEmail extends NotificationAgentConfig {
  options: {
    emailFrom: string;
@@ -81,6 +87,7 @@ export interface NotificationAgentEmail extends NotificationAgentConfig {
 interface NotificationAgents {
  email: NotificationAgentEmail;
  discord: NotificationAgentDiscord;
+  slack: NotificationAgentSlack;
 }

 interface NotificationSettings {
@@ -142,6 +149,13 @@ class Settings {
              webhookUrl: '',
            },
          },
+          slack: {
+            enabled: false,
+            types: 0,
+            options: {
+              webhookUrl: '',
+            },
+          },
        },
      },
    };
--- a/server/routes/settings.ts
+++ b/server/routes/settings.ts
@@ -24,6 +24,7 @@ import { SettingsAboutResponse } from '../interfaces/api/settingsInterfaces';
 import { Notification } from '../lib/notifications';
 import DiscordAgent from '../lib/notifications/agents/discord';
 import EmailAgent from '../lib/notifications/agents/email';
+import SlackAgent from '../lib/notifications/agents/slack';

 const settingsRoutes = Router();

@@ -468,6 +469,40 @@ settingsRoutes.post('/notifications/discord/test', (req, res, next) => {
  return res.status(204).send();
 });

+settingsRoutes.get('/notifications/slack', (_req, res) => {
+  const settings = getSettings();
+
+  res.status(200).json(settings.notifications.agents.slack);
+});
+
+settingsRoutes.post('/notifications/slack', (req, res) => {
+  const settings = getSettings();
+
+  settings.notifications.agents.slack = req.body;
+  settings.save();
+
+  res.status(200).json(settings.notifications.agents.slack);
+});
+
+settingsRoutes.post('/notifications/slack/test', (req, res, next) => {
+  if (!req.user) {
+    return next({
+      status: 500,
+      message: 'User information missing from request',
+    });
+  }
+
+  const slackAgent = new SlackAgent(req.body);
+  slackAgent.send(Notification.TEST_NOTIFICATION, {
+    notifyUser: req.user,
+    subject: 'Test Notification',
+    message:
+      'This is a test notification! Check check, 1, 2, 3. Are we coming in clear?',
+  });
+
+  return res.status(204).send();
+});
+
 settingsRoutes.get('/notifications/email', (_req, res) => {
  const settings = getSettings();

--- a/src/assets/extlogos/discord_white.svg
+++ b/src/assets/extlogos/discord_white.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z"></path></svg>
--- a/src/assets/extlogos/slack.svg
+++ b/src/assets/extlogos/slack.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="slack" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"></path></svg>
--- a/src/components/Common/Alert/index.tsx
+++ b/src/components/Common/Alert/index.tsx
@@ -2,31 +2,66 @@ import React from 'react';

 interface AlertProps {
  title: string;
-  type?: 'warning';
+  type?: 'warning' | 'info';
 }

-const Alert: React.FC<AlertProps> = ({ title, children }) => {
-  return (
-    <div className="rounded-md bg-yellow-600 p-4 mb-8">
-      <div className="flex">
-        <div className="flex-shrink-0">
+const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
+  let design = {
+    color: 'yellow',
+    svg: (
+      <svg
+        className="w-5 h-5"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fillRule="evenodd"
+          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+          clipRule="evenodd"
+        />
+      </svg>
+    ),
+  };
+
+  switch (type) {
+    case 'info':
+      design = {
+        color: 'indigo',
+        svg: (
          <svg
-            className="h-5 w-5 text-yellow-200"
+            className="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
          >
            <path
-              fillRule="evenodd"
-              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-              clipRule="evenodd"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
+        ),
+      };
+      break;
+  }
+
+  return (
+    <div className={`rounded-md p-4 mb-8 bg-${design.color}-600`}>
+      <div className="flex">
+        <div className={`flex-shrink-0 text-${design.color}-200`}>
+          {design.svg}
        </div>
        <div className="ml-3">
-          <h3 className="text-sm font-medium text-yellow-200">{title}</h3>
-          <div className="mt-2 text-sm text-yellow-300">{children}</div>
+          <h3 className={`text-sm font-medium text-${design.color}-200`}>
+            {title}
+          </h3>
+          <div className={`mt-2 text-sm text-${design.color}-300`}>
+            {children}
+          </div>
        </div>
      </div>
    </div>
--- a/src/components/Settings/Notifications/NotificationsSlack/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
@@ -0,0 +1,189 @@
+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';
+
+const messages = defineMessages({
+  save: 'Save Changes',
+  saving: 'Saving...',
+  agentenabled: 'Agent Enabled',
+  webhookUrl: 'Webhook URL',
+  validationWebhookUrlRequired: 'You must provide a webhook URL',
+  webhookUrlPlaceholder: 'Webhook URL',
+  slacksettingssaved: 'Slack notification settings saved!',
+  slacksettingsfailed: 'Slack notification settings failed to save.',
+  testsent: 'Test notification sent!',
+  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.',
+});
+
+const NotificationsSlack: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const { data, error, revalidate } = useSWR(
+    '/api/v1/settings/notifications/slack'
+  );
+
+  const NotificationsSlackSchema = Yup.object().shape({
+    webhookUrl: Yup.string().required(
+      intl.formatMessage(messages.validationWebhookUrlRequired)
+    ),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <>
+      <p className="mb-">
+        <Alert title={intl.formatMessage(messages.settingupslack)} type="info">
+          {intl.formatMessage(messages.settingupslackDescription, {
+            WebhookLink: function WebhookLink(msg) {
+              return (
+                <a
+                  href="https://my.slack.com/services/new/incoming-webhook/"
+                  className="text-indigo-100 hover:text-white hover:underline"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {msg}
+                </a>
+              );
+            },
+          })}
+        </Alert>
+      </p>
+      <Formik
+        initialValues={{
+          enabled: data.enabled,
+          types: data.types,
+          webhookUrl: data.options.webhookUrl,
+        }}
+        validationSchema={NotificationsSlackSchema}
+        onSubmit={async (values) => {
+          try {
+            await axios.post('/api/v1/settings/notifications/slack', {
+              enabled: values.enabled,
+              types: values.types,
+              options: {
+                webhookUrl: values.webhookUrl,
+              },
+            });
+            addToast(intl.formatMessage(messages.slacksettingssaved), {
+              appearance: 'success',
+              autoDismiss: true,
+            });
+          } catch (e) {
+            addToast(intl.formatMessage(messages.slacksettingsfailed), {
+              appearance: 'error',
+              autoDismiss: true,
+            });
+          } finally {
+            revalidate();
+          }
+        }}
+      >
+        {({ errors, touched, isSubmitting, values, isValid }) => {
+          const testSettings = async () => {
+            await axios.post('/api/v1/settings/notifications/slack/test', {
+              enabled: true,
+              types: values.types,
+              options: {
+                webhookUrl: values.webhookUrl,
+              },
+            });
+
+            addToast(intl.formatMessage(messages.testsent), {
+              appearance: 'info',
+              autoDismiss: true,
+            });
+          };
+
+          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"
+                >
+                  {intl.formatMessage(messages.agentenabled)}
+                </label>
+                <div className="mt-1 sm:mt-0 sm:col-span-2">
+                  <Field
+                    type="checkbox"
+                    id="enabled"
+                    name="enabled"
+                    className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
+                  />
+                </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"
+                >
+                  {intl.formatMessage(messages.webhookUrl)}
+                </label>
+                <div className="mt-1 sm:mt-0 sm:col-span-2">
+                  <div className="flex max-w-lg rounded-md shadow-sm">
+                    <Field
+                      id="webhookUrl"
+                      name="webhookUrl"
+                      type="text"
+                      placeholder={intl.formatMessage(
+                        messages.webhookUrlPlaceholder
+                      )}
+                      className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                    />
+                  </div>
+                  {errors.webhookUrl && touched.webhookUrl && (
+                    <div className="mt-2 text-red-500">{errors.webhookUrl}</div>
+                  )}
+                </div>
+              </div>
+              <div className="pt-5 mt-8 border-t border-gray-700">
+                <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 NotificationsSlack;
--- a/src/components/Settings/SettingsNotifications.tsx
+++ b/src/components/Settings/SettingsNotifications.tsx
@@ -2,6 +2,8 @@ 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 SlackLogo from '../../assets/extlogos/slack.svg';

 const messages = defineMessages({
  notificationsettings: 'Notification Settings',
@@ -10,31 +12,64 @@ const messages = defineMessages({
 });

 interface SettingsRoute {
-  text: string;
+  text: React.ReactNode;
  route: string;
  regex: RegExp;
 }

 const settingsRoutes: SettingsRoute[] = [
  {
-    text: 'Email',
+    text: (
+      <span className="flex items-center">
+        <svg
+          className="h-4 mr-2"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
+          />
+        </svg>
+        Email
+      </span>
+    ),
    route: '/settings/notifications/email',
    regex: /^\/settings\/notifications\/email/,
  },
  {
-    text: 'Discord',
+    text: (
+      <span className="flex items-center">
+        <DiscordLogo className="h-4 mr-2" />
+        Discord
+      </span>
+    ),
    route: '/settings/notifications/discord',
    regex: /^\/settings\/notifications\/discord/,
  },
+  {
+    text: (
+      <span className="flex items-center">
+        <SlackLogo className="h-4 mr-2" />
+        Slack
+      </span>
+    ),
+    route: '/settings/notifications/slack',
+    regex: /^\/settings\/notifications\/slack/,
+  },
 ];

 const SettingsNotifications: React.FC = ({ children }) => {
  const router = useRouter();
  const intl = useIntl();

-  const activeLinkColor = 'bg-gray-700';
+  const activeLinkColor = 'bg-indigo-700';

-  const inactiveLinkColor = '';
+  const inactiveLinkColor = 'bg-gray-800';

  const SettingsLink: React.FC<{
    route: string;
@@ -62,10 +97,10 @@ const SettingsNotifications: React.FC = ({ children }) => {
  return (
    <>
      <div className="mb-6">
-        <h3 className="text-lg leading-6 font-medium text-gray-200">
+        <h3 className="text-lg font-medium leading-6 text-gray-200">
          {intl.formatMessage(messages.notificationsettings)}
        </h3>
-        <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
+        <p className="max-w-2xl mt-1 text-sm leading-5 text-gray-500">
          {intl.formatMessage(messages.notificationsettingsDescription)}
        </p>
      </div>
@@ -87,7 +122,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
              )?.route
            }
            aria-label="Selected tab"
-            className="bg-gray-800 text-white mt-1 rounded-md form-select block w-full pl-3 pr-10 py-2 text-base leading-6 border-gray-700 focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5 transition ease-in-out duration-150"
+            className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 text-white transition duration-150 ease-in-out bg-gray-800 border-gray-700 rounded-md form-select focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
          >
            {settingsRoutes.map((route, index) => (
              <SettingsLink
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -104,6 +104,18 @@
  "components.RequestModal.selectseason": "Select season(s)",
  "components.RequestModal.status": "Status",
  "components.Search.searchresults": "Search Results",
+  "components.Settings.Notifications.NotificationsSlack.agentenabled": "Agent Enabled",
+  "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.slacksettingsfailed": "Slack notification settings failed to save.",
+  "components.Settings.Notifications.NotificationsSlack.slacksettingssaved": "Slack notification settings saved!",
+  "components.Settings.Notifications.NotificationsSlack.test": "Test",
+  "components.Settings.Notifications.NotificationsSlack.testsent": "Test notification sent!",
+  "components.Settings.Notifications.NotificationsSlack.validationWebhookUrlRequired": "You must provide a webhook URL",
+  "components.Settings.Notifications.NotificationsSlack.webhookUrl": "Webhook URL",
+  "components.Settings.Notifications.NotificationsSlack.webhookUrlPlaceholder": "Webhook URL",
  "components.Settings.Notifications.agentenabled": "Agent Enabled",
  "components.Settings.Notifications.allowselfsigned": "Allow Self-Signed Certificates",
  "components.Settings.Notifications.authPass": "Auth Pass",
@@ -330,6 +342,10 @@
  "components.UserEdit.adminDescription": "Full administrator access. Bypasses all permission checks.",
  "components.UserEdit.autoapprove": "Auto Approve",
  "components.UserEdit.autoapproveDescription": "Grants auto approval for any requests made by this user.",
+  "components.UserEdit.autoapproveMovies": "Auto Approve Movies",
+  "components.UserEdit.autoapproveMoviesDescription": "Grants auto approve for movie requests made by this user.",
+  "components.UserEdit.autoapproveSeries": "Auto Approve Series",
+  "components.UserEdit.autoapproveSeriesDescription": "Grants auto approve for series requests made by this user.",
  "components.UserEdit.avatar": "Avatar",
  "components.UserEdit.edituser": "Edit User",
  "components.UserEdit.email": "Email",
--- a/src/pages/settings/notifications/slack.tsx
+++ b/src/pages/settings/notifications/slack.tsx
@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import React from 'react';
+import NotificationsSlack from '../../../components/Settings/Notifications/NotificationsSlack';
+import SettingsLayout from '../../../components/Settings/SettingsLayout';
+import SettingsNotifications from '../../../components/Settings/SettingsNotifications';
+
+const NotificationsSlackPage: NextPage = () => {
+  return (
+    <SettingsLayout>
+      <SettingsNotifications>
+        <NotificationsSlack />
+      </SettingsNotifications>
+    </SettingsLayout>
+  );
+};
+
+export default NotificationsSlackPage;
				`@@ -0,0 +1 @@`
				<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z"></path></svg>