feat(notifications): add slack notification agent

re #365

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>

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;

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