From a567834e459838af6b40c88b086e2f71a5d52fce Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 13 Jan 2024 18:38:41 +0800
Subject: [PATCH] perf: add notification picker empty state to guide user to
 create notification

---
 .../notification/NotificationPicker.tsx       | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/client/components/notification/NotificationPicker.tsx b/src/client/components/notification/NotificationPicker.tsx
index d5bec86..0011ccc 100644
--- a/src/client/components/notification/NotificationPicker.tsx
+++ b/src/client/components/notification/NotificationPicker.tsx
@@ -1,20 +1,40 @@
-import { Select, SelectProps } from 'antd';
+import { Button, Empty, Select, SelectProps } from 'antd';
 import React from 'react';
 import { trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { ColorTag } from '../ColorTag';
+import { useNavigate } from 'react-router';
+import { PlusOutlined } from '@ant-design/icons';
 
 interface NotificationPickerProps extends SelectProps<string> {}
 export const NotificationPicker: React.FC<NotificationPickerProps> = React.memo(
   (props) => {
     const workspaceId = useCurrentWorkspaceId();
+    const navigate = useNavigate();
     const { data: allNotification = [] } = trpc.notification.all.useQuery({
       workspaceId,
     });
 
     return (
-      <Select {...props}>
-        {allNotification.map((m) => (
+      <Select
+        notFoundContent={
+          <Empty
+            description={
+              <div className="py-2">
+                <div className="mb-1">Not found any notification</div>
+                <Button
+                  icon={<PlusOutlined />}
+                  onClick={() => navigate('/settings/notifications')}
+                >
+                  Create Now
+                </Button>
+              </div>
+            }
+          />
+        }
+        {...props}
+      >
+        {allNotification.map((m: any) => (
           <Select.Option key={m.id} value={m.id}>
             <ColorTag label={m.type} />
             {m.name}