konnosDashboard
SecurityDefinerViewPopover.tsx56 lines · main
1import { useParams } from 'common'
2import { Unlock } from 'lucide-react'
3import Link from 'next/link'
4import { Button, Popover, PopoverContent, PopoverTrigger } from 'ui'
5
6import { type Lint } from '@/data/lint/lint-query'
7
8export const SecurityDefinerViewPopover = ({
9 lint,
10 onAutofix,
11}: {
12 lint: Lint | null
13 onAutofix?: () => void
14}) => {
15 const { ref } = useParams()
16
17 return (
18 <Popover modal={false}>
19 <PopoverTrigger asChild>
20 <Button type="warning" icon={<Unlock strokeWidth={1.5} />}>
21 Security Definer view
22 </Button>
23 </PopoverTrigger>
24 <PopoverContent className="min-w-[395px] text-sm" align="end">
25 <h4 className="flex items-center gap-2">
26 <Unlock size={14} /> Secure your view
27 </h4>
28 <div className="grid gap-2 mt-2 text-foreground-light text-sm">
29 <p>
30 This view is defined with the Security Definer property, giving it permissions of the
31 view's creator (Postgres), rather than the permissions of the querying user.
32 </p>
33
34 <p>Since this view is in the public schema, it is accessible via your project's APIs.</p>
35
36 <div className="mt-2 flex items-center gap-2">
37 {!!onAutofix && (
38 <Button type="secondary" onClick={onAutofix}>
39 Autofix
40 </Button>
41 )}
42 <Button type="default" asChild>
43 <Link
44 target="_blank"
45 rel="noopener noreferrer"
46 href={`/project/${ref}/advisors/security?preset=${lint?.level}&id=${lint?.cache_key}`}
47 >
48 Learn more
49 </Link>
50 </Button>
51 </div>
52 </div>
53 </PopoverContent>
54 </Popover>
55 )
56}