mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
import { ChevronDownIcon, MailIcon, UserPlusIcon } from 'lucide-react'
|
|
import { parseAsBoolean, useQueryState } from 'nuqs'
|
|
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'ui'
|
|
|
|
import CreateUserModal from './CreateUserModal'
|
|
import InviteUserModal from './InviteUserModal'
|
|
import { DropdownMenuItemTooltip } from '@/components/ui/DropdownMenuItemTooltip'
|
|
import { ShortcutBadge } from '@/components/ui/ShortcutBadge'
|
|
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
|
|
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
|
|
export const AddUserDropdown = () => {
|
|
const showSendInvitation = useIsFeatureEnabled('authentication:show_send_invitation')
|
|
|
|
const { can: canInviteUsers } = useAsyncCheckPermissions(
|
|
PermissionAction.AUTH_EXECUTE,
|
|
'invite_user'
|
|
)
|
|
const { can: canCreateUsers } = useAsyncCheckPermissions(
|
|
PermissionAction.AUTH_EXECUTE,
|
|
'create_user'
|
|
)
|
|
|
|
const [inviteVisible, setInviteVisible] = useQueryState(
|
|
'invite',
|
|
parseAsBoolean.withDefault(false).withOptions({ history: 'push', clearOnDefault: true })
|
|
)
|
|
const [createVisible, setCreateVisible] = useQueryState(
|
|
'new',
|
|
parseAsBoolean.withDefault(false).withOptions({ history: 'push', clearOnDefault: true })
|
|
)
|
|
|
|
return (
|
|
<>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="primary" iconRight={<ChevronDownIcon size={14} strokeWidth={1.5} />}>
|
|
Add user
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent side="bottom" align="end" className="w-52">
|
|
{showSendInvitation && (
|
|
<DropdownMenuItemTooltip
|
|
className="gap-x-2"
|
|
disabled={!canInviteUsers}
|
|
onClick={() => {
|
|
if (canInviteUsers) setInviteVisible(true)
|
|
}}
|
|
tooltip={{
|
|
content: { side: 'left', text: 'You need additional permissions to invite users' },
|
|
}}
|
|
>
|
|
<MailIcon size={14} className="shrink-0" />
|
|
<p className="flex-1 min-w-0">Send invitation</p>
|
|
{canInviteUsers && (
|
|
<ShortcutBadge
|
|
shortcutId={SHORTCUT_IDS.AUTH_USERS_INVITE_USER}
|
|
className="shrink-0"
|
|
/>
|
|
)}
|
|
</DropdownMenuItemTooltip>
|
|
)}
|
|
|
|
<DropdownMenuItemTooltip
|
|
className="gap-x-2 pointer-events-auto!"
|
|
disabled={!canCreateUsers}
|
|
onClick={() => {
|
|
if (canCreateUsers) setCreateVisible(true)
|
|
}}
|
|
tooltip={{
|
|
content: { side: 'left', text: 'You need additional permissions to create users' },
|
|
}}
|
|
>
|
|
<UserPlusIcon size={14} className="shrink-0" />
|
|
<p className="flex-1 min-w-0">Create new user</p>
|
|
{canCreateUsers && (
|
|
<ShortcutBadge
|
|
shortcutId={SHORTCUT_IDS.AUTH_USERS_CREATE_USER}
|
|
className="shrink-0"
|
|
/>
|
|
)}
|
|
</DropdownMenuItemTooltip>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<InviteUserModal visible={inviteVisible} setVisible={setInviteVisible} />
|
|
<CreateUserModal visible={createVisible} setVisible={setCreateVisible} />
|
|
</>
|
|
)
|
|
}
|