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/Notifications/NotificationsTelegram.tsx

@@ -14,17 +14,18 @@ import NotificationTypeSelector from '../../NotificationTypeSelector';
 const messages = defineMessages({
   agentenabled: 'Enable Agent',
   botUsername: 'Bot Username',
+  botUsernameTip:
+    'Allow users to start a chat with the bot and configure their own personal notifications',
   botAPI: 'Bot Authentication Token',
   chatId: 'Chat ID',
   validationBotAPIRequired: 'You must provide a bot authentication token',
   validationChatIdRequired: 'You must provide a valid chat ID',
   telegramsettingssaved: 'Telegram notification settings saved successfully!',
   telegramsettingsfailed: 'Telegram notification settings failed to save.',
-  testsent: 'Test notification sent!',
+  testsent: 'Telegram test notification sent!',
   settinguptelegram: 'Setting Up Telegram Notifications',
   settinguptelegramDescription:
     'To configure Telegram notifications, you will need to <CreateBotLink>create a bot</CreateBotLink> and get the bot API key. Additionally, you will need the chat ID for the chat to which you would like to send notifications. You can find this by adding <GetIdBotLink>@get_id_bot</GetIdBotLink> to the chat and issuing the <code>/my_id</code> command.',
-  notificationtypes: 'Notification Types',
   sendSilently: 'Send Silently',
   sendSilentlyTip: 'Send notifications with no sound',
 });
@@ -37,13 +38,23 @@ const NotificationsTelegram: React.FC = () => {
   );
 
   const NotificationsTelegramSchema = Yup.object().shape({
-    botAPI: Yup.string().required(
-      intl.formatMessage(messages.validationBotAPIRequired)
-    ),
+    botAPI: Yup.string().when('enabled', {
+      is: true,
+      then: Yup.string()
+        .nullable()
+        .required(intl.formatMessage(messages.validationBotAPIRequired)),
+      otherwise: Yup.string().nullable(),
+    }),
     chatId: Yup.string()
-      .required(intl.formatMessage(messages.validationChatIdRequired))
+      .when('enabled', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationChatIdRequired)),
+        otherwise: Yup.string().nullable(),
+      })
       .matches(
-        /^[-]?\d+$/,
+        /^-?\d+$/,
         intl.formatMessage(messages.validationChatIdRequired)
       ),
   });
@@ -75,6 +86,7 @@ const NotificationsTelegram: React.FC = () => {
               botUsername: values.botUsername,
             },
           });
+
           addToast(intl.formatMessage(messages.telegramsettingssaved), {
             appearance: 'success',
             autoDismiss: true,
@@ -156,6 +168,9 @@ const NotificationsTelegram: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="botUsername" className="text-label">
                   {intl.formatMessage(messages.botUsername)}
+                  <span className="label-tip">
+                    {intl.formatMessage(messages.botUsernameTip)}
+                  </span>
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -224,28 +239,10 @@ const NotificationsTelegram: React.FC = () => {
                   />
                 </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 className="label-required">*</span>
-                  </span>
-                  <div className="form-input">
-                    <div className="max-w-lg">
-                      <NotificationTypeSelector
-                        currentTypes={values.types}
-                        onUpdate={(newTypes) =>
-                          setFieldValue('types', newTypes)
-                        }
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <NotificationTypeSelector
+                currentTypes={values.types}
+                onUpdate={(newTypes) => setFieldValue('types', newTypes)}
+              />
               <div className="actions">
                 <div className="flex justify-end">
                   <span className="inline-flex ml-3 rounded-md shadow-sm">