RoleSelector.tsx38 lines · main

1	import { RadioGroupStacked, RadioGroupStackedItem } from 'ui'
2	import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
3
4	import { useRoleImpersonationStateSnapshot } from '@/state/role-impersonation-state'
5
6	interface RoleSelectorProps {
7	onSelectRole: (value: 'anon' | 'authenticated') => void
8	}
9
10	export const RoleSelector = ({ onSelectRole }: RoleSelectorProps) => {
11	const { role, setRole } = useRoleImpersonationStateSnapshot()
12
13	return (
14	<FormItemLayout isReactForm={false} label="Test as">
15	<RadioGroupStacked defaultValue={role?.role ?? 'anon'}>
16	<RadioGroupStackedItem
17	value="anon"
18	id="anon"
19	label="Anonymous user"
20	description="Not logged in"
21	onClick={() => {
22	onSelectRole('anon')
23	setRole({ type: 'postgrest', role: 'anon' })
24	}}
25	/>
26	<RadioGroupStackedItem
27	value="authenticated"
28	id="authenticated"
29	label="Authenticated user"
30	description="A specific logged in user"
31	onClick={() => {
32	onSelectRole('authenticated')
33	}}
34	/>
35	</RadioGroupStacked>
36	</FormItemLayout>
37	)
38	}