konnosDashboard
BannerIndexAdvisor.tsx46 lines · main
1import { LOCAL_STORAGE_KEYS } from 'common'
2import { useParams } from 'common/hooks'
3import { Lightbulb } from 'lucide-react'
4
5import { BannerCard } from '../BannerCard'
6import { useBannerStack } from '../BannerStackProvider'
7import { EnableIndexAdvisorButton } from '@/components/interfaces/QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton'
8import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
9import { useTrack } from '@/lib/telemetry/track'
10
11export const BannerIndexAdvisor = () => {
12 const track = useTrack()
13 const { ref } = useParams()
14 const { dismissBanner } = useBannerStack()
15 const [, setIsDismissed] = useLocalStorageQuery(
16 LOCAL_STORAGE_KEYS.INDEX_ADVISOR_NOTICE_DISMISSED(ref ?? ''),
17 false
18 )
19
20 return (
21 <BannerCard
22 onDismiss={() => {
23 setIsDismissed(true)
24 dismissBanner('index-advisor-banner')
25 track('index_advisor_banner_dismiss_button_clicked')
26 }}
27 >
28 <div className="flex flex-col gap-y-4">
29 <div className="flex flex-col gap-y-2 items-start">
30 <div className="p-2 rounded-lg bg-warning-300 text-warning">
31 <Lightbulb size={16} />
32 </div>
33 </div>
34 <div className="flex flex-col gap-y-1 mb-2">
35 <p className="text-sm font-medium">Enable Index Advisor</p>
36 <p className="text-xs text-foreground-lighter text-balance">
37 Recommends indexes to improve query performance.
38 </p>
39 </div>
40 <div className="flex gap-2">
41 <EnableIndexAdvisorButton />
42 </div>
43 </div>
44 </BannerCard>
45 )
46}