konnosDashboard
UserSelector.tsx144 lines · main
1import { keepPreviousData } from '@tanstack/react-query'
2import { useDebounce } from '@uidotdev/usehooks'
3import { Check, ChevronsUpDown } from 'lucide-react'
4import { useMemo, useState } from 'react'
5import { toast } from 'sonner'
6import {
7 Button,
8 cn,
9 Command,
10 CommandEmpty,
11 CommandGroup,
12 CommandInput,
13 CommandItem,
14 CommandList,
15 Popover,
16 PopoverContent,
17 PopoverTrigger,
18 ScrollArea,
19} from 'ui'
20import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
21import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
22
23import { User, useUsersInfiniteQuery } from '@/data/auth/users-infinite-query'
24import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
25import { useRoleImpersonationStateSnapshot } from '@/state/role-impersonation-state'
26import { ResponseError } from '@/types'
27
28export const UserSelector = () => {
29 const { data: project } = useSelectedProjectQuery()
30 const state = useRoleImpersonationStateSnapshot()
31
32 const [open, setOpen] = useState(false)
33 const [searchText, setSearchText] = useState('')
34
35 const debouncedSearchText = useDebounce(searchText, 300)
36
37 const { data, error, isSuccess, isPending, isError } = useUsersInfiniteQuery(
38 {
39 projectRef: project?.ref,
40 connectionString: project?.connectionString,
41 keywords: debouncedSearchText.trim().toLocaleLowerCase(),
42 },
43 { placeholderData: keepPreviousData }
44 )
45 const users = useMemo(() => data?.pages.flatMap((page) => page.result) ?? [], [data?.pages])
46
47 const impersonatingUser =
48 state.role?.type === 'postgrest' &&
49 state.role.role === 'authenticated' &&
50 state.role.userType === 'native'
51 ? state.role.user
52 : undefined
53
54 const onSelectUser = async (user: User) => {
55 try {
56 await state.setRole({
57 type: 'postgrest',
58 role: 'authenticated',
59 userType: 'native',
60 user,
61 aal: 'aal1',
62 })
63 } catch (error) {
64 toast.error(`Failed to impersonate user: ${(error as ResponseError).message}`)
65 }
66 }
67
68 return (
69 <FormItemLayout isReactForm={false} label="Select which user to test as">
70 <Popover open={open} onOpenChange={setOpen} modal>
71 <PopoverTrigger asChild>
72 <Button
73 block
74 type="default"
75 role="combobox"
76 size="small"
77 aria-expanded={open}
78 className={cn('justify-between', !impersonatingUser && 'text-foreground-lighter')}
79 iconRight={<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
80 >
81 {impersonatingUser?.email ?? 'Select a user'}
82 </Button>
83 </PopoverTrigger>
84 <PopoverContent sameWidthAsTrigger className="p-0" side="bottom" align="start">
85 <Command shouldFilter={false}>
86 <CommandInput
87 showResetIcon
88 placeholder="Search for a user"
89 className="text-xs"
90 value={searchText}
91 onValueChange={setSearchText}
92 />
93
94 {isError ? (
95 <Admonition showIcon={false} type="warning" className="border-0 rounded-none text-xs">
96 Failed to fetch users: {error.message}
97 </Admonition>
98 ) : (
99 <CommandEmpty>No user found</CommandEmpty>
100 )}
101
102 <CommandList>
103 {isPending && (
104 <div className="p-2">
105 <GenericSkeletonLoader />
106 </div>
107 )}
108
109 {isSuccess && (
110 <CommandGroup>
111 <ScrollArea className={users.length > 7 ? 'h-full md:h-[210px]' : ''}>
112 {users.map((user) => {
113 return (
114 <CommandItem
115 key={user.id}
116 value={user.email}
117 className="cursor-pointer w-full"
118 onSelect={() => {
119 onSelectUser(user)
120 setOpen(false)
121 }}
122 >
123 <div className="w-full flex items-center justify-between">
124 <p className="space-x-3">
125 <span className="text-foreground-light">{user.email}</span>
126 <code className="text-code-inline text-foreground-lighter!">
127 {user.id?.slice(0, 8)}
128 </code>
129 </p>
130 {impersonatingUser?.id === user.id && <Check size={16} />}
131 </div>
132 </CommandItem>
133 )
134 })}
135 </ScrollArea>
136 </CommandGroup>
137 )}
138 </CommandList>
139 </Command>
140 </PopoverContent>
141 </Popover>
142 </FormItemLayout>
143 )
144}