feat: add audit logging via webhook (#309)

* feat: add audit logging via webhook

* addd missing auditLogWebhook values in various places

packages/design-system/organisms/editor-shell/EditorShell.tsx

@@ -1,10 +1,16 @@
-import { Space } from '@roleypoly/design-system/atoms/space';
+import { LinedSpace, Space } from '@roleypoly/design-system/atoms/space';
 import { EditableServerMessage } from '@roleypoly/design-system/molecules/editable-server-message';
 import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead';
+import { ServerUtilities } from '@roleypoly/design-system/molecules/server-utilities/ServerUtilities';
 import { SecondaryEditing } from '@roleypoly/design-system/organisms/masthead';
 import { Container } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
 import { ServerCategoryEditor } from '@roleypoly/design-system/organisms/server-category-editor';
-import { Category, PresentableGuild } from '@roleypoly/types';
+import {
+  Category,
+  GuildData,
+  PresentableGuild,
+  WebhookValidationStatus,
+} from '@roleypoly/types';
 import deepEqual from 'deep-equal';
 import React from 'react';
 
@@ -13,17 +19,26 @@ export type EditorShellProps = {
   onGuildChange?: (guild: PresentableGuild) => void;
   onCategoryChange?: (category: Category) => void;
   onMessageChange?: (message: PresentableGuild['data']['message']) => void;
+  errors: {
+    webhookValidation: WebhookValidationStatus;
+  };
 };
 
 export const EditorShell = (props: EditorShellProps) => {
   const [guild, setGuild] = React.useState<PresentableGuild>(props.guild);
+  const [errors, setErrors] = React.useState<EditorShellProps['errors']>(props.errors);
 
   React.useEffect(() => {
     setGuild(props.guild);
   }, [props.guild]);
 
+  React.useEffect(() => {
+    setErrors(props.errors);
+  }, [props.errors]);
+
   const reset = () => {
     setGuild(props.guild);
+    setErrors({ webhookValidation: WebhookValidationStatus.Ok });
   };
 
   const replaceCategories = (categories: Category[]) => {
@@ -38,6 +53,12 @@ export const EditorShell = (props: EditorShellProps) => {
     });
   };
 
+  const updateGuildData = (data: PresentableGuild['data']) => {
+    setGuild((currentGuild) => {
+      return { ...currentGuild, data };
+    });
+  };
+
   const doSubmit = () => {
     props.onGuildChange?.(guild);
   };
@@ -65,7 +86,48 @@ export const EditorShell = (props: EditorShellProps) => {
         />
         <Space />
         <ServerCategoryEditor guild={guild} onChange={replaceCategories} />
+        <LinedSpace />
+        <ServerUtilities
+          guildData={guild.data}
+          onChange={updateGuildData}
+          validationStatus={validateWebhook(
+            guild.data.auditLogWebhook,
+            errors.webhookValidation
+          )}
+        />
       </Container>
     </>
   );
 };
+
+const validateWebhook = (
+  webhook: GuildData['auditLogWebhook'],
+  validationStatus: WebhookValidationStatus
+) => {
+  if (!webhook) {
+    return WebhookValidationStatus.NoneSet;
+  }
+
+  try {
+    const url = new URL(webhook);
+
+    if (
+      url.hostname !== 'discord.com' ||
+      url.protocol !== 'https:' ||
+      url.pathname.startsWith('api/webhooks/')
+    ) {
+      return WebhookValidationStatus.NotDiscordURL;
+    }
+  } catch (e) {
+    return WebhookValidationStatus.Ok;
+  }
+
+  if (
+    validationStatus !== WebhookValidationStatus.Ok &&
+    validationStatus !== WebhookValidationStatus.NoneSet
+  ) {
+    return validationStatus;
+  }
+
+  return WebhookValidationStatus.Ok;
+};