From 604e6ef454410f26fcbe4c52279ca6339cf67c33 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 20 Dec 2023 13:46:48 +0000
Subject: [PATCH] feat: add dashboard add none placeholder and arrow rotate
 animation

---
 src/client/components/dashboard/AddButton.tsx | 189 +++++++++++-------
 1 file changed, 112 insertions(+), 77 deletions(-)

diff --git a/src/client/components/dashboard/AddButton.tsx b/src/client/components/dashboard/AddButton.tsx
index f0efbca..e3e5c94 100644
--- a/src/client/components/dashboard/AddButton.tsx
+++ b/src/client/components/dashboard/AddButton.tsx
@@ -1,9 +1,10 @@
 import { Button, Dropdown, MenuProps, Space } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
 import { trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
 import { useDashboardStore } from '../../store/dashboard';
 import { DownOutlined } from '@ant-design/icons';
+import clsx from 'clsx';
 
 export const DashboardItemAddButton: React.FC = React.memo(() => {
   const workspaceId = useCurrentWorkspaceId();
@@ -16,6 +17,7 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
       workspaceId,
     });
   const { addItem } = useDashboardStore();
+  const [open, setOpen] = useState(false);
 
   const isLoading = isWebsiteLoading || isMonitorLoading;
 
@@ -24,95 +26,128 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
       {
         key: 'website',
         label: 'Website',
-        children: websites.map((website) => ({
-          key: `website#${website.id}`,
-          label: website.name,
-          children: [
-            {
-              key: `website#${website.id}#overview`,
-              label: 'Overview',
-              onClick: () => {
-                addItem(
-                  'websiteOverview',
-                  website.id,
-                  `${website.name}'s Overview`
-                );
-              },
-            },
-            {
-              key: `website#${website.id}#events`,
-              label: 'Events',
-              onClick: () => {
-                addItem(
-                  'websiteEvents',
-                  website.id,
-                  `${website.name}'s Events`
-                );
-              },
-            },
-          ],
-        })),
+        children:
+          websites.length > 0
+            ? websites.map((website) => ({
+                key: `website#${website.id}`,
+                label: website.name,
+                children: [
+                  {
+                    key: `website#${website.id}#overview`,
+                    label: 'Overview',
+                    onClick: () => {
+                      addItem(
+                        'websiteOverview',
+                        website.id,
+                        `${website.name}'s Overview`
+                      );
+                    },
+                  },
+                  {
+                    key: `website#${website.id}#events`,
+                    label: 'Events',
+                    onClick: () => {
+                      addItem(
+                        'websiteEvents',
+                        website.id,
+                        `${website.name}'s Events`
+                      );
+                    },
+                  },
+                ],
+              }))
+            : [
+                {
+                  key: `website#none`,
+                  label: '(None)',
+                  disabled: true,
+                },
+              ],
       },
       {
         key: 'monitor',
         label: 'Monitor',
-        children: monitors.map((monitor) => ({
-          key: `monitor#${monitor.id}`,
-          label: monitor.name,
-          children: [
-            {
-              key: `monitor#${monitor.id}#healthBar`,
-              label: 'Health Bar',
-              onClick: () => {
-                addItem(
-                  'monitorHealthBar',
-                  monitor.id,
-                  `${monitor.name}'s Health`
-                );
-              },
-            },
-            {
-              key: `monitor#${monitor.id}#metrics`,
-              label: 'Metrics',
-              onClick: () => {
-                addItem(
-                  'monitorMetrics',
-                  monitor.id,
-                  `${monitor.name}'s Metrics`
-                );
-              },
-            },
-            {
-              key: `monitor#${monitor.id}#chart`,
-              label: 'Chart',
-              onClick: () => {
-                addItem('monitorChart', monitor.id, `${monitor.name}'s Chart`);
-              },
-            },
-            {
-              key: `monitor#${monitor.id}#events`,
-              label: 'Events',
-              onClick: () => {
-                addItem(
-                  'monitorEvents',
-                  monitor.id,
-                  `${monitor.name}'s Events`
-                );
-              },
-            },
-          ],
-        })),
+        children:
+          monitors.length > 0
+            ? monitors.map((monitor) => ({
+                key: `monitor#${monitor.id}`,
+                label: monitor.name,
+                children: [
+                  {
+                    key: `monitor#${monitor.id}#healthBar`,
+                    label: 'Health Bar',
+                    onClick: () => {
+                      addItem(
+                        'monitorHealthBar',
+                        monitor.id,
+                        `${monitor.name}'s Health`
+                      );
+                    },
+                  },
+                  {
+                    key: `monitor#${monitor.id}#metrics`,
+                    label: 'Metrics',
+                    onClick: () => {
+                      addItem(
+                        'monitorMetrics',
+                        monitor.id,
+                        `${monitor.name}'s Metrics`
+                      );
+                    },
+                  },
+                  {
+                    key: `monitor#${monitor.id}#chart`,
+                    label: 'Chart',
+                    onClick: () => {
+                      addItem(
+                        'monitorChart',
+                        monitor.id,
+                        `${monitor.name}'s Chart`
+                      );
+                    },
+                  },
+                  {
+                    key: `monitor#${monitor.id}#events`,
+                    label: 'Events',
+                    onClick: () => {
+                      addItem(
+                        'monitorEvents',
+                        monitor.id,
+                        `${monitor.name}'s Events`
+                      );
+                    },
+                  },
+                ],
+              }))
+            : [
+                {
+                  key: `monitor#none`,
+                  label: '(None)',
+                  disabled: true,
+                },
+              ],
       },
     ],
   };
 
   return (
     <div>
-      <Dropdown trigger={['click']} disabled={isLoading} menu={menu}>
+      <Dropdown
+        trigger={['click']}
+        disabled={isLoading}
+        menu={menu}
+        open={open}
+        onOpenChange={setOpen}
+      >
         <Button type="primary" size="large" className="w-32">
           <Space>
             <span>Add</span>
-            <DownOutlined />
+            <DownOutlined
+              className={clsx(
+                'transition-transform scale-y-75',
+                open && 'rotate-180'
+              )}
+            />
           </Space>
         </Button>
       </Dropdown>