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>
-      <PageTabs className="mb-4">
-        <PageTabsLink href="?tab=available" isActive={tab === 'available'}>
-          Available
-        </PageTabsLink>
-        <PageTabsLink href="?tab=installed" isActive={tab === 'installed'}>
-          Installed
-        </PageTabsLink>
-      </PageTabs>
-      {tab === 'installed' && <ActiveIntegrations />}
-      {tab === 'available' && <AllIntegrations />}
+    <Padding className="col gap-8">
+      <div className="col gap-4">
+        <h2 className="text-3xl font-semibold">Your integrations</h2>
+        <ActiveIntegrations />
+      </div>
+
+      <div className="col gap-4">
+        <h2 className="text-3xl font-semibold">Available integrations</h2>
+        <AllIntegrations />
+      </div>
     </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>
+          <div>{isToday(date) ? formatTime(date) : formatDateTime(date)}</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')}