feat: use handlebar to build up webhook body

packages/api/src/models/webhook.ts

@@ -29,7 +29,7 @@ export interface IWebhook {
   // to strip the additional properties that are related to the Mongoose internal representation -> webhook.headers.toJSON()
   queryParams?: MongooseMap;
   headers?: MongooseMap;
-  body?: MongooseMap;
+  body?: string;
 }
 
 const WebhookSchema = new Schema<IWebhook>(
@@ -63,8 +63,7 @@ const WebhookSchema = new Schema<IWebhook>(
       required: false,
     },
     body: {
-      type: Map,
-      of: String,
+      type: String,
       required: false,
     },
   },

packages/api/src/tasks/checkAlerts.ts

@@ -270,22 +270,22 @@ export const handleSendGenericWebhook = async (
 
   // BODY
 
-  let parsedBody: Record<string, string | number | symbol> = {};
+  let body = '';
   if (webhook.body) {
-    const injectedBody = injectIntoPlaceholders(JSON.stringify(webhook.body), {
-      $HDX_ALERT_URL: message.hdxLink,
-      $HDX_ALERT_TITLE: message.title,
-      $HDX_ALERT_BODY: message.body,
+    const handlebars = Handlebars.create();
+    body = handlebars.compile(webhook.body)({
+      HDX_ALERT_URL: message.hdxLink,
+      HDX_ALERT_TITLE: message.title,
+      HDX_ALERT_BODY: message.body,
     });
-    parsedBody = JSON.parse(injectedBody);
   }
 
   try {
     // TODO: retries/backoff etc -> switch to request-error-tolerant api client
     const response = await fetch(url, {
       method: 'POST',
       headers: headers as Record<string, string>,
-      body: JSON.stringify(parsedBody),
+      body,
     });
 
     if (!response.ok) {
@@ -299,32 +299,6 @@ export const handleSendGenericWebhook = async (
   }
 };
 
-type HDXGenericWebhookTemplateValues = {
-  $HDX_ALERT_URL?: string;
-  $HDX_ALERT_TITLE?: string;
-  $HDX_ALERT_BODY?: string;
-};
-
-export function injectIntoPlaceholders(
-  placeholderString: string,
-  valuesToInject: HDXGenericWebhookTemplateValues,
-) {
-  return placeholderString.replace(/(\$\w+)/g, function (match) {
-    const replacement =
-      valuesToInject[match as keyof HDXGenericWebhookTemplateValues] || match;
-    return escapeJsonValues(replacement);
-  });
-}
-
-export function escapeJsonValues(value: string): string {
-  return value
-    .replace(/\\/g, '\\\\')
-    .replace(/"/g, '\\"')
-    .replace(/\n/g, '\\n')
-    .replace(/\r/g, '\\r')
-    .replace(/\t/g, '\\t');
-}
-
 export const buildAlertMessageTemplateHdxLink = ({
   alert,
   dashboard,

packages/app/src/TeamPage.tsx

@@ -159,19 +159,14 @@ export default function TeamPage() {
       return;
     }
 
-    if (body && !isValidJson(body)) {
-      toast.error('Please enter valid JSON for body');
-      return;
-    }
-
     saveWebhook.mutate(
       {
         name,
         service: service,
         url,
         description,
         headers: headers ? JSON.parse(headers) : undefined,
-        body: body ? JSON.parse(body) : undefined,
+        body,
       },
       {
         onSuccess: () => {
@@ -597,9 +592,7 @@ export default function TeamPage() {
                       height="100px"
                       extensions={[
                         json(),
-                        placeholder(
-                          '{\n\t"text": "$HDX_ALERT_URL | $HDX_ALERT_TITLE | $HDX_ALERT_BODY",\n}',
-                        ),
+                        placeholder('{\n\t"text": "{{HDX_ALERT_BODY}}"\n}'),
                       ]}
                       theme={hdxJSONTheme}
                       onChange={onBodyChange}
@@ -619,8 +612,17 @@ export default function TeamPage() {
                     </span>
                     <br />
                     <span>
-                      <code>$HDX_ALERT_URL</code>, <code>$HDX_ALERT_TITLE</code>
-                      , <code>$HDX_ALERT_BODY</code>
+                      <code>
+                        {'{{'}HDX_ALERT_URL{'}}'}
+                      </code>
+                      ,{' '}
+                      <code>
+                        {'{{'}HDX_ALERT_TITLE{'}}'}
+                      </code>
+                      ,{' '}
+                      <code>
+                        {'{{'}HDX_ALERT_BODY{'}}'}
+                      </code>
                     </span>
                   </Alert>
                   <Button

packages/app/src/api.ts

@@ -726,7 +726,7 @@ const api = {
         description?: string;
         queryParams?: Map<string, string>;
         headers?: Map<string, string>;
-        body?: Map<string, string>;
+        body?: string;
       }
     >(async ({ service, url, name, description, queryParams, headers, body }) =>
       server(`webhooks`, {