Merge pull request #198 from duyet/chore/new-features

feat: display icon on dropdown menu
duyet · Apr 1, 2024 · bc2659e · bc2659e
2 parents 685ee4a + 8af6b3f
commit bc2659e
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 12 deletions.
diff --git a/components/menu/count-badge.tsx b/components/menu/count-badge.tsx
@@ -1,14 +1,16 @@
-import { Badge } from '@/components/ui/badge'
+import { Badge, type BadgeProps } from '@/components/ui/badge'
 import { fetchData } from '@/lib/clickhouse'
 
-interface CountBadgeProps {
+export interface CountBadgeProps {
   sql?: string
   className?: string
+  variant?: BadgeProps['variant']
 }
 
 export async function CountBadge({
   sql,
   className,
+  variant = 'outline',
 }: CountBadgeProps): Promise<JSX.Element | null> {
   if (!sql) return null
 
@@ -31,7 +33,7 @@ export async function CountBadge({
   if (count == 0) return null
 
   return (
-    <Badge className={className} variant="outline">
+    <Badge className={className} variant={variant}>
       {count}
     </Badge>
   )

diff --git a/components/menu/menu-dropdown-style.tsx b/components/menu/menu-dropdown-style.tsx
@@ -52,15 +52,21 @@ function MenuItem({ item }: { item: MenuItem }) {
 function SingleItem({ item }: { item: MenuItem }) {
   return (
     <DropdownMenuItem>
-      <Link href={item.href}>{item.title}</Link>
+      <Link href={item.href} className="flex flex-row items-center gap-2">
+        {item.icon && <item.icon className="size-3" />}
+        {item.title}
+      </Link>
     </DropdownMenuItem>
   )
 }
 
 function HasChildItems({ item }: { item: MenuItem }) {
   return (
     <DropdownMenuSub>
-      <DropdownMenuSubTrigger>{item.title}</DropdownMenuSubTrigger>
+      <DropdownMenuSubTrigger className="flex flex-row items-center gap-2">
+        {item.icon && <item.icon className="size-3" />}
+        {item.title}
+      </DropdownMenuSubTrigger>
       <DropdownMenuPortal>
         <DropdownMenuSubContent>
           {item.items?.map((childItem) => (

diff --git a/components/menu/menu-navigation-style.tsx b/components/menu/menu-navigation-style.tsx
@@ -58,7 +58,7 @@ function SingleItem({ item }: { item: MenuItem }) {
             {item.title}
             {item.countSql ? (
               <ServerComponentLazy fallback={''}>
-                <CountBadge sql={item.countSql} />
+                <CountBadge sql={item.countSql} variant={item.countVariant} />
               </ServerComponentLazy>
             ) : null}
           </span>
@@ -77,7 +77,7 @@ function HasChildItems({ item }: { item: MenuItem }) {
           {item.title}
           {item.countSql ? (
             <ServerComponentLazy fallback={''}>
-              <CountBadge sql={item.countSql} />
+              <CountBadge sql={item.countSql} variant={item.countVariant} />
             </ServerComponentLazy>
           ) : null}
         </div>
@@ -93,7 +93,10 @@ function HasChildItems({ item }: { item: MenuItem }) {
                   {childItem.title}
                   {childItem.countSql ? (
                     <ServerComponentLazy fallback={''}>
-                      <CountBadge sql={childItem.countSql} />
+                      <CountBadge
+                        sql={childItem.countSql}
+                        variant={item.countVariant}
+                      />
                     </ServerComponentLazy>
                   ) : null}
                 </span>

diff --git a/components/menu/types.ts b/components/menu/types.ts
@@ -1,3 +1,4 @@
+import type { CountBadgeProps } from '@/components/menu/count-badge'
 import type { IconProps } from '@radix-ui/react-icons/dist/types'
 import type { LucideProps } from 'lucide-react'
 
@@ -12,6 +13,7 @@ export interface MenuItem {
   href: string
   description?: string
   countSql?: string
+  countVariant?: CountBadgeProps['variant']
   items?: MenuItem[]
   icon?: typeof RadixIcon
 }
diff --git a/lib/clickhouse.ts b/lib/clickhouse.ts
@@ -35,10 +35,10 @@ export const QUERY_COMMENT = '/* { "client": "clickhouse-monitoring" } */ '
 
 export const fetchData = async <
   T extends
-  | unknown[]
-  | object[] // format = '*EachRow'
-  | Record<string, unknown> // format = 'JSONObjectEachRow' | 'JSONColumns
-  | { length: number; rows: number; statistics: Record<string, unknown> }, // format = 'JSON' | 'JSONStrings' | 'JSONCompact' | 'JSONColumnsWithMetadata' | ...
+    | unknown[]
+    | object[] // format = '*EachRow'
+    | Record<string, unknown> // format = 'JSONObjectEachRow' | 'JSONColumns
+    | { length: number; rows: number; statistics: Record<string, unknown> }, // format = 'JSON' | 'JSONStrings' | 'JSONCompact' | 'JSONColumnsWithMetadata' | ...
 >({
   query,
   query_params,

diff --git a/menu.ts b/menu.ts
@@ -77,6 +77,7 @@ export const menuItemsConfig: MenuItem[] = [
         href: '/readonly-tables',
         description: 'Readonly tables and their replicas',
         countSql: `SELECT COUNT() FROM system.replicas WHERE is_readonly = 1`,
+        countVariant: 'destructive',
         icon: ExclamationTriangleIcon,
       },
       {