konnosDashboard
AddUserDropdown.tsx92 lines · main
1import { PermissionAction } from '@supabase/shared-types/out/constants'
2import { ChevronDown, Mail, UserPlus } from 'lucide-react'
3import { parseAsBoolean, useQueryState } from 'nuqs'
4import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'ui'
5
6import CreateUserModal from './CreateUserModal'
7import InviteUserModal from './InviteUserModal'
8import { DropdownMenuItemTooltip } from '@/components/ui/DropdownMenuItemTooltip'
9import { ShortcutBadge } from '@/components/ui/ShortcutBadge'
10import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
11import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
12import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
13
14export const AddUserDropdown = () => {
15 const showSendInvitation = useIsFeatureEnabled('authentication:show_send_invitation')
16
17 const { can: canInviteUsers } = useAsyncCheckPermissions(
18 PermissionAction.AUTH_EXECUTE,
19 'invite_user'
20 )
21 const { can: canCreateUsers } = useAsyncCheckPermissions(
22 PermissionAction.AUTH_EXECUTE,
23 'create_user'
24 )
25
26 const [inviteVisible, setInviteVisible] = useQueryState(
27 'invite',
28 parseAsBoolean.withDefault(false).withOptions({ history: 'push', clearOnDefault: true })
29 )
30 const [createVisible, setCreateVisible] = useQueryState(
31 'new',
32 parseAsBoolean.withDefault(false).withOptions({ history: 'push', clearOnDefault: true })
33 )
34
35 return (
36 <>
37 <DropdownMenu>
38 <DropdownMenuTrigger asChild>
39 <Button type="primary" iconRight={<ChevronDown size={14} strokeWidth={1.5} />}>
40 Add user
41 </Button>
42 </DropdownMenuTrigger>
43 <DropdownMenuContent side="bottom" align="end" className="w-52">
44 {showSendInvitation && (
45 <DropdownMenuItemTooltip
46 className="gap-x-2"
47 disabled={!canInviteUsers}
48 onClick={() => {
49 if (canInviteUsers) setInviteVisible(true)
50 }}
51 tooltip={{
52 content: { side: 'left', text: 'You need additional permissions to invite users' },
53 }}
54 >
55 <Mail size={14} className="shrink-0" />
56 <p className="flex-1 min-w-0">Send invitation</p>
57 {canInviteUsers && (
58 <ShortcutBadge
59 shortcutId={SHORTCUT_IDS.AUTH_USERS_INVITE_USER}
60 className="shrink-0"
61 />
62 )}
63 </DropdownMenuItemTooltip>
64 )}
65
66 <DropdownMenuItemTooltip
67 className="gap-x-2 pointer-events-auto!"
68 disabled={!canCreateUsers}
69 onClick={() => {
70 if (canCreateUsers) setCreateVisible(true)
71 }}
72 tooltip={{
73 content: { side: 'left', text: 'You need additional permissions to create users' },
74 }}
75 >
76 <UserPlus size={14} className="shrink-0" />
77 <p className="flex-1 min-w-0">Create new user</p>
78 {canCreateUsers && (
79 <ShortcutBadge
80 shortcutId={SHORTCUT_IDS.AUTH_USERS_CREATE_USER}
81 className="shrink-0"
82 />
83 )}
84 </DropdownMenuItemTooltip>
85 </DropdownMenuContent>
86 </DropdownMenu>
87
88 <InviteUserModal visible={inviteVisible} setVisible={setInviteVisible} />
89 <CreateUserModal visible={createVisible} setVisible={setCreateVisible} />
90 </>
91 )
92}