Files
supabase/apps/studio/components/interfaces/TableGridEditor/IndexAdvisorPopover.tsx
Gildas Garcia d0fd4478c0 chore: migrate Popover usages to Shadcn components (#45980)
## Problem

We have multiple Popover components

## Solution

- [x] migrate Popover usages to Shadcn components
- Migrated JSON and text editor in the `TableEditor` (inline row
edition)
  - Migrated the template popover in the logs explorer templates page
- [x] remove `_Shadcn_` suffix from Popover components (renaming +
prettier)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Refactor**
* Unified popover implementation across the app and design system;
dropdowns, calendars, menus and tooltips now use a consistent popover
API with no visual or interaction changes.

* **Chores**
* Minor prop typing update for the logs date-picker to align with the
consolidated popover content type.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45980)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 15:20:28 +02:00

29 lines
1.0 KiB
TypeScript

import { Lightbulb } from 'lucide-react'
import { Button, Popover, PopoverContent, PopoverTrigger } from 'ui'
import { EnableIndexAdvisorButton } from '../QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton'
export const IndexAdvisorPopover = () => {
return (
<Popover modal={false}>
<PopoverTrigger asChild>
<Button type="default" icon={<Lightbulb strokeWidth={1.5} />}>
Index Advisor
</Button>
</PopoverTrigger>
<PopoverContent className="w-80 text-sm" align="end">
<h4 className="flex items-center gap-2">
<Lightbulb size={16} /> Index Advisor
</h4>
<div className="grid gap-2 mt-4 text-foreground-light text-xs">
<p>Index Advisor recommends indexes to improve query performance on this table.</p>
<p>Enable Index Advisor to get recommendations based on your actual query patterns.</p>
<div className="mt-2">
<EnableIndexAdvisorButton />
</div>
</div>
</PopoverContent>
</Popover>
)
}