feature(dashboard): add template for notification rules

apps/dashboard/src/modals/add-notification-rule.tsx

@@ -15,6 +15,7 @@ import { PureFilterItem } from '@/components/report/sidebar/filters/FilterItem';
 import { Button } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
 import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
+import { Textarea } from '@/components/ui/textarea';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useEventNames } from '@/hooks/useEventNames';
 import { useEventProperties } from '@/hooks/useEventProperties';
@@ -51,6 +52,7 @@ export default function AddNotificationRule({ rule }: Props) {
       integrations:
         rule?.integrations.map((integration) => integration.id) ?? [],
       projectId,
+      template: rule?.template ?? '',
       config: rule?.config ?? {
         type: 'events',
         events: [
@@ -160,6 +162,16 @@ export default function AddNotificationRule({ rule }: Props) {
           </div>
         </WithLabel>
 
+        <WithLabel
+          label="Template"
+          info="Customize your notification. Exisiting variables: $EVENT_NAME, $RULE_NAME"
+        >
+          <Textarea
+            {...form.register('template')}
+            placeholder="You received a new '$EVENT_NAME' event"
+          />
+        </WithLabel>
+
         <Controller
           control={form.control}
           name="integrations"

packages/db/prisma/migrations/20241022195212_add_template_to_notification_rules/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "notification_rules" ADD COLUMN     "template" TEXT;

packages/db/prisma/schema.prisma

@@ -329,6 +329,7 @@ model NotificationRule {
   sendToEmail  Boolean       @default(false)
   /// [IPrismaNotificationRuleConfig]
   config       Json
+  template     String?
   createdAt    DateTime      @default(now())
   updatedAt    DateTime      @default(now()) @updatedAt
 

packages/db/src/services/notification.service.ts

@@ -59,6 +59,9 @@ export const BASE_INTEGRATIONS: Integration[] = [
 export const isBaseIntegration = (id: string) =>
   BASE_INTEGRATIONS.find((i) => i.id === id);
 
+export type INotificationRuleCached = Awaited<
+  ReturnType<typeof getNotificationRulesByProjectId>
+>[number];
 export const getNotificationRulesByProjectId = cacheable(
   function getNotificationRulesByProjectId(projectId: string) {
     return db.notificationRule.findMany({
@@ -71,6 +74,7 @@ export const getNotificationRulesByProjectId = cacheable(
         sendToApp: true,
         sendToEmail: true,
         config: true,
+        template: true,
         integrations: {
           select: {
             id: true,
@@ -190,6 +194,32 @@ export function matchEvent(
   return true;
 }
 
+function notificationTemplateEvent({
+  payload,
+  rule,
+}: {
+  payload: IServiceCreateEventPayload;
+  rule: INotificationRuleCached;
+}) {
+  if (!rule.template) return `You received a new "${payload.name}" event`;
+  return rule.template
+    .replaceAll('$EVENT_NAME', payload.name)
+    .replaceAll('$RULE_NAME', rule.name);
+}
+
+function notificationTemplateFunnel({
+  events,
+  rule,
+}: {
+  events: IServiceEvent[];
+  rule: INotificationRuleCached;
+}) {
+  if (!rule.template) return `Funnel "${rule.name}" completed`;
+  return rule.template
+    .replaceAll('$EVENT_NAME', events.map((e) => e.name).join(' -> '))
+    .replaceAll('$RULE_NAME', rule.name);
+}
+
 export async function checkNotificationRulesForEvent(
   payload: IServiceCreateEventPayload,
 ) {
@@ -207,7 +237,10 @@ export async function checkNotificationRulesForEvent(
         }
 
         const notification = {
-          title: `You received a new "${payload.name}" event`,
+          title: notificationTemplateEvent({
+            payload,
+            rule,
+          }),
           message: project?.name ? `Project: ${project?.name}` : '',
           projectId: payload.projectId,
           payload: {
@@ -266,7 +299,7 @@ export async function checkNotificationRulesForSessionEnd(
   const notificationPromises = funnelRules.flatMap((rule) => {
     // Match funnel events
     let funnelIndex = 0;
-    const matchedEvents = [];
+    const matchedEvents: IServiceEvent[] = [];
     for (const event of sortedEvents) {
       if (matchEvent(event, rule.config.events[funnelIndex]!)) {
         matchedEvents.push(event);
@@ -280,7 +313,10 @@ export async function checkNotificationRulesForSessionEnd(
 
     // Create notification object
     const notification = {
-      title: `Funnel "${rule.name}" completed`,
+      title: notificationTemplateFunnel({
+        rule,
+        events: matchedEvents,
+      }),
       message: project?.name ? `Project: ${project?.name}` : '',
       projectId,
       payload: { type: 'funnel', funnel: matchedEvents } as const,

packages/trpc/src/routers/notification.ts

@@ -100,6 +100,7 @@ export const notificationRouter = createTRPCRouter({
                 .map((id) => ({ id })),
             },
             config: input.config,
+            template: input.template || null,
           },
         });
       }

packages/validation/src/index.ts

@@ -264,6 +264,7 @@ export type INotificationRuleConfig = z.infer<typeof zNotificationRuleConfig>;
 export const zCreateNotificationRule = z.object({
   id: z.string().optional(),
   name: z.string().min(1),
+  template: z.string().optional(),
   config: zNotificationRuleConfig,
   integrations: z.array(z.string()),
   sendToApp: z.boolean(),