mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 11:55:05 +03:00
Ivan VasilovandJordi Enric
56de26fe22
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com>
79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
import { ChevronDown, Mail, UserPlus } 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 { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
|
|
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
|
|
|
|
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 type="primary" iconRight={<ChevronDown size={14} strokeWidth={1.5} />}>
|
|
Add user
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent side="bottom" align="end" className="w-40">
|
|
{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' },
|
|
}}
|
|
>
|
|
<Mail size={14} />
|
|
<p>Send invitation</p>
|
|
</DropdownMenuItemTooltip>
|
|
)}
|
|
|
|
<DropdownMenuItemTooltip
|
|
className="space-x-2 pointer-events-auto!"
|
|
disabled={!canCreateUsers}
|
|
onClick={() => {
|
|
if (canCreateUsers) setCreateVisible(true)
|
|
}}
|
|
tooltip={{
|
|
content: { side: 'left', text: 'You need additional permissions to create users' },
|
|
}}
|
|
>
|
|
<UserPlus size={14} />
|
|
<p>Create new user</p>
|
|
</DropdownMenuItemTooltip>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<InviteUserModal visible={inviteVisible} setVisible={setInviteVisible} />
|
|
<CreateUserModal visible={createVisible} setVisible={setCreateVisible} />
|
|
</>
|
|
)
|
|
}
|