feat(notif): allow users to enable/disable specific agents (#1172)

* refactor(ui): add tabs to user notification settings

* feat(notif): allow users to enable/disable specific agents

* fix(ui): only enforce required fields when agent is enabled

* fix(ui): hide unavailable notification agents

* feat(notif): mention admin users for admin Discord notifications

* fix(ui): modify styling of PGP key textareas to suit expected input

* fix(notif): mention all admins when there are multiple and fix rebase error

* fix: add missing form values, and fix Yup validation

* refactor: reduce repeated logic/code in email notif agent

* refactor: move 'Notification Types' label into NotificationTypeSelector component

* fix(email): correct inconsistencies in email template formatting

* refactor: use bitfields for storing user-enabled notif agent types

* feat: improve notification agent logging

* fix(ui): mark string fields as nullable so empty values are not type errors

* fix: add validation for PGP-related inputs

* fix: correctly fetch user in user settings & log mentioned IDs for Discord notifs

* fix(ui): fix mobile nav dropdown text & add hover effect to button-style tabs

* fix(notif): process admin email notifications asynchronously

* fix(logging): log name of notification type instead of its enum value

* fix: mark required fields and pass all user settings values to API

* fix(frontend): call mutate after changing email/Discord/Telegram global notif settings

* refactor: get global notif settings from relevant API endpoints instead of adding to public settings

* fix(notif): fall back to email notifications being enabled (default) if user settings do not exist

* fix(notif): do not set notifyUser for MEDIA_PENDING or MEDIA_AUTO_APPROVED

* fix: expose notif enabled settings in user notif endpoints & remove global enable notif setting

* fix(notif): remove unnecessary allowed_mentions object from Discord payload

* fix(notif): use form values for email test notification

* fix: make suggested changes and regenerate DB migration

* fix: loosen validation of PGP keys

* fix: fix user profile settings routes

* fix: remove route guard from profile pages

src/components/Settings/SettingsLayout.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { defineMessages, useIntl } from 'react-intl';
-import PageTitle from '../Common/PageTitle';
 import globalMessages from '../../i18n/globalMessages';
+import PageTitle from '../Common/PageTitle';
+import SettingsTabs, { SettingsRoute } from '../Common/SettingsTabs';
 
 const messages = defineMessages({
   menuGeneralSettings: 'General',
@@ -16,14 +15,7 @@ const messages = defineMessages({
   menuAbout: 'About',
 });
 
-interface SettingsRoute {
-  text: string;
-  route: string;
-  regex: RegExp;
-}
-
 const SettingsLayout: React.FC = ({ children }) => {
-  const router = useRouter();
   const intl = useIntl();
 
   const settingsRoutes: SettingsRoute[] = [
@@ -69,78 +61,11 @@ const SettingsLayout: React.FC = ({ children }) => {
     },
   ];
 
-  const activeLinkColor =
-    'border-indigo-600 text-indigo-500 focus:outline-none focus:text-indigo-500 focus:border-indigo-500';
-
-  const inactiveLinkColor =
-    'border-transparent text-gray-500 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-4700 focus:border-gray-300';
-
-  const SettingsLink: React.FC<{
-    route: string;
-    regex: RegExp;
-    isMobile?: boolean;
-  }> = ({ children, route, regex, isMobile = false }) => {
-    if (isMobile) {
-      return <option value={route}>{children}</option>;
-    }
-
-    return (
-      <Link href={route}>
-        <a
-          className={`whitespace-nowrap ml-8 first:ml-0 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 ${
-            router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
-          }`}
-          aria-current="page"
-        >
-          {children}
-        </a>
-      </Link>
-    );
-  };
   return (
     <>
       <PageTitle title={intl.formatMessage(globalMessages.settings)} />
       <div className="mt-6">
-        <div className="sm:hidden">
-          <select
-            onChange={(e) => {
-              router.push(e.target.value);
-            }}
-            onBlur={(e) => {
-              router.push(e.target.value);
-            }}
-            defaultValue={
-              settingsRoutes.find(
-                (route) => !!router.pathname.match(route.regex)
-              )?.route
-            }
-            aria-label="Selected tab"
-          >
-            {settingsRoutes.map((route, index) => (
-              <SettingsLink
-                route={route.route}
-                regex={route.regex}
-                isMobile
-                key={`mobile-settings-link-${index}`}
-              >
-                {route.text}
-              </SettingsLink>
-            ))}
-          </select>
-        </div>
-        <div className="hidden overflow-x-scroll overflow-y-hidden border-b border-gray-600 sm:block hide-scrollbar">
-          <nav className="flex -mb-px">
-            {settingsRoutes.map((route, index) => (
-              <SettingsLink
-                route={route.route}
-                regex={route.regex}
-                key={`standard-settings-link-${index}`}
-              >
-                {route.text}
-              </SettingsLink>
-            ))}
-          </nav>
-        </div>
+        <SettingsTabs settingsRoutes={settingsRoutes} />
       </div>
       <div className="mt-10 text-white">{children}</div>
     </>