konnosDashboard
ObservabilityMenuItem.tsx111 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { Edit2, MoreVertical, Trash } from 'lucide-react'
3import Link from 'next/link'
4import {
5 Button,
6 DropdownMenu,
7 DropdownMenuContent,
8 DropdownMenuItem,
9 DropdownMenuSeparator,
10 DropdownMenuTrigger,
11 Menu,
12} from 'ui'
13
14import { ContentBase } from '@/data/content/content-query'
15import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
16import { useProfile } from '@/lib/profile'
17import type { Dashboards } from '@/types'
18
19interface ReportMenuItemProps {
20 item: {
21 id?: string
22 name: string
23 description: string
24 key: string
25 url: string
26 hasDropdownActions: boolean
27 report: ContentBase & {
28 type: 'report'
29 content: Dashboards.Content
30 }
31 }
32 pageKey: string
33 onSelectEdit: () => void
34 onSelectDelete: () => void
35}
36
37export const ObservabilityMenuItem = ({
38 item,
39 pageKey,
40 onSelectEdit,
41 onSelectDelete,
42}: ReportMenuItemProps) => {
43 const { profile } = useProfile()
44 const { can: canUpdateCustomReport } = useAsyncCheckPermissions(
45 PermissionAction.UPDATE,
46 'user_content',
47 {
48 resource: {
49 type: 'report',
50 visibility: item.report.visibility,
51 owner_id: item.report.owner_id,
52 },
53 subject: { id: profile?.id },
54 }
55 )
56
57 const menuItem = (
58 <Menu.Item active={item.key === pageKey}>
59 <div className="flex w-full items-center justify-between gap-1">
60 <span className="truncate">{item.name}</span>
61
62 {canUpdateCustomReport && (
63 <DropdownMenu>
64 <DropdownMenuTrigger asChild>
65 <Button
66 type="text"
67 className="px-1 opacity-50 hover:opacity-100"
68 icon={<MoreVertical size={12} strokeWidth={2} />}
69 onClick={(e) => {
70 e.preventDefault()
71 e.stopPropagation()
72 }}
73 />
74 </DropdownMenuTrigger>
75 <DropdownMenuContent align="start" className="w-32 *:gap-x-2">
76 <DropdownMenuItem
77 onClick={(e) => {
78 e.preventDefault()
79 e.stopPropagation()
80 if (!item.id) return
81 onSelectEdit()
82 }}
83 >
84 <Edit2 size={12} />
85 <div>Rename report</div>
86 </DropdownMenuItem>
87 <DropdownMenuSeparator />
88 <DropdownMenuItem
89 onClick={(e) => {
90 e.preventDefault()
91 e.stopPropagation()
92 if (!item.id) return
93 onSelectDelete()
94 }}
95 >
96 <Trash size={12} />
97 <div>Delete report</div>
98 </DropdownMenuItem>
99 </DropdownMenuContent>
100 </DropdownMenu>
101 )}
102 </div>
103 </Menu.Item>
104 )
105
106 return (
107 <Link key={item.key + '-menukey'} href={item.url} className="block">
108 {menuItem}
109 </Link>
110 )
111}