RLSTesterPreview.tsx38 lines · main

1	import { useParams } from 'common'
2	import Image from 'next/image'
3
4	import { InlineLink } from '@/components/ui/InlineLink'
5	import { BASE_PATH } from '@/lib/constants'
6
7	export const RLSTesterPreview = () => {
8	const { ref } = useParams()
9
10	return (
11	<div className="flex flex-col gap-2">
12	<p className="text-foreground-light text-sm mb-4">
13	Verify if your RLS policies have been set up properly by running queries as a specific user.
14	While role impersonation isn't a new feature on the dashboard, we've built a dedicated UI
15	for this which will also show what policies are evaluated for the query.
16	</p>
17	<Image
18	src={`${BASE_PATH}/img/previews/rls-tester-preview.png`}
19	width={1296}
20	height={900}
21	quality={100}
22	alt="rls-tester-preview"
23	className="rounded-sm border"
24	/>
25	<div className="space-y-2 mt-4!">
26	<p className="text-sm">Enabling this preview will:</p>
27	<ul className="list-disc pl-6 text-sm text-foreground-light space-y-1">
28	<li>
29	Show the "Test" button on the{' '}
30	<InlineLink href={`/project/${ref}/auth/policies`}>
31	Authentication Policies page
32	</InlineLink>
33	</li>
34	</ul>
35	</div>
36	</div>
37	)
38	}