fix(dashboard,api): minor improvement for integrations and notifications

apps/dashboard/src/components/integrations/forms/discord-integration.tsx

@@ -70,6 +70,7 @@ export function DiscordIntegrationForm({
     >
       <InputWithLabel
         label="Name"
+        placeholder="Eg. My personal discord"
         {...form.register('name')}
         error={form.formState.errors.name?.message}
       />

apps/dashboard/src/components/integrations/forms/slack-integration.tsx

@@ -54,6 +54,7 @@ export function SlackIntegrationForm({
     >
       <InputWithLabel
         label="Name"
+        placeholder="Eg. My personal slack"
         {...form.register('name')}
         error={form.formState.errors.name?.message}
       />

apps/dashboard/src/components/integrations/forms/webhook-integration.tsx

@@ -59,6 +59,7 @@ export function WebhookIntegrationForm({
     >
       <InputWithLabel
         label="Name"
+        placeholder="Eg. Zapier webhook"
         {...form.register('name')}
         error={form.formState.errors.name?.message}
       />

apps/dashboard/src/components/integrations/integrations.tsx

@@ -1,4 +1,4 @@
-import type { IIntegrationConfig } from '@openpanel/db';
+import type { IIntegrationConfig } from '@openpanel/validation';
 import { WebhookIcon } from 'lucide-react';
 import {
   IntegrationCardLogo,

apps/dashboard/src/components/notifications/notification-rules.tsx

@@ -4,8 +4,9 @@ import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import { api } from '@/trpc/client';
 import { AnimatePresence, motion } from 'framer-motion';
-import { BoxSelectIcon, PlusIcon } from 'lucide-react';
+import { BoxSelectIcon, PencilRulerIcon, PlusIcon } from 'lucide-react';
 import { useMemo } from 'react';
+import { FullPageEmptyState } from '../full-page-empty-state';
 import {
   IntegrationCard,
   IntegrationCardLogo,
@@ -25,6 +26,28 @@ export function NotificationRules() {
 
   const isLoading = query.isLoading;
 
+  if (!isLoading && data.length === 0) {
+    return (
+      <FullPageEmptyState title="No rules yet" icon={PencilRulerIcon}>
+        <p>
+          You have not created any rules yet. Create a rule to start getting
+          notifications.
+        </p>
+        <Button
+          className="mt-8"
+          variant="outline"
+          onClick={() =>
+            pushModal('AddNotificationRule', {
+              rule: undefined,
+            })
+          }
+        >
+          Add Rule
+        </Button>
+      </FullPageEmptyState>
+    );
+  }
+
   return (
     <div>
       <div className="mb-2">
@@ -48,17 +71,6 @@ export function NotificationRules() {
             <IntegrationCardSkeleton />
           </>
         )}
-        {!isLoading && data.length === 0 && (
-          <IntegrationCard
-            icon={
-              <IntegrationCardLogo className="bg-def-200 text-foreground">
-                <BoxSelectIcon className="size-10" strokeWidth={1} />
-              </IntegrationCardLogo>
-            }
-            name="No integrations yet"
-            description="Integrations allow you to connect your systems to OpenPanel. You can add them in the available integrations section."
-          />
-        )}
         <AnimatePresence mode="popLayout">
           {data.map((item) => {
             return (

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

@@ -7,16 +7,15 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import { GanttChartIcon } from 'lucide-react';
 import type { Dispatch, SetStateAction } from 'react';
 
-import type { Notification } from '@openpanel/db';
+import type { RouterOutputs } from '@/trpc/client';
-
 import { useColumns } from './columns';
 
 type Props =
   | {
-      query: UseQueryResult<Notification[]>;
+      query: UseQueryResult<RouterOutputs['notification']['list'][number][]>;
     }
   | {
-      query: UseQueryResult<Notification[]>;
+      query: UseQueryResult<RouterOutputs['notification']['list'][number][]>;
       cursor: number;
       setCursor: Dispatch<SetStateAction<number>>;
     };
@@ -31,8 +30,8 @@ export const NotificationsTable = ({ query, ...props }: Props) => {
 
   if (data?.length === 0) {
     return (
-      <FullPageEmptyState title="No events here" icon={GanttChartIcon}>
+      <FullPageEmptyState title="No notifications here" icon={GanttChartIcon}>
-        <p>Could not find any events</p>
+        <p>Could not find any notifications</p>
         {'cursor' in props && props.cursor !== 0 && (
           <Button
             className="mt-8"

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

@@ -36,7 +36,7 @@ export const EMAIL_NOTIFICATION_INTEGRATION_ID = 'email';
 export const BASE_INTEGRATIONS: Integration[] = [
   {
     id: APP_NOTIFICATION_INTEGRATION_ID,
-    name: 'App',
+    name: 'Website',
     createdAt: new Date(),
     updatedAt: new Date(),
     config: {
@@ -44,16 +44,16 @@ export const BASE_INTEGRATIONS: Integration[] = [
     },
     organizationId: '',
   },
-  {
+  // {
-    id: EMAIL_NOTIFICATION_INTEGRATION_ID,
+  //   id: EMAIL_NOTIFICATION_INTEGRATION_ID,
-    name: 'Email',
+  //   name: 'Email',
-    createdAt: new Date(),
+  //   createdAt: new Date(),
-    updatedAt: new Date(),
+  //   updatedAt: new Date(),
-    config: {
+  //   config: {
-      type: EMAIL_NOTIFICATION_INTEGRATION_ID,
+  //     type: EMAIL_NOTIFICATION_INTEGRATION_ID,
-    },
+  //   },
-    organizationId: '',
+  //   organizationId: '',
-  },
+  // },
 ];
 
 export const isBaseIntegration = (id: string) =>

packages/trpc/src/routers/integration.ts

@@ -40,6 +40,9 @@ export const integrationRouter = createTRPCRouter({
       const integrations = await db.integration.findMany({
         where: {
           organizationId: input.organizationId,
+          config: {
+            not: {},
+          },
         },
       });