feat(notifications): control notifcation types per agent

closes #513

src/components/Settings/Notifications/NotificationsDiscord.tsx

@@ -7,6 +7,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import axios from 'axios';
 import * as Yup from 'yup';
 import { useToasts } from 'react-toast-notifications';
+import NotificationTypeSelector from '../../NotificationTypeSelector';
 
 const messages = defineMessages({
   save: 'Save Changes',
@@ -19,6 +20,7 @@ const messages = defineMessages({
   discordsettingsfailed: 'Discord notification settings failed to save.',
   testsent: 'Test notification sent!',
   test: 'Test',
+  notificationtypes: 'Notification Types',
 });
 
 const NotificationsDiscord: React.FC = () => {
@@ -69,7 +71,7 @@ const NotificationsDiscord: React.FC = () => {
         }
       }}
     >
-      {({ errors, touched, isSubmitting, values, isValid }) => {
+      {({ errors, touched, isSubmitting, values, isValid, setFieldValue }) => {
         const testSettings = async () => {
           await axios.post('/api/v1/settings/notifications/discord/test', {
             enabled: true,
@@ -99,7 +101,7 @@ const NotificationsDiscord: React.FC = () => {
                   type="checkbox"
                   id="enabled"
                   name="enabled"
-                  className="form-checkbox rounded-md h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
+                  className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
                 />
               </div>
             </div>
@@ -111,7 +113,7 @@ const NotificationsDiscord: React.FC = () => {
                 {intl.formatMessage(messages.webhookUrl)}
               </label>
               <div className="mt-1 sm:mt-0 sm:col-span-2">
-                <div className="max-w-lg flex rounded-md shadow-sm">
+                <div className="flex max-w-lg rounded-md shadow-sm">
                   <Field
                     id="webhookUrl"
                     name="webhookUrl"
@@ -119,17 +121,41 @@ const NotificationsDiscord: React.FC = () => {
                     placeholder={intl.formatMessage(
                       messages.webhookUrlPlaceholder
                     )}
-                    className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                    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="text-red-500 mt-2">{errors.webhookUrl}</div>
+                  <div className="mt-2 text-red-500">{errors.webhookUrl}</div>
                 )}
               </div>
             </div>
-            <div className="mt-8 border-t border-gray-700 pt-5">
+            <div className="mt-6">
+              <div role="group" aria-labelledby="label-permissions">
+                <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
+                  <div>
+                    <div
+                      className="text-base font-medium leading-6 text-gray-400 sm:text-sm sm:leading-5"
+                      id="label-types"
+                    >
+                      {intl.formatMessage(messages.notificationtypes)}
+                    </div>
+                  </div>
+                  <div className="mt-4 sm:mt-0 sm:col-span-2">
+                    <div className="max-w-lg">
+                      <NotificationTypeSelector
+                        currentTypes={values.types}
+                        onUpdate={(newTypes) =>
+                          setFieldValue('types', newTypes)
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="pt-5 mt-8 border-t border-gray-700">
               <div className="flex justify-end">
-                <span className="ml-3 inline-flex rounded-md shadow-sm">
+                <span className="inline-flex ml-3 rounded-md shadow-sm">
                   <Button
                     buttonType="warning"
                     disabled={isSubmitting || !isValid}
@@ -142,7 +168,7 @@ const NotificationsDiscord: React.FC = () => {
                     {intl.formatMessage(messages.test)}
                   </Button>
                 </span>
-                <span className="ml-3 inline-flex rounded-md shadow-sm">
+                <span className="inline-flex ml-3 rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
                     type="submit"

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -7,6 +7,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import axios from 'axios';
 import * as Yup from 'yup';
 import { useToasts } from 'react-toast-notifications';
+import NotificationTypeSelector from '../../NotificationTypeSelector';
 
 const messages = defineMessages({
   save: 'Save Changes',
@@ -29,6 +30,7 @@ const messages = defineMessages({
   ssldisabletip:
     'SSL should be disabled on standard TLS connections (Port 587)',
   senderName: 'Sender Name',
+  notificationtypes: 'Notification Types',
 });
 
 const NotificationsEmail: React.FC = () => {
@@ -99,7 +101,7 @@ const NotificationsEmail: React.FC = () => {
         }
       }}
     >
-      {({ errors, touched, isSubmitting, values, isValid }) => {
+      {({ errors, touched, isSubmitting, values, isValid, setFieldValue }) => {
         const testSettings = async () => {
           await axios.post('/api/v1/settings/notifications/email/test', {
             enabled: true,
@@ -292,11 +294,36 @@ const NotificationsEmail: React.FC = () => {
                     id="authPass"
                     name="authPass"
                     type="password"
+                    autoComplete="off"
                     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>
               </div>
             </div>
+            <div className="mt-6">
+              <div role="group" aria-labelledby="label-permissions">
+                <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
+                  <div>
+                    <div
+                      className="text-base font-medium leading-6 text-gray-400 sm:text-sm sm:leading-5"
+                      id="label-types"
+                    >
+                      {intl.formatMessage(messages.notificationtypes)}
+                    </div>
+                  </div>
+                  <div className="mt-4 sm:mt-0 sm:col-span-2">
+                    <div className="max-w-lg">
+                      <NotificationTypeSelector
+                        currentTypes={values.types}
+                        onUpdate={(newTypes) =>
+                          setFieldValue('types', newTypes)
+                        }
+                      />
+                    </div>
+                  </div>
+                </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">

src/components/Settings/Notifications/NotificationsSlack/index.tsx

@@ -8,6 +8,7 @@ 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',
@@ -23,6 +24,7 @@ const messages = defineMessages({
   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.',
+  notificationtypes: 'Notification Types',
 });
 
 const NotificationsSlack: React.FC = () => {
@@ -44,24 +46,22 @@ const NotificationsSlack: React.FC = () => {
 
   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>
+      <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>
       <Formik
         initialValues={{
           enabled: data.enabled,
@@ -92,7 +92,14 @@ const NotificationsSlack: React.FC = () => {
           }
         }}
       >
-        {({ errors, touched, isSubmitting, values, isValid }) => {
+        {({
+          errors,
+          touched,
+          isSubmitting,
+          values,
+          isValid,
+          setFieldValue,
+        }) => {
           const testSettings = async () => {
             await axios.post('/api/v1/settings/notifications/slack/test', {
               enabled: true,
@@ -150,6 +157,30 @@ const NotificationsSlack: React.FC = () => {
                   )}
                 </div>
               </div>
+              <div className="mt-6">
+                <div role="group" aria-labelledby="label-permissions">
+                  <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
+                    <div>
+                      <div
+                        className="text-base font-medium leading-6 text-gray-400 sm:text-sm sm:leading-5"
+                        id="label-types"
+                      >
+                        {intl.formatMessage(messages.notificationtypes)}
+                      </div>
+                    </div>
+                    <div className="mt-4 sm:mt-0 sm:col-span-2">
+                      <div className="max-w-lg">
+                        <NotificationTypeSelector
+                          currentTypes={values.types}
+                          onUpdate={(newTypes) =>
+                            setFieldValue('types', newTypes)
+                          }
+                        />
+                      </div>
+                    </div>
+                  </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">

src/components/Settings/Notifications/NotificationsTelegram.tsx

@@ -8,6 +8,7 @@ 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',
@@ -26,6 +27,7 @@ const messages = defineMessages({
     '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.',
+  notificationtypes: 'Notification Types',
 });
 
 const NotificationsTelegram: React.FC = () => {
@@ -81,7 +83,7 @@ const NotificationsTelegram: React.FC = () => {
         }
       }}
     >
-      {({ errors, touched, isSubmitting, values, isValid }) => {
+      {({ errors, touched, isSubmitting, values, isValid, setFieldValue }) => {
         const testSettings = async () => {
           await axios.post('/api/v1/settings/notifications/telegram/test', {
             enabled: true,
@@ -100,39 +102,37 @@ const NotificationsTelegram: React.FC = () => {
 
         return (
           <>
-            <p className="mb-">
-              <Alert
-                title={intl.formatMessage(messages.settinguptelegram)}
-                type="info"
-              >
-                {intl.formatMessage(messages.settinguptelegramDescription, {
-                  CreateBotLink: function CreateBotLink(msg) {
-                    return (
-                      <a
-                        href="https://core.telegram.org/bots#6-botfather"
-                        className="text-indigo-100 hover:text-white hover:underline"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {msg}
-                      </a>
-                    );
-                  },
-                  GetIdBotLink: function GetIdBotLink(msg) {
-                    return (
-                      <a
-                        href="https://telegram.me/get_id_bot"
-                        className="text-indigo-100 hover:text-white hover:underline"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {msg}
-                      </a>
-                    );
-                  },
-                })}
-              </Alert>
-            </p>
+            <Alert
+              title={intl.formatMessage(messages.settinguptelegram)}
+              type="info"
+            >
+              {intl.formatMessage(messages.settinguptelegramDescription, {
+                CreateBotLink: function CreateBotLink(msg) {
+                  return (
+                    <a
+                      href="https://core.telegram.org/bots#6-botfather"
+                      className="text-indigo-100 hover:text-white hover:underline"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {msg}
+                    </a>
+                  );
+                },
+                GetIdBotLink: function GetIdBotLink(msg) {
+                  return (
+                    <a
+                      href="https://telegram.me/get_id_bot"
+                      className="text-indigo-100 hover:text-white hover:underline"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {msg}
+                    </a>
+                  );
+                },
+              })}
+            </Alert>
             <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
@@ -158,17 +158,17 @@ const NotificationsTelegram: React.FC = () => {
                   {intl.formatMessage(messages.botAPI)}
                 </label>
                 <div className="mt-1 sm:mt-0 sm:col-span-2">
-                  <div className="max-w-lg flex rounded-md shadow-sm">
+                  <div className="flex max-w-lg rounded-md shadow-sm">
                     <Field
                       id="botAPI"
                       name="botAPI"
                       type="text"
                       placeholder={intl.formatMessage(messages.botAPI)}
-                      className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                      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.botAPI && touched.botAPI && (
-                    <div className="text-red-500 mt-2">{errors.botAPI}</div>
+                    <div className="mt-2 text-red-500">{errors.botAPI}</div>
                   )}
                 </div>
                 <label
@@ -178,23 +178,47 @@ const NotificationsTelegram: React.FC = () => {
                   {intl.formatMessage(messages.chatId)}
                 </label>
                 <div className="mt-1 sm:mt-0 sm:col-span-2">
-                  <div className="max-w-lg flex rounded-md shadow-sm">
+                  <div className="flex max-w-lg rounded-md shadow-sm">
                     <Field
                       id="chatId"
                       name="chatId"
                       type="text"
                       placeholder={intl.formatMessage(messages.chatId)}
-                      className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                      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.chatId && touched.chatId && (
-                    <div className="text-red-500 mt-2">{errors.chatId}</div>
+                    <div className="mt-2 text-red-500">{errors.chatId}</div>
                   )}
                 </div>
               </div>
-              <div className="mt-8 border-t border-gray-700 pt-5">
+              <div className="mt-6">
+                <div role="group" aria-labelledby="label-permissions">
+                  <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
+                    <div>
+                      <div
+                        className="text-base font-medium leading-6 text-gray-400 sm:text-sm sm:leading-5"
+                        id="label-types"
+                      >
+                        {intl.formatMessage(messages.notificationtypes)}
+                      </div>
+                    </div>
+                    <div className="mt-4 sm:mt-0 sm:col-span-2">
+                      <div className="max-w-lg">
+                        <NotificationTypeSelector
+                          currentTypes={values.types}
+                          onUpdate={(newTypes) =>
+                            setFieldValue('types', newTypes)
+                          }
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="pt-5 mt-8 border-t border-gray-700">
                 <div className="flex justify-end">
-                  <span className="ml-3 inline-flex rounded-md shadow-sm">
+                  <span className="inline-flex ml-3 rounded-md shadow-sm">
                     <Button
                       buttonType="warning"
                       disabled={isSubmitting || !isValid}
@@ -207,7 +231,7 @@ const NotificationsTelegram: React.FC = () => {
                       {intl.formatMessage(messages.test)}
                     </Button>
                   </span>
-                  <span className="ml-3 inline-flex rounded-md shadow-sm">
+                  <span className="inline-flex ml-3 rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
                       type="submit"