IndexAdvisorPopover.tsx28 lines · main

1	import { Lightbulb } from 'lucide-react'
2	import { Button, Popover, PopoverContent, PopoverTrigger } from 'ui'
3
4	import { EnableIndexAdvisorButton } from '../QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton'
5
6	export const IndexAdvisorPopover = () => {
7	return (
8	<Popover modal={false}>
9	<PopoverTrigger asChild>
10	<Button type="default" icon={<Lightbulb strokeWidth={1.5} />}>
11	Index Advisor
12	</Button>
13	</PopoverTrigger>
14	<PopoverContent className="w-80 text-sm" align="end">
15	<h4 className="flex items-center gap-2">
16	<Lightbulb size={16} /> Index Advisor
17	</h4>
18	<div className="grid gap-2 mt-4 text-foreground-light text-xs">
19	<p>Index Advisor recommends indexes to improve query performance on this table.</p>
20	<p>Enable Index Advisor to get recommendations based on your actual query patterns.</p>
21	<div className="mt-2">
22	<EnableIndexAdvisorButton />
23	</div>
24	</div>
25	</PopoverContent>
26	</Popover>
27	)
28	}