feat: PWA Support (#1488)

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

@@ -0,0 +1,122 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import globalMessages from '../../../../i18n/globalMessages';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+import NotificationTypeSelector from '../../../NotificationTypeSelector';
+
+const messages = defineMessages({
+  agentenabled: 'Enable Agent',
+  webpushsettingssaved: 'Web push notification settings saved successfully!',
+  webpushsettingsfailed: 'Web push notification settings failed to save.',
+  testsent: 'Web push test notification sent!',
+});
+
+const NotificationsWebPush: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const { data, error, revalidate } = useSWR(
+    '/api/v1/settings/notifications/webpush'
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <>
+      <Formik
+        initialValues={{
+          enabled: data.enabled,
+          types: data.types,
+        }}
+        onSubmit={async (values) => {
+          try {
+            await axios.post('/api/v1/settings/notifications/webpush', {
+              enabled: values.enabled,
+              types: values.types,
+              options: {},
+            });
+            addToast(intl.formatMessage(messages.webpushsettingssaved), {
+              appearance: 'success',
+              autoDismiss: true,
+            });
+          } catch (e) {
+            addToast(intl.formatMessage(messages.webpushsettingsfailed), {
+              appearance: 'error',
+              autoDismiss: true,
+            });
+          } finally {
+            revalidate();
+          }
+        }}
+      >
+        {({ isSubmitting, values, isValid, setFieldValue }) => {
+          const testSettings = async () => {
+            await axios.post('/api/v1/settings/notifications/webpush/test', {
+              enabled: true,
+              types: values.types,
+              options: {},
+            });
+
+            addToast(intl.formatMessage(messages.testsent), {
+              appearance: 'info',
+              autoDismiss: true,
+            });
+          };
+
+          return (
+            <Form className="section">
+              <div className="form-row">
+                <label htmlFor="enabled" className="checkbox-label">
+                  {intl.formatMessage(messages.agentenabled)}
+                </label>
+                <div className="form-input">
+                  <Field type="checkbox" id="enabled" name="enabled" />
+                </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">
+                    <Button
+                      buttonType="warning"
+                      disabled={isSubmitting || !isValid}
+                      onClick={(e) => {
+                        e.preventDefault();
+
+                        testSettings();
+                      }}
+                    >
+                      {intl.formatMessage(globalMessages.test)}
+                    </Button>
+                  </span>
+                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                    <Button
+                      buttonType="primary"
+                      type="submit"
+                      disabled={isSubmitting || !isValid}
+                    >
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </Button>
+                  </span>
+                </div>
+              </div>
+            </Form>
+          );
+        }}
+      </Formik>
+    </>
+  );
+};
+
+export default NotificationsWebPush;

src/components/Settings/SettingsNotifications.tsx

@@ -1,5 +1,5 @@
 import { AtSymbolIcon } from '@heroicons/react/outline';
-import { LightningBoltIcon } from '@heroicons/react/solid';
+import { CloudIcon, LightningBoltIcon } from '@heroicons/react/solid';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import DiscordLogo from '../../assets/extlogos/discord.svg';
@@ -18,6 +18,7 @@ const messages = defineMessages({
     'Configure and enable notification agents.',
   email: 'Email',
   webhook: 'Webhook',
+  webpush: 'Web Push',
 });
 
 const SettingsNotifications: React.FC = ({ children }) => {
@@ -90,6 +91,17 @@ const SettingsNotifications: React.FC = ({ children }) => {
       route: '/settings/notifications/telegram',
       regex: /^\/settings\/notifications\/telegram/,
     },
+    {
+      text: intl.formatMessage(messages.webpush),
+      content: (
+        <span className="flex items-center">
+          <CloudIcon className="h-4 mr-2" />
+          {intl.formatMessage(messages.webpush)}
+        </span>
+      ),
+      route: '/settings/notifications/webpush',
+      regex: /^\/settings\/notifications\/webpush/,
+    },
     {
       text: intl.formatMessage(messages.webhook),
       content: (