From f450a2871b6ccf9fb15a83e90ab80d8bfc6a4530 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Thu, 3 Oct 2024 20:48:37 +0200
Subject: [PATCH] fix(dashboard,api): minor improvement for integrations and
 notifications

---
 .../forms/discord-integration.tsx             |  1 +
 .../integrations/forms/slack-integration.tsx  |  1 +
 .../forms/webhook-integration.tsx             |  1 +
 .../components/integrations/integrations.tsx  |  2 +-
 .../notifications/notification-rules.tsx      | 36 ++++++++++++-------
 .../components/notifications/table/index.tsx  | 11 +++---
 .../db/src/services/notification.service.ts   | 22 ++++++------
 packages/trpc/src/routers/integration.ts      |  3 ++
 8 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/apps/dashboard/src/components/integrations/forms/discord-integration.tsx b/apps/dashboard/src/components/integrations/forms/discord-integration.tsx
index 27628f04..ecb46ce9 100644
--- a/apps/dashboard/src/components/integrations/forms/discord-integration.tsx
+++ b/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}
       />
diff --git a/apps/dashboard/src/components/integrations/forms/slack-integration.tsx b/apps/dashboard/src/components/integrations/forms/slack-integration.tsx
index aef05480..76f06417 100644
--- a/apps/dashboard/src/components/integrations/forms/slack-integration.tsx
+++ b/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}
       />
diff --git a/apps/dashboard/src/components/integrations/forms/webhook-integration.tsx b/apps/dashboard/src/components/integrations/forms/webhook-integration.tsx
index 6a52d6ce..2941527e 100644
--- a/apps/dashboard/src/components/integrations/forms/webhook-integration.tsx
+++ b/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}
       />
diff --git a/apps/dashboard/src/components/integrations/integrations.tsx b/apps/dashboard/src/components/integrations/integrations.tsx
index 6c005e57..2edd9421 100644
--- a/apps/dashboard/src/components/integrations/integrations.tsx
+++ b/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,
diff --git a/apps/dashboard/src/components/notifications/notification-rules.tsx b/apps/dashboard/src/components/notifications/notification-rules.tsx
index a32884ef..1bb76fcc 100644
--- a/apps/dashboard/src/components/notifications/notification-rules.tsx
+++ b/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 (
diff --git a/apps/dashboard/src/components/notifications/table/index.tsx b/apps/dashboard/src/components/notifications/table/index.tsx
index 6881543d..1c44f8b5 100644
--- a/apps/dashboard/src/components/notifications/table/index.tsx
+++ b/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}>
-        <p>Could not find any events</p>
+      <FullPageEmptyState title="No notifications here" icon={GanttChartIcon}>
+        <p>Could not find any notifications</p>
         {'cursor' in props && props.cursor !== 0 && (
           <Button
             className="mt-8"
diff --git a/packages/db/src/services/notification.service.ts b/packages/db/src/services/notification.service.ts
index 82b9fadc..4cef915c 100644
--- a/packages/db/src/services/notification.service.ts
+++ b/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,
-    name: 'Email',
-    createdAt: new Date(),
-    updatedAt: new Date(),
-    config: {
-      type: EMAIL_NOTIFICATION_INTEGRATION_ID,
-    },
-    organizationId: '',
-  },
+  // {
+  //   id: EMAIL_NOTIFICATION_INTEGRATION_ID,
+  //   name: 'Email',
+  //   createdAt: new Date(),
+  //   updatedAt: new Date(),
+  //   config: {
+  //     type: EMAIL_NOTIFICATION_INTEGRATION_ID,
+  //   },
+  //   organizationId: '',
+  // },
 ];
 
 export const isBaseIntegration = (id: string) =>
diff --git a/packages/trpc/src/routers/integration.ts b/packages/trpc/src/routers/integration.ts
index cee6f285..e2dce666 100644
--- a/packages/trpc/src/routers/integration.ts
+++ b/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: {},
+          },
         },
       });