fix(dashboard): improvements to notifications templates

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/integrations/page.tsx

@@ -21,17 +21,16 @@ export default function Page({
     .withDefault('available')
     .parseServerSide(searchParams.tab);
   return (
-    <Padding>
+    <Padding className="col gap-8">
-      <PageTabs className="mb-4">
+      <div className="col gap-4">
-        <PageTabsLink href="?tab=available" isActive={tab === 'available'}>
+        <h2 className="text-3xl font-semibold">Your integrations</h2>
-          Available
+        <ActiveIntegrations />
-        </PageTabsLink>
+      </div>
-        <PageTabsLink href="?tab=installed" isActive={tab === 'installed'}>
+
-          Installed
+      <div className="col gap-4">
-        </PageTabsLink>
+        <h2 className="text-3xl font-semibold">Available integrations</h2>
-      </PageTabs>
+        <AllIntegrations />
-      {tab === 'installed' && <ActiveIntegrations />}
+      </div>
-      {tab === 'available' && <AllIntegrations />}
     </Padding>
   );
 }

apps/dashboard/src/components/forms/input-with-label.tsx

@@ -10,7 +10,7 @@ type WithLabel = {
   children: React.ReactNode;
   label: string;
   error?: string | undefined;
-  info?: string;
+  info?: React.ReactNode;
   className?: string;
 };
 type InputWithLabelProps = InputProps & Omit<WithLabel, 'children'>;

apps/dashboard/src/components/notifications/table/columns.tsx

@@ -28,7 +28,7 @@ export function useColumns() {
         const { title, isReadAt } = row.original;
         return (
           <div className="row gap-2 items-center">
-            {isReadAt === null && <PingBadge>Unread</PingBadge>}
+            {/* {isReadAt === null && <PingBadge>Unread</PingBadge>} */}
             <span className="max-w-md truncate font-medium">{title}</span>
           </div>
         );
@@ -46,6 +46,22 @@ export function useColumns() {
         );
       },
     },
+    {
+      accessorKey: 'integration',
+      header: 'Integration',
+      cell({ row }) {
+        const integration = row.original.integration;
+        return <div>{integration?.name}</div>;
+      },
+    },
+    {
+      accessorKey: 'notificationRule',
+      header: 'Rule',
+      cell({ row }) {
+        const rule = row.original.notificationRule;
+        return <div>{rule?.name}</div>;
+      },
+    },
     {
       accessorKey: 'country',
       header: 'Country',
@@ -121,16 +137,8 @@ export function useColumns() {
       header: 'Created at',
       cell({ row }) {
         const date = row.original.createdAt;
-        const rule = row.original.integration?.notificationRules[0];
         return (
-          <div className="col gap-1">
           <div>{isToday(date) ? formatTime(date) : formatDateTime(date)}</div>
-            {rule && (
-              <div className="text-sm text-muted-foreground">
-                Rule: {rule.name}
-              </div>
-            )}
-          </div>
         );
       },
     },

apps/dashboard/src/components/ui/tooltip.tsx

@@ -62,7 +62,12 @@ export function Tooltiper({
   if (disabled) return children;
   return (
     <Tooltip delayDuration={delayDuration}>
-      <TooltipTrigger asChild={asChild} className={className} onClick={onClick}>
+      <TooltipTrigger
+        asChild={asChild}
+        className={className}
+        onClick={onClick}
+        type="button"
+      >
         {children}
       </TooltipTrigger>
       <TooltipPortal>

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

@@ -164,7 +164,48 @@ export default function AddNotificationRule({ rule }: Props) {
 
         <WithLabel
           label="Template"
-          info="Customize your notification. Exisiting variables: $EVENT_NAME, $RULE_NAME"
+          info={
+            <div className="text-base leading-normal max-w-sm p-2 prose text-left text-white [&_code]:text-white">
+              <p>
+                Customize your notification message. You can grab any property
+                from your event.
+              </p>
+
+              <ul>
+                <li>
+                  <code>{'{{name}}'}</code> - The name of the event
+                </li>
+                <li>
+                  <code>{'{{rule_name}}'}</code> - The name of the rule
+                </li>
+                <li>
+                  <code>{'{{properties.your.property}}'}</code> - Get the value
+                  of a custom property
+                </li>
+                <li>
+                  <div className="flex gap-x-2 flex-wrap">
+                    And many more...
+                    <code>profileId</code>
+                    <code>createdAt</code>
+                    <code>country</code>
+                    <code>city</code>
+                    <code>os</code>
+                    <code>osVersion</code>
+                    <code>browser</code>
+                    <code>browserVersion</code>
+                    <code>device</code>
+                    <code>brand</code>
+                    <code>model</code>
+                    <code>path</code>
+                    <code>origin</code>
+                    <code>referrer</code>
+                    <code>referrerName</code>
+                    <code>referrerType</code>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          }
         >
           <Textarea
             {...form.register('template')}

packages/db/prisma/migrations/20241229150840_add_rule_to_notification/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "notifications" ADD COLUMN     "notificationRuleId" UUID;
+
+-- AddForeignKey
+ALTER TABLE "notifications" ADD CONSTRAINT "notifications_notificationRuleId_fkey" FOREIGN KEY ("notificationRuleId") REFERENCES "notification_rules"("id") ON DELETE SET NULL ON UPDATE CASCADE;

packages/db/prisma/schema.prisma

@@ -392,6 +392,7 @@ model NotificationRule {
   template      String?
   createdAt     DateTime       @default(now())
   updatedAt     DateTime       @default(now()) @updatedAt
+  notifications Notification[]
 
   @@map("notification_rules")
 }
@@ -409,6 +410,8 @@ model Notification {
   sendToEmail        Boolean           @default(false)
   integration        Integration?      @relation(fields: [integrationId], references: [id])
   integrationId      String?           @db.Uuid
+  notificationRuleId String?           @db.Uuid
+  notificationRule   NotificationRule? @relation(fields: [notificationRuleId], references: [id])
   /// [IPrismaNotificationPayload]
   payload            Json?
 

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

@@ -17,7 +17,12 @@ import { getProjectByIdCached } from './project.service';
 
 type ICreateNotification = Pick<
   Notification,
-  'projectId' | 'title' | 'message' | 'integrationId' | 'payload'
+  | 'projectId'
+  | 'title'
+  | 'message'
+  | 'integrationId'
+  | 'payload'
+  | 'notificationRuleId'
 >;
 
 export type INotificationPayload =
@@ -118,6 +123,7 @@ export async function createNotification(notification: ICreateNotification) {
       projectId: notification.projectId,
       payload: notification.payload || Prisma.DbNull,
       ...getIntegration(notification.integrationId),
+      notificationRuleId: notification.notificationRuleId,
     },
   });
 
@@ -202,9 +208,23 @@ function notificationTemplateEvent({
   rule: INotificationRuleCached;
 }) {
   if (!rule.template) return `You received a new "${payload.name}" event`;
-  return rule.template
+  let template = rule.template
     .replaceAll('$EVENT_NAME', payload.name)
-    .replaceAll('$RULE_NAME', rule.name);
+    .replaceAll('$RULE_NAME', rule.name)
+    .replaceAll('{{rule_name}}', rule.name);
+
+  // Replace all {{xxx}} placeholders with their values
+  const placeholderMatches = template.match(/{{[^}]+}}/g) || [];
+  for (const match of placeholderMatches) {
+    const path = match.slice(2, -2); // Remove {{ and }}
+    const value = pathOr('', path.split('.'), payload);
+
+    if (value) {
+      template = template.replaceAll(match, JSON.stringify(value));
+    }
+  }
+
+  return template;
 }
 
 function notificationTemplateFunnel({
@@ -253,6 +273,7 @@ export async function checkNotificationRulesForEvent(
           createNotification({
             ...notification,
             integrationId: integration.id,
+            notificationRuleId: rule.id,
           }),
         );
 
@@ -261,6 +282,7 @@ export async function checkNotificationRulesForEvent(
             createNotification({
               ...notification,
               integrationId: APP_NOTIFICATION_INTEGRATION_ID,
+              notificationRuleId: rule.id,
             }),
           );
         }
@@ -270,6 +292,7 @@ export async function checkNotificationRulesForEvent(
             createNotification({
               ...notification,
               integrationId: EMAIL_NOTIFICATION_INTEGRATION_ID,
+              notificationRuleId: rule.id,
             }),
           );
         }
@@ -325,13 +348,18 @@ export async function checkNotificationRulesForSessionEnd(
     // Generate notification promises
     return [
       ...rule.integrations.map((integration) =>
-        createNotification({ ...notification, integrationId: integration.id }),
+        createNotification({
+          ...notification,
+          integrationId: integration.id,
+          notificationRuleId: rule.id,
+        }),
       ),
       ...(rule.sendToApp
         ? [
             createNotification({
               ...notification,
               integrationId: APP_NOTIFICATION_INTEGRATION_ID,
+              notificationRuleId: rule.id,
             }),
           ]
         : []),
@@ -340,6 +368,7 @@ export async function checkNotificationRulesForSessionEnd(
             createNotification({
               ...notification,
               integrationId: EMAIL_NOTIFICATION_INTEGRATION_ID,
+              notificationRuleId: rule.id,
             }),
           ]
         : []),

packages/trpc/src/routers/notification.ts

@@ -21,19 +21,19 @@ export const notificationRouter = createTRPCRouter({
       return db.notification.findMany({
         where: {
           projectId: input.projectId,
-          sendToApp: true,
         },
         orderBy: {
           createdAt: 'desc',
         },
         include: {
           integration: {
-            include: {
-              notificationRules: {
             select: {
               name: true,
             },
           },
+          notificationRule: {
+            select: {
+              name: true,
             },
           },
         },