RlsSection.tsx64 lines · main
1import { UseFormReturn } from 'react-hook-form'
2import { Badge, FormControl, FormField, SheetSection, Switch } from 'ui'
3import { Admonition } from 'ui-patterns'
4import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
5
6import { CreateQueueForm } from './CreateQueueSheet.schema'
7import { Markdown } from '@/components/interfaces/Markdown'
8
9export function RlsSection({
10 form,
11 isExposed,
12 projectRef,
13}: {
14 form: UseFormReturn<CreateQueueForm>
15 isExposed: boolean | undefined
16 projectRef: string | undefined
17}) {
18 return (
19 <SheetSection className="flex flex-col gap-y-2">
20 <FormField
21 control={form.control}
22 name="enableRls"
23 render={({ field }) => (
24 <FormItemLayout
25 layout="flex"
26 label={
27 <div className="flex items-center gap-x-2">
28 <p>Enable Row Level Security (RLS)</p>
29 <Badge variant="success">Recommended</Badge>
30 </div>
31 }
32 description="Restrict access to your queue by enabling RLS and writing Postgres policies to control access for each role."
33 >
34 <FormControl>
35 <Switch
36 checked={field.value}
37 onCheckedChange={field.onChange}
38 disabled={field.disabled || isExposed}
39 />
40 </FormControl>
41 </FormItemLayout>
42 )}
43 />
44 {!isExposed ? (
45 <Admonition
46 type="default"
47 title="Row Level Security for queues is only relevant if exposure through PostgREST has been enabled"
48 >
49 <Markdown
50 className="[&>p]:leading-normal!"
51 content={`You may opt to manage your queues via any Briven client libraries or PostgREST
52 endpoints by enabling this in the [queues settings](/project/${projectRef}/integrations/queues/settings).`}
53 />
54 </Admonition>
55 ) : (
56 <Admonition
57 type="default"
58 title="RLS must be enabled as queues are exposed via PostgREST"
59 description="This is to prevent anonymous access to any of your queues"
60 />
61 )}
62 </SheetSection>
63 )
64}